/* ==========================================================================
   ui.css — piezas visuales comunes a todas las pantallas (desde 0.86.86)
   ==========================================================================
   Va después de themes.css y del <style> de index.html. Cada bloque dice qué
   problema resuelve; si no resuelve uno, no va acá. Usa solo tokens (--verde,
   --rojo…), así funciona igual en claro y en oscuro. Guía: docs/UI_TOKENS.md
   §«Estados» y docs/GUIA_INCORPORACIONES.md §2.
   ========================================================================== */

/* ---------- 1. Estados: cinco colores con un solo significado ----------
   Antes cada pantalla pintaba «pendiente» o «error» a su manera (242 colores
   escritos a mano, algunos sin versión oscura). Ahora:
     ok       verde  hecho, en marcha, conectado
     accion   ámbar  requiere que alguien haga algo
     falla    rojo   error, faltante, vencido, caído
     info     azul   planificado, informativo
     apagado  gris   inactivo, cancelado, finalizado */
:root{
  --estado-ok:var(--verde);       --estado-ok-s:var(--verde-s);
  --estado-accion:var(--ambar);   --estado-accion-s:var(--ambar-s);
  --estado-falla:var(--rojo);     --estado-falla-s:var(--rojo-s);
  --estado-info:var(--azul);      --estado-info-s:var(--azul-s);
  --estado-apagado:var(--gris);   --estado-apagado-s:var(--sup-baja);
}
.pill.est-ok,.est-ok.pill{background:var(--estado-ok-s)!important;color:var(--estado-ok)!important}
.pill.est-accion{background:var(--estado-accion-s)!important;color:var(--estado-accion)!important}
.pill.est-falla{background:var(--estado-falla-s)!important;color:var(--estado-falla)!important}
.pill.est-info{background:var(--estado-info-s)!important;color:var(--estado-info)!important}
.pill.est-apagado{background:var(--estado-apagado-s)!important;color:var(--estado-apagado)!important}
.t-ok{color:var(--estado-ok)!important}
.t-accion{color:var(--estado-accion)!important}
.t-falla{color:var(--estado-falla)!important}
.t-info{color:var(--estado-info)!important}
.t-apagado{color:var(--estado-apagado)!important}

/* ---------- 2. Un dato que no llegó no es un cero ----------
   datoUI() en ui.js: «—» con el motivo cuando no se pudo leer, y «sin
   movimientos» cuando de verdad es cero. Un $0 mudo escondió el DRE en cero. */
.dato-falta{color:var(--gris);cursor:help;border-bottom:1px dotted currentColor}
.dato-cero{color:var(--gris);font-style:italic;font-weight:500}

/* ---------- 3. Tablas: el encabezado queda a la vista ----------
   `thead th` ya era sticky, pero la caja no tenía alto máximo: en una tabla
   larga el encabezado se iba con la página y se perdía qué columna era cuál.
   Con alto máximo el scroll es de la caja y el encabezado queda fijo.
   `.sin-alto` para la tabla que tiene que mostrarse entera. */
.tabla-box{max-height:var(--tabla-alto,min(72vh,820px));overflow:auto}
.tabla-box.sin-alto,.modal .tabla-box.sin-alto{max-height:none}
thead th{z-index:1}
/* Números en columna: todas las cifras del mismo ancho, para compararlas. */
tbody td,.kpi .n,.num{font-variant-numeric:tabular-nums}
.num-neg{color:var(--estado-falla)}

/* ---------- 4. Modales: los botones siempre a la vista ----------
   De 48 modales, uno solo dejaba Guardar fijo al pie; en los largos había que
   bajar para encontrarlo, y quien no bajaba no veía el error de arriba. */
.modal{--modal-px:26px;--modal-pb:22px}
@media(max-width:900px){.modal{--modal-px:16px;--modal-pb:18px}}
.modal:not(.modal-fijo) > .modal-actions{
  position:sticky;bottom:calc(-1 * var(--modal-pb));z-index:3;
  margin:22px calc(-1 * var(--modal-px)) calc(-1 * var(--modal-pb));
  padding:12px var(--modal-px) var(--modal-pb);
  background:var(--tarjeta);border-top:1px solid var(--linea);
}

