/* ==========================================================================
   DodoNet — sistema visual "Plano de obra"
   Papel cálido, tinta fría, líneas finas. Se carga ANTES del <style> propio
   de cada página; lo que quede en la página es solo lo de esa página.
   ========================================================================== */

:root {
  /* ---- Tipografía ------------------------------------------------------ */
  /* Sin fuentes remotas: hay CSP y las páginas no cargan nada externo.
     "Segoe UI Variable Text" es la de Win11 (escritorio); Roboto, la de los
     celulares de la calle. */
  --fuente: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text",
            "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono",
                 Menlo, Consolas, monospace;

  --t-micro: 13px;   --lh-micro: 1.35;  /* rótulos, badges, meta, th          */
  --t-base:  14px;   --lh-base:  1.5;   /* todo el cuerpo de la app           */
  --t-lee:   15px;   --lh-lee:   1.6;   /* texto para leer (ayuda, updates)   */
  --t-sec:   17px;   --lh-sec:   1.3;   /* título de tarjeta / h2             */
  --t-tit:   21px;   --lh-tit:   1.2;   /* título de pantalla / h1            */
  --t-cifra: 30px;   --lh-cifra: 1.05;  /* KPI, número grande                 */

  --peso-normal: 400;
  --peso-medio:  600;   /* rótulos, nav, botones                             */
  --peso-fuerte: 700;   /* títulos, badges, cifras                           */
  --track-rotulo: .05em; /* único letter-spacing del sistema (mayúsculas)    */

  /* ---- Espaciado (base 4) --------------------------------------------- */
  --e0: 2px;  --e1: 4px;  --e2: 8px;   --e3: 12px;
  --e4: 16px; --e5: 24px; --e6: 32px;  --e7: 48px;

  /* ---- Formas ---------------------------------------------------------- */
  /* Regla: el radio crece con la caja. <=28px de alto -> r1. Controles -> r2.
     Contenedores -> r3. Nada más. */
  --r1: 3px; --r2: 6px; --r3: 10px; --r-pill: 999px;
  --b1: 1px; --b2: 2px; --b3: 3px;   /* b3 = barra de énfasis a la izquierda */

  /* ---- Sombras (3, y solo para cosas que FLOTAN) ----------------------- */
  /* Las tarjetas NO llevan sombra: llevan borde. La sombra es información
     ("esto está por encima del mapa"), no decoración. */
  --sombra-1: 0 1px 2px rgba(28,27,24,.07), 0 1px 1px rgba(28,27,24,.04);
  --sombra-2: 0 4px 12px -2px rgba(28,27,24,.14), 0 2px 4px -3px rgba(28,27,24,.10);
  --sombra-3: 0 18px 44px -14px rgba(28,27,24,.32), 0 4px 10px -4px rgba(28,27,24,.14);

  /* ---- Capas (se acabaron los 19 z-index a ojo) ------------------------ */
  --z-mapa: 0; --z-flotante: 100; --z-encabezado: 200; --z-cajon: 300;
  --z-ventana: 400; --z-menu: 500; --z-modal: 600; --z-cinta: 700; --z-tip: 800;

  /* ---- Movimiento ------------------------------------------------------ */
  --vel-1: 90ms; --vel-2: 170ms;
  --curva: cubic-bezier(.2,.6,.3,1);

  /* ---- Tamaño de toque ------------------------------------------------- */
  --toque: 40px;   /* escritorio */

  /* ======================================================================
     COLOR — modo claro (por defecto)
     ====================================================================== */

  /* Superficies: gris cálido de papel. El lienzo es el más oscuro; la
     superficie, más clara; el elevado (blanco puro) SOLO para lo que flota. */
  --lienzo:   #ECE9E3;   /* fondo de la app                                  */
  --sup:      #FAF9F6;   /* tarjetas, encabezado, filas                      */
  --sup-2:    #F3F1EB;   /* hundido: th, hover de fila, input relleno        */
  --elev:     #FFFFFF;   /* modal, menú, panel sobre el mapa, tooltip claro  */

  --linea:        #E2DED6;  /* hairline interna (separador de filas)         */
  --linea-fuerte: #CBC4B7;  /* borde de tarjeta y divisiones estructurales   */
  --linea-campo:  #8A8376;  /* borde de input/checkbox/select — 3.1:1 mínimo */

  --tinta:     #1C1B18;  /* texto principal                                  */
  --tinta-2:   #57524A;  /* secundario: rótulos, meta, ayuda                 */
  --tinta-3:   #6E685E;  /* tenue: placeholder, timestamps. PISO del sistema */
  --tinta-off: #8E887D;  /* deshabilitado — NO es texto informativo          */

  /* Acento: azul de plano. Sirve como texto sobre claro Y como relleno con
     texto blanco, por eso hay uno solo y no catorce. */
  --acento:        #15537F;
  --acento-h:      #0F3F63;   /* hover                                       */
  --acento-a:      #0B3050;   /* activo / apretado                           */
  --acento-suave:  #E2EBF3;   /* fondo de selección, chip                    */
  --acento-linea:  #B9CFE3;
  --acento-texto:  #0F4470;   /* texto sobre acento-suave                    */
  --sobre-acento:  #FFFFFF;

  --ok:        #186B3F; --ok-suave:  #E0EFE3; --ok-linea:  #B2D6BC;
  --ok-texto:  #125934; --sobre-ok:  #FFFFFF;

  /* Ámbar: el relleno lleva SIEMPRE tinta, nunca blanco (blanco sobre ámbar
     da 2.26:1). Para barras y bordes va el ocre, que sí llega a 3:1. */
  --aviso:       #E0A11A; --aviso-barra: #B57E0A;
  --aviso-suave: #FAEECF; --aviso-linea: #E7D094;
  --aviso-texto: #7A4E05; --sobre-aviso: var(--tinta);

  --peligro:       #B2241D; --peligro-suave: #F9E2E0; --peligro-linea: #EBB6B0;
  --peligro-texto: #8C1913; --sobre-peligro: #FFFFFF;

  /* Info = petróleo. Es "en proceso / dato", no acción: por eso NO es azul. */
  --info:       #16576D; --info-suave: #DFEBF0; --info-linea: #B0CDD8;
  --info-texto: #134B5E; --sobre-info: #FFFFFF;

  --neutro:       #8A8376; --neutro-suave: #E7E3DC; --neutro-linea: #D2CCC1;
  --neutro-texto: #4E4941; --sobre-neutro: #FFFFFF;

  --foco: var(--acento);
  --anillo: 0 0 0 3px color-mix(in srgb, var(--foco) 26%, transparent);
}

