/*
 * ============================================================
 * SIGOS V37 · R8G COMPLETE
 * Lenguaje visual basado en REI maestro.
 * ============================================================
 */

.r8gAll{
  --r8g-line:#d9e4ef;
  --r8g-line-soft:#e8eef5;
  --r8g-ink:#0c3159;
  --r8g-muted:#6d8197;
  --r8g-blue:#0873c8;
  --r8g-blue-dark:#063a6b;
  --r8g-green:#158247;
  --r8g-green-soft:#e4f6eb;
  --r8g-shadow:0 9px 24px rgba(17,50,82,.045);

  width:100%;
  min-width:0;
  color:var(--r8g-ink);
}


.r8gAllSectionTitle{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:0 0 10px;
}

.r8gAllSectionTitle strong{
  font-size:16px;
  font-weight:900;
}

.r8gAllSectionTitle span{
  color:var(--r8g-muted);
  font-size:10px;
}


/* ============================================================
   TOOLBAR
   ============================================================ */

.r8gAllToolbar{
  display:flex;
  align-items:stretch;
  gap:7px;
  margin-bottom:9px;
}

.r8gAllSearchShell{
  display:flex;
  flex:1 1 auto;
  min-width:0;
  gap:5px;
  padding:5px;
  border:1px solid var(--r8g-line);
  border-radius:15px;
  background:#fff;
  box-shadow:var(--r8g-shadow);
}

.r8gAllSearch{
  flex:1 1 auto;
  min-width:0;
  height:42px;
  padding:0 12px;
  border:1px solid #dde7f0;
  border-radius:10px;
  outline:0;
  background:#fff;
  color:#253f5d;
  font:inherit;
  font-size:11px;
}

.r8gAllButton{
  flex:0 0 auto;
  min-height:52px;
  padding:0 17px;
  border:1px solid #d4e1ed;
  border-radius:13px;
  background:#fff;
  color:#083965;
  font-size:10px;
  font-weight:850;
  white-space:nowrap;
  box-shadow:var(--r8g-shadow);
}

.r8gAllSearchShell
.r8gAllButton{
  min-height:42px;
}

.r8gAllButton.primary{
  border-color:#0868b9;
  background:linear-gradient(
    135deg,
    #06437a,
    #0876cf
  );
  color:#fff;
}

.r8gAllButton.soft{
  background:#eaf5fd;
  color:#0765a9;
}


/* ============================================================
   FILTROS
   ============================================================ */

