/* ==========================================================
   Unibot Gerencial — consola de consulta multiplanta
   Sistema visual heredado de Operaciones Unibot: rediseño
   "gradiente animado", blanco + rojo UNIGAS, medidores con
   líquido, Roboto / Roboto Mono. Las clases op- se conservan
   tal cual para que las pestañas de autotanques y almacenes se
   vean identicas; lo propio de esta consola va con prefijo gr-.
   — Eduardo Luna · 2026
   ========================================================== */

:root {
  /* Marca */
  --rojo:        #DC2C35;
  --rojo-osc:    #c11f28;
  --rojo-link:   #a91d25;
  --rojo-bg:     #fdecec;

  /* Tinta */
  --tinta:       #232529;
  --tinta-fuerte:#17181b;
  --tinta-media: #55575c;
  --gris:        #909298;
  --gris-claro:  #b3b4b7;
  --gris-tenue:  #a5a7ab;

  /* Superficies */
  --fondo:       #ffffff;
  --fondo-2:     #fbfbfc;
  --fondo-3:     #f1f1f3;
  --fondo-4:     #f4f4f6;
  --pista:       #eef0f2;
  --linea:       #e7e8ea;
  --linea-suave: #ececee;
  --linea-fila:  #f2f2f4;
  --linea-inp:   #e2e3e6;

  /* Semáforo */
  --verde:       #1f8a4a;
  --verde-bg:    #e7f6ec;
  --verde-punto: #59f0a6;
  --ambar:       #a06a10;
  --ambar-txt:   #b97a14;
  --ambar-bg:    #fdf3e0;
  --aviso-bg:    #fdf6e8;
  --aviso-bd:    #f0dcae;
  --aviso-fg:    #8a6510;

  /* Líquido del medidor */
  --liq-h: linear-gradient(90deg, #54b4ee, #1b76c6);
  --liq-v: linear-gradient(180deg, #4fb0ea 6%, #1b76c6);
  --liq-burbuja: rgba(255, 255, 255, 0.8);

  --sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Roboto Mono", ui-monospace, Consolas, monospace;

  /* Duración del gradiente animado del encabezado */
  --grad-dur: 8s;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans);
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
#root { height: 100vh; display: flex; flex-direction: column; min-width: 1280px; }

a { color: var(--rojo); }
a:hover { color: var(--rojo-link); }
input, select, button, textarea { font-family: inherit; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--rojo) !important;
  box-shadow: 0 0 0 3px rgba(220, 44, 53, 0.10);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #dcdde0; border-radius: 6px; border: 3px solid #fff; }
::-webkit-scrollbar-thumb:hover { background: #c6c7cb; }

/* ——— Animaciones ——— */
@keyframes gradSlide { to { background-position-x: 200%; } }
@keyframes waveX     { to { background-position-x: 120px; } }
@keyframes riseT     { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .9; } 85% { opacity: .6; } 100% { transform: translateY(-150px); opacity: 0; } }
@keyframes riseF     { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: .9; } 100% { transform: translateY(-11px); opacity: 0; } }
@keyframes shimmer   { to { transform: translateX(340px) skewX(-18deg); } }
@keyframes pulseDot  { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 44, 53, .4); } 50% { box-shadow: 0 0 0 5px rgba(220, 44, 53, 0); } }
@keyframes slosh     { 0% { transform: rotate(0deg) translateX(0); }
                       14% { transform: rotate(-10deg) translateX(-3%); }
                       36% { transform: rotate(7.5deg) translateX(2.5%); }
                       56% { transform: rotate(-4.5deg) translateX(-1.6%); }
                       73% { transform: rotate(2.5deg) translateX(.9%); }
                       87% { transform: rotate(-1.2deg) translateX(-.4%); }
                      100% { transform: rotate(0deg) translateX(0); } }
@keyframes toastIn   { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes girar     { to { transform: rotate(360deg); } }

/* ==========================================================
   Encabezado
   ========================================================== */
.op-hdr {
  display: flex; align-items: center; gap: 16px;
  height: 64px; padding: 0 22px; flex: none;
  background: linear-gradient(180deg, #e6414a, #DC2C35 55%, #c62129);
  color: #fff; position: relative; z-index: 10;
}
.op-hdr-mascota {
  height: 116px; width: auto; margin-top: 31px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .3));
  position: relative; z-index: 11; pointer-events: none;
}
/* nowrap + flex:none: con el conmutador de planta al lado el encabezado se
   comprime y "UNIBOT GERENCIAL" se partía en dos renglones. — Eduardo Luna · 2026 */
.op-hdr-marca { font-weight: 900; font-size: 19px; letter-spacing: 1.5px; line-height: 1; white-space: nowrap; }
.op-hdr-sub {
  font-size: 9px; letter-spacing: 2.8px; font-weight: 500;
  color: rgba(255, 255, 255, .82); margin-top: 3px; white-space: nowrap;
}
.op-hdr > div:first-of-type { flex: none; }
/* Los KPIs son lo único que puede encogerse en el encabezado: con el
   conmutador de planta ocupando su espacio, sin esto el botón SALIR se salía
   de la pantalla. No se puede usar overflow en .op-hdr porque la mascota
   sobresale del encabezado a propósito. — Eduardo Luna · 2026 */
.op-hdr-kpis { display: flex; margin-left: 22px; min-width: 0; overflow: hidden; }
.op-hdr-kpi { padding: 0 12px; border-left: 1px solid rgba(255, 255, 255, .25); white-space: nowrap; }
.op-hdr-kpi:last-child { border-right: 1px solid rgba(255, 255, 255, .25); }
.op-hdr-kpi .k {
  font-size: 8.5px; letter-spacing: 1.8px; font-weight: 600;
  color: rgba(255, 255, 255, .75); white-space: nowrap;
}
.op-hdr-kpi .v { font: 700 17px var(--mono); margin-top: 2px; white-space: nowrap; }
.op-hdr-sep { flex: 1; }
.op-hdr-logo { height: 36px; width: auto; margin-right: 10px; }