/* ==========================================================================
   DENSIDAD DE CAMPO — <body data-densidad="campo">
   Va en liniero.html y ordenes.html: celular al sol, guantes, un poste.
   Sube el piso a 14px y los targets a 48. No cambia ni un color.
   ========================================================================== */
[data-densidad="campo"] {
  --t-micro: 14px; --t-base: 15px; --t-lee: 16px;
  --t-sec: 18px; --t-tit: 22px; --t-cifra: 32px;
  --toque: 48px;
}

/* ==========================================================================
   MODO OSCURO — se activa solo con <html data-tema="oscuro">
   ========================================================================== */
[data-tema="oscuro"] {
  --lienzo: #101317; --sup: #171B21; --sup-2: #1D222A; --elev: #242A33;
  --linea: #2B313A; --linea-fuerte: #39424E; --linea-campo: #6E7887;
  --tinta: #E9EBEE; --tinta-2: #AAB3BF; --tinta-3: #939DAA; --tinta-off: #6B7480;

  --acento: #7CB8E8; --acento-h: #9ACBF0; --acento-a: #B6DAF5;
  --acento-suave: #12283B; --acento-linea: #204962; --acento-texto: #8CC2EC;
  --sobre-acento: #08243D;

  --ok: #5CD08C; --ok-suave: #0F2A1D; --ok-linea: #1F4B33; --ok-texto: #6FDA9B;
  --sobre-ok: #05190E;
  --aviso: #E8B44A; --aviso-barra: #C79020; --aviso-suave: #2E2410;
  --aviso-linea: #54401A; --aviso-texto: #EFC369; --sobre-aviso: #201703;
  --peligro: #F08279; --peligro-suave: #331614; --peligro-linea: #5C2924;
  --peligro-texto: #F49A92; --sobre-peligro: #2A0D0A;
  --info: #6FC2D8; --info-suave: #0F272E; --info-linea: #1E4854;
  --info-texto: #84CEE1; --sobre-info: #04222C;
  --neutro: #6E7887; --neutro-suave: #1F242C; --neutro-linea: #39424E;
  --neutro-texto: #AAB3BF; --sobre-neutro: #0C1015;

  --sombra-1: 0 1px 2px rgba(0,0,0,.5);
  --sombra-2: 0 6px 16px -4px rgba(0,0,0,.6);
  --sombra-3: 0 20px 50px -16px rgba(0,0,0,.75);
  --foco: #7CB8E8;
}

html { color-scheme: light; }
[data-tema="oscuro"] { color-scheme: dark; }
/* Deliberado: NO hay @media (prefers-color-scheme). El liniero trabaja al sol
   y con fondo claro es lo único que se lee; el oscuro es opt-in del NOC. */

/* ==========================================================================
   LIENZO TÉCNICO — no es un tema, es un MATERIAL.
   Lo usan el diagrama de empalmes, el ODF y cualquier canvas de dibujo.
   ========================================================================== */
.lienzo-tec {
  --lienzo: #0E1116; --sup: #151920; --sup-2: #1B2028; --elev: #232932;
  --linea: #262C35; --linea-fuerte: #333C48; --linea-campo: #6E7887;
  --tinta: #E9EBEE; --tinta-2: #AAB3BF; --tinta-3: #939DAA; --tinta-off: #6B7480;
  --acento: #7CB8E8; --acento-suave: #12283B; --acento-texto: #8CC2EC;
  --sobre-acento: #08243D;
  --foco: #7CB8E8;
  /* El ÚNICO color saturado del sistema. Es la señal de "este es el pelo que
     venís siguiendo": tiene que verse desde la vereda. No se toca. */
  --senal: #39FF14;
  --senal-fondo: #0B2E12;
  background: var(--lienzo);
  color: var(--tinta);
}

