/*
 * ============================================================
 * SIGOS V37 · R8G
 * REI PREMIUM · MISMA UI WEB / APP
 * ============================================================
 */

.r8gRei{
  --r8g-line:#d9e4ef;
  --r8g-line-soft:#e8eef5;
  --r8g-ink:#0c3159;
  --r8g-muted:#6d8197;
  --r8g-blue:#0873c8;
  --r8g-blue-dark:#063a6b;
  --r8g-blue-soft:#eaf5fd;
  --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);
}


/* ============================================================
   BUSCADOR + ACCIONES
   ============================================================ */

.r8gReiToolbar{
  display:flex;
  align-items:stretch;
  width:100%;
  gap:9px;
  margin:1px 0 11px;
}

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

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

.r8gReiSearch::placeholder{
  color:#718091;
}

.r8gReiSearch:focus{
  border-color:#a9cee9;
  box-shadow:0 0 0 3px rgba(8,115,200,.07);
}

.r8gReiToolbarActions{
  display:flex;
  gap:7px;
  flex:0 0 auto;
}

.r8gReiButton{
  min-height:58px;
  padding:0 19px;
  border:1px solid #d4e1ed;
  border-radius:14px;
  background:#fff;
  color:#083965;
  font-size:11px;
  font-weight:850;
  white-space:nowrap;
  box-shadow:var(--r8g-shadow);
}

.r8gReiButton.primary{
  min-height:46px;
  padding:0 24px;
  border-color:#0868b9;
  border-radius:12px;
  background:linear-gradient(
    135deg,
    #06437a,
    #0876cf
  );
  color:#fff;
}

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


/* ============================================================
   9 CONTROLES DE FILTRO
   ============================================================ */

.r8gReiFilterViewport{
  width:100%;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}

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

.r8gReiFilters{
  display:flex;
  align-items:center;
  width:max-content;
  min-width:100%;
  gap:6px;
  padding:1px 1px 3px;
}

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

.r8gReiChip.active{
  border-color:#8fc4e7;
  background:#eaf5fd;
  color:#0669b0;
}

.r8gReiFilterSeparator{
  flex:0 0 1px;
  width:1px;
  height:27px;
  margin:0 3px;
  background:#cfdae5;
}

.r8gReiEvolution{
  display:flex;
  align-items:center;
  gap:9px;
  color:#257d46;
  background:#f2faf5;
}

.r8gReiEvolution.active{
  border-color:#9dd6b2;
  background:#eaf8ef;
  color:#147d3e;
}

.r8gReiChipCount{
  display:inline-flex;
  width:24px;
  height:24px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#def5e6;
  color:#139148;
  font-size:10px;
  font-weight:900;
}

.r8gReiApply{
  flex:0 0 auto;
  min-height:37px;
  padding:0 15px;
  border:0;
  border-radius:11px;
  background:#063a6b;
  color:#fff;
  font-size:10px;
  font-weight:850;
}


/* ============================================================
   EXACTAMENTE 6 KPIs
   ============================================================ */

.r8gReiKpiViewport{
  width:100%;
  overflow-x:auto;
  margin-top:13px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}

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

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

.r8gReiKpi{
  min-height:68px;
  padding:12px 14px;
  border:1px solid var(--r8g-line);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--r8g-shadow);
}

.r8gReiKpiLabel{
  display:block;
  margin-bottom:6px;
  color:#6b8095;
  font-size:9px;
  line-height:1;
  font-weight:850;
}

.r8gReiKpiValue{
  display:block;
  color:#082f59;
  font-size:21px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.02em;
}


/* ============================================================
   TABLA EXACTA · 7 COLUMNAS
   ============================================================ */

.r8gReiTableViewport.r8fTableViewport{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  margin-top:12px;
  border:1px solid var(--r8g-line);
  border-radius:17px;
  background:#fff;
  box-shadow:var(--r8g-shadow);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}

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

.r8gReiTable{
  width:100%;
  min-width:1390px;
  border-collapse:separate;
  border-spacing:0;
  font-size:11px;
}

.r8gReiTable th{
  padding:10px 11px;
  border-bottom:1px solid var(--r8g-line);
  background:#f7f9fc;
  color:#697d91;
  font-size:9px;
  font-weight:850;
  letter-spacing:.018em;
  text-align:left;
  white-space:nowrap;
}

.r8gReiTable td{
  min-height:88px;
  padding:15px 11px;
  border-bottom:1px solid var(--r8g-line-soft);
  background:#fff;
  vertical-align:middle;
  color:#173c62;
}

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

.r8gReiColMt{
  width:105px;
  min-width:105px;
}

.r8gReiColDate{
  width:135px;
  min-width:135px;
}

.r8gReiColSupplies{
  width:275px;
  min-width:275px;
}

.r8gReiColMeter{
  width:315px;
  min-width:315px;
}

.r8gReiColBalance{
  width:335px;
  min-width:335px;
}

.r8gReiColSbbt{
  width:275px;
  min-width:275px;
}

.r8gReiColEvolution{
  width:360px;
  min-width:360px;
}


/* MT STICKY */

.r8gReiSticky{
  position:sticky;
  left:0;
  z-index:4;
  background:#fff !important;
  box-shadow:8px 0 15px -16px #203a56;
}

.r8gReiTable thead .r8gReiSticky{
  z-index:5;
  background:#f7f9fc !important;
}

.r8gReiMtCode{
  margin-bottom:3px;
  color:#0c3159;
  font-size:14px;
  font-weight:900;
}

.r8gReiMtSub{
  color:#8295a8;
  font-size:9px;
}

.r8gReiDate{
  color:#274c70;
  font-size:12px;
}


/* SUMINISTROS */

.r8gReiSupplyGrid{
  display:flex;
  gap:6px;
}

.r8gReiSupplyCard{
  width:77px;
  padding:10px 7px 8px;
  border:1px solid #e1e8ef;
  border-radius:12px;
  background:#f8fafc;
  text-align:center;
}

.r8gReiSupplyCard strong{
  display:block;
  margin-bottom:4px;
  color:#0b345e;
  font-size:15px;
  line-height:1;
}

.r8gReiSupplyCard span{
  color:#8294a7;
  font-size:9px;
}


/* MEDIDOR / RTC */

.r8gReiCompareStack{
  display:grid;
  gap:12px;
}

.r8gReiCompareLine{
  display:grid;
  grid-template-columns:61px 1fr;
  align-items:center;
  gap:9px;
}

.r8gReiCompareLabel{
  color:#8092a4;
  font-size:8px;
  font-weight:900;
  letter-spacing:.11em;
}

.r8gReiCompareValue{
  color:#24486d;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.r8gReiArrow{
  padding:0 5px;
  color:#8ca0b2;
}


/* BALANCE SIGOS */

.r8gReiBalanceGrid{
  display:grid;
  grid-template-columns:68px 44px 78px 1fr;
  gap:7px 8px;
  align-items:center;
}

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

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

.r8gReiStatus.neutral{
  background:#eef2f5;
  color:#76899d;
}

.r8gReiStatus.bad{
  background:#fdeced;
  color:#b3454e;
}

.r8gReiBalanceKind{
  color:#8899aa;
  font-size:8px;
  font-weight:900;
  letter-spacing:.11em;
}

.r8gReiRange{
  display:flex;
  min-height:29px;
  align-items:center;
  justify-content:center;
  padding:4px 9px;
  border-radius:999px;
  background:#eef2f5;
  color:#8192a4;
  font-size:9px;
  font-weight:900;
  white-space:nowrap;
}

.r8gReiRange.low{
  background:#e5f5ec;
  color:#128141;
}

.r8gReiRange.medium{
  background:#fff5d8;
  color:#9a7100;
}

.r8gReiRange.high{
  background:#fff0dc;
  color:#b26013;
}

.r8gReiRange.critical{
  background:#fde9eb;
  color:#b53742;
}

.r8gReiRange.negative{
  background:#eeeaf9;
  color:#6648a2;
}

.r8gReiRange.inconsistent{
  background:#e8eef8;
  color:#496482;
}

.r8gReiMetricBig{
  color:#24496d;
  font-size:10px;
  font-weight:850;
}

.r8gReiMetricSmall{
  margin-top:2px;
  color:#8495a7;
  font-size:8px;
}


/* SBBT */

.r8gReiSbbtCell{
  display:grid;
  grid-template-columns:79px 1fr;
  align-items:start;
  gap:11px;
}

.r8gReiSbbtRange{
  width:79px;
}

.r8gReiSbbtValues{
  display:grid;
  gap:2px;
  color:#375978;
  font-size:9px;
}

.r8gReiSbbtValues strong{
  font-size:10px;
}

.r8gReiSbbtValues span{
  color:#8193a6;
}


/* EVOLUCIÓN */

.r8gReiEvolutionTitle{
  margin-bottom:3px;
  color:#173f67;
  font-size:11px;
  font-weight:900;
}

.r8gReiEvolutionTransition{
  margin-bottom:3px;
  color:#58738d;
  font-size:9px;
}

.r8gReiEvolutionDelta,
.r8gReiEvolutionProjected{
  color:#8294a6;
  font-size:8px;
}

.r8gReiEvolutionProjected{
  margin-top:3px;
}


/* EMPTY / ERROR */