/* Diálogos propios (confirmar / pedirTexto / informar en ui.js), en vez de
   las ventanas del navegador: dicen qué se va a hacer y, si es destructivo,
   el botón va en rojo y el foco queda en Cancelar. */
.overlay.dlg-ov{z-index:60}
.modal.dlg{max-width:440px}
.modal.dlg .dlg-titulo{margin:0 0 8px;font-size:18px}
.modal.dlg .dlg-msg{white-space:pre-line;line-height:1.5;margin:0;color:var(--tinta)}
.modal.dlg .dlg-campo{margin-top:14px}
.modal.dlg .dlg-campo input,.modal.dlg .dlg-campo textarea{width:100%}
.btn-peligro{background:var(--estado-falla)!important;color:var(--sobre-acento)!important;
  border-color:var(--estado-falla)!important}
.btn-peligro:hover{filter:brightness(.92)}

/* ---------- 5. Encabezado de pantalla, igual en todas ----------
   Convivían cuatro formas (.inicio-head, .ajustes-toolbar, .acciones arriba,
   filtros mezclados con botones). Las dos cabeceras quedan con el mismo
   orden: a la izquierda qué es; a la derecha filtros → Actualizar → acciones. */
.inicio-head,.ajustes-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:10px 14px;margin:0 0 14px}
.inicio-head > div:last-child:not(:first-child),
.ajustes-toolbar > div:last-child:not(:first-child){display:flex;flex-wrap:wrap;
  gap:8px;align-items:center;justify-content:flex-end}

/* ---------- 6. De cuándo es el dato ----------
   frescuraUI() en ui.js, según las `fuentes` de cada pantalla en TABS. */
.frescura{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 10px;font-size:12px;
  color:var(--gris)}
.frescura span::before{content:"";display:inline-block;width:7px;height:7px;
  border-radius:50%;margin-right:6px;background:var(--estado-ok);vertical-align:middle}
.frescura .fr-atrasada{color:var(--estado-accion);font-weight:600}
.frescura .fr-atrasada::before{background:var(--estado-accion)}
.frescura .fr-apagada::before,.frescura .fr-sin_datos::before{background:var(--estado-apagado)}
.frescura .fr-error{color:var(--estado-falla)}
.frescura .fr-error::before{background:var(--estado-falla)}

/* ---------- 7. Vacío que dice qué hacer ----------
   vacioUI() en ui.js: una tabla en blanco no se distingue de una que no cargó. */
.vacio{padding:18px 14px;text-align:center;color:var(--gris);font-size:13.5px}
.vacio .vacio-acc{margin-top:8px}
td.vacio-td{padding:0!important}

/* ---------- 8. Densidad compacta (Vista → Compacta) ----------
   Para quien trabaja el día con tablas largas (Depósito, Finanzas, CX):
   ~35 % más filas en pantalla. Es preferencia del navegador, no del sistema. */
.dens-btn{min-width:34px;padding:4px 8px!important;font-size:16px;line-height:1}
html[data-densidad="compacta"] tbody td{padding:5px 10px}
html[data-densidad="compacta"] thead th{padding:6px 10px}
html[data-densidad="compacta"] .kpi{padding:10px 12px}
html[data-densidad="compacta"] .field{margin-bottom:8px}
html[data-densidad="compacta"] .inicio-head,
html[data-densidad="compacta"] .ajustes-toolbar{margin-bottom:8px}

/* ---------- 9. Utilidades ----------
   Reemplazan los estilos en línea más repetidos (había 1.738 `style="…"`).
   Con !important porque sustituyen a un style en línea, que también ganaba
   siempre. Para algo nuevo, una clase con nombre; no un style en línea. */