/* ==========================================================================
   RESET Y BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--lienzo);
  color: var(--tinta);
  font: var(--peso-normal) var(--t-base)/var(--lh-base) var(--fuente);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding-left: 1.15em; }
img, video, svg, canvas { max-width: 100%; }
/* NADA del reset entra al mapa. Leaflet posiciona sus capas dentro de panes que
   miden 0x0 a propósito, así que un `max-width:100%` sobre el canvas lo deja en
   0 px de ancho: los cables se dibujan (se ven los píxeles pintados) pero el
   canvas es invisible y el mapa aparece SIN FIBRA. Pasó en producción. */
.leaflet-container img, .leaflet-container video,
.leaflet-container svg, .leaflet-container canvas { max-width: none; max-height: none; }


h1 { font-size: var(--t-tit); line-height: var(--lh-tit); font-weight: var(--peso-fuerte); letter-spacing: -.01em; }
h2 { font-size: var(--t-sec); line-height: var(--lh-sec); font-weight: var(--peso-fuerte); }
/* h3 es el rótulo de sección: chico, en mayúscula, tinta-2. Es el que ordena
   una tarjeta densa sin meter una línea ni un fondo. */
h3 {
  font-size: var(--t-micro); line-height: var(--lh-micro);
  font-weight: var(--peso-fuerte); text-transform: uppercase;
  letter-spacing: var(--track-rotulo); color: var(--tinta-2);
}

a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--acento-h); }

/* Foco de teclado: SIEMPRE visible, un solo estilo en toda la app. */
:focus-visible {
  outline: var(--b2) solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--r1);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--acento-suave); color: var(--acento-texto); }

/* Barras de scroll finas y sobrias. Se nota y no molesta. */
* { scrollbar-width: thin; scrollbar-color: var(--linea-fuerte) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--linea-fuerte); border-radius: var(--r-pill);
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--tinta-off); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.enc {                                   /* encabezado de página (header)     */
  position: sticky; top: 0; z-index: var(--z-encabezado);
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e2) var(--e4);
  min-height: 52px;
  background: var(--sup);
  border-bottom: var(--b1) solid var(--linea-fuerte);
}
.enc h1 { font-size: var(--t-sec); }      /* en el header el título no grita  */
.enc .quien { margin-left: auto; font-size: var(--t-micro); color: var(--tinta-2); }

.volver {                                 /* "← Mapa": mismo en las 11 páginas */
  display: inline-flex; align-items: center; gap: var(--e1);
  font-size: var(--t-micro); font-weight: var(--peso-medio);
  color: var(--acento); text-decoration: none; white-space: nowrap;
  padding: var(--e1) var(--e2); margin-left: calc(var(--e2) * -1);
  border-radius: var(--r2);
  /* Con el padding solo quedaba en 29px de alto. Es el link que más se toca
     de todas las pantallas (volver al mapa), así que va con piso de dedo. */
  min-height: var(--toque);
}
.volver:hover { background: var(--acento-suave); }

.principal { padding: var(--e3) var(--e4) var(--e7); max-width: 1400px; margin: 0 auto; }
.principal--angosto { max-width: 800px; }
@media (max-width: 720px) { .principal { padding: var(--e3) var(--e3) var(--e7); } }

/* ==========================================================================
   BOTÓN
   Un solo botón, cuatro intenciones. Mismo alto (--toque), mismo padding,
   misma tipografía en las 11 páginas.
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: var(--toque);
  padding: 0 var(--e3);
  border: var(--b1) solid transparent;
  border-radius: var(--r2);
  font: var(--peso-medio) var(--t-base)/1 var(--fuente);
  cursor: pointer;
  white-space: nowrap;
  background: var(--acento); color: var(--sobre-acento);
  transition: background var(--vel-1) var(--curva), border-color var(--vel-1) var(--curva);
}
.btn:hover  { background: var(--acento-h); }
.btn:active { background: var(--acento-a); }

/* Secundario: el borde SÍ tiene contraste (3.1:1). Un botón gris claro sobre
   fondo gris claro no se lee al sol. */
.btn--2 {
  background: var(--sup); color: var(--tinta);
  border-color: var(--linea-campo);
}
.btn--2:hover  { background: var(--sup-2); border-color: var(--tinta-off); }
.btn--2:active { background: var(--linea); }

.btn--peligro { background: var(--peligro); color: var(--sobre-peligro); }
.btn--peligro:hover  { background: color-mix(in srgb, var(--peligro) 84%, black); }
.btn--peligro:active { background: color-mix(in srgb, var(--peligro) 70%, black); }

.btn--ok { background: var(--ok); color: var(--sobre-ok); }
.btn--ok:hover { background: color-mix(in srgb, var(--ok) 84%, black); }

/* Fantasma: para acciones terciarias dentro de una fila densa. */
.btn--fantasma { background: transparent; color: var(--acento); }
.btn--fantasma:hover  { background: var(--acento-suave); }
.btn--fantasma:active { background: var(--acento-linea); }

.btn--icono { width: var(--toque); padding: 0; font-size: var(--t-sec); }
.btn--bloque { width: 100%; }
.btn--chico { min-height: 30px; padding: 0 var(--e2); font-size: var(--t-micro); border-radius: var(--r1); }