.op-db { display: flex; align-items: center; gap: 7px; }
.op-db .punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--verde-punto); box-shadow: 0 0 8px rgba(89, 240, 166, .9);
}
.op-db.off .punto { background: #ffd0d2; box-shadow: 0 0 8px rgba(255, 150, 150, .8); }
.op-db .lbl { font-size: 9.5px; letter-spacing: 1.5px; font-weight: 600; color: rgba(255, 255, 255, .85); }

.op-reloj { text-align: right; margin-left: 8px; }
.op-reloj .d { font-size: 8.5px; letter-spacing: 1.5px; color: rgba(255, 255, 255, .75); font-weight: 600; }
.op-reloj .h { font: 600 15px var(--mono); margin-top: 1px; }

.op-user {
  display: flex; align-items: center; gap: 8px; margin-left: 8px;
  background: rgba(255, 255, 255, .15); border-radius: 999px; padding: 4px 13px 4px 5px;
}
.op-user .ini {
  width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--rojo);
  display: grid; place-items: center; font: 700 12px var(--mono);
}
.op-user .nom {
  font-size: 11px; font-weight: 600; letter-spacing: .5px; max-width: 150px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase;
}
.op-hdr-btn {
  background: none; border: 1px solid rgba(255, 255, 255, .45); color: #fff;
  font-size: 9.5px; letter-spacing: 1.5px; font-weight: 600;
  border-radius: 8px; padding: 7px 12px; cursor: pointer; margin-left: 8px;
  display: inline-flex; align-items: center; gap: 6px;
}
.op-hdr-btn:hover { background: rgba(255, 255, 255, .15); }