.u-m0{margin:0!important}
.u-mt4{margin-top:4px!important}.u-mt8{margin-top:8px!important}
.u-mt10{margin-top:10px!important}.u-mt12{margin-top:12px!important}
.u-mt14{margin-top:14px!important}.u-mt16{margin-top:16px!important}
.u-mb8{margin:0 0 8px!important}.u-mb10{margin:0 0 10px!important}.u-mb12{margin:0 0 12px!important}
.u-m-sub{margin:4px 0 0!important}
.u-der{text-align:right!important}
.u-nowrap{white-space:nowrap!important}
.u-gris{color:var(--gris)!important}
.u-auto{width:auto!important}
.u-full{width:100%!important}
.u-btn-fila{padding:9px 14px!important}
.u-btn-chico{padding:4px 10px!important}
.u-btn-mini{padding:4px 8px!important}
.u-fila-fin{flex-wrap:wrap!important;gap:10px!important;align-items:flex-end!important}

/* ---------- Comunicaciones: el hilo de un correo o de una red ----------
   CX → Comunicaciones muestra la conversación para leerla y contestar ahí
   mismo (comunicaciones.js). Lo que salió de la empresa va a la derecha, para
   que se distinga de un vistazo quién dijo qué. */
.com-hilo{max-height:420px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.com-msg{max-width:78%;padding:8px 10px;border-radius:10px;background:var(--sup-baja);
  border:1px solid var(--linea);align-self:flex-start}
.com-msg-sale{align-self:flex-end;background:var(--estado-info-s)}
.com-msg-texto{white-space:pre-wrap;word-break:break-word;margin-top:2px}
.com-fila{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.com-busca{width:280px;max-width:100%}
.com-hist li{margin-bottom:4px}

/* ---------- Integraciones: la central de vinculación ----------
   Las tarjetas van agrupadas por para qué sirven (comunicaciones, red,
   pagos…), no por proveedor; cada grupo con su título y una línea que dice
   qué resuelve. Arriba, el cuadro de estado (integraciones_central.js). */
.int-cat{margin-top:22px;padding-top:14px;border-top:2px solid var(--linea)}
.int-cat-tit{margin:0 0 4px;font-size:17px}
.int-cat-que{margin:0 0 10px}
.int-cen-cat .tabla td{vertical-align:top}

/* ENACOM → DDJJ Hertz: los formularios en línea (deducciones, presentación, pago,
   ajustes) no ocupan todo el ancho cada campo. */
#enHertz .acciones input, #enHertz .acciones select { width: auto; }
#enHertz .acciones label input { width: 140px; }

/* Mapas (Leaflet): sus capas usan z-index 400 a 1000. Sin un contexto de
   apilado propio quedaban por encima de las ventanas (.overlay, z-index 40)
   y tapaban, por ejemplo, «Postes de obra» en Diseño de obra. */
.leaflet-container { isolation: isolate; }

/* El detalle al pasar el mouse por un gráfico (ui.js: data-tip y lineaDetalleUI). */
.tip-ui{position:fixed;z-index:9999;pointer-events:none;display:none;background:var(--sup-alta);color:var(--texto);
  border:1px solid var(--linea);border-radius:8px;padding:6px 9px;font-size:12.5px;line-height:1.45;
  box-shadow:0 6px 18px rgba(0,0,0,.22);max-width:340px}
.tip-ui b{display:block;margin:0 0 2px;font-weight:600}
.tip-ui span{display:flex;align-items:center;gap:6px}
.tip-ui i{display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.tip-ui-guia{stroke:var(--gris);stroke-width:1;stroke-dasharray:3 3}
/* Vínculos entre pantallas (irUI / enlaceUI en ui.js): se ven como enlace y
   no como texto, para que se note qué lleva a otra parte. */
a.ir{color:var(--azul);text-decoration:none;border-bottom:1px dotted currentColor;cursor:pointer}
a.ir:hover,a.ir:focus-visible{border-bottom-style:solid}
.ir-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--borde, #ccc);
  border-radius:999px;background:transparent;color:var(--texto);cursor:pointer;font:inherit}
.ir-chip .mov-meta{display:inline;margin:0}
.ir-chip i{display:inline-block;flex:none}
.ir-chip:hover,.ir-chip.activo{border-color:var(--azul);color:var(--azul)}
.ir-chip.activo{background:var(--azul-s)}