.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--sup-2); color: var(--tinta-off);
  border-color: var(--linea); cursor: not-allowed;
}

/* Cargando: el botón se queda quieto, se apaga y le sale una barra fina.
   Sin spinner giratorio, sin cambiar de ancho (si cambia, el dedo erra). */
.btn[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: auto var(--e3) 8px var(--e3); height: 2px;
  background: currentColor; opacity: .35;
  animation: cargando 900ms var(--curva) infinite;
}
@keyframes cargando { 0% { transform: scaleX(.1); transform-origin: left; }
                      50% { transform: scaleX(1); transform-origin: left; }
                      51% { transform: scaleX(1); transform-origin: right; }
                      100% { transform: scaleX(.1); transform-origin: right; } }

.acciones { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.acciones--fin { justify-content: flex-end; }

/* ==========================================================================
   CAMPOS
   ========================================================================== */
.campo { display: block; margin-bottom: var(--e3); }
.campo > .rotulo {
  display: block; margin-bottom: var(--e1);
  font-size: var(--t-micro); font-weight: var(--peso-medio); color: var(--tinta-2);
}
.campo > .ayuda { display: block; margin-top: var(--e1); font-size: var(--t-micro); color: var(--tinta-3); }
.campo > .error { display: block; margin-top: var(--e1); font-size: var(--t-micro); color: var(--peligro-texto); font-weight: var(--peso-medio); }

input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%;
  min-height: var(--toque);
  padding: var(--e2) var(--e3);
  background: var(--elev);
  color: var(--tinta);
  border: var(--b1) solid var(--linea-campo);
  border-radius: var(--r2);
  font: var(--peso-normal) var(--t-base)/1.4 var(--fuente);
  font-variant-numeric: tabular-nums;
}
textarea { min-height: 92px; resize: vertical; line-height: var(--lh-base); }
select {
  /* Flecha propia: la nativa de Windows es de otro sistema visual. */
  appearance: none;
  padding-right: var(--e6);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
input::placeholder, textarea::placeholder { color: var(--tinta-3); }
input:hover, select:hover, textarea:hover { border-color: var(--tinta-off); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--acento); box-shadow: var(--anillo);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--sup-2); color: var(--tinta-off); border-color: var(--linea); cursor: not-allowed;
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--peligro); }
input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--peligro) 26%, transparent); }

input[type="checkbox"], input[type="radio"] {
  width: 18px; height: 18px; margin: 0; accent-color: var(--acento);
  border: var(--b1) solid var(--linea-campo); cursor: pointer;
  /* Adentro de una fila flex la casilla se achicaba a 13px peleando con el
     texto de al lado: es un cuadrado, no se estira ni se encoge. */
  flex: none;
}
/* La etiqueta entera es target táctil: en el poste no se le pega a un cuadrado
   de 18px. */
.check {
  display: flex; align-items: center; gap: var(--e2);
  min-height: var(--toque); padding: var(--e1) 0; cursor: pointer;
}

.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
@media (max-width: 720px) { .rejilla-2 { grid-template-columns: 1fr; } }

/* ==========================================================================
   TARJETA — una sola. Sin sombra: borde.
   ========================================================================== */
.tarjeta {
  background: var(--sup);
  border: var(--b1) solid var(--linea-fuerte);
  border-radius: var(--r3);
  margin-bottom: var(--e3);
  overflow: clip;                        /* que nada se escape del radio      */
}
.tarjeta__cab {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e3) var(--e4);
  border-bottom: var(--b1) solid var(--linea);
  background: var(--sup-2);
}
.tarjeta__cab h2 { font-size: var(--t-sec); flex: 1; min-width: 0; }
.tarjeta__cuerpo { padding: var(--e4); }
.tarjeta__pie {
  padding: var(--e3) var(--e4);
  border-top: var(--b1) solid var(--linea);
  background: var(--sup-2);
  display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap;
}
/* Barra de estado a la izquierda: 3px, color sólido (>=3:1). */
.tarjeta--ok      { border-left: var(--b3) solid var(--ok); }
.tarjeta--aviso   { border-left: var(--b3) solid var(--aviso-barra); }
.tarjeta--peligro { border-left: var(--b3) solid var(--peligro); }
.tarjeta--info    { border-left: var(--b3) solid var(--info); }
.tarjeta--muerta  { opacity: .62; }

/* ==========================================================================
   ESTADO (badge / chip / pill / tag → uno solo)
   REGLA DURA: el estado nunca es solo color. Siempre lleva la palabra.
   ========================================================================== */
.est {
  display: inline-flex; align-items: center; gap: var(--e1);
  padding: 2px var(--e2);
  border-radius: var(--r1);
  border: var(--b1) solid var(--neutro-linea);
  background: var(--neutro-suave); color: var(--neutro-texto);
  font-size: var(--t-micro); font-weight: var(--peso-fuerte); line-height: 1.45;
  white-space: nowrap;
}
.est--ok      { background: var(--ok-suave);      color: var(--ok-texto);      border-color: var(--ok-linea); }
.est--aviso   { background: var(--aviso-suave);   color: var(--aviso-texto);   border-color: var(--aviso-linea); }
.est--peligro { background: var(--peligro-suave); color: var(--peligro-texto); border-color: var(--peligro-linea); }
.est--info    { background: var(--info-suave);    color: var(--info-texto);    border-color: var(--info-linea); }
.est--acento  { background: var(--acento-suave);  color: var(--acento-texto);  border-color: var(--acento-linea); }