/* Banda de gradiente animado */
.op-grad {
  height: 5px; flex: none;
  background: linear-gradient(90deg, #0066ff, #00b894, #00c918, #9be000, #ffef00, #9be000, #00c918, #00b894, #0066ff);
  background-size: 200% 100%;
  animation: gradSlide var(--grad-dur) linear infinite;
}

/* ==========================================================
   Estructura
   ========================================================== */
.op-stage { flex: 1; display: grid; grid-template-columns: 268px 1fr; min-height: 0; }
/* El panel crece de 372 a 506 px para que la ilustración del autotanque salga
   un 40% más grande sin desbordarse. — handoff 3, Eduardo Luna · 2026 */
.op-stage.con-panel { grid-template-columns: 268px 1fr 506px; }

.op-side {
  border-right: 1px solid var(--linea-suave); background: var(--fondo-2);
  overflow-y: auto; padding: 16px 14px;
  display: flex; flex-direction: column; gap: 13px;
}
.op-main { overflow-y: auto; min-width: 0; background: var(--fondo); }
.op-panel {
  border-left: 1px solid var(--linea-suave); background: var(--fondo);
  overflow-y: auto; padding: 15px 16px;
  display: flex; flex-direction: column; gap: 13px;
}

.op-rot { font-size: 9px; letter-spacing: 2.4px; color: var(--gris-claro); font-weight: 700; }
.op-lbl { font-size: 9px; letter-spacing: 2px; color: var(--gris-claro); font-weight: 700; }

/* ==========================================================
   Barra lateral
   ========================================================== */
.op-existencia {
  background: #fff; border: 1.5px solid var(--linea); border-radius: 12px; padding: 13px 14px;
}
.op-existencia .k { font-size: 8.5px; letter-spacing: 2px; color: var(--gris-claro); font-weight: 600; }
.op-existencia .v { font: 800 23px var(--mono); color: var(--tinta-fuerte); margin: 5px 0 2px; }
.op-existencia .sub { font: 500 10.5px var(--mono); color: var(--gris); }
.op-barra {
  position: relative; height: 8px; background: var(--pista);
  border-radius: 5px; overflow: hidden; margin-top: 9px;
}
.op-barra i {
  position: absolute; top: 0; bottom: 0; left: 0; border-radius: 5px;
  background: var(--liq-h); transition: width .7s cubic-bezier(.3, .8, .3, 1);
}

.op-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.op-kpi { background: #fff; border: 1.5px solid var(--linea); border-radius: 10px; padding: 9px 11px; }
.op-kpi .k { font-size: 8px; letter-spacing: 1.6px; color: var(--gris-claro); font-weight: 600; }
/* 13px y nowrap: los totales de planta llegan a 7 cifras ("3,240,577 L") y a
   14px se partían en dos renglones dentro de la tarjeta. — Eduardo Luna · 2026 */
.op-kpi .v {
  font: 700 13px var(--mono); color: var(--tinta-fuerte); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.op-kpi .v.verde { color: var(--verde); }
.op-kpi .v.rojo  { color: var(--rojo); }

.op-aviso {
  background: var(--aviso-bg); border: 1px solid var(--aviso-bd); border-radius: 10px;
  padding: 9px 12px; font-size: 10.5px; line-height: 1.45; color: var(--aviso-fg);
  cursor: pointer; text-align: left; width: 100%; font-family: inherit;
}
.op-aviso:hover { border-color: #e2c684; }

.op-campo { display: flex; flex-direction: column; gap: 6px; }
.op-inp {
  width: 100%; height: 34px; border: 1.5px solid var(--linea-inp); border-radius: 9px;
  padding: 0 11px; font-size: 12px; background: #fff; color: var(--tinta);
}
.op-inp.mono { font: 600 13px var(--mono); }
textarea.op-inp { height: auto; padding: 8px 11px; resize: vertical; }
.op-sel {
  width: 100%; height: 34px; border: 1.5px solid var(--linea-inp); border-radius: 9px;
  padding: 0 8px; font-size: 12px; background: #fff; color: var(--tinta); cursor: pointer;
}

.op-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.op-chip {
  padding: 6px 11px; border-radius: 999px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .8px; cursor: pointer;
  background: #fff; color: var(--tinta-media); border: 1.5px solid var(--linea-inp);
}
.op-chip:hover { border-color: #cfd0d4; }
.op-chip.on { background: var(--rojo); color: #fff; border-color: var(--rojo); }

/* El logo va al TOPE del lateral (handoff 2). */
.op-side-logo { display: flex; justify-content: center; padding-bottom: 2px; }
.op-side-logo img { width: 82%; height: auto; opacity: .95; }
.op-side-pie { margin-top: auto; padding-top: 12px; display: flex; justify-content: center; }
.op-side-pie img { width: 82%; height: auto; opacity: .9; }

/* ==========================================================
   Barra de vistas
   ========================================================== */
.op-bar {
  display: flex; align-items: center; gap: 14px; padding: 11px 18px;
  border-bottom: 1px solid var(--linea-suave); position: sticky; top: 0;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); z-index: 5;
}
.op-tabs { display: inline-flex; background: var(--fondo-3); border-radius: 10px; padding: 3px; gap: 2px; }
.op-tab {
  border: none; border-radius: 8px; padding: 7px 16px; font-size: 10.5px;
  font-weight: 700; letter-spacing: 1.2px; cursor: pointer;
  background: none; color: #7a7c81;
}
.op-tab.on { background: #fff; color: var(--tinta-fuerte); box-shadow: 0 1px 3px rgba(20, 22, 26, .12); }
.op-cuenta { font-size: 10.5px; color: var(--gris-claro); }

/* ==========================================================
   Rejilla de autotanques
   ========================================================== */
.op-grid {
  padding: 14px 18px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 11px;
}
/* Los almacenes van 40% mas grandes que las tarjetas de flota. El minimo es
   320 y no 353 (=252x1.4) porque con auto-fill+1fr la columna se estira para
   repartir el sobrante: 353 tiraba una columna de mas y crecia ~70%.
   — handoff 4, Eduardo Luna · 2026 */
.op-grid.alm { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.op-card {
  background: #fff; border: 1.5px solid var(--linea); border-radius: 12px;
  padding: 12px 13px 10px; cursor: pointer; text-align: left; width: 100%;
  font-family: inherit; color: inherit; display: block;
  box-shadow: 0 1px 2px rgba(20, 22, 26, .04);
  transition: border-color .15s, box-shadow .15s;
}
.op-card:hover { box-shadow: 0 3px 10px rgba(20, 22, 26, .09); }
.op-card.sin-cap { border: 1.5px dashed #e0c17e; }
.op-card.sel { border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(220, 44, 53, .13); }

.op-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.op-eco { font: 800 19px var(--mono); color: var(--tinta-fuerte); }
.op-placas { font: 500 10px var(--mono); color: var(--gris-claro); letter-spacing: .5px; }
.op-card-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; }
.op-marca {
  font-size: 10.5px; color: var(--gris);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.op-cap { font: 500 10px var(--mono); color: var(--gris); flex: none; }

.op-card-nivel {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 10px;
}
.op-card-nivel .izq { display: flex; align-items: center; gap: 6px; min-width: 0; }
.op-pct { font: 700 17px var(--mono); color: var(--tinta-fuerte); }
.op-pct.crit  { color: var(--rojo); }
.op-pct.bajo  { color: var(--ambar-txt); }
.op-pct.lleno { color: var(--verde); }
.op-pct.nada  { color: var(--gris-claro); }
.op-litros { font: 600 11px var(--mono); color: var(--tinta-media); flex: none; }

.op-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 8px var(--sans); letter-spacing: 1px; padding: 3px 7px; border-radius: 6px;
  white-space: nowrap;
}
.op-badge .lat {
  width: 5px; height: 5px; border-radius: 50%; background: var(--rojo);
  animation: pulseDot 1.5s infinite;
}
.op-badge.crit  { background: var(--rojo-bg);  color: var(--rojo); }
.op-badge.bajo  { background: var(--ambar-bg); color: var(--ambar); }
.op-badge.lleno { background: var(--verde-bg); color: var(--verde); }
.op-badge.vacio { background: var(--fondo-4);  color: #6b6d72; }
.op-badge.pend  { background: var(--rojo);     color: #fff; }
.op-badge.nocap { background: var(--ambar-bg); color: var(--ambar); }

/* Medidor con líquido */
.op-meter {
  position: relative; height: 12px; background: var(--pista);
  border-radius: 7px; overflow: hidden; margin-top: 5px;
}
.op-meter .liq {
  position: absolute; top: 0; bottom: 0; left: 0; border-radius: 7px;
  background: var(--liq-h); overflow: hidden;
  transition: width .7s cubic-bezier(.3, .8, .3, 1);
}
.op-meter .brillo {
  position: absolute; top: 1px; left: 6px; right: 6px; height: 2px;
  border-radius: 2px; background: rgba(255, 255, 255, .55);
}
.op-meter .destello {
  position: absolute; top: 0; bottom: 0; left: -60px; width: 46px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-18deg); animation: shimmer 3.2s ease-in-out infinite;
}
.op-meter .burbuja {
  position: absolute; bottom: 1px; border-radius: 50%;
  background: rgba(255, 255, 255, .85); animation: riseF 2.6s linear infinite;
}
.op-meter .rayas {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, #f5f5f7 0 6px, #ebebee 6px 12px);
}
.op-meter .marca { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(20, 22, 26, .10); }

.op-card-pie {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 9px;
}
.op-tiempo {
  font: 600 8.5px var(--mono); letter-spacing: .6px; padding: 3px 7px; border-radius: 6px;
  white-space: nowrap;
}
.op-tiempo.hoy   { background: var(--verde-bg); color: var(--verde); }
.op-tiempo.viejo { background: var(--ambar-bg); color: var(--ambar); }
.op-tiempo.nunca { background: var(--rojo-bg);  color: var(--rojo); }
/* Origen del nivel: SALIDA/LLEGADA (Control de Flota) o CAPTURA (esta app).
   — handoff 7, Eduardo Luna · 2026 */
.op-fuente {
  font: 700 8px var(--mono); letter-spacing: .9px; padding: 3px 7px;
  border-radius: 6px; white-space: nowrap; margin-right: auto;
  background: var(--fondo-4); color: #6b6d72;
}
.op-fuente.local { background: var(--rojo-bg); color: var(--rojo); }
.op-card-user { font-size: 9.5px; color: var(--gris-claro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================
   Panel de captura
   ========================================================== */
.op-panel-hd { display: flex; justify-content: space-between; align-items: center; }
.op-cerrar {
  border: none; background: var(--fondo-3); color: #6b6d72;
  width: 24px; height: 24px; border-radius: 7px; cursor: pointer; font-size: 13px; line-height: 1;
}
.op-cerrar:hover { background: #e8e8ea; }

.op-sel-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.op-sel-eco { font: 800 25px var(--mono); color: var(--tinta-fuerte); line-height: 1; }
.op-sel-meta { font-size: 10.5px; color: var(--gris); margin-top: 5px; }
.op-actual {
  font: 600 10.5px var(--mono); padding: 6px 9px; border-radius: 8px; flex: none;
  background: var(--fondo-4); color: var(--tinta-media); white-space: nowrap;
}
.op-actual.sin { background: var(--rojo-bg); color: var(--rojo); }

/* Ilustración del autotanque con el tanque llenándose.
   Tres capas apiladas sobre el mismo lienzo de 1167x457: la cuba plateada
   (autotanque-izusu-fondo.png), el líquido dentro del recorte y el camión al
   frente (autotanque-izusu.png), cuyo tanque va calado. Las medidas de
   .op-tanque-cuba salen del hueco real del PNG: x 455..1067, y 40..257.
   — Eduardo Luna · 2026 */
.op-tanque { position: relative; width: 100%; aspect-ratio: 1167 / 457; margin: 4px 0; }
.op-tanque > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none;
}
/* La cuba va 15px mas ancha y 15px mas alta que el hueco medido, crecida desde
   el centro: el sobrante lo tapa el amarillo del PNG frontal y el liquido llena
   la ventana de borde a borde. — handoff 5, Eduardo Luna · 2026 */
.op-tanque-cuba {
  position: absolute; left: calc(38.99% - 7.5px); top: calc(8.75% - 7.5px);
  width: calc(52.53% + 15px); height: calc(47.70% + 15px);
  border-radius: 999px; overflow: hidden; background: transparent;
}
/* Capa que se inclina al capturar: da el chapoteo del líquido. — handoff 2 */
.op-slosh {
  position: absolute; left: -42px; right: -42px; top: 0; bottom: -70px;
  transform-origin: 50% 100%;
}
.op-tanque-liq {
  position: absolute; left: 0; right: 0; bottom: 0;
  transition: height .8s cubic-bezier(.25, .9, .3, 1);
}
.op-tanque-liq .relleno { position: absolute; inset: 0; background: var(--liq-v); }
.op-ola { position: absolute; left: 0; right: 0; background-repeat: repeat-x; }
.op-ola.a { top: -10px; height: 11px; background-size: 120px 11px; animation: waveX 3.4s linear infinite; }
.op-ola.b { top: -6px;  height: 8px;  background-size: 60px 8px;  animation: waveX 2.1s linear infinite reverse; opacity: .55; }
/* Caja del burbujeo: recorta al líquido para que ninguna burbuja salga a flotar
   sobre el acero seco. Va aparte de .op-slosh —que se extiende fuera de la cuba
   para el chapoteo— y de las olas, que sí asoman por el borde de arriba.
   — handoff 3, Eduardo Luna · 2026 */
.op-burbujas { position: absolute; inset: 0; overflow: hidden; }
.op-burbuja { position: absolute; bottom: 4px; border-radius: 50%; background: var(--liq-burbuja); }
/* El porcentaje va suelto sobre el tanque (sin cápsula), corrido 20px a la
   derecha y 15px abajo del centro de la cuba. Se pinta por encima del PNG
   frontal, con halo blanco para que se lea sobre el logo y sobre el líquido.
   — handoff 3, Eduardo Luna · 2026 */
.op-tanque-pct {
  position: absolute; left: 38.99%; top: 8.75%; width: 52.53%; height: 47.70%;
  display: grid; place-items: center; pointer-events: none;
}
.op-tanque-pct span {
  transform: translate(50px, 30px);
  font: 800 22.5px var(--mono); color: var(--tinta-fuerte); white-space: nowrap;
  text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 10px rgba(255, 255, 255, .95),
               0 1px 2px rgba(255, 255, 255, .9);
}

.op-calc { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.op-calc .k { font-size: 8.5px; letter-spacing: 1.8px; color: var(--gris-claro); font-weight: 600; }
.op-calc .v { font: 800 30px var(--mono); color: var(--tinta-fuerte); line-height: 1.1; margin-top: 4px; }
.op-calc .v small { font-size: 13px; color: var(--gris); font-weight: 600; }
.op-calc .formula { font: 500 10px var(--mono); color: var(--gris-claro); margin-top: 4px; }
.op-delta {
  display: inline-flex; align-items: center; font: 700 10.5px var(--mono);
  padding: 6px 10px; border-radius: 8px; flex: none; white-space: nowrap;
  background: var(--fondo-4); color: #6b6d72;
}
.op-delta.entra { background: var(--verde-bg); color: var(--verde); }
.op-delta.sale  { background: var(--rojo-bg);  color: var(--rojo); }
.op-delta.ini   { background: var(--ambar-bg); color: var(--ambar); }

.op-pct-hd { display: flex; justify-content: space-between; align-items: baseline; }
.op-pct-hd .pista { font-size: 9px; color: var(--gris-claro); }
.op-slider { width: 100%; accent-color: var(--rojo); height: 26px; cursor: pointer; margin-top: 4px; }
.op-pct-row { display: flex; gap: 6px; align-items: center; }
.op-pct-inp { width: 74px; height: 32px; font: 600 13px var(--mono); }
.op-quick { display: flex; gap: 4px; flex: 1; justify-content: flex-end; }
.op-quick button {
  border: 1.5px solid var(--linea-inp); background: #fff; color: var(--tinta-media);
  border-radius: 7px; padding: 6px 0; width: 36px; font: 600 10px var(--mono); cursor: pointer;
}
.op-quick button:hover { border-color: var(--rojo); color: var(--rojo); }

.op-nota { font-size: 9.5px; color: var(--gris-claro); margin-top: 5px; }
.op-warn {
  background: var(--aviso-bg); border: 1px solid var(--aviso-bd); border-radius: 9px;
  padding: 8px 11px; font-size: 10px; line-height: 1.5; color: var(--aviso-fg); margin-top: 6px;
}
.op-err {
  background: var(--rojo-bg); border: 1px solid #f5c3c6; border-radius: 9px;
  padding: 9px 12px; font-size: 11px; line-height: 1.45; color: var(--rojo);
}
.op-hint { color: var(--verde); font-weight: 700; }

.op-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.op-acciones { display: flex; flex-direction: column; gap: 7px; }
.op-btn {
  height: 44px; border: none; border-radius: 10px; font-size: 12px; font-weight: 700;
  letter-spacing: 1.8px; background: var(--rojo); color: #fff; cursor: pointer;
}
.op-btn:hover:not(:disabled) { background: var(--rojo-osc); }
.op-btn:disabled { background: var(--linea-suave); color: var(--gris-tenue); cursor: not-allowed; }
.op-btn2 {
  height: 38px; background: #fff; border: 1.5px solid var(--rojo); color: var(--rojo);
  border-radius: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; cursor: pointer;
}
.op-btn2:hover:not(:disabled) { background: var(--rojo-bg); }
.op-btn2:disabled { border-color: var(--linea-suave); color: var(--gris-tenue); cursor: not-allowed; }
.op-btn-out {
  height: 34px; padding: 0 14px; border: 1.5px solid var(--rojo); color: var(--rojo);
  background: #fff; border-radius: 9px; font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; cursor: pointer;
}
.op-btn-out:hover { background: var(--rojo-bg); }
.op-btn-plano {
  height: 32px; padding: 0 12px; border: 1.5px solid var(--linea-inp); color: var(--tinta-media);
  background: #fff; border-radius: 8px; font-size: 10.5px; font-weight: 600; cursor: pointer;
}
.op-btn-plano:hover { border-color: #cfd0d4; }

/* Movimientos de la unidad */
.op-umovs { border: 1.5px solid var(--linea-suave); border-radius: 10px; overflow: hidden; }
.op-umov {
  display: grid; grid-template-columns: 78px 74px 1fr 70px; gap: 6px; align-items: center;
  padding: 7px 11px; border-bottom: 1px solid var(--linea-fila);
}
.op-umov:last-child { border-bottom: 0; }
.op-umov .f { font: 500 10px var(--mono); color: var(--gris); }
.op-umov .p { font: 600 10.5px var(--mono); color: var(--tinta); }
.op-umov .d { font: 700 10.5px var(--mono); text-align: right; }

.op-tipo {
  font: 700 8.5px var(--sans); letter-spacing: 1px; padding: 3px 8px;
  border-radius: 6px; display: inline-block; white-space: nowrap;
}
.op-tipo.chico { font-size: 8px; letter-spacing: .8px; padding: 2px 7px; border-radius: 5px; }
.op-tipo.carga    { background: var(--verde-bg); color: var(--verde); }
.op-tipo.descarga { background: var(--rojo-bg);  color: var(--rojo); }
.op-tipo.ajuste   { background: var(--fondo-4);  color: #6b6d72; }
.op-tipo.inicial  { background: var(--ambar-bg); color: var(--ambar); }
.op-sube { color: var(--verde); }
.op-baja { color: var(--rojo); }

/* ==========================================================
   Bitácora
   ========================================================== */
.op-bit { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.op-filtros-fila { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.op-filtro-k {
  font-size: 8.5px; letter-spacing: 1.6px; color: var(--gris-claro);
  font-weight: 600; margin-bottom: 4px;
}
.op-inp-sm {
  height: 32px; border: 1.5px solid var(--linea-inp); border-radius: 8px;
  padding: 0 8px; font-size: 11.5px; color: var(--tinta); background: #fff;
}
.op-bit-kpis { display: flex; gap: 8px; }
.op-bit-kpi {
  flex: 1; background: var(--fondo-2); border: 1.5px solid var(--linea);
  border-radius: 10px; padding: 10px 13px;
}
.op-bit-kpi .k { font-size: 8px; letter-spacing: 1.6px; color: var(--gris-claro); font-weight: 600; }
.op-bit-kpi .v { font: 700 16px var(--mono); color: var(--tinta-fuerte); margin-top: 3px; }
.op-bit-kpi .v.verde { color: var(--verde); }
.op-bit-kpi .v.rojo  { color: var(--rojo); }

.op-tabla { border: 1.5px solid var(--linea); border-radius: 12px; overflow: hidden; }
.op-fila {
  display: grid; grid-template-columns: 112px 86px 96px 62px 72px 84px 92px 1fr 84px;
  gap: 8px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--linea-fila);
}
.op-fila.head { background: var(--fondo-2); border-bottom: 1px solid var(--linea-suave); padding: 9px 14px; }
.op-fila.head span {
  font-size: 8.5px; letter-spacing: 1.4px; color: var(--gris-claro); font-weight: 700;
}
.op-fila.click { cursor: pointer; }
.op-fila.click:hover { background: #fafafa; }
.op-fila:last-child { border-bottom: 0; }
.op-c-fecha { font: 500 11px var(--mono); color: var(--tinta-media); white-space: nowrap; }
.op-c-eco   { font: 700 12px var(--mono); color: var(--tinta-fuerte); }
.op-c-num   { font: 600 11px var(--mono); color: var(--tinta); }
.op-c-num.tenue { font-weight: 500; color: var(--gris); }
.op-c-delta { font: 700 11px var(--mono); }
.op-c-ref {
  font: 500 11px var(--mono); color: var(--gris);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.op-c-user { font-size: 10px; color: var(--gris-claro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.op-vacio { padding: 60px 20px; text-align: center; color: var(--gris-claro); font-size: 13px; }

/* ==========================================================
   Toast
   ========================================================== */
.op-toast {
  position: fixed; right: 18px; bottom: 18px; background: #1d1f24; color: #fff;
  border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 10px 30px rgba(20, 22, 26, .3); animation: toastIn .25s ease-out; z-index: 70;
  max-width: 420px;
}
.op-toast .ico {
  width: 20px; height: 20px; border-radius: 50%; background: #2fae60; color: #fff;
  display: grid; place-items: center; font-size: 11px; flex: none;
}
.op-toast.err .ico { background: var(--rojo); }
.op-toast .txt { font: 600 12px var(--mono); }

/* ==========================================================
   Login
   ========================================================== */
.op-login {
  flex: 1; display: grid; place-items: center; background: var(--fondo-2);
  background-image: radial-gradient(900px 420px at 50% -8%, rgba(220, 44, 53, .10), transparent 65%);
}
.op-login-card {
  width: 380px; background: #fff; border: 1.5px solid var(--linea);
  border-radius: 18px; box-shadow: 0 18px 50px rgba(20, 22, 26, .10); overflow: hidden;
}
.op-login-top {
  background: linear-gradient(180deg, #e6414a, #DC2C35 55%, #c62129);
  padding: 16px 22px 14px; color: #fff; display: flex; align-items: center; gap: 12px;
  position: relative; z-index: 2;
}
/* La mascota sobresale del bloque rojo, como en el encabezado de la app. */
.op-login-top img {
  height: 122px; width: auto; margin: -18px -4px -30px 0;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .3)); position: relative; z-index: 3;
}
.op-login-top .t { font-weight: 900; font-size: 17px; letter-spacing: 1.3px; line-height: 1; }
.op-login-top .s {
  font-size: 8.5px; letter-spacing: 2.6px; color: rgba(255, 255, 255, .85);
  margin-top: 4px; font-weight: 500;
}
.op-login-body { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 6px; }
.op-login-body .op-lbl { margin-top: 8px; }
.op-login-body .op-btn { margin-top: 14px; }
.op-login-pie { padding: 0 22px 18px; display: flex; justify-content: center; }
.op-login-pie img { width: 62%; height: auto; opacity: .85; }

/* ==========================================================
   Modal (usuarios)
   ========================================================== */
.op-backdrop {
  position: fixed; inset: 0; background: rgba(20, 22, 26, .45);
  display: grid; place-items: center; z-index: 60; padding: 24px;
}
.op-modal {
  background: #fff; border-radius: 14px; width: 700px; max-width: 100%;
  max-height: 86vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(20, 22, 26, .3); overflow: hidden;
}
.op-modal-hd {
  padding: 14px 18px; border-bottom: 1px solid var(--linea-suave);
  display: flex; justify-content: space-between; align-items: center;
}
.op-modal-hd .t { font-size: 10.5px; letter-spacing: 2px; font-weight: 700; color: var(--tinta-fuerte); }
.op-modal-body { padding: 16px 18px; overflow-y: auto; }
.op-modal-pie {
  padding: 12px 18px; border-top: 1px solid var(--linea-suave);
  background: var(--fondo-2); display: flex; justify-content: flex-end; gap: 8px;
}
.op-usr-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 110px 90px; gap: 8px; align-items: center; }
.op-usr-tabla { margin-top: 14px; border: 1.5px solid var(--linea); border-radius: 10px; overflow: hidden; }
.op-usr-fila {
  display: grid; grid-template-columns: 46px 1fr 1.4fr 90px 70px 110px; gap: 8px;
  align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--linea-fila); font-size: 12px;
}
.op-usr-fila.head { background: var(--fondo-2); }
.op-usr-fila.head span {
  font-size: 8.5px; letter-spacing: 1.4px; color: var(--gris-claro); font-weight: 700;
}
.op-usr-fila:last-child { border-bottom: 0; }
.op-yo {
  font: 700 8px var(--sans); letter-spacing: 1px; padding: 2px 6px;
  border-radius: 5px; background: var(--rojo-bg); color: var(--rojo); margin-left: 6px;
}

/* Cargando */
.op-cargando { padding: 60px 20px; text-align: center; color: var(--gris-claro); font-size: 13px; }
.op-spin {
  width: 22px; height: 22px; border-radius: 50%; margin: 0 auto 12px;
  border: 2.5px solid var(--linea); border-top-color: var(--rojo); animation: girar .8s linear infinite;
}

/* ——— Almacenes: mismo sándwich que el autotanque ———
   Lienzo de 1272x352 con el casco de acero al fondo (almacen1-fondo.png), el
   líquido en medio y el tanque calado al frente (almacen1.png). La ventana sale
   del hueco real del PNG: x 57..1215, y 33..250.
   — handoff 3, Eduardo Luna · 2026 */
.op-alm { position: relative; width: 100%; aspect-ratio: 1272 / 352; margin: 4px 0 0; }
.op-alm > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none;
}
/* Cuba al 125% del hueco medido, crecida desde el centro. Como a ese tamaño se
   sale del casco (el PNG solo deja ~50px de margen por lado), .op-alm-mask usa
   el propio casco de acero como mascara: el liquido se recorta a la silueta del
   tanque y no se derrama. La ruta relativa sirve igual en Flask (/static/) que
   en la version web (operaciones/). — handoff 6, Eduardo Luna · 2026 */
.op-alm-mask {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: url("assets/almacen1-fondo.png");
          mask-image: url("assets/almacen1-fondo.png");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.op-alm-cuba {
  position: absolute; left: -6.91%; top: 1.64%; width: 113.90%; height: 77.41%;
  border-radius: 999px; overflow: hidden; background: transparent;
}
.op-alm-liq {
  position: absolute; left: 0; right: 0; bottom: 0;
  transition: height .8s cubic-bezier(.25, .9, .3, 1);
}
.op-alm-liq .relleno { position: absolute; inset: 0; background: var(--liq-v); }
.op-alm-pct {
  position: absolute; left: 4.48%; top: 9.38%; width: 91.12%; height: 61.93%;
  display: grid; place-items: center;
  font: 800 15px var(--mono); color: var(--tinta-fuerte);
  text-shadow: 0 1px 4px rgba(255, 255, 255, .9);
  pointer-events: none;
}
.op-alm-pct.claro { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .45); }


/* ==========================================================
   Unibot Gerencial — piezas propias de la consola
   Todo lo de arriba es el kit heredado de Operaciones Unibot.
   De aquí para abajo va lo que esta consola añade: el conmutador
   de planta y la pestaña de pedidos.
   — Eduardo Luna · 2026
   ========================================================== */

/* ——— Conmutador de planta (encabezado) ——— */
.gr-conm {
  display: flex; align-items: center; gap: 9px; margin-left: 20px;
  background: rgba(255, 255, 255, .15); border-radius: 12px; padding: 5px 6px 5px 13px;
}
.gr-conm .k {
  font-size: 8.5px; letter-spacing: 2px; font-weight: 700;
  color: rgba(255, 255, 255, .8);
}
.gr-conm select {
  height: 30px; min-width: 168px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .96);
  color: var(--tinta-fuerte); font: 700 12px var(--sans);
  padding: 0 8px; letter-spacing: .3px;
}
.gr-conm select:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); border-color: #fff !important; }
.gr-conm .zona {
  font-size: 8.5px; letter-spacing: 1.4px; font-weight: 700;
  color: rgba(255, 255, 255, .85); padding-right: 6px; white-space: nowrap;
}

/* ——— Origen del padrón de una unidad ——— */
.gr-padron {
  font: 700 8px var(--sans); letter-spacing: 1px; padding: 2px 6px;
  border-radius: 5px; white-space: nowrap;
  background: #ecf0fe; color: #3a49a8;
}
.gr-padron.cil { background: var(--ambar-bg); color: var(--ambar); }

/* ——— Desglose del padrón en la barra lateral ——— */
.gr-fuentes { display: flex; flex-direction: column; gap: 5px; }
.gr-fuente {
  display: flex; justify-content: space-between; align-items: baseline;
  border: 1.5px solid var(--linea); border-radius: 9px; padding: 7px 10px;
  background: #fff;
}
.gr-fuente .et { font-size: 9px; letter-spacing: 1.3px; color: var(--gris); font-weight: 700; }
.gr-fuente .n { font: 700 13px var(--mono); color: var(--tinta-fuerte); }

/* Punto ámbar en la pestaña: esta planta no tiene esa fuente de datos. */
.gr-tab-pt {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #d9a03a; margin-left: 6px; vertical-align: middle;
}

/* ——— Aviso de pestaña sin datos para la planta ——— */
.gr-nodata {
  margin: 30px auto; max-width: 520px; text-align: center;
  border: 1.5px dashed var(--aviso-bd); background: var(--aviso-bg);
  border-radius: 14px; padding: 26px 24px; color: var(--aviso-fg);
}
.gr-nodata .t { font-weight: 800; font-size: 13px; letter-spacing: .6px; }
.gr-nodata .d { font-size: 12px; margin-top: 8px; line-height: 1.55; color: #7a5d18; }

/* ——— Filtros de la pestaña de pedidos ——— */
.gr-filtros { display: flex; flex-direction: column; gap: 10px; }
.gr-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gr-rangos { display: flex; flex-wrap: wrap; gap: 5px; }
.gr-rango {
  border: 1.5px solid var(--linea-inp); background: #fff; color: var(--tinta-media);
  border-radius: 8px; padding: 5px 9px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .8px; cursor: pointer;
}
.gr-rango:hover { border-color: #cfd0d4; }
.gr-rango.on { background: var(--tinta-fuerte); color: #fff; border-color: var(--tinta-fuerte); }

/* ——— KPIs grandes de pedidos ——— */
.gr-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 10px; padding: 14px 18px 4px;
}
.gr-kpi {
  background: #fff; border: 1.5px solid var(--linea); border-radius: 12px;
  padding: 12px 14px; box-shadow: 0 1px 2px rgba(20, 22, 26, .04);
}
.gr-kpi .k { font-size: 8.5px; letter-spacing: 1.7px; color: var(--gris-claro); font-weight: 700; }
.gr-kpi .v { font: 700 22px var(--mono); color: var(--tinta-fuerte); margin-top: 5px; line-height: 1; }
.gr-kpi .v.chico { font-size: 17px; }
.gr-kpi .v.verde { color: var(--verde); }
.gr-kpi .v.rojo  { color: var(--rojo); }
.gr-kpi .d { font-size: 10px; color: var(--gris); margin-top: 5px; }

/* ——— Avance operativo (subestados) ——— */
.gr-avance { padding: 12px 18px 2px; }
.gr-avance-pista {
  display: flex; gap: 3px; height: 26px; border-radius: 8px; overflow: hidden;
  background: var(--pista);
}
.gr-avance-seg {
  display: grid; place-items: center; font: 700 10px var(--mono); color: #fff;
  min-width: 0; transition: flex-grow .6s cubic-bezier(.3, .8, .3, 1);
}
.gr-avance-leyenda {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 7px;
  font-size: 9.5px; letter-spacing: 1px; font-weight: 700; color: var(--gris);
}
.gr-avance-leyenda .it { display: inline-flex; align-items: center; gap: 5px; }
.gr-avance-leyenda .pt { width: 8px; height: 8px; border-radius: 3px; }
/* Etapa sin pedidos: se muestra atenuada, pero se muestra. Que una etapa esté
   vacía es información. — Eduardo Luna · 2026 */
.gr-avance-leyenda .it.cero { color: var(--gris-claro); }
.gr-avance-leyenda .it.cero .pt { opacity: .35; }

/* ——— Panel lateral de la unidad ——— */
.gr-panel-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gr-panel-kpis .gr-kpi { padding: 9px 11px; }
.gr-panel-kpis .gr-kpi .v { font-size: 15px; margin-top: 4px; }

.gr-detalle {
  border: 1.5px solid var(--linea); border-radius: 11px; overflow: hidden; background: #fff;
}
.gr-detalle .fila {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 8px 11px; border-bottom: 1px solid var(--linea-fila);
}
.gr-detalle .fila:last-child { border-bottom: none; }
.gr-detalle .k {
  font-size: 8.5px; letter-spacing: 1.4px; color: var(--gris-claro);
  font-weight: 700; white-space: nowrap;
}
.gr-detalle .v {
  font: 600 11.5px var(--mono); color: var(--tinta); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ——— Resumen de captura de nivel (barra lateral) ——— */
.gr-nivel { display: flex; gap: 6px; }
.gr-nivel span {
  flex: 1; text-align: center; border-radius: 9px; padding: 8px 6px;
  font: 700 11px var(--sans); letter-spacing: .3px;
}
.gr-nivel .cap  { background: var(--verde-bg); color: var(--verde); }
.gr-nivel .pend { background: var(--fondo-3);  color: var(--tinta-media); }
.gr-nota { margin-top: 7px; font-size: 10.5px; color: var(--gris); line-height: 1.45; }

/* ——— Crédito de la fuente del dato (Zae.lite) ——— */
.gr-zae {
  margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.gr-zae img { width: 108px; height: auto; }
.gr-zae span {
  font-size: 9.5px; letter-spacing: 1.2px; font-weight: 700; color: var(--gris-claro);
  text-transform: uppercase;
}

/* ——— Tabla de pedidos ———
   La tabla es ancha y en pantallas chicas no cabe: el scroll va DENTRO de
   .gr-tabla-scroll, no en el body, o la última columna se pierde sin que se
   note. — Eduardo Luna · 2026 */
.gr-tabla-wrap { padding: 12px 18px 22px; }
.gr-tabla-scroll {
  overflow-x: auto; border: 1.5px solid var(--linea); border-radius: 12px;
  background: #fff;
}
.gr-tabla {
  width: 100%; min-width: 1080px; border-collapse: collapse; background: #fff;
  font-size: 12px;
}
.gr-tabla thead th {
  background: var(--fondo-3); text-align: left; padding: 9px 11px;
  font-size: 8.5px; letter-spacing: 1.5px; color: var(--gris); font-weight: 700;
  border-bottom: 1.5px solid var(--linea); white-space: nowrap;
}
.gr-tabla tbody td {
  padding: 9px 11px; border-bottom: 1px solid var(--linea-fila);
  vertical-align: middle; color: var(--tinta);
}
.gr-tabla tbody tr:last-child td { border-bottom: none; }
.gr-tabla tbody tr:hover td { background: var(--fondo-2); }
.gr-tabla tbody tr.canc td { color: var(--gris); }
.gr-tabla .num { text-align: right; font: 600 12px var(--mono); white-space: nowrap; }
.gr-tabla .folio { font: 700 12px var(--mono); color: var(--tinta-fuerte); white-space: nowrap; }
.gr-tabla .cli { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-tabla .dir {
  max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--gris); font-size: 11px;
}
.gr-tabla .fec { font: 500 11px var(--mono); color: var(--tinta-media); white-space: nowrap; }

/* ——— Etiquetas de estatus y avance ——— */
.gr-est {
  display: inline-block; font: 700 8.5px var(--sans); letter-spacing: 1px;
  padding: 3px 8px; border-radius: 6px; white-space: nowrap;
}
.gr-est.borrador   { background: var(--fondo-4);  color: #6b6d72; }
.gr-est.confirmado { background: var(--ambar-bg); color: var(--ambar); }
.gr-est.procesado  { background: var(--verde-bg); color: var(--verde); }
.gr-est.cancelado  { background: var(--rojo-bg);  color: var(--rojo); }

.gr-sub {
  display: inline-block; font: 600 8.5px var(--mono); letter-spacing: .8px;
  padding: 2px 7px; border-radius: 5px; white-space: nowrap;
  background: #eef3fb; color: #26557f;
}
.gr-org {
  display: inline-block; font: 700 8px var(--sans); letter-spacing: 1px;
  padding: 2px 6px; border-radius: 5px; white-space: nowrap;
}
.gr-org.bot { background: #ecf0fe; color: #3a49a8; }
.gr-org.humano_postcall { background: var(--fondo-4); color: #6b6d72; }

/* Marca de planta ajena: aparece cuando la busqueda ignora el conmutador. */
.gr-otra {
  display: inline-block; font: 700 8px var(--mono); letter-spacing: .8px;
  padding: 2px 6px; border-radius: 5px; margin-left: 6px;
  background: var(--rojo-bg); color: var(--rojo);
}

/* ——— Comparativo de plantas (barra lateral) ——— */
.gr-comp { display: flex; flex-direction: column; gap: 5px; }
.gr-comp-fila {
  border: none; background: none; padding: 4px 5px; border-radius: 8px;
  cursor: pointer; text-align: left; width: 100%; font-family: inherit;
}
.gr-comp-fila:hover { background: var(--fondo-3); }
.gr-comp-fila.on { background: var(--rojo-bg); }
.gr-comp-top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 10.5px;
}
.gr-comp-top .nom { font-weight: 700; color: var(--tinta); }
.gr-comp-fila.on .nom { color: var(--rojo-link); }
.gr-comp-top .n { font: 700 11px var(--mono); color: var(--tinta-fuerte); }
.gr-comp-fila.cero .nom, .gr-comp-fila.cero .n { color: var(--gris-claro); font-weight: 600; }
.gr-comp-barra {
  position: relative; height: 5px; background: var(--pista);
  border-radius: 4px; overflow: hidden; margin-top: 4px;
}
.gr-comp-barra i {
  position: absolute; top: 0; bottom: 0; left: 0; border-radius: 4px;
  background: var(--liq-h); transition: width .7s cubic-bezier(.3, .8, .3, 1);
}

/* ——— Aviso de tabla recortada ——— */
.gr-trunc {
  margin: 0 18px 14px; border: 1.5px solid var(--aviso-bd); background: var(--aviso-bg);
  border-radius: 10px; padding: 9px 13px; font-size: 11.5px; color: var(--aviso-fg);
}

/* ——— Frescura del dato ——— */
.gr-fresco {
  font-size: 9.5px; letter-spacing: 1px; font-weight: 700;
  padding: 3px 8px; border-radius: 6px; white-space: nowrap;
}
.gr-fresco.ok    { background: var(--verde-bg); color: var(--verde); }
.gr-fresco.viejo { background: var(--ambar-bg); color: var(--ambar); }
.gr-fresco.rancio { background: var(--rojo-bg); color: var(--rojo); }

/* La consola es de consulta: se avisa en el pie de la barra lateral. */
.gr-solo-lectura {
  margin-top: 10px; text-align: center; font-size: 8.5px; letter-spacing: 1.6px;
  font-weight: 700; color: var(--gris-claro);
}