.r8gReiEmpty,
.r8gReiError{
  padding:15px;
  border:1px solid var(--r8g-line);
  border-radius:13px;
  background:#fff;
  color:#6d8197;
  font-size:11px;
}

.r8gReiSyncNotice{
  margin:0 0 8px;
  padding:9px 12px;
  border:1px solid #cfe3f6;
  border-radius:12px;
  background:#f3f9ff;
  color:#426887;
  font-size:10px;
  font-weight:800;
  letter-spacing:.01em;
}

.r8gReiError{
  margin-bottom:8px;
  border-color:#efd1d4;
  background:#fff6f6;
  color:#99414a;
}

.r8gReiMobileHint{
  display:none;
}


/* ============================================================
   MÓVIL
   MISMA INTERFAZ, SOLO COMPACTA Y SWIPEABLE
   ============================================================ */

@media (max-width:640px){

  .r8gReiToolbar{
    flex-direction:column;
    gap:6px;
    margin-bottom:8px;
  }

  .r8gReiSearchShell{
    width:100%;
    padding:5px;
    border-radius:13px;
  }

  .r8gReiSearch{
    height:40px;
    font-size:11px;
  }

  .r8gReiButton.primary{
    min-height:40px;
    padding:0 14px;
    font-size:9px;
  }

  .r8gReiToolbarActions{
    width:100%;
    overflow-x:auto;
    gap:5px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

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

  .r8gReiToolbarActions .r8gReiButton{
    flex:0 0 auto;
    min-height:36px;
    padding:0 13px;
    border-radius:10px;
    font-size:9px;
  }


  /* 9 FILTROS */

  .r8gReiFilters{
    gap:5px;
  }

  .r8gReiChip,
  .r8gReiApply{
    min-height:32px;
    font-size:8px;
  }

  .r8gReiChip{
    padding:0 10px;
  }

  .r8gReiChipCount{
    width:20px;
    height:20px;
    font-size:8px;
  }

  .r8gReiFilterSeparator{
    height:23px;
  }


  /* 6 KPIs EN SWIPE */

  .r8gReiKpiViewport{
    margin-top:9px;
  }

  .r8gReiKpis{
    display:flex;
    min-width:0;
    width:max-content;
    gap:6px;
    padding-right:15px;
    scroll-snap-type:x proximity;
  }

  .r8gReiKpi{
    flex:0 0 158px;
    min-height:64px;
    padding:10px 11px;
    border-radius:13px;
    scroll-snap-align:start;
  }

  .r8gReiKpiLabel{
    font-size:8px;
  }

  .r8gReiKpiValue{
    font-size:18px;
  }


  /* TABLA MISMA */

  .r8gReiTableViewport.r8fTableViewport{
    margin-top:9px;
    border-radius:13px;
  }

  .r8gReiTable{
    min-width:1320px;
  }

  .r8gReiTable th{
    padding:8px;
    font-size:8px;
  }

  .r8gReiTable td{
    padding:11px 8px;
  }

  .r8gReiColMt{
    width:89px;
    min-width:89px;
  }

  .r8gReiColDate{
    width:125px;
    min-width:125px;
  }

  .r8gReiColSupplies{
    width:260px;
    min-width:260px;
  }

  .r8gReiColMeter{
    width:285px;
    min-width:285px;
  }

  .r8gReiColBalance{
    width:315px;
    min-width:315px;
  }

  .r8gReiColSbbt{
    width:250px;
    min-width:250px;
  }

  .r8gReiColEvolution{
    width:330px;
    min-width:330px;
  }

  .r8gReiMtCode{
    font-size:12px;
  }

  .r8gReiMtSub{
    font-size:7px;
  }

  .r8gReiDate{
    font-size:10px;
  }

  .r8gReiSupplyCard{
    width:70px;
    padding:9px 6px 7px;
  }

  .r8gReiSupplyCard strong{
    font-size:13px;
  }

  .r8gReiSupplyCard span{
    font-size:8px;
  }

  .r8gReiCompareValue{
    font-size:10px;
  }

  .r8gReiBalanceGrid{
    grid-template-columns:62px 39px 70px 1fr;
    gap:6px;
  }

  .r8gReiMobileHint{
    display:flex;
    justify-content:flex-end;
    padding:5px 2px 0;
    color:#7a8da0;
    font-size:8px;
    font-weight:700;
  }

}


/* ============================================================
 * SIGOS_V37_R8G_COMPACT_SNAP_V1
 *
 * PASADA FINAL DE COMPACTACIÓN.
 *
 * Mantiene exactamente:
 * - misma interfaz
 * - 6 KPI
 * - 9 controles de filtro
 * - tabla de 7 columnas
 * - celdas premium
 *
 * Móvil:
 * - 3 KPI COMPLETAS por viewport
 * - snap sin tarjetas cortadas
 * - filtros compactos con snap
 * - tabla más compacta
 * ============================================================ */


/* ------------------------------------------------------------
   DESKTOP
   Compactación ligera sin alterar diseño
   ------------------------------------------------------------ */

.r8gReiToolbar{
  gap:7px;
  margin-bottom:9px;
}

.r8gReiSearchShell{
  padding:5px;
}

.r8gReiSearch{
  height:42px;
}

.r8gReiButton.primary{
  min-height:42px;
}

.r8gReiButton{
  min-height:52px;
}

.r8gReiFilters{
  gap:5px;
}

.r8gReiChip,
.r8gReiApply{
  min-height:34px;
}

.r8gReiKpiViewport{
  margin-top:10px;
}

.r8gReiKpi{
  min-height:62px;
  padding:10px 12px;
}

.r8gReiKpiValue{
  font-size:19px;
}

.r8gReiTableViewport.r8fTableViewport{
  margin-top:9px;
}

.r8gReiTable th{
  padding:8px 9px;
}

.r8gReiTable td{
  padding:12px 9px;
}

.r8gReiSupplyCard{
  padding-top:8px;
  padding-bottom:7px;
}

.r8gReiCompareStack{
  gap:9px;
}


/* ------------------------------------------------------------
   MÓVIL
   ------------------------------------------------------------ */

@media (max-width:640px){

  /* ==========================================================
     BUSCADOR
     ========================================================== */

  .r8gReiToolbar{
    gap:5px;
    margin-bottom:6px;
  }

  .r8gReiSearchShell{
    gap:4px;
    padding:4px;
    border-radius:11px;
  }

  .r8gReiSearch{
    height:36px;
    padding:0 9px;
    border-radius:9px;
    font-size:10px;
  }

  .r8gReiButton.primary{
    min-height:36px;
    padding:0 11px;
    border-radius:9px;
    font-size:8px;
  }

  .r8gReiToolbarActions{
    gap:4px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:1px;
    overscroll-behavior-x:contain;
  }

  .r8gReiToolbarActions .r8gReiButton{
    min-height:33px;
    padding:0 11px;
    border-radius:9px;
    font-size:8px;

    scroll-snap-align:start;
    scroll-snap-stop:always;
  }


  /* ==========================================================
     FILTROS
     Cada control aterriza ENTERO.
     ========================================================== */

  .r8gReiFilterViewport{
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:1px;
    overscroll-behavior-x:contain;
  }

  .r8gReiFilters{
    gap:4px;
    padding:1px 10px 3px 1px;
  }

  .r8gReiChip,
  .r8gReiApply{
    min-height:29px;
    border-radius:999px;
    font-size:7px;

    scroll-snap-align:start;
    scroll-snap-stop:always;
  }

  .r8gReiChip{
    padding:0 8px;
  }

  .r8gReiApply{
    padding:0 10px;
    border-radius:9px;
  }

  .r8gReiEvolution{
    gap:6px;
  }

  .r8gReiChipCount{
    width:18px;
    height:18px;
    font-size:7px;
  }

  .r8gReiFilterSeparator{
    height:20px;
    margin:0 1px;
  }


  /* ==========================================================
     KPIs
     EXACTAMENTE 3 TARJETAS COMPLETAS POR VIEWPORT.

     No usamos width fija.
     Así no queda media tarjeta al borde.
     ========================================================== */

  .r8gReiKpiViewport{
    margin-top:7px;

    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:0;
    overscroll-behavior-x:contain;
  }

  .r8gReiKpis{
    display:grid;

    width:200%;
    min-width:200%;

    grid-template-columns:
      repeat(
        6,
        minmax(
          0,
          1fr
        )
      );

    gap:5px;

    padding:0;

    scroll-snap-type:none;
  }

  .r8gReiKpi{
    min-width:0;
    min-height:57px;

    padding:8px 8px;

    border-radius:11px;

    scroll-snap-align:start;
    scroll-snap-stop:always;
  }

  /*
   * 6 tarjetas repartidas sobre 200% del viewport.
   * Resultado:
   * viewport 1 = KPI 1, 2, 3 completas
   * viewport 2 = KPI 4, 5, 6 completas
   */

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

  .r8gReiKpiLabel{
    min-height:17px;

    margin-bottom:4px;

    font-size:7px;
    line-height:1.15;

    overflow-wrap:normal;
  }

  .r8gReiKpiValue{
    font-size:15px;
    line-height:1;
    white-space:nowrap;
  }


  /* ==========================================================
     TABLA
     MISMA TABLA.
     Solo reducimos anchos.
     ========================================================== */

  .r8gReiTableViewport.r8fTableViewport{
    margin-top:7px;

    overflow-x:auto;

    border-radius:11px;

    scroll-snap-type:x proximity;
    scroll-padding-left:76px;

    overscroll-behavior-x:contain;
  }

  .r8gReiTable{
    /*
     * Antes ~1320px.
     * Ahora ~1120px.
     * Conserva las 7 columnas y todas las celdas.
     */
    min-width:1120px;
  }

  .r8gReiTable th{
    padding:7px 6px;

    font-size:7px;

    scroll-snap-align:start;
  }

  .r8gReiTable td{
    padding:9px 6px;
  }


  /* MT */

  .r8gReiColMt{
    width:76px;
    min-width:76px;
  }

  .r8gReiMtCode{
    margin-bottom:2px;
    font-size:11px;
  }

  .r8gReiMtSub{
    font-size:6px;
  }


  /* FECHA */

  .r8gReiColDate{
    width:88px;
    min-width:88px;
  }

  .r8gReiDate{
    font-size:9px;
    white-space:nowrap;
  }


  /* SUMINISTROS */

  .r8gReiColSupplies{
    width:205px;
    min-width:205px;
  }

  .r8gReiSupplyGrid{
    gap:4px;
  }

  .r8gReiSupplyCard{
    width:60px;

    padding:
      7px
      4px
      6px;

    border-radius:9px;
  }

  .r8gReiSupplyCard strong{
    margin-bottom:3px;
    font-size:11px;
  }

  .r8gReiSupplyCard span{
    font-size:7px;
  }


  /* MEDIDOR / RTC */

  .r8gReiColMeter{
    width:205px;
    min-width:205px;
  }

  .r8gReiCompareStack{
    gap:8px;
  }

  .r8gReiCompareLine{
    grid-template-columns:47px 1fr;
    gap:5px;
  }

  .r8gReiCompareLabel{
    font-size:6px;
    letter-spacing:.08em;
  }

  .r8gReiCompareValue{
    font-size:9px;
  }

  .r8gReiArrow{
    padding:0 3px;
  }


  /* BALANCE SIGOS */

  .r8gReiColBalance{
    width:255px;
    min-width:255px;
  }

  .r8gReiBalanceGrid{
    grid-template-columns:
      53px
      32px
      57px
      1fr;

    gap:5px;
  }

  .r8gReiStatus{
    min-height:21px;

    padding:3px 4px;

    font-size:6px;
  }

  .r8gReiBalanceKind{
    font-size:6px;
  }

  .r8gReiRange{
    min-height:23px;

    padding:3px 5px;

    font-size:7px;
  }

  .r8gReiMetricBig{
    font-size:8px;
  }

  .r8gReiMetricSmall{
    font-size:6px;
  }


  /* SBBT */

  .r8gReiColSbbt{
    width:155px;
    min-width:155px;
  }

  .r8gReiSbbtCell{
    grid-template-columns:61px 1fr;
    gap:7px;
  }

  .r8gReiSbbtRange{
    width:61px;
  }

  .r8gReiSbbtValues{
    gap:1px;
    font-size:7px;
  }

  .r8gReiSbbtValues strong{
    font-size:8px;
  }


  /* EVOLUCIÓN */

  .r8gReiColEvolution{
    width:180px;
    min-width:180px;
  }

  .r8gReiEvolutionTitle{
    margin-bottom:2px;
    font-size:9px;
  }

  .r8gReiEvolutionTransition{
    margin-bottom:2px;
    font-size:7px;
  }

  .r8gReiEvolutionDelta,
  .r8gReiEvolutionProjected{
    font-size:6px;
  }


  /* ==========================================================
     STICKY
     ========================================================== */

  .r8gReiSticky{
    box-shadow:
      8px 0 12px -13px
      #17314b;
  }


  /* ==========================================================
     AYUDA
     ========================================================== */

  .r8gReiMobileHint{
    padding-top:4px;
    font-size:7px;
  }

}


/* ============================================================
   SIGOS_V37_R8G_SWIPE_PAGED_V2

   MOBILE:
   - Toolbar = 2 páginas completas
   - Filtros = 3 páginas × 3 controles
   - KPIs = 2 páginas × 3 tarjetas
   - Nunca mostrar medio elemento en posición de reposo
   ============================================================ */

@media (max-width:640px){


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

     Página 1:
     Buscar MT + Buscar

     Página 2:
     Descargar vista + Descargar REI
     ========================================================== */

  .r8gReiToolbar{
    display:flex !important;
    flex-direction:row !important;
    align-items:stretch !important;

    width:100%;

    gap:0 !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    scroll-snap-type:x mandatory !important;
    scroll-padding-inline:0 !important;

    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;

    margin-bottom:5px !important;
  }

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


  /* PÁGINA 1 */

  .r8gReiSearchShell{
    flex:0 0 100% !important;

    width:100% !important;
    min-width:100% !important;

    display:flex;

    gap:4px !important;

    padding:4px !important;

    border-radius:11px !important;

    scroll-snap-align:start;
    scroll-snap-stop:always;
  }

  .r8gReiSearch{
    min-width:0 !important;

    height:34px !important;

    padding:
      0
      8px !important;

    border-radius:8px !important;

    font-size:9px !important;
  }

  .r8gReiSearchShell
  .r8gReiButton.primary{
    flex:0 0 72px !important;

    min-width:72px !important;
    min-height:34px !important;

    padding:0 8px !important;

    border-radius:8px !important;

    font-size:8px !important;
  }


  /* PÁGINA 2 */

  .r8gReiToolbarActions{
    flex:0 0 100% !important;

    width:100% !important;
    min-width:100% !important;

    display:grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

    gap:5px !important;

    padding:
      0
      1px !important;

    overflow:visible !important;

    scroll-snap-align:start;
    scroll-snap-stop:always;
  }

  .r8gReiToolbarActions
  .r8gReiButton{
    width:100% !important;

    min-width:0 !important;
    min-height:34px !important;

    padding:
      0
      7px !important;

    border-radius:9px !important;

    font-size:8px !important;
  }


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

     9 CONTROLES REALES.
     El separador visual desaparece en móvil.

     3 páginas × 3 controles completos.
     ========================================================== */

  .r8gReiFilterViewport{
    width:100%;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    scroll-snap-type:x mandatory !important;
    scroll-padding-inline:0 !important;

    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;
  }

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

  .r8gReiFilterSeparator{
    display:none !important;
  }

  .r8gReiFilters{
    display:grid !important;

    /*
     * 9 controles sobre 300%:
     * cada viewport contiene exactamente 3.
     */

    width:300% !important;
    min-width:300% !important;

    grid-template-columns:
      repeat(
        9,
        minmax(0,1fr)
      ) !important;

    align-items:stretch;

    column-gap:4px !important;

    padding:0 !important;
  }

  .r8gReiChip,
  .r8gReiApply{
    width:100% !important;
    min-width:0 !important;

    min-height:27px !important;

    margin:0 !important;

    padding:
      0
      4px !important;

    border-radius:999px !important;

    font-size:6.4px !important;
    line-height:1 !important;

    letter-spacing:-.01em;

    white-space:nowrap !important;

    overflow:visible !important;

    scroll-snap-align:none !important;
    scroll-snap-stop:normal !important;
  }

  .r8gReiApply{
    border-radius:8px !important;
  }

  .r8gReiEvolution{
    display:flex !important;
    justify-content:center !important;

    gap:4px !important;
  }

  .r8gReiChipCount{
    flex:0 0 16px;

    width:16px !important;
    height:16px !important;

    font-size:6px !important;
  }


  /*
   * Solo los inicios de página hacen snap.
   *
   * 1 = Inconsistente
   * 4 = Medio
   * 7 = Inconsistente +
   *
   * El separador oculto sigue siendo child 8,
   * pero no participa en Grid.
   */

  .r8gReiFilters > :nth-child(1),
  .r8gReiFilters > :nth-child(4),
  .r8gReiFilters > :nth-child(7){
    scroll-snap-align:start !important;
    scroll-snap-stop:always !important;
  }


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

     6 KPIs
     2 páginas
     3 tarjetas completas por página.
     ========================================================== */

  .r8gReiKpiViewport{
    width:100%;

    margin-top:6px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    scroll-snap-type:x mandatory !important;
    scroll-padding-inline:0 !important;

    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;
  }

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

  .r8gReiKpis{
    display:grid !important;

    width:200% !important;
    min-width:200% !important;

    grid-template-columns:
      repeat(
        6,
        minmax(0,1fr)
      ) !important;

    gap:4px !important;

    padding:0 !important;
  }

  .r8gReiKpi{
    width:100% !important;
    min-width:0 !important;

    min-height:53px !important;

    padding:
      7px
      7px !important;

    border-radius:10px !important;

    scroll-snap-align:none !important;
    scroll-snap-stop:normal !important;
  }

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

  .r8gReiKpiLabel{
    min-height:15px !important;

    margin-bottom:3px !important;

    font-size:6.5px !important;
    line-height:1.1 !important;

    white-space:normal !important;
  }

  .r8gReiKpiValue{
    font-size:14px !important;
    line-height:1 !important;

    white-space:nowrap;
  }


  /* ==========================================================
     TABLA

     Mantener todo.
     Compactar un poco más.
     ========================================================== */

  .r8gReiTableViewport.r8fTableViewport{
    margin-top:6px !important;

    border-radius:10px !important;

    scroll-snap-type:x proximity;
  }

  .r8gReiTable{
    min-width:1040px !important;
  }

  .r8gReiTable th{
    padding:
      6px
      5px !important;

    font-size:6.5px !important;
  }

  .r8gReiTable td{
    padding:
      8px
      5px !important;
  }


  /* MT */

  .r8gReiColMt{
    width:72px !important;
    min-width:72px !important;
  }

  .r8gReiMtCode{
    font-size:10px !important;
  }

  .r8gReiMtSub{
    font-size:5.8px !important;
  }


  /* FECHA */

  .r8gReiColDate{
    width:82px !important;
    min-width:82px !important;
  }

  .r8gReiDate{
    font-size:8px !important;
  }


  /* SUMINISTROS */

  .r8gReiColSupplies{
    width:190px !important;
    min-width:190px !important;
  }

  .r8gReiSupplyGrid{
    gap:3px !important;
  }

  .r8gReiSupplyCard{
    width:55px !important;

    padding:
      6px
      3px
      5px !important;

    border-radius:8px !important;
  }

  .r8gReiSupplyCard strong{
    font-size:10px !important;
  }

  .r8gReiSupplyCard span{
    font-size:6px !important;
  }


  /* MEDIDOR / RTC */

  .r8gReiColMeter{
    width:190px !important;
    min-width:190px !important;
  }

  .r8gReiCompareLine{
    grid-template-columns:
      43px
      1fr !important;

    gap:4px !important;
  }

  .r8gReiCompareLabel{
    font-size:5.5px !important;
  }

  .r8gReiCompareValue{
    font-size:8px !important;
  }


  /* BALANCE SIGOS */

  .r8gReiColBalance{
    width:235px !important;
    min-width:235px !important;
  }

  .r8gReiBalanceGrid{
    grid-template-columns:
      49px
      29px
      51px
      1fr !important;

    gap:
      4px
      4px !important;
  }

  .r8gReiStatus{
    min-height:19px !important;

    padding:
      2px
      3px !important;

    font-size:5.5px !important;
  }

  .r8gReiBalanceKind{
    font-size:5.5px !important;
  }

  .r8gReiRange{
    min-height:21px !important;

    padding:
      2px
      4px !important;

    font-size:6px !important;
  }

  .r8gReiMetricBig{
    font-size:7px !important;
  }

  .r8gReiMetricSmall{
    font-size:5.5px !important;
  }


  /* SBBT */

  .r8gReiColSbbt{
    width:145px !important;
    min-width:145px !important;
  }

  .r8gReiSbbtCell{
    grid-template-columns:
      56px
      1fr !important;

    gap:6px !important;
  }

  .r8gReiSbbtRange{
    width:56px !important;
  }

  .r8gReiSbbtValues{
    font-size:6px !important;
  }

  .r8gReiSbbtValues strong{
    font-size:7px !important;
  }


  /* EVOLUCIÓN */

  .r8gReiColEvolution{
    width:155px !important;
    min-width:155px !important;
  }

  .r8gReiEvolutionTitle{
    font-size:8px !important;
  }

  .r8gReiEvolutionTransition{
    font-size:6px !important;
  }

  .r8gReiEvolutionDelta,
  .r8gReiEvolutionProjected{
    font-size:5.5px !important;
  }


  .r8gReiMobileHint{
    padding-top:3px !important;
    font-size:6px !important;
  }

}


/* ============================================================
 * SIGOS_V37_R8G_LAYOUT_MOBILE_V3B
 *
 * APROBADO:
 * misma UI premium.
 *
 * CORRECCIÓN:
 * - buscador fijo
 * - único slot descarga swipe
 * - rangos compactos swipe
 * - evolución/aplicar fijos
 * - ningún rango recortado al aterrizar
 * ============================================================ */

@media (max-width:640px){


  /* ==========================================================
     TOOLBAR · TODO EN UNA SOLA LÍNEA

     [ Buscar MT.......... ][Buscar] [Descarga]

     El tercer bloque es un único slot:
       Vista ↔ REI
     ========================================================== */

  .r8gReiToolbar{
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      82px !important;

    align-items:stretch !important;

    gap:4px !important;

    width:100% !important;

    overflow:visible !important;

    margin:
      0
      0
      5px !important;
  }


  /*
   * BUSCADOR + BUSCAR
   * FIJOS.
   */

  .r8gReiSearchShell{
    display:flex !important;

    width:100% !important;
    min-width:0 !important;

    flex:initial !important;

    gap:4px !important;

    padding:4px !important;

    border-radius:10px !important;

    scroll-snap-align:none !important;
  }


  .r8gReiSearch{
    flex:
      1
      1
      auto !important;

    width:auto !important;
    min-width:0 !important;

    height:34px !important;

    padding:
      0
      8px !important;

    border-radius:8px !important;

    font-size:9px !important;
  }


  .r8gReiSearchShell
  .r8gReiButton.primary{
    flex:
      0
      0
      60px !important;

    width:60px !important;
    min-width:60px !important;

    min-height:34px !important;
    height:34px !important;

    padding:0 !important;

    border-radius:8px !important;

    font-size:7.8px !important;
  }


  /* ==========================================================
     DESCARGA

     MISMO ESPACIO FÍSICO.

     Swipe:
     [Descargar vista] ↔ [Descargar REI]
     ========================================================== */

  .r8gReiToolbarActions{
    display:flex !important;

    flex:
      initial !important;

    width:82px !important;
    min-width:82px !important;
    max-width:82px !important;

    gap:0 !important;

    padding:0 !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    scroll-snap-type:
      x
      mandatory !important;

    scroll-padding-inline:
      0 !important;

    overscroll-behavior-x:
      contain;

    -webkit-overflow-scrolling:
      touch;

    scrollbar-width:
      none;

    border-radius:
      9px;
  }


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


  .r8gReiToolbarActions
  .r8gReiButton{
    flex:
      0
      0
      82px !important;

    width:82px !important;
    min-width:82px !important;
    max-width:82px !important;

    min-height:42px !important;
    height:42px !important;

    padding:
      0
      4px !important;

    border-radius:
      9px !important;

    font-size:
      6.2px !important;

    line-height:
      1.05 !important;

    white-space:
      normal !important;

    text-align:
      center;

    scroll-snap-align:
      start !important;

    scroll-snap-stop:
      always !important;
  }


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

     IZQUIERDA
       rangos swipe

     DERECHA FIJA
       Evolución + Aplicar
     ========================================================== */

  .r8gReiFilterViewport{
    width:
      100% !important;

    overflow:
      visible !important;

    margin:
      0 !important;
  }


  .r8gReiFilters{
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      auto !important;

    align-items:
      stretch !important;

    width:
      100% !important;

    min-width:
      0 !important;

    gap:
      4px !important;

    padding:
      0 !important;
  }


  /* ----------------------------------------------------------
     SWIPER DE RANGOS
     ---------------------------------------------------------- */

  .r8gReiRangeSwiperV3B{
    display:flex;

    width:
      100%;

    min-width:
      0;

    overflow-x:
      auto;

    overflow-y:
      hidden;

    scroll-snap-type:
      x
      mandatory;

    scroll-padding-inline:
      0;

    overscroll-behavior-x:
      contain;

    -webkit-overflow-scrolling:
      touch;

    scrollbar-width:
      none;

    gap:
      0;
  }


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


  /*
   * Cada página ocupa exactamente el
   * viewport disponible para rangos.
   */

  .r8gReiRangePageV3B{
    flex:
      0
      0
      100%;

    width:
      100%;

    min-width:
      100%;

    display:flex;

    align-items:center;

    justify-content:
      flex-start;

    gap:
      3px;

    padding-right:
      3px;

    scroll-snap-align:
      start;

    scroll-snap-stop:
      always;
  }


  /*
   * CHIP = ANCHO DEL TEXTO.
   *
   * Bajo queda pequeño.
   * Alto queda pequeño.
   * Inconsistente + crece solamente
   * lo que necesita.
   */

  .r8gReiRangePageV3B
  .r8gReiChip{
    flex:
      0
      0
      auto !important;

    width:
      auto !important;

    min-width:
      max-content !important;

    min-height:
      26px !important;

    height:
      26px !important;

    margin:
      0 !important;

    padding:
      0
      7px !important;

    border-radius:
      999px !important;

    font-size:
      6.2px !important;

    line-height:
      1 !important;

    white-space:
      nowrap !important;

    scroll-snap-align:
      none !important;

    scroll-snap-stop:
      normal !important;
  }


  /* ----------------------------------------------------------
     EVOLUCIÓN + APLICAR
     FIJOS
     ---------------------------------------------------------- */

  .r8gReiFixedFiltersV3B{
    display:flex;

    align-items:
      stretch;

    gap:
      3px;

    flex:
      0
      0
      auto;
  }


  .r8gReiFixedFiltersV3B
  .r8gReiEvolution{
    flex:
      0
      0
      105px !important;

    width:
      105px !important;

    min-width:
      105px !important;

    min-height:
      26px !important;

    height:
      26px !important;

    display:flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    gap:
      3px !important;

    padding:
      0
      4px !important;

    border-radius:
      999px !important;

    font-size:
      5.6px !important;

    white-space:
      nowrap !important;

    scroll-snap-align:
      none !important;
  }


  .r8gReiFixedFiltersV3B
  .r8gReiChipCount{
    flex:
      0
      0
      15px !important;

    width:
      15px !important;

    height:
      15px !important;

    font-size:
      5.5px !important;
  }


  .r8gReiFixedFiltersV3B
  .r8gReiApply{
    flex:
      0
      0
      46px !important;

    width:
      46px !important;

    min-width:
      46px !important;

    min-height:
      26px !important;

    height:
      26px !important;

    padding:
      0 !important;

    border-radius:
      8px !important;

    font-size:
      6px !important;

    scroll-snap-align:
      none !important;
  }


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

     Mantener 6.
     3 COMPLETAS por pantalla.
     Compactar otro poco.
     ========================================================== */

  .r8gReiKpiViewport{
    margin-top:
      5px !important;

    overflow-x:
      auto !important;

    scroll-snap-type:
      x
      mandatory !important;

    scroll-padding-inline:
      0 !important;

    overscroll-behavior-x:
      contain;
  }


  .r8gReiKpis{
    display:grid !important;

    width:
      200% !important;

    min-width:
      200% !important;

    grid-template-columns:
      repeat(
        6,
        minmax(0,1fr)
      ) !important;

    gap:
      4px !important;

    padding:
      0 !important;
  }


  .r8gReiKpi{
    width:
      100% !important;

    min-width:
      0 !important;

    min-height:
      48px !important;

    padding:
      6px
      7px !important;

    border-radius:
      10px !important;

    scroll-snap-align:
      none !important;
  }


  .r8gReiKpi:nth-child(1),
  .r8gReiKpi:nth-child(4){
    scroll-snap-align:
      start !important;

    scroll-snap-stop:
      always !important;
  }


  .r8gReiKpiLabel{
    min-height:
      14px !important;

    margin-bottom:
      3px !important;

    font-size:
      6.1px !important;

    line-height:
      1.08 !important;
  }


  .r8gReiKpiValue{
    font-size:
      13px !important;
  }


  /* ==========================================================
     TABLA
     La dejamos premium y completa.
     ========================================================== */

  .r8gReiTableViewport.r8fTableViewport{
    margin-top:
      5px !important;
  }

}


/* ============================================================
 * SIGOS_V37_R8G_FILTER_ROW_HORIZONTAL_V3C
 *
 * REGLA DEFINITIVA MÓVIL:
 *
 * TODO EN UNA SOLA LÍNEA.
 *
 * IZQUIERDA:
 *   rangos swipeables
 *
 * DERECHA:
 *   Evolución + Aplicar
 *   siempre fijos
 *
 * Nada hace wrap.
 * Nada baja a segunda línea.
 * ============================================================ */

@media (max-width:640px){


  /* ==========================================================
     CONTENEDOR GENERAL
     ========================================================== */

  .r8gReiFilterViewport{
    display:block !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    height:auto !important;

    overflow:visible !important;

    margin:0 !important;
    padding:0 !important;
  }


  .r8gReiFilters{
    display:grid !important;

    /*
     * Zona izquierda flexible.
     * Zona derecha fija.
     */

    grid-template-columns:
      minmax(0,1fr)
      154px !important;

    grid-template-rows:
      28px !important;

    align-items:center !important;

    column-gap:4px !important;
    row-gap:0 !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
  }


  /* ==========================================================
     ÁREA SWIPE · 7 RANGOS
     ========================================================== */

  .r8gReiRangeSwiperV3B{
    grid-column:1 !important;
    grid-row:1 !important;

    display:flex !important;

    flex-direction:row !important;
    flex-wrap:nowrap !important;

    align-items:center !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    height:28px !important;

    margin:0 !important;
    padding:0 !important;

    gap:0 !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    scroll-snap-type:
      x
      mandatory !important;

    scroll-padding-inline:
      0 !important;

    overscroll-behavior-x:
      contain !important;

    -webkit-overflow-scrolling:
      touch;

    scrollbar-width:none;
  }


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


  /* ==========================================================
     CADA PÁGINA = UNA SOLA FILA
     JAMÁS WRAP
     ========================================================== */

  .r8gReiRangePageV3B{
    flex:
      0
      0
      100% !important;

    display:flex !important;

    flex-direction:row !important;
    flex-wrap:nowrap !important;

    align-items:center !important;
    justify-content:flex-start !important;

    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;

    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;

    gap:3px !important;

    margin:0 !important;

    padding:
      0
      3px
      0
      0 !important;

    overflow:hidden !important;

    scroll-snap-align:
      start !important;

    scroll-snap-stop:
      always !important;
  }


  /* ==========================================================
     CHIPS VARIABLES

     IMPORTANTE:
     ancho = contenido real.

     Bajo es pequeño.
     Alto es pequeño.
     Medio es pequeño.
     Inconsistente + crece solo lo necesario.
     ========================================================== */

  .r8gReiRangePageV3B
  .r8gReiChip{
    display:inline-flex !important;

    flex:
      0
      0
      auto !important;

    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    min-width:max-content !important;
    max-width:none !important;

    height:26px !important;
    min-height:26px !important;
    max-height:26px !important;

    margin:0 !important;

    padding:
      0
      7px !important;

    border-radius:
      999px !important;

    font-size:
      6.2px !important;

    line-height:
      1 !important;

    white-space:
      nowrap !important;

    overflow:
      visible !important;

    text-overflow:
      clip !important;

    scroll-snap-align:
      none !important;
  }


  /* ==========================================================
     FIJOS DERECHA

     Evolución + Aplicar
     SIEMPRE MISMA FILA.
     ========================================================== */

  .r8gReiFixedFiltersV3B{
    grid-column:2 !important;
    grid-row:1 !important;

    display:grid !important;

    grid-template-columns:
      105px
      46px !important;

    grid-template-rows:
      26px !important;

    align-items:center !important;

    gap:3px !important;

    width:154px !important;
    min-width:154px !important;
    max-width:154px !important;

    height:26px !important;
    min-height:26px !important;
    max-height:26px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;

    white-space:nowrap !important;
  }


  .r8gReiFixedFiltersV3B
  .r8gReiEvolution{
    grid-column:1 !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:105px !important;
    min-width:105px !important;
    max-width:105px !important;

    height:26px !important;
    min-height:26px !important;
    max-height:26px !important;

    margin:0 !important;

    padding:
      0
      4px !important;

    gap:3px !important;

    border-radius:
      999px !important;

    font-size:
      5.6px !important;

    line-height:
      1 !important;

    white-space:
      nowrap !important;

    overflow:
      hidden !important;
  }


  .r8gReiFixedFiltersV3B
  .r8gReiChipCount{
    flex:
      0
      0
      15px !important;

    width:15px !important;
    min-width:15px !important;
    max-width:15px !important;

    height:15px !important;
    min-height:15px !important;
    max-height:15px !important;

    font-size:
      5.5px !important;
  }


  .r8gReiFixedFiltersV3B
  .r8gReiApply{
    grid-column:2 !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;

    height:26px !important;
    min-height:26px !important;
    max-height:26px !important;

    margin:0 !important;

    padding:0 !important;

    border-radius:
      8px !important;

    font-size:
      6px !important;

    line-height:
      1 !important;

    white-space:
      nowrap !important;
  }


  /* ==========================================================
     ANULAR REGLAS VIEJAS QUE PODÍAN HACER WRAP
     ========================================================== */

  .r8gReiFilters > *,
  .r8gReiRangeSwiperV3B > *,
  .r8gReiRangePageV3B > *,
  .r8gReiFixedFiltersV3B > *{
    float:none !important;
  }


  .r8gReiRangeSwiperV3B,
  .r8gReiRangePageV3B,
  .r8gReiFixedFiltersV3B{
    flex-wrap:
      nowrap !important;
  }

}


/* ============================================================
 * SIGOS_V37_R8G_LAYOUT_HISTORY_V3D
 *
 * DESKTOP
 *   filtros 100% horizontales.
 *
 * MOBILE
 *   rangos en cinta continua, sin páginas vacías.
 *   Evolución + Aplicar fijos.
 *   tabla en 3 vistas limpias.
 *
 * HISTÓRICO
 *   misma tabla, color diferencial.
 * ============================================================ */


/* ============================================================
   HISTÓRICO · TODOS LOS VIEWPORTS
   ============================================================ */

.r8gReiEvolutionWithHistory{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.r8gReiEvolutionMain{
  flex:1 1 auto;
  min-width:0;
}

.r8gReiHistoryToggle{
  flex:0 0 auto;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:5px;

  min-width:48px;
  height:31px;

  padding:0 8px;

  border:1px solid #d8e3ef;
  border-radius:999px;

  background:#fff;

  color:#244a71;

  font:inherit;
  font-size:10px;
  font-weight:850;

  cursor:pointer;

  box-shadow:
    0 4px 14px
    rgba(20,52,82,.05);
}

.r8gReiHistorySymbol{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:22px;
  height:22px;

  border-radius:50%;

  background:#e8f3ff;
  color:#0873c8;

  font-size:18px;
  line-height:1;
  font-weight:700;
}

.r8gReiHistoryCount{
  min-width:10px;
  text-align:center;
}

.r8gReiHistoryToggle.open{
  border-color:#d7cdf6;
  background:#f8f5ff;
  color:#664fa7;
}

.r8gReiHistoryToggle.open
.r8gReiHistorySymbol{
  background:#ebe5ff;
  color:#6f55bd;
}


/* ROW HISTÓRICO */

.r8gReiHistoryRow td{
  border-top:
    1px solid
    #e6def8 !important;

  background:
    #faf8ff !important;
}

.r8gReiHistoryRow
.r8gReiSticky{
  background:
    #f7f3ff !important;

  border-left:
    3px solid
    #7c63c6;
}

.r8gReiHistoryBadge{
  display:inline-flex;
  align-items:center;

  min-height:19px;

  margin-bottom:5px;

  padding:
    0
    7px;

  border:
    1px solid
    #ddd4f8;

  border-radius:
    999px;

  background:
    #eee9ff;

  color:
    #684fad;

  font-size:
    7px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    .07em;
}

.r8gReiHistoryLabel{
  margin-bottom:4px;

  color:#7863ac;

  font-size:7px;
  font-weight:900;

  letter-spacing:.07em;
}

.r8gReiHistoryEmpty{
  display:flex;
  align-items:center;
  gap:8px;

  color:#6d6387;

  font-size:10px;
}


/* ============================================================
   DESKTOP
   TODO HORIZONTAL.
   ============================================================ */

@media (min-width:641px){

  .r8gReiFilterViewport{
    width:100% !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    scrollbar-width:none;

    -webkit-overflow-scrolling:
      touch;
  }

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


  .r8gReiFilters{
    display:flex !important;

    flex-direction:row !important;
    flex-wrap:nowrap !important;

    align-items:center !important;

    width:max-content !important;
    min-width:100% !important;

    gap:6px !important;

    margin:0 !important;
    padding:0 !important;
  }


  /*
   * Quitar la noción de "páginas" en desktop.
   */

  .r8gReiRangeSwiperV3B{
    display:flex !important;

    flex:0 0 auto !important;

    flex-direction:row !important;
    flex-wrap:nowrap !important;

    align-items:center !important;

    width:auto !important;
    min-width:0 !important;

    gap:6px !important;

    overflow:visible !important;
  }


  .r8gReiRangePageV3B{
    display:contents !important;
  }


  .r8gReiRangePageV3B
  .r8gReiChip{
    flex:0 0 auto !important;

    width:auto !important;
    min-width:max-content !important;

    margin:0 !important;
  }


  .r8gReiFixedFiltersV3B{
    display:flex !important;

    flex:0 0 auto !important;

    flex-direction:row !important;
    flex-wrap:nowrap !important;

    align-items:center !important;

    width:auto !important;
    min-width:0 !important;

    gap:6px !important;

    margin:0 !important;
    padding:0 !important;
  }


  .r8gReiFixedFiltersV3B
  .r8gReiEvolution{
    width:auto !important;
    min-width:max-content !important;

    min-height:37px !important;

    padding:
      0
      12px !important;

    font-size:10px !important;
  }


  .r8gReiFixedFiltersV3B
  .r8gReiApply{
    width:auto !important;
    min-width:max-content !important;

    min-height:37px !important;

    padding:
      0
      15px !important;

    font-size:10px !important;
  }

}


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

@media (max-width:640px){


  /* ==========================================================
     FILTROS · UNA SOLA LÍNEA
     ========================================================== */

  .r8gReiFilterViewport{
    width:100% !important;

    overflow:visible !important;

    margin:0 !important;
    padding:0 !important;
  }


  .r8gReiFilters{
    display:grid !important;

    /*
     * IZQUIERDA:
     *   cinta de rangos.
     *
     * DERECHA:
     *   Evolución + Aplicar.
     */

    grid-template-columns:
      minmax(0,1fr)
      154px !important;

    align-items:center !important;

    width:100% !important;
    min-width:0 !important;

    height:28px !important;

    gap:4px !important;

    margin:0 !important;
    padding:0 !important;
  }


  /*
   * CINTA CONTINUA.
   *
   * Se eliminan las páginas visuales.
   * Todos los chips quedan consecutivos:
   *
   * Inconsistente · Negativo · Bajo · Medio · Alto...
   */

  .r8gReiRangeSwiperV3B{
    display:flex !important;

    flex-direction:row !important;
    flex-wrap:nowrap !important;

    align-items:center !important;

    width:100% !important;
    min-width:0 !important;

    height:28px !important;

    gap:3px !important;

    margin:0 !important;

    padding:
      0
      7px
      0
      0 !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    scroll-snap-type:
      x
      proximity !important;

    scroll-padding-inline:
      0
      7px !important;

    overscroll-behavior-x:
      contain;

    -webkit-overflow-scrolling:
      touch;

    scrollbar-width:none;
  }


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


  /*
   * Desaparecen los contenedores de página.
   *
   * Sus chips pasan directamente al flex track.
   */

  .r8gReiRangePageV3B{
    display:contents !important;
  }


  .r8gReiRangePageV3B
  .r8gReiChip{
    display:inline-flex !important;

    flex:
      0
      0
      auto !important;

    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    min-width:max-content !important;

    height:26px !important;
    min-height:26px !important;

    margin:0 !important;

    padding:
      0
      7px !important;

    border-radius:
      999px !important;

    font-size:
      6.2px !important;

    white-space:
      nowrap !important;

    scroll-snap-align:
      start !important;
  }


  /*
   * Un pequeño final de pista permite que
   * Inconsistente + llegue completamente al viewport.
   */

  .r8gReiRangeSwiperV3B::after{
    content:"";

    flex:
      0
      0
      5px;
  }


  /* ==========================================================
     EVOLUCIÓN + APLICAR · FIJOS
     ========================================================== */

  .r8gReiFixedFiltersV3B{
    display:grid !important;

    grid-template-columns:
      105px
      46px !important;

    align-items:center !important;

    width:154px !important;
    min-width:154px !important;

    height:26px !important;

    gap:3px !important;

    margin:0 !important;
    padding:0 !important;
  }


  .r8gReiFixedFiltersV3B
  .r8gReiEvolution{
    width:105px !important;
    min-width:105px !important;

    height:26px !important;
    min-height:26px !important;

    padding:
      0
      4px !important;

    font-size:
      5.6px !important;
  }


  .r8gReiFixedFiltersV3B
  .r8gReiApply{
    width:46px !important;
    min-width:46px !important;

    height:26px !important;
    min-height:26px !important;

    padding:0 !important;

    font-size:
      6px !important;
  }


  /* ==========================================================
     TABLA · 3 POSICIONES LIMPIAS
     ========================================================== */

  .r8gReiTableViewport.r8fTableViewport{
    /*
     * cqw permite calcular las columnas
     * con el ancho REAL del contenedor.
     */

    container-type:
      inline-size;

    overflow-x:auto !important;

    scroll-snap-type:
      x
      mandatory !important;

    scroll-padding-left:
      72px !important;

    overscroll-behavior-x:
      contain;

    -webkit-overflow-scrolling:
      touch;

    box-shadow:
      inset -12px 0 12px -14px
      rgba(26,57,86,.55),
      var(--r8g-shadow);
  }


  /*
   * 3 pantallas:
   *
   * 1 · MT + fecha + suministros
   * 2 · MT + medidor + balance
   * 3 · MT + SBBT + evolución
   */

  .r8gReiTable{
    width:
      calc(
        300cqw - 144px
      ) !important;

    min-width:
      calc(
        300cqw - 144px
      ) !important;

    table-layout:
      fixed !important;
  }


  /* MT fija */

  .r8gReiColMt{
    width:
      72px !important;

    min-width:
      72px !important;

    max-width:
      72px !important;
  }


  /* PÁGINA 1 */

  .r8gReiColDate{
    width:
      82px !important;

    min-width:
      82px !important;

    max-width:
      82px !important;
  }


  .r8gReiColSupplies{
    width:
      calc(
        100cqw - 154px
      ) !important;

    min-width:
      calc(
        100cqw - 154px
      ) !important;

    max-width:
      calc(
        100cqw - 154px
      ) !important;
  }


  /* PÁGINA 2 */

  .r8gReiColMeter{
    width:
      calc(
        46cqw - 33px
      ) !important;

    min-width:
      calc(
        46cqw - 33px
      ) !important;

    max-width:
      calc(
        46cqw - 33px
      ) !important;
  }


  .r8gReiColBalance{
    width:
      calc(
        54cqw - 39px
      ) !important;

    min-width:
      calc(
        54cqw - 39px
      ) !important;

    max-width:
      calc(
        54cqw - 39px
      ) !important;
  }


  /* PÁGINA 3 */

  .r8gReiColSbbt{
    width:
      calc(
        40cqw - 29px
      ) !important;

    min-width:
      calc(
        40cqw - 29px
      ) !important;

    max-width:
      calc(
        40cqw - 29px
      ) !important;
  }


  .r8gReiColEvolution{
    width:
      calc(
        60cqw - 43px
      ) !important;

    min-width:
      calc(
        60cqw - 43px
      ) !important;

    max-width:
      calc(
        60cqw - 43px
      ) !important;
  }


  /*
   * Snap únicamente en inicios de página.
   */

  .r8gReiTable thead
  th:nth-child(2),

  .r8gReiTable thead
  th:nth-child(4),

  .r8gReiTable thead
  th:nth-child(6){
    scroll-snap-align:
      start !important;

    scroll-snap-stop:
      always !important;

    scroll-margin-left:
      72px !important;
  }


  /* ==========================================================
     HISTÓRICO MÓVIL
     ========================================================== */

  .r8gReiEvolutionWithHistory{
    gap:5px;
  }


  .r8gReiHistoryToggle{
    min-width:39px;
    height:25px;

    gap:3px;

    padding:
      0
      5px;

    font-size:7px;
  }


  .r8gReiHistorySymbol{
    width:17px;
    height:17px;

    font-size:13px;
  }


  .r8gReiHistoryBadge{
    min-height:16px;

    padding:
      0
      5px;

    font-size:5.5px;
  }


  .r8gReiHistoryLabel{
    font-size:5.5px;
  }

}


/* ============================================================
 * SIGOS_V37_R8G_LEGIBILIDAD_HISTORICO_V3E
 *
 * Objetivo:
 * - mejorar legibilidad móvil sin tocar la lógica
 * - evitar sensación de información cortada
 * - mantener layout V3D
 * - cambiar histórico violeta/rosado a amarillo suave premium
 * ============================================================ */


/* ============================================================
   HISTÓRICO · COLOR PREMIUM AMARILLO
   ============================================================ */

.r8gReiHistoryRow td{
  border-top:1px solid #f0dfaa !important;
  background:#fffbf1 !important;
}

.r8gReiHistoryRow
.r8gReiSticky{
  background:#fff6df !important;
  border-left:3px solid #d6aa42 !important;
}

.r8gReiHistoryBadge{
  border:1px solid #efd89a !important;
  background:#fff0bf !important;
  color:#8d6915 !important;
}

.r8gReiHistoryLabel{
  color:#9b781c !important;
}

.r8gReiHistoryEmpty{
  color:#8b7434 !important;
}

.r8gReiHistoryToggle.open{
  border-color:#efd28a !important;
  background:#fff5db !important;
  color:#8c6916 !important;
}

.r8gReiHistoryToggle.open
.r8gReiHistorySymbol{
  background:#ffe9af !important;
  color:#8e6912 !important;
}


/* ============================================================
   DESKTOP
   No apilar ni perder limpieza
   ============================================================ */

@media (min-width:641px){

  .r8gReiFilters{
    align-items:center !important;
  }

  .r8gReiRangeSwiperV3B{
    align-items:center !important;
  }

  .r8gReiFixedFiltersV3B{
    align-items:center !important;
  }

}


/* ============================================================
   MOBILE
   Más legible, más compacto y sin cortes feos
   ============================================================ */

@media (max-width:640px){

  /* ----------------------------------------------------------
     FILTROS
     ---------------------------------------------------------- */

  .r8gReiRangeSwiperV3B{
    gap:4px !important;
    padding:0 8px 0 0 !important;
  }

  .r8gReiRangePageV3B
  .r8gReiChip{
    padding:0 8px !important;
    font-size:6.15px !important;
  }


  /* ----------------------------------------------------------
     KPI / TOOLBAR
     ---------------------------------------------------------- */

  .r8gReiFixedFiltersV3B{
    gap:4px !important;
  }

  .r8gReiFixedFiltersV3B
  .r8gReiEvolution{
    font-size:5.7px !important;
  }

  .r8gReiFixedFiltersV3B
  .r8gReiApply{
    font-size:6.1px !important;
  }


  /* ----------------------------------------------------------
     TABLA
     Se conserva el sistema de vistas,
     pero se redistribuye mejor el espacio.
     ---------------------------------------------------------- */

  .r8gReiTableViewport.r8fTableViewport{
    padding-right:8px !important;
  }

  .r8gReiTable{
    table-layout:fixed !important;
  }

  .r8gReiTable thead th,
  .r8gReiTable tbody td{
    padding:8px 7px !important;
    vertical-align:top !important;
  }

  .r8gReiTable tbody tr{
    height:auto !important;
  }

  .r8gReiTable tbody td{
    overflow:visible !important;
  }

  .r8gReiTable .r8gReiSticky{
    padding:8px 7px !important;
  }

  .r8gReiMtCode{
    font-size:8px !important;
    line-height:1.05 !important;
  }

  .r8gReiMtSub{
    font-size:5px !important;
    line-height:1.15 !important;
  }

  .r8gReiDate{
    font-size:7px !important;
    line-height:1.1 !important;
  }


  /* ----------------------------------------------------------
     Rebalanceo de columnas móviles
     Más espacio a Balance, SBBT y Evolución
     ---------------------------------------------------------- */

  .r8gReiColMeter{
    width:calc(42cqw - 30px) !important;
    min-width:calc(42cqw - 30px) !important;
    max-width:calc(42cqw - 30px) !important;
  }

  .r8gReiColBalance{
    width:calc(58cqw - 42px) !important;
    min-width:calc(58cqw - 42px) !important;
    max-width:calc(58cqw - 42px) !important;
  }

  .r8gReiColSbbt{
    width:calc(34cqw - 25px) !important;
    min-width:calc(34cqw - 25px) !important;
    max-width:calc(34cqw - 25px) !important;
  }

  .r8gReiColEvolution{
    width:calc(66cqw - 47px) !important;
    min-width:calc(66cqw - 47px) !important;
    max-width:calc(66cqw - 47px) !important;
  }


  /* ----------------------------------------------------------
     Legibilidad interna en columnas pesadas
     ---------------------------------------------------------- */

  .r8gReiTable tbody td:nth-child(4),
  .r8gReiTable tbody td:nth-child(5),
  .r8gReiTable tbody td:nth-child(6),
  .r8gReiTable tbody td:nth-child(7){
    font-size:6px !important;
    line-height:1.18 !important;
  }

  .r8gReiTable tbody td:nth-child(4) *,
  .r8gReiTable tbody td:nth-child(5) *,
  .r8gReiTable tbody td:nth-child(6) *,
  .r8gReiTable tbody td:nth-child(7) *{
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }


  /* Los chips/insignias deben seguir compactos */

  .r8gReiTable tbody td:nth-child(5) button,
  .r8gReiTable tbody td:nth-child(6) button,
  .r8gReiTable tbody td:nth-child(7) button,
  .r8gReiTable tbody td:nth-child(5) .r8gReiHistoryToggle,
  .r8gReiTable tbody td:nth-child(6) .r8gReiHistoryToggle,
  .r8gReiTable tbody td:nth-child(7) .r8gReiHistoryToggle{
    white-space:nowrap !important;
  }


  /* ----------------------------------------------------------
     Ajustes finos de histórico en móvil
     ---------------------------------------------------------- */

  .r8gReiHistoryBadge{
    font-size:5.6px !important;
  }

  .r8gReiHistoryLabel{
    font-size:5.4px !important;
    line-height:1.1 !important;
  }

  .r8gReiHistoryToggle{
    min-width:39px !important;
    height:25px !important;
    font-size:7px !important;
  }

  .r8gReiHistorySymbol{
    width:17px !important;
    height:17px !important;
    font-size:13px !important;
  }

}


/* ============================================================
 * SIGOS_V37_R8G_FINAL_TABLE_MOBILE_AND_MRTC_CSS
 *
 * Objetivo:
 * - tabla móvil igual a escritorio, solo compacta y con scroll horizontal
 * - evita texto apilado / cortado
 * - mantiene primera columna sticky
 * - filtro fijo adicional: No coincide M/RTC
 * ============================================================ */

.r8gMrMismatchChip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  height:40px !important;
  padding:0 14px !important;
  border-radius:999px !important;
  border:1px solid #c8d6e6 !important;
  background:#ffffff !important;
  color:#5a6f86 !important;
  font-weight:800 !important;
  font-size:14px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition:all .18s ease !important;
  flex:0 0 auto !important;
}

.r8gMrMismatchChip:hover{
  border-color:#afc7e0 !important;
  background:#f8fbff !important;
}

.r8gMrMismatchChip.is-active{
  border-color:#b8dec2 !important;
  background:#eefaf0 !important;
  color:#1c7b45 !important;
}

.r8gMrMismatchCount{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:24px !important;
  height:24px !important;
  padding:0 8px !important;
  border-radius:999px !important;
  background:#e7f5ea !important;
  color:#1c7b45 !important;
  font-size:13px !important;
  font-weight:900 !important;
}

.r8gReiHistoryRow td{
  background:#fffaf0 !important;
  border-top:1px solid #efdca9 !important;
}

.r8gReiHistoryRow .r8gReiSticky{
  background:#fff3d9 !important;
  border-left:3px solid #d8ac47 !important;
}

.r8gReiHistoryBadge{
  background:#ffefbc !important;
  border:1px solid #ead089 !important;
  color:#8a6717 !important;
}

.r8gReiHistoryLabel{
  color:#9b7b24 !important;
}

@media (max-width:640px){

  /* NO tocar buscador ni botón Buscar */
  /* Solo hacer la tabla realmente usable */

  .r8gReiTableViewport.r8fTableViewport{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    padding-bottom:10px !important;
    padding-right:0 !important;
  }

  .r8gReiTable{
    width:1120px !important;
    min-width:1120px !important;
    max-width:none !important;
    table-layout:fixed !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
  }

  .r8gReiTable thead th,
  .r8gReiTable tbody td{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    vertical-align:top !important;
    padding:10px 10px !important;
    font-size:11px !important;
    line-height:1.22 !important;
  }

  .r8gReiTable th:nth-child(1),
  .r8gReiTable td:nth-child(1){
    width:110px !important;
    min-width:110px !important;
    max-width:110px !important;
  }

  .r8gReiTable th:nth-child(2),
  .r8gReiTable td:nth-child(2){
    width:145px !important;
    min-width:145px !important;
    max-width:145px !important;
  }

  .r8gReiTable th:nth-child(3),
  .r8gReiTable td:nth-child(3){
    width:170px !important;
    min-width:170px !important;
    max-width:170px !important;
  }

  .r8gReiTable th:nth-child(4),
  .r8gReiTable td:nth-child(4){
    width:250px !important;
    min-width:250px !important;
    max-width:250px !important;
  }

  .r8gReiTable th:nth-child(5),
  .r8gReiTable td:nth-child(5){
    width:230px !important;
    min-width:230px !important;
    max-width:230px !important;
  }

  .r8gReiTable th:nth-child(6),
  .r8gReiTable td:nth-child(6){
    width:165px !important;
    min-width:165px !important;
    max-width:165px !important;
  }

  .r8gReiTable th:nth-child(7),
  .r8gReiTable td:nth-child(7){
    width:210px !important;
    min-width:210px !important;
    max-width:210px !important;
  }

  .r8gReiTable th:first-child,
  .r8gReiTable td:first-child,
  .r8gReiTable .r8gReiSticky{
    position:sticky !important;
    left:0 !important;
    z-index:3 !important;
    background:inherit !important;
  }

  .r8gReiMtCode{
    font-size:14px !important;
    line-height:1.05 !important;
    font-weight:900 !important;
  }

  .r8gReiMtSub{
    font-size:10px !important;
    line-height:1.15 !important;
  }

  .r8gReiDate{
    font-size:12px !important;
    line-height:1.1 !important;
  }

  .r8gReiHistoryBadge{
    font-size:9px !important;
    line-height:1 !important;
  }

  .r8gReiHistoryLabel{
    font-size:10px !important;
    line-height:1.1 !important;
  }

  .r8gMrMismatchChip{
    height:38px !important;
    padding:0 12px !important;
    font-size:12px !important;
  }

  .r8gMrMismatchCount{
    min-width:22px !important;
    height:22px !important;
    font-size:12px !important;
  }

}

@media (min-width:641px){

  .r8gReiFilters,
  .r8gReiRangeSwiperV3B,
  .r8gReiFixedFiltersV3B{
    align-items:center !important;
  }

  .r8gMrMismatchChip{
    height:42px !important;
  }

}


/* ============================================================
 * SIGOS_V37_R8G_STICKY_AND_SPECIAL_FILTERS_V3F
 *
 * 1. MT sticky OPACO.
 * 2. Filtros especiales independientes.
 * 3. Mobile: swipe dentro del slot Evolución.
 * 4. Desktop: tres chips visibles.
 * ============================================================ */


/* Botón combinado anterior: fuera de la UI */
.r8gMrMismatchChip{
  display:none !important;
}


/* ============================================================
   MT STICKY · OPACO SIEMPRE
   ============================================================ */

.r8gReiTable
thead
.r8gReiSticky{
  position:sticky !important;
  left:0 !important;

  z-index:30 !important;

  background:#f7f9fc !important;
  background-color:#f7f9fc !important;
  background-clip:padding-box !important;

  opacity:1 !important;

  box-shadow:
    9px 0 13px -14px
    rgba(25,52,79,.95) !important;
}


.r8gReiTable
tbody
.r8gReiCurrentRow
>
.r8gReiSticky{
  position:sticky !important;
  left:0 !important;

  z-index:25 !important;

  background:#ffffff !important;
  background-color:#ffffff !important;
  background-clip:padding-box !important;

  opacity:1 !important;

  isolation:isolate;

  box-shadow:
    9px 0 13px -14px
    rgba(25,52,79,.95) !important;
}


.r8gReiTable
tbody
.r8gReiHistoryRow
>
.r8gReiSticky{
  position:sticky !important;
  left:0 !important;

  z-index:25 !important;

  background:#fff3d9 !important;
  background-color:#fff3d9 !important;
  background-clip:padding-box !important;

  opacity:1 !important;

  isolation:isolate;

  border-left:
    3px solid
    #d8ac47 !important;

  box-shadow:
    9px 0 13px -14px
    rgba(94,70,20,.45) !important;
}


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

.r8gSpecialFilterViewportV3F{
  min-width:0;
}

.r8gSpecialFilterTrackV3F{
  display:flex;
  align-items:center;
}

.r8gSpecialFilterChipV3F{
  flex:0 0 auto !important;

  color:#257d46 !important;
  background:#f2faf5 !important;

  border-color:#cce8d5 !important;

  font-weight:850 !important;
}

.r8gSpecialFilterChipV3F.active{
  color:#147d3e !important;
  background:#e6f7eb !important;

  border-color:#91d2a8 !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(20,125,62,.04);
}


/* ============================================================
   DESKTOP
   Evolución + Medidor + RTC + Aplicar
   todos horizontales.
   ============================================================ */

@media (min-width:641px){

  .r8gReiFixedFiltersV3B{
    display:flex !important;

    flex-direction:row !important;
    flex-wrap:nowrap !important;

    align-items:center !important;

    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    gap:6px !important;
  }


  .r8gSpecialFilterViewportV3F{
    width:auto !important;

    overflow:visible !important;
  }


  .r8gSpecialFilterTrackV3F{
    display:flex !important;

    flex-direction:row !important;
    flex-wrap:nowrap !important;

    align-items:center !important;

    gap:6px !important;
  }


  .r8gSpecialFilterTrackV3F
  .r8gReiEvolution,

  .r8gSpecialFilterChipV3F{
    width:auto !important;
    min-width:max-content !important;

    height:37px !important;
    min-height:37px !important;

    padding:
      0
      12px !important;

    font-size:
      10px !important;
  }


  .r8gReiFixedFiltersV3B
  .r8gReiApply{
    flex:0 0 auto !important;

    width:auto !important;
    min-width:max-content !important;

    height:37px !important;
    min-height:37px !important;

    padding:
      0
      15px !important;
  }

}


/* ============================================================
   MOBILE
   [rangos swipe] [filtro especial swipe] [Aplicar]

   filtro especial:
      Evolución
         ↔
      No coincide Medidor
         ↔
      No coincide RTC
   ============================================================ */

@media (max-width:640px){

  .r8gReiFilters{
    grid-template-columns:
      minmax(0,1fr)
      174px !important;

    gap:4px !important;
  }


  .r8gReiFixedFiltersV3B{
    display:grid !important;

    grid-template-columns:
      124px
      46px !important;

    grid-template-rows:
      26px !important;

    align-items:center !important;

    width:174px !important;
    min-width:174px !important;
    max-width:174px !important;

    height:26px !important;

    gap:4px !important;

    margin:0 !important;
    padding:0 !important;
  }


  /* SWIPE INDEPENDIENTE */

  .r8gSpecialFilterViewportV3F{
    grid-column:1 !important;
    grid-row:1 !important;

    width:124px !important;
    min-width:124px !important;
    max-width:124px !important;

    height:26px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    scroll-snap-type:
      x
      mandatory !important;

    scroll-padding-inline:
      0 !important;

    overscroll-behavior-x:
      contain;

    -webkit-overflow-scrolling:
      touch;

    scrollbar-width:none;

    border-radius:
      999px;
  }


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


  .r8gSpecialFilterTrackV3F{
    display:flex !important;

    flex-direction:row !important;
    flex-wrap:nowrap !important;

    align-items:center !important;

    width:max-content !important;

    height:26px !important;

    gap:0 !important;
  }


  /*
   * Cada filtro ocupa exactamente
   * el mismo slot de 124px.
   */

  .r8gSpecialFilterTrackV3F
  .r8gReiEvolution,

  .r8gSpecialFilterChipV3F{
    flex:
      0
      0
      124px !important;

    width:124px !important;
    min-width:124px !important;
    max-width:124px !important;

    height:26px !important;
    min-height:26px !important;
    max-height:26px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    gap:3px !important;

    margin:0 !important;

    padding:
      0
      4px !important;

    border-radius:
      999px !important;

    font-size:
      5.6px !important;

    line-height:
      1 !important;

    white-space:
      nowrap !important;

    scroll-snap-align:
      start !important;

    scroll-snap-stop:
      always !important;
  }


  .r8gSpecialFilterTrackV3F
  .r8gReiChipCount{
    flex:
      0
      0
      15px !important;

    width:15px !important;
    min-width:15px !important;
    max-width:15px !important;

    height:15px !important;
    min-height:15px !important;

    font-size:
      5.5px !important;
  }


  /*
   * Aplicar siempre visible.
   */

  .r8gReiFixedFiltersV3B
  .r8gReiApply{
    grid-column:2 !important;
    grid-row:1 !important;

    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;

    height:26px !important;
    min-height:26px !important;

    margin:0 !important;

    padding:0 !important;

    font-size:
      6px !important;
  }

}