/* Sólido: solo para UN estado por pantalla, el que hay que ver primero. */
.est--fuerte              { background: var(--neutro);  color: var(--sobre-neutro);  border-color: transparent; }
.est--fuerte.est--ok      { background: var(--ok);      color: var(--sobre-ok); }
.est--fuerte.est--aviso   { background: var(--aviso);   color: var(--sobre-aviso); }   /* tinta, no blanco */
.est--fuerte.est--peligro { background: var(--peligro); color: var(--sobre-peligro); }
.est--fuerte.est--info    { background: var(--info);    color: var(--sobre-info); }

/* Punto de estado, para listas muy densas donde no entra la palabra.
   Va SIEMPRE con title/aria-label. */
.punto { width: 8px; height: 8px; border-radius: var(--r-pill); flex: none;
         box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset; background: var(--neutro); }
.punto--ok { background: var(--ok); } .punto--aviso { background: var(--aviso-barra); }
.punto--peligro { background: var(--peligro); } .punto--info { background: var(--info); }

/* Contador de notificaciones */
.cont {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--peligro); color: var(--sobre-peligro);
  font-size: var(--t-micro); font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   TABLA Y LISTA
   ========================================================================== */
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-base); font-variant-numeric: tabular-nums; }
.tabla th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; padding: var(--e2) var(--e3);
  background: var(--sup-2); color: var(--tinta-2);
  font-size: var(--t-micro); font-weight: var(--peso-fuerte);
  text-transform: uppercase; letter-spacing: var(--track-rotulo);
  border-bottom: var(--b1) solid var(--linea-fuerte);
  white-space: nowrap;
}
.tabla td { padding: var(--e2) var(--e3); border-bottom: var(--b1) solid var(--linea); vertical-align: top; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--sup-2); }              /* sin cebra */
.tabla tbody tr[aria-selected="true"] { background: var(--acento-suave); box-shadow: inset var(--b3) 0 0 var(--acento); }
.tabla .n { text-align: right; white-space: nowrap; }
/* Cualquier tabla ancha scrollea adentro de su caja, nunca empuja la página. */
.tabla-scroll { overflow-x: auto; margin: 0 calc(var(--e4) * -1); padding: 0 var(--e4); }

.lista { display: flex; flex-direction: column; }
.lista__it {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-bottom: var(--b1) solid var(--linea);
  cursor: pointer; text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0;
  min-height: var(--toque);
}
.lista__it:last-child { border-bottom: 0; }
.lista__it:hover { background: var(--sup-2); }
.lista__it[aria-current="true"] { background: var(--acento-suave); box-shadow: inset var(--b3) 0 0 var(--acento); }
.lista__it .tit { font-weight: var(--peso-medio); }
.lista__it .sub {
  font-size: var(--t-micro); color: var(--tinta-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;   /* nunca desborda */
}

/* ==========================================================================
   SOLAPAS — scroll horizontal, nunca wrap.
   ========================================================================== */
.solapas {
  display: flex; gap: var(--e1);
  padding: 0 var(--e4);
  border-bottom: var(--b1) solid var(--linea-fuerte);
  background: var(--sup);
  overflow-x: auto; flex-wrap: nowrap;
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.solapas::-webkit-scrollbar { display: none; }
.solapas button {
  flex: none; scroll-snap-align: start;
  min-height: var(--toque);
  padding: 0 var(--e3);
  background: none; border: 0; border-bottom: var(--b2) solid transparent;
  color: var(--tinta-2);
  font: var(--peso-medio) var(--t-base)/1 var(--fuente);
  cursor: pointer; white-space: nowrap;
  margin-bottom: -1px;
}
.solapas button:hover { color: var(--tinta); background: var(--sup-2); }
.solapas button[aria-selected="true"] { color: var(--acento); border-bottom-color: var(--acento); font-weight: var(--peso-fuerte); }

/* ==========================================================================
   BARRA DE NAVEGACIÓN LATERAL
   ========================================================================== */
.lateral {
  width: 340px; flex: none;
  background: var(--sup);
  border-right: var(--b1) solid var(--linea-fuerte);
  padding: var(--e3);
  overflow-y: auto;
}
.nav { display: flex; flex-direction: column; gap: 1px; margin-bottom: var(--e4); }
.nav__sec {
  margin: var(--e4) var(--e2) var(--e1);
  font-size: var(--t-micro); font-weight: var(--peso-fuerte);
  text-transform: uppercase; letter-spacing: var(--track-rotulo);
  color: var(--tinta-2);
}
.nav__sec:first-child { margin-top: 0; }
.nav__it {
  display: flex; align-items: center; gap: var(--e2);
  width: 100%; min-height: var(--toque);
  padding: 0 var(--e2);
  background: none; border: 0; border-radius: var(--r2);
  color: var(--tinta); font: var(--peso-medio) var(--t-base)/1 var(--fuente);
  text-align: left; cursor: pointer;
}
.nav__it:hover { background: var(--sup-2); }
.nav__it[aria-current="page"] {
  background: var(--acento-suave); color: var(--acento-texto); font-weight: var(--peso-fuerte);
  box-shadow: inset var(--b3) 0 0 var(--acento);
}
.nav__it .ico { width: 22px; text-align: center; font-size: var(--t-sec); line-height: 1; flex: none; }
.nav__it .cont { margin-left: auto; }

/* ==========================================================================
   PANEL FLOTANTE SOBRE EL MAPA
   ========================================================================== */
.pila-flotante {
  position: fixed; top: var(--e3); right: var(--e3); z-index: var(--z-flotante);
  display: flex; flex-direction: column; gap: var(--e2);
  width: 208px; max-height: calc(100vh - var(--e6));
}
.panel {
  background: var(--elev);
  border: var(--b1) solid var(--linea-fuerte);
  border-radius: var(--r3);
  box-shadow: var(--sombra-2);
  overflow: clip; min-height: 0;
}
.panel__cab {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e3); min-height: 36px;
  border-bottom: var(--b1) solid var(--linea);
  font-size: var(--t-micro); font-weight: var(--peso-fuerte);
  text-transform: uppercase; letter-spacing: var(--track-rotulo); color: var(--tinta-2);
  cursor: grab; user-select: none;
}
.panel__cuerpo { padding: var(--e2) var(--e3); overflow-y: auto; }
.panel.plegado .panel__cuerpo { display: none; }

.herramientas { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--toque), 1fr)); gap: var(--e1); }
.herramientas .btn--icono { width: 100%; }
.herramientas .btn--icono[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); }
@media (max-width: 720px) {
  .pila-flotante { top: auto; bottom: var(--e2); left: var(--e2); right: var(--e2); width: auto; }
}