.r8gAllFilterViewport{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.r8gAllFilterViewport::-webkit-scrollbar{
  display:none;
}

.r8gAllFilters{
  display:flex;
  align-items:center;
  width:max-content;
  min-width:100%;
  gap:5px;
}

.r8gAllFilterLabel{
  flex:0 0 auto;
  color:#7a8da0;
  font-size:8px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.r8gAllChip{
  flex:0 0 auto;
  min-height:31px;
  padding:0 10px;
  border:1px solid var(--r8g-line);
  border-radius:999px;
  background:#fff;
  color:#60758a;
  font-size:8px;
  font-weight:850;
  white-space:nowrap;
}


/* ============================================================
   KPI
   ============================================================ */

.r8gAllKpiViewport{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  margin-top:9px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.r8gAllKpiViewport::-webkit-scrollbar{
  display:none;
}

.r8gAllKpis{
  display:grid;
  grid-template-columns:
    repeat(
      6,
      minmax(165px,1fr)
    );
  min-width:1020px;
  gap:8px;
}

.r8gAllKpi{
  min-height:62px;
  padding:10px 12px;
  border:1px solid var(--r8g-line);
  border-radius:15px;
  background:#fff;
  box-shadow:var(--r8g-shadow);
}

.r8gAllKpiLabel{
  display:block;
  margin-bottom:6px;
  color:#6b8095;
  font-size:8px;
  font-weight:850;
}

.r8gAllKpiValue{
  display:block;
  color:#082f59;
  font-size:19px;
  line-height:1;
  font-weight:900;
}


/* ============================================================
   TABLE
   ============================================================ */

.r8gAllTableViewport{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  margin-top:9px;
  border:1px solid var(--r8g-line);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--r8g-shadow);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.r8gAllTableViewport::-webkit-scrollbar{
  display:none;
}

.r8gAllTable{
  width:100%;
  min-width:max-content;
  border-collapse:separate;
  border-spacing:0;
  font-size:10px;
}

.r8gAllTable th{
  min-width:130px;
  padding:9px 11px;
  border-bottom:1px solid var(--r8g-line);
  background:#f7f9fc;
  color:#697d91;
  font-size:8px;
  font-weight:850;
  text-align:left;
  white-space:nowrap;
}

.r8gAllTable td{
  min-width:130px;
  padding:13px 11px;
  border-bottom:1px solid var(--r8g-line-soft);
  background:#fff;
  color:#173c62;
  vertical-align:middle;
}

.r8gAllTable tbody tr:last-child td{
  border-bottom:0;
}

.r8gAllSticky{
  position:sticky;
  left:0;
  z-index:4;
  min-width:120px !important;
  background:#fff !important;
  background-color:#fff !important;
  opacity:1 !important;
  box-shadow:
    8px 0 12px -13px
    rgba(23,49,75,.8);
}

.r8gAllTable thead
.r8gAllSticky{
  z-index:5;
  background:#f7f9fc !important;
}

.r8gAllCellText{
  display:block;
  color:#274c70;
  font-size:10px;
  font-weight:700;
}

.r8gAllBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:25px;
  padding:4px 9px;
  border-radius:999px;
  font-size:8px;
  font-weight:900;
  white-space:nowrap;
}

.r8gAllBadge.good{
  background:#e4f6eb;
  color:#148344;
}

.r8gAllCompound{
  display:grid;
  gap:6px;
}

.r8gAllCompoundLine{
  display:grid;
  grid-template-columns:42px 1fr;
  align-items:center;
  gap:6px;
}

.r8gAllCompoundLine span{
  color:#8092a4;
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
}

.r8gAllCompoundLine strong{
  color:#24486d;
  font-size:10px;
  font-weight:850;
}


/* ============================================================
   STATES
   ============================================================ */

.r8gAllEmpty,
.r8gAllLoading,
.r8gAllError{
  display:grid;
  gap:4px;
  margin-top:9px;
  padding:16px;
  border:1px solid var(--r8g-line);
  border-radius:14px;
  background:#fff;
  color:#6d8197;
  font-size:10px;
}

.r8gAllEmpty strong{
  color:#173c62;
  font-size:11px;
}

.r8gAllError{
  border-color:#efd1d4;
  background:#fff6f6;
  color:#99414a;
}

.r8gAllMobileHint{
  display:none;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width:640px){

  .r8gAllSectionTitle{
    margin-bottom:6px;
  }

  .r8gAllSectionTitle strong{
    font-size:12px;
  }

  .r8gAllSectionTitle span{
    display:none;
  }


  .r8gAllToolbar{
    display:grid;
    grid-template-columns:
      minmax(0,1fr)
      66px
      84px;
    gap:4px;
    margin-bottom:5px;
  }

  .r8gAllSearchShell{
    gap:4px;
    padding:4px;
    border-radius:10px;
  }

  .r8gAllSearch{
    height:34px;
    padding:0 8px;
    border-radius:8px;
    font-size:8px;
  }

  .r8gAllSearchShell
  .r8gAllButton{
    flex:0 0 56px;
    min-width:56px;
    min-height:34px;
    padding:0 6px;
    border-radius:8px;
    font-size:7px;
  }

  .r8gAllToolbar >
  .r8gAllButton{
    width:100%;
    min-width:0;
    min-height:42px;
    padding:0 4px;
    border-radius:9px;
    font-size:6.3px;
    white-space:normal;
  }


  .r8gAllFilterViewport{
    scroll-snap-type:
      x
      proximity;
  }

  .r8gAllFilters{
    gap:4px;
    padding-right:7px;
  }

  .r8gAllFilterLabel{
    font-size:6px;
  }

  .r8gAllChip{
    min-height:26px;
    padding:0 7px;
    font-size:6.2px;
    scroll-snap-align:start;
  }


  /* 3 KPI completas por pantalla */

  .r8gAllKpiViewport{
    margin-top:5px;
    scroll-snap-type:
      x
      mandatory;
  }

  .r8gAllKpis{
    display:grid;
    width:200%;
    min-width:200%;
    grid-template-columns:
      repeat(
        6,
        minmax(0,1fr)
      );
    gap:4px;
  }

  .r8gAllKpi{
    min-width:0;
    min-height:49px;
    padding:6px 7px;
    border-radius:10px;
  }

  .r8gAllKpi:nth-child(1),
  .r8gAllKpi:nth-child(4){
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }

  .r8gAllKpiLabel{
    min-height:14px;
    margin-bottom:3px;
    font-size:6px;
    line-height:1.08;
  }

  .r8gAllKpiValue{
    font-size:13px;
  }


  /* Misma tabla desktop, compacta + horizontal */

  .r8gAllTableViewport{
    margin-top:6px;
    border-radius:11px;
    scroll-snap-type:
      x
      proximity;
  }

  .r8gAllTable{
    width:max-content;
    min-width:980px;
    table-layout:auto;
  }

  .r8gAllTable th{
    min-width:115px;
    padding:7px 8px;
    font-size:7px;
  }

  .r8gAllTable td{
    min-width:115px;
    padding:9px 8px;
  }

  .r8gAllSticky{
    min-width:92px !important;
    width:92px !important;
    max-width:92px !important;
    z-index:20;
    background:#fff !important;
    background-color:#fff !important;
  }

  .r8gAllTable thead
  .r8gAllSticky{
    z-index:21;
    background:#f7f9fc !important;
  }

  .r8gAllCellText{
    font-size:8px;
    line-height:1.15;
  }

  .r8gAllBadge{
    min-height:21px;
    padding:3px 6px;
    font-size:6px;
  }

  .r8gAllCompound{
    gap:5px;
  }

  .r8gAllCompoundLine{
    grid-template-columns:34px 1fr;
    gap:4px;
  }

  .r8gAllCompoundLine span{
    font-size:5.5px;
  }

  .r8gAllCompoundLine strong{
    font-size:7.5px;
  }

  .r8gAllMobileHint{
    display:flex;
    justify-content:flex-end;
    padding:4px 2px 0;
    color:#7a8da0;
    font-size:6px;
    font-weight:700;
  }

}


/* ============================================================
 * SIGOS_V37_R8G_FUNCTIONAL_FILTERS_V2
 * ============================================================ */

.r8gAllFilterGroup{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:4px;
}

.r8gAllChip.active{
  border-color:#92c9ed !important;
  background:#e6f4fe !important;
  color:#0873c8 !important;
  box-shadow:
    inset 0 0 0 1px
    rgba(8,115,200,.04);
}

.r8gAllFilterInputShell{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:5px;
}

.r8gAllFilterInput{
  width:106px;
  height:31px;
  padding:0 8px;
  border:1px solid #d9e4ef;
  border-radius:999px;
  background:#fff;
  color:#24486d;
  font:inherit;
  font-size:8px;
  font-weight:750;
  outline:0;
}

.r8gAllFilterInput[type="number"]{
  width:82px;
}

.r8gAllApply,
.r8gAllClear{
  flex:0 0 auto;
  height:31px;
  padding:0 11px;
  border-radius:9px;
  font:inherit;
  font-size:8px;
  font-weight:900;
  white-space:nowrap;
}

.r8gAllApply{
  border:1px solid #075da4;
  background:#073e70;
  color:#fff;
}

.r8gAllClear{
  border:1px solid #d7e2ed;
  background:#fff;
  color:#63788e;
}

.r8gAllSubsection{
  display:flex;
  align-items:center;
  margin-top:15px;
  padding:0 2px;
}

.r8gAllSubsection strong{
  color:#173c62;
  font-size:11px;
  font-weight:900;
}

@media (max-width:640px){

  .r8gAllFilters{
    flex-wrap:nowrap !important;
    width:max-content !important;
    min-width:100% !important;
  }

  .r8gAllFilterGroup{
    gap:3px;
  }

  .r8gAllFilterInputShell{
    gap:3px;
  }

  .r8gAllFilterInput{
    width:86px;
    height:26px;
    padding:0 6px;
    font-size:6.2px;
  }

  .r8gAllFilterInput[type="number"]{
    width:65px;
  }

  .r8gAllApply,
  .r8gAllClear{
    height:26px;
    padding:0 8px;
    font-size:6.2px;
  }

}