/* ==========================================================================
   MODAL Y VENTANA
   ========================================================================== */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--e5) var(--e3);
  background: rgba(20,19,17,.55);        /* velo, no blur                     */
}
.modal[hidden] { display: none; }
.ventana {
  display: flex; flex-direction: column;
  width: min(900px, 100%); max-height: 88vh;
  background: var(--sup);
  border: var(--b1) solid var(--linea-fuerte);
  border-radius: var(--r3);
  box-shadow: var(--sombra-3);
  overflow: clip;
}
.ventana__barra {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e3); min-height: 48px;
  border-bottom: var(--b1) solid var(--linea-fuerte);
  background: var(--sup-2);
  cursor: move; user-select: none;
}
.ventana__barra h3 {
  flex: 1; min-width: 60px;
  font-size: var(--t-sec); font-weight: var(--peso-fuerte);
  text-transform: none; letter-spacing: 0; color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Los controles de ventana NUNCA se comprimen. */
.ventana__ctrl { display: inline-flex; gap: var(--e1); flex: none; margin-left: auto; }
.ventana__cuerpo { flex: 1; min-height: 0; overflow: auto; padding: var(--e4); }
.ventana__pie {
  padding: var(--e3) var(--e4); border-top: var(--b1) solid var(--linea);
  background: var(--sup-2); display: flex; gap: var(--e2); justify-content: flex-end;
}

/* Menú contextual / desplegable */
.menu {
  position: fixed; z-index: var(--z-menu); min-width: 190px; padding: var(--e1);
  background: var(--elev); border: var(--b1) solid var(--linea-fuerte);
  border-radius: var(--r2); box-shadow: var(--sombra-2);
}
.menu__cab {
  padding: var(--e1) var(--e2) var(--e2);
  font-size: var(--t-micro); color: var(--tinta-2);
  border-bottom: var(--b1) solid var(--linea); margin-bottom: var(--e1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menu button {
  display: block; width: 100%; min-height: 34px; padding: 0 var(--e2);
  background: none; border: 0; border-radius: var(--r1);
  color: var(--tinta); font: var(--peso-normal) var(--t-base)/1 var(--fuente);
  text-align: left; cursor: pointer;
}
.menu button:hover { background: var(--acento-suave); color: var(--acento-texto); }
.menu button.peligro:hover { background: var(--peligro-suave); color: var(--peligro-texto); }

/* ==========================================================================
   TOOLTIP
   ========================================================================== */
/* OJO: acá NO va ".tip" suelto. En ayuda.html y sugerencias.html .tip es una
   cinta de aviso de toda la vida, y pintarla de negro la dejaba ilegible.
   El tooltip oscuro genérico es .tip-oscuro. */
.tip-oscuro, .leaflet-tooltip.ptTip {
  z-index: var(--z-tip);
  max-width: 260px;
  padding: var(--e1) var(--e2);
  background: #1C1B18; color: #FAF9F6;
  border: 0; border-radius: var(--r1);
  box-shadow: var(--sombra-2);
  font: var(--peso-medio) var(--t-micro)/1.35 var(--fuente);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.leaflet-tooltip.ptTip::before { border-top-color: #1C1B18; }

/* ==========================================================================
   CINTA DE AVISO
   ========================================================================== */
.cinta {
  display: flex; align-items: flex-start; gap: var(--e2);
  padding: var(--e2) var(--e3);
  margin: var(--e2) 0;
  background: var(--neutro-suave); color: var(--tinta);
  border: var(--b1) solid var(--neutro-linea);
  border-left: var(--b3) solid var(--neutro);
  border-radius: var(--r2);
  font-size: var(--t-base);
}
.cinta--ok      { background: var(--ok-suave);      border-color: var(--ok-linea);      border-left-color: var(--ok); }
.cinta--aviso   { background: var(--aviso-suave);   border-color: var(--aviso-linea);   border-left-color: var(--aviso-barra); }
.cinta--peligro { background: var(--peligro-suave); border-color: var(--peligro-linea); border-left-color: var(--peligro); }
.cinta--info    { background: var(--info-suave);    border-color: var(--info-linea);    border-left-color: var(--info); }
.cinta b { font-weight: var(--peso-fuerte); }

/* Cinta fija abajo. Respeta el notch. */
.cinta-fija {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-cinta);
  margin: 0; border-radius: 0; border-left: 0;
  border-top: var(--b2) solid var(--acento);
  padding-bottom: max(var(--e2), env(safe-area-inset-bottom));
  box-shadow: var(--sombra-2);
}

/* ==========================================================================
   ESTADO DE CARGA
   ========================================================================== */
.hueso { background: var(--sup-2); border-radius: var(--r1); animation: latir 1.2s var(--curva) infinite; }
@keyframes latir { 0%,100% { opacity: 1 } 50% { opacity: .5 } }
.vacio { padding: var(--e7) var(--e4); text-align: center; color: var(--tinta-2); }

/* ==========================================================================
   UTILIDADES
   ========================================================================== */
.tenue    { color: var(--tinta-2); }
.tenue-2  { color: var(--tinta-3); }
.micro    { font-size: var(--t-micro); line-height: var(--lh-micro); }
.cifra    { font-size: var(--t-cifra); line-height: var(--lh-cifra); font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; }
.num      { font-variant-numeric: tabular-nums; }
.mono     { font-family: var(--fuente-mono); font-size: var(--t-micro); }
.recorta  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fila     { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.pila     { display: flex; flex-direction: column; gap: var(--e2); }
.sep      { flex: 1; }

/* KPI de monitoreo */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--e2); }
.kpi { padding: var(--e3); background: var(--sup); border: var(--b1) solid var(--linea-fuerte); border-radius: var(--r2); }
.kpi .rot { font-size: var(--t-micro); font-weight: var(--peso-medio); color: var(--tinta-2); }

/* Rejilla de puertos del splitter/switch. */
.puertos { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: var(--e1); margin: var(--e2) 0; }
.puertos .pt {
  height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r1); font-size: var(--t-micro); font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
}
[data-densidad="campo"] .puertos { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
[data-densidad="campo"] .puertos .pt { height: 40px; }
.puertos .pt:hover { outline: var(--b2) solid var(--tinta); outline-offset: 1px; }

/* ==========================================================================
   COMPAT — mapea las clases actuales a los componentes nuevos.
   Se va borrando a medida que el HTML se pasa a las clases nuevas.
   Cada página puede pisar cualquiera de estas reglas desde su propio <style>,
   que se carga después.
   ========================================================================== */
.card, .caja, #login {
  background: var(--sup); border: var(--b1) solid var(--linea-fuerte);
  border-radius: var(--r3); margin-bottom: var(--e3);
}
.e { background: var(--sup); border: var(--b1) solid var(--linea-fuerte);
     border-radius: var(--r3); margin-bottom: var(--e3);
     border-left: var(--b3) solid var(--peligro); }
.e.resuelta { border-left-color: var(--ok); }
.s { background: var(--sup); border: var(--b1) solid var(--linea-fuerte);
     border-radius: var(--r3); margin-bottom: var(--e3);
     border-left: var(--b3) solid var(--aviso-barra); }
.s.hecha { border-left-color: var(--ok); } .s.descartada { border-left-color: var(--neutro); }
.pad { padding: var(--e4); }

/* Botón suelto sin clase: hereda el botón del sistema.
   Va a especificidad mínima (0,0,1) A PROPÓSITO. Con la cadena de :not() que
   tenía antes quedaba en (0,4,3) y le ganaba a .solapas button, a .btn y —lo
   que rompía de verdad— a button.sec / button.no / nav.tabs button de cada
   página: los secundarios y los rojos salían todos azules. Con (0,0,1)
   cualquier regla con una clase le gana, que es lo que queremos. */
button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: var(--toque); padding: 0 var(--e3);
  border: var(--b1) solid transparent; border-radius: var(--r2);
  font: var(--peso-medio) var(--t-base)/1 var(--fuente); cursor: pointer;
  background: var(--acento); color: var(--sobre-acento);
}
button.sec, button.secundario, button.ghost, #navBack, .adj {
  background: var(--sup); color: var(--tinta); border-color: var(--linea-campo);
}
button.sec:hover, button.secundario:hover, button.ghost:hover { background: var(--sup-2); }
button.ok { background: var(--ok); color: var(--sobre-ok); }
button.no { background: var(--peligro); color: var(--sobre-peligro); }
button.p  { background: var(--acento); color: var(--sobre-acento); }

.badge, .chip, .pill, .tag, .req, .veces {
  display: inline-flex; align-items: center; gap: var(--e1); padding: 2px var(--e2);
  border-radius: var(--r1); border: var(--b1) solid var(--neutro-linea);
  background: var(--neutro-suave); color: var(--neutro-texto);
  font-size: var(--t-micro); font-weight: var(--peso-fuerte); line-height: 1.45;
  white-space: nowrap; text-transform: none; letter-spacing: 0;
}
.b-APROBADA,.b-CHEQUEADA,.b-PRODUCCION,.b-ok,.chip.HECHA,.up
  { background: var(--ok-suave); color: var(--ok-texto); border-color: var(--ok-linea); }
.b-EN_CURSO,.b-ESPERA_APROBACION,.b-ALTA,.b-TERMINADA,.b-pend,.chip.NUEVA,.badge.FRONT
  { background: var(--aviso-suave); color: var(--aviso-texto); border-color: var(--aviso-linea); }
.b-RECHAZADA,.b-URGENTE,.b-no,.down,.req,.badge.PROCESO
  { background: var(--peligro-suave); color: var(--peligro-texto); border-color: var(--peligro-linea); }
.b-ASIGNADA,.b-VALIDADA,.b-mail,.chip.EN_ESTUDIO,.chip.EN_CURSO,.badge.API,.badge.FONDO
  { background: var(--info-suave); color: var(--info-texto); border-color: var(--info-linea); }
.b-PENDIENTE,.unk,.chip.DESCARTADA
  { background: var(--neutro-suave); color: var(--neutro-texto); border-color: var(--neutro-linea); }

.msg { border-radius: var(--r2); padding: var(--e2) var(--e3); margin: var(--e2) 0; font-size: var(--t-base);
       border: var(--b1) solid var(--neutro-linea); border-left: var(--b3) solid var(--neutro); }
.err  { background: var(--peligro-suave); border: var(--b1) solid var(--peligro-linea);
        border-left: var(--b3) solid var(--peligro); border-radius: var(--r2); color: var(--tinta); }
/* OJO: acá va .okbox y NO .ok — ".ok" también es un botón verde (button.ok) y
   pintarlo de verde clarito lo dejaba con texto blanco ilegible. */
.okbox { background: var(--ok-suave); border: var(--b1) solid var(--ok-linea);
         border-left: var(--b3) solid var(--ok); border-radius: var(--r2); color: var(--tinta); }
.warn, .tip { background: var(--aviso-suave); border: var(--b1) solid var(--aviso-linea);
        border-left: var(--b3) solid var(--aviso-barra); border-radius: var(--r2); color: var(--tinta); }
.lock { background: var(--neutro-suave); border-color: var(--neutro-linea); }

.muted, .hint, .sub, .stat, .meta, .mes, label.f, th, figcaption, .cerca { color: var(--tinta-2); }
.hint { font-style: normal; }            /* el itálico gris del cotizador se va */
header a.back, .back { color: var(--acento); }

/* ==========================================================================
   CELULAR Y TABLET — el mismo diseño, pero tocado con el dedo.
   Va ÚLTIMO a propósito: pisa lo de arriba sin subirle la especificidad a
   ninguna regla, así cada página puede seguir pisándolo desde su <style>.
   En liniero.html y ordenes.html no cambia nada: [data-densidad="campo"]
   declara --toque sobre el <body> y le gana a este :root.
   El "pointer: coarse" está porque el problema es el dedo, no el ancho: una
   tablet de 1024 se toca igual que un celular.
   El "screen and" de las DOS ramas es obligatorio: una hoja A4 mide 794px, así
   que sin eso esto también le pegaba al PDF de la cotización que se le manda
   al cliente (campos de 16px y botones de 44 en el papel).
   ========================================================================== */
@media screen and (max-width: 900px), screen and (pointer: coarse) {
  :root { --toque: 44px; }   /* mínimo de dedo; 40 es medida de mouse */

  /* iOS Safari hace ZOOM SOLO al enfocar un campo de menos de 16px y deja la
     pantalla corrida — es el clásico "se me mueve todo" arriba de un poste.
     16px no es una preferencia de diseño, es el piso del sistema operativo. */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    font-size: 16px;
  }

  /* Con guantes, a una casilla de 18px no se le pega. */
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
}

/* ==========================================================================
   MOVIMIENTO — SÓLO transiciones de hover/estado.
   Las ANIMACIONES de ENTRADA (animation:dn-* con opacity:0) se SACARON: sobre un
   modal que se muestra con display (o quitando [hidden]), la animación se podía
   quedar pegada en su primer frame (opacity:0) y el modal salía INVISIBLE. La
   correctitud manda: los modales descansan en opacity:1 y se ven siempre. Quedan
   sólo las transiciones (hover/estado), que no afectan la visibilidad.
   ========================================================================== */

/* Hover: que TODO el sistema responda como el .btn, que ya interpola su fondo.
   Aditivo, sólo hover/estado — no cambia colores ni layout. */
.nav__it, .volver, .menu button {
  transition: background var(--vel-1) var(--curva), color var(--vel-1) var(--curva);
}
/* El subrayado de la solapa activa se desliza en vez de parpadear. */
.solapas button {
  transition: color var(--vel-1) var(--curva),
              border-bottom-color var(--vel-1) var(--curva),
              background var(--vel-1) var(--curva);
}