/* ===========================================================================
   Sistema visual de la suite de la Secretaria de Cultura de Cali
   Zenda Lab · bloque C0 · 06/10/2026

   De donde sale cada decision (metodo del 24/09/2026: ninguna decision de
   color, tipografia o forma sale del criterio de un agente, sale de un
   referente humano con autor, fecha y reglas documentadas):

   - Direccion F, "registro publico", de docs/sistema-visual/05-direcciones.html
     (Zenda, 28/09/2026). Pagina blanca, tinta #0b0c0c, franja negra de
     cabecera y un solo color de realce.
   - Unigrid, Massimo Vignelli, 1977, para el National Park Service: la franja
     negra con el nombre de la entidad y la reticula de columnas desiguales.
   - GOV.UK Design System: tinta #0b0c0c sobre pagina blanca, texto de 16 px o
     mas, foco de teclado visible y grueso.
   - Formato Senal de Zenda (REGLAS-DISENO-ZENDA v1.5 §1, 08/10/2026): datos
     normales en gris y rojo #C8102E solo para lo que se sale de lo esperado.
   - ISA-101, interfaces de alto desempeno: base de baja saturacion y color
     reservado a la desviacion.
   - Ancizar Sans y Ancizar Serif, Cesar Puertas, 2014, para la Universidad
     Nacional de Colombia. Tipografia colombiana, fuera de la lista vetada de
     MANDAMIENTOS-ESTILO-ZENDA.md VI.

   Lo que este archivo no hace, por norma: ningun degradado, ninguna sombra
   difusa, ningun material de vidrio, ningun semaforo de color, ninguna
   pastilla de estado, ningun radio mayor a 3 px.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Tipografia Ancizar, servida desde el propio servidor.

   Estaba cargada desde Google Fonts, y eso tiene dos problemas para una entidad
   publica. El primero es que la red de la Secretaria puede bloquear ese dominio
   y entonces toda la suite cae a la tipografia del sistema: no se rompe, pero
   deja de ser el documento que alguien aprobo. El segundo es que cada persona
   que abre una pantalla le avisa a un tercero que la abrio.

   Son 14 archivos y 343 KB, solo los subconjuntos latino y latino extendido,
   que es lo que necesita el espaniol. El griego y el cirilico de la familia no
   se bajaron. Ancizar la hizo Cesar Puertas para la Universidad Nacional de
   Colombia en 2014 y se distribuye con licencia abierta (SIL OFL): se puede
   servir desde aqui.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Ancizar Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fuentes/ancizar-sans-400-italica-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ancizar Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fuentes/ancizar-sans-400-italica-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ancizar Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fuentes/ancizar-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ancizar Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fuentes/ancizar-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ancizar Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fuentes/ancizar-sans-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ancizar Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fuentes/ancizar-sans-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ancizar Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fuentes/ancizar-sans-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ancizar Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fuentes/ancizar-sans-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ancizar Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fuentes/ancizar-sans-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ancizar Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fuentes/ancizar-sans-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ancizar Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fuentes/ancizar-serif-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ancizar Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fuentes/ancizar-serif-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ancizar Serif';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fuentes/ancizar-serif-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ancizar Serif';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fuentes/ancizar-serif-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------
   1. Fichas de color. Modo papel por defecto (registro publico).
   --------------------------------------------------------------------------- */

:root {
  /* Superficies */
  --fondo:        #FFFFFF;
  --sup:          #FFFFFF;
  --panel:        #F3F3F3;
  --elev:         #EAEAEA;
  --franja:       #0b0c0c;
  --franja-txt:   #FFFFFF;
  --franja-sub:   #B8BABA;
  --franja-regla: #484949;

  /* Tinta */
  --tinta:   #0b0c0c;
  --tinta2:  #484949;
  --tinta3:  #5E6264;
  --tinta-inv: #FFFFFF;

  /* Reglas finas: la primera firma de Zenda */
  --regla:    #0b0c0c;          /* regla estructural, 1 px */
  --regla-n:  #D6D6D6;          /* regla entre filas */
  --regla-t:  #E6E6E6;          /* regla tenue, reticula de medida */

  /* Alarma del formato Senal: rojo #C8102E (ANSI Z535.1, PMS 186 C), solo para
     lo que se sale de lo esperado. Blanco sobre este rojo: 5,88:1. La
     interaccion y el foco van en negro y blanco. */
  --senal:       #C8102E;
  --senal-txt:   #FFFFFF;
  --senal-tenue: rgba(200,16,46,.08);
  --foco:        #0b0c0c;

  /* Acciones */
  --btn:        #0b0c0c;
  --btn-txt:    #FFFFFF;
  --btn-2:      transparent;
  --btn-2-txt:  #0b0c0c;
  --btn-2-borde:#0b0c0c;

  /* Rampa de magnitud del formato Senal: grises, de claro a oscuro. Los datos
     normales no llevan color. Cinco cortes. */
  --mag-1: #DADADA;
  --mag-2: #BDBDBD;
  --mag-3: #969696;
  --mag-4: #6B6B6B;
  --mag-5: #3D3D3D;
  /* Sin dato: sin relleno, se ve la imagen de base y el borde del territorio.
     Nunca se pinta como cero ni como el gris mas claro. */
  --mag-0: rgba(0,0,0,0);

  /* Segunda serie, solo en graficos: gris medio frente a la tinta. */
  --serie-2: #8A8A8A;

  /* Rampa de CAIDA, para el mapa de cambio contra el anio anterior.
     Polaridad (LINEAMIENTOS §4): gris neutro al centro, el lado anormal en el
     rojo de alarma y el otro en tinta. La subida usa la rampa de grises; la
     caida, rojo de claro a oscuro. Se distinguen tambien por luminosidad. */
  --cae-1: #F2C9D0;
  --cae-2: #E3909E;
  --cae-3: #D4546A;
  --cae-4: #C8102E;
  --cae-5: #8E0B21;
  /* Sin cambio: el territorio esta, y ni subio ni bajo. No es dato faltante. */
  --igual: #F3F3F3;

  /* Sobre el mapa */
  --sobre-mapa:   rgba(255,255,255,.95);
  --borde-poli:   rgba(255,255,255,.80);
  --anillo-punto: #0b0c0c;
  --halo-etq:     rgba(11,12,12,.85);

  /* Tipografia */
  --f-ui:  'Ancizar Sans', 'Segoe UI', system-ui, sans-serif;
  --f-tit: 'Ancizar Sans', 'Segoe UI', system-ui, sans-serif;
  --f-dat: 'Ancizar Sans', 'Segoe UI', system-ui, sans-serif;
  --f-doc: 'Ancizar Serif', Cambria, serif;   /* solo informes impresos */

  /* Escala de tamanos. Una pantalla usa tres, no mas. */
  --t-micro: 11.5px;
  --t-chico: 13px;
  --t-base:  16px;
  --t-medio: 19px;
  --t-tit:   25px;
  --t-cifra: 38px;
  --t-cifra-g: 52px;

  /* Espacio en multiplos de 8 */
  --e1: 4px;  --e2: 8px;  --e3: 16px; --e4: 24px;
  --e5: 32px; --e6: 48px; --e7: 64px;

  /* Forma */
  --radio: 2px;
  --fila:  36px;
  --fila-tactil: 44px;

  /* Movimiento */
  --mov: 180ms;
  --mov-curva: cubic-bezier(.2,.6,.3,1);

  color-scheme: light;
}

/* Modo sala de mando (formato Senal, REGLAS v1.5 §1.1): fondo #DDDDDD para
   pantallas que se miran de lejos o durante horas. Las superficies de trabajo
   quedan en blanco sobre el gris. El formato Senal no tiene modo oscuro, asi
   que la suite ya no sigue el modo oscuro del sistema operativo. */
:root[data-modo="instrumento"] {
  --fondo:        #DDDDDD;
  --sup:          #FFFFFF;
  --panel:        #EBEBEB;
  --elev:         #F3F3F3;
  --regla-n:      #C4C4C4;
  --regla-t:      #D0D0D0;
  --igual:        #EBEBEB;
  color-scheme: light;
}

/* ---------------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--f-ui);
  font-size: var(--t-base);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--f-tit); font-weight: 600; margin: 0; line-height: 1.2; }
h1 { font-size: var(--t-tit); letter-spacing: -.006em; }
h2 { font-size: var(--t-medio); }
h3 { font-size: var(--t-base); }
h4 { font-size: var(--t-chico); }
p  { margin: 0 0 var(--e2); }

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--tinta3);
}
a:hover { border-bottom-color: var(--tinta); }

/* Foco de teclado siempre visible. GOV.UK pide que no se pueda perder. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 1px;
  border-radius: 0;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) { outline: none; }

::selection { background: rgba(11,12,12,.14); }

/* Salto al contenido, para teclado y lector de pantalla */
.z-salto {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--fondo); color: var(--tinta);
  padding: var(--e2) var(--e3); border: 1px solid var(--regla);
}
.z-salto:focus { left: var(--e3); top: var(--e2); }

/* ---------------------------------------------------------------------------
   3. Piezas de texto
   --------------------------------------------------------------------------- */

/* Etiqueta pequena en versalitas. Nombra el dato, no pregunta por el. */
.z-etq {
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta3);
  font-weight: 600;
}

/* Linea de procedencia: la firma mas dificil de imitar. Va bajo cada cifra,
   tabla, grafico y mapa, con fuente y corte. */
.z-proc {
  font-size: var(--t-micro);
  color: var(--tinta3);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  margin-top: var(--e2);
}
.z-proc b { font-weight: 600; color: var(--tinta2); }

/* Cifra en contexto: nunca sola. Dentro de su bloque, con dueno, periodo y
   fuente. La fila de tarjetas de indicadores iguales esta vetada. */
.z-cifra {
  font-size: var(--t-cifra);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.z-cifra-g { font-size: var(--t-cifra-g); }
.z-unidad {
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta3);
  margin-left: var(--e1);
  font-weight: 600;
}
.z-dato { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Dato que falta: se declara, no se esconde ni se pinta como cero. */
.z-sin-dato { color: var(--tinta3); font-style: italic; }

/* Marca de demostracion. Todo dato sintetico la lleva a la vista. */
.z-demo {
  display: inline-block;
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--senal-txt);
  background: var(--senal);
  padding: 1px 6px;
}

/* Desviacion: lo anormal se marca con una regla de senal, no con un semaforo. */
.z-desvio { box-shadow: inset 0 2px 0 var(--senal); padding-left: var(--e2); }

/* ---------------------------------------------------------------------------
   4. Estructura: franja, zonas, reglas
   --------------------------------------------------------------------------- */

/* Franja de cabecera, al modo Unigrid: el nombre de la entidad manda la pagina. */
.z-franja {
  background: var(--franja);
  color: var(--franja-txt);
  display: flex;
  align-items: stretch;
  min-height: 56px;
  border-bottom: 1px solid var(--franja-regla);
}
.z-franja .z-marca {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--e2) var(--e4) var(--e2) var(--e3);
  border-right: 1px solid var(--franja-regla);
  /* El nombre de la entidad no se parte en dos lineas. Cuando entro el
     buscador a la franja, el reparto de espacio lo dejo como "Secretaria de
     Cultura de Santiago de / Cali", que es exactamente la clase de detalle que
     hace ver descuidada una pantalla institucional. Lo que cede espacio es el
     menu, que sabe encogerse. */
  flex: 0 0 auto;
}
.z-franja nav { flex: 1 1 auto; min-width: 0; }
.z-franja .z-marca strong { font-size: var(--t-chico); font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.z-franja .z-marca span { font-size: var(--t-micro); color: var(--franja-sub); letter-spacing: .08em; text-transform: uppercase; }
.z-franja nav { display: flex; align-items: stretch; flex: 1 1 auto; overflow-x: auto; }
.z-franja nav a {
  display: flex; align-items: center;
  padding: 0 var(--e3);
  color: var(--franja-sub);
  border: 0; border-right: 1px solid var(--franja-regla);
  font-size: var(--t-chico); font-weight: 500;
  white-space: nowrap;
  transition: color var(--mov) var(--mov-curva);
}
.z-franja nav a:hover { color: var(--franja-txt); }
.z-franja nav a[aria-current="page"] {
  color: var(--franja-txt);
  box-shadow: inset 0 -3px 0 var(--franja-txt);
}
.z-franja .z-derecha { display: flex; align-items: center; gap: var(--e2); padding: 0 var(--e3); border-left: 1px solid var(--franja-regla); }

/* Reticula de 12 columnas con zonas desiguales. Cada pantalla tiene una zona
   que domina; la simetria por defecto esta vetada. */
.z-rejilla { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--e4); }
/* Separador fino entre grupos de botones de una misma barra de controles. */
.z-sep-v { display: inline-block; width: 1px; height: 12px; background: var(--regla-n); margin: 0 10px; vertical-align: middle; }
/* Fila de controles que pasa a dos lineas cuando no cabe, en vez de desbordarse. */
.z-env { flex-wrap: wrap; row-gap: 4px; }
.z-c2  { grid-column: span 2; }
.z-c3  { grid-column: span 3; }
.z-c4  { grid-column: span 4; }
.z-c5  { grid-column: span 5; }
.z-c6  { grid-column: span 6; }
.z-c7  { grid-column: span 7; }
.z-c8  { grid-column: span 8; }
.z-c9  { grid-column: span 9; }
.z-c12 { grid-column: span 12; }

.z-pagina { padding: var(--e4) var(--e4) var(--e6); max-width: 1680px; margin: 0 auto; }

/* En pantallas angostas las zonas se apilan. Sin esto, una columna de 5 de 12
   en un celular deja una palabra por linea. */
@media (max-width: 1040px) {
  .z-c2, .z-c3, .z-c4, .z-c6 { grid-column: span 6; }
  .z-c5, .z-c7, .z-c8, .z-c9 { grid-column: span 12; }
}
@media (max-width: 720px) {
  /* En el celular el encabezado se apila: el boton de la derecha metido en una
     columna angosta queda en cuatro lineas y se ve roto. */
  .z-entre > * { flex: 1 1 100%; }
  .z-entre .z-fila, .z-entre .z-col { justify-content: flex-start; align-items: stretch; }
  /* La barra de controles de un encabezado se parte en varias lineas en el
     celular. La ficha de territorio llego a tener tres selectores y un boton:
     en una linea miden 498 px y empujaban la pagina hacia el lado. Los
     selectores se reparten el ancho disponible en vez de salirse. */
  .z-entre .z-fila { flex-wrap: wrap; row-gap: 8px; }
  .z-entre .z-fila > select { flex: 1 1 46%; min-width: 0; width: auto; }
  .z-entre .z-fila > button, .z-entre .z-fila > a.z-btn { flex: 1 1 100%; }
  .z-rejilla { gap: var(--e3); }
  .z-rejilla > [class*="z-c"] { grid-column: span 12; }
  .z-pagina { padding: var(--e3) var(--e3) var(--e6); }
}

/* ---------------------------------------------------------------------------
   Buscador de la franja
   Va sobre fondo oscuro, asi que no usa los tokens del campo de formulario:
   un campo blanco ahi parte la franja en dos.
   --------------------------------------------------------------------------- */

.z-buscar { position: relative; display: flex; align-items: center; }
/* El selector lleva el tipo a proposito: la regla general de los campos de
   formulario tambien lo lleva, asi que sin el las dos pesan igual, gana la que
   va despues en la hoja y el campo sale blanco sobre la franja negra. */
.z-buscar input[type="search"] {
  min-height: 30px; width: 190px; padding: 0 10px;
  background: transparent; color: var(--franja-txt);
  border: 1px solid var(--franja-regla); border-radius: 2px;
  font-family: var(--f-ui); font-size: 13px;
}
.z-buscar input[type="search"]::placeholder { color: var(--franja-sub); opacity: 1; }
.z-buscar input[type="search"]:focus {
  outline: 2px solid var(--franja-txt); outline-offset: 1px;
  border-color: transparent; background: transparent;
}
/* La cruz que Chrome pone en los campos de busqueda es casi invisible en
   oscuro y no hace falta: Esc cierra y borra igual. */
.z-buscar input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.z-buscar-lista {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 70;
  width: 360px; max-height: 60vh; overflow-y: auto;
  background: var(--sup-2); border: 1px solid var(--regla-f);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
}
.z-buscar-fila {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--regla-n);
}
.z-buscar-fila:last-child { border-bottom: 0; }
.z-buscar-fila.z-buscar-activo { background: var(--sup-3); }
/* Regla de acento a la izquierda, igual que la fila de tabla seleccionada. */
.z-buscar-fila.z-buscar-activo { background: var(--panel); font-weight: 600; }
.z-buscar-titulo { color: var(--tinta); font-size: 14px; }
.z-buscar-clase {
  color: var(--tinta3); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; align-self: center;
}
.z-buscar-detalle { color: var(--tinta2); font-size: 12px; grid-column: 1 / -1; }
.z-buscar-vacio { padding: 12px; color: var(--tinta2); font-size: 13px; }

@media (max-width: 720px) {
  .z-buscar input[type="search"] { width: 130px; }
  .z-buscar-lista { width: min(360px, calc(100vw - 32px)); }
}

@media (max-width: 1040px) {
  .z-franja { flex-wrap: wrap; }
  .z-franja .z-marca { flex: 1 0 100%; border-right: 0; border-bottom: 1px solid var(--franja-regla); }
  /* Aqui la marca ya ocupa todo el ancho y el menu va debajo, asi que no hay
     con quien competir por el espacio: vuelve a partirse en dos lineas, que es
     lo unico que cabe en un celular sin empujar la pagina hacia el lado. */
  .z-franja .z-marca strong { white-space: normal; }
  .z-franja nav { flex: 1 1 auto; }
  /* El grupo de la derecha -buscador, rotulo DEMO, modo y correo- no cabe en
     una linea de celular y empujaba la pagina 55 px hacia el lado. Se parte en
     dos lineas y el buscador se queda con el ancho que sobre. */
  .z-franja .z-derecha { padding: var(--e2) var(--e3); flex-wrap: wrap; row-gap: 6px; max-width: 100%; }
  .z-franja .z-derecha .z-buscar { flex: 1 1 100%; }
  .z-buscar input[type="search"] { width: 100%; }
}

/* Pantalla de ingreso: la identidad de la entidad manda, el formulario se
   subordina. En el celular la identidad se vuelve una banda y el formulario
   queda arriba del doblez. */
.z-ingreso { display: grid; grid-template-columns: 7fr 5fr; min-height: 100vh; }
.z-ingreso .z-identidad {
  background: var(--franja); color: var(--franja-txt);
  padding: var(--e6) var(--e6) var(--e5);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--e5);
}
.z-ingreso .z-identidad .z-regla-clara { border-top: 1px solid var(--franja-regla); }
.z-ingreso .z-entrada { padding: var(--e6) var(--e5); display: flex; align-items: center; justify-content: center; }
.z-ingreso .z-entrada > div { width: 100%; max-width: 380px; }
@media (max-width: 880px) {
  .z-ingreso { grid-template-columns: 1fr; min-height: 0; }
  .z-ingreso .z-identidad { padding: var(--e4) var(--e3) var(--e4); gap: var(--e4); }
  .z-ingreso .z-entrada { padding: var(--e4) var(--e3) var(--e6); align-items: flex-start; }
}

/* Bloque: la unidad de contenido. Una sola profundidad, sin tarjetas dentro
   de tarjetas y sin sombra. */
.z-bloque { border-top: 1px solid var(--regla); padding-top: var(--e2); }
.z-bloque > header { display: flex; align-items: baseline; gap: var(--e2); margin-bottom: var(--e2); }
.z-bloque > header h2 { font-size: var(--t-base); }
.z-bloque > header .z-etq { margin-left: auto; }

.z-panel { background: var(--panel); border: 1px solid var(--regla-n); border-radius: var(--radio); padding: var(--e3); }
.z-regla { border: 0; border-top: 1px solid var(--regla-n); margin: var(--e3) 0; }

/* Marcas de registro en las esquinas del area de trabajo, como un plano. */
.z-registro { position: relative; }
.z-registro::before, .z-registro::after {
  content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none;
  border-color: var(--tinta3);
}
.z-registro::before { left: 0; top: 0; border-left: 1px solid; border-top: 1px solid; }
.z-registro::after { right: 0; bottom: 0; border-right: 1px solid; border-bottom: 1px solid; }

/* Reticula de medida: solo dentro de areas de datos, alineada con el eje. */
.z-reticula {
  background-image: repeating-linear-gradient(to top, var(--regla-t) 0 1px, transparent 1px 25%);
}

/* ---------------------------------------------------------------------------
   5. Controles
   --------------------------------------------------------------------------- */

.z-btn {
  font-family: var(--f-ui); font-size: var(--t-chico); font-weight: 600;
  background: var(--btn); color: var(--btn-txt);
  border: 1px solid var(--btn);
  border-radius: var(--radio);
  padding: 10px var(--e3);
  min-height: var(--fila-tactil);
  cursor: pointer;
  transition: opacity var(--mov) var(--mov-curva);
}
.z-btn:hover { opacity: .86; }
.z-btn[disabled] { opacity: .45; cursor: not-allowed; }
.z-btn-2 {
  background: var(--btn-2); color: var(--btn-2-txt);
  border: 1px solid var(--btn-2-borde); font-weight: 500;
}
.z-btn-3 {
  background: none; border: 0; border-bottom: 1px solid var(--tinta3);
  color: var(--tinta); font-size: var(--t-chico); padding: 2px 0; min-height: 0;
  cursor: pointer; font-family: var(--f-ui);
}
.z-btn-3:hover { border-bottom-color: var(--tinta); }
.z-btn-3:disabled { color: var(--tinta3); border-bottom-color: transparent; cursor: not-allowed; }

.z-campo { display: block; margin-bottom: var(--e3); }
.z-campo > label { display: block; font-size: var(--t-chico); font-weight: 600; margin-bottom: var(--e1); }
.z-campo .z-ayuda { font-size: var(--t-micro); color: var(--tinta3); margin-top: var(--e1); }
.z-campo .z-error { font-size: var(--t-chico); color: var(--tinta); margin-top: var(--e1); box-shadow: inset 0 2px 0 var(--senal); padding-left: var(--e2); }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="date"], input[type="number"], select, textarea {
  font-family: var(--f-ui); font-size: var(--t-base);
  width: 100%; min-height: var(--fila-tactil);
  padding: 8px 10px;
  background: var(--sup); color: var(--tinta);
  border: 1px solid var(--tinta3); border-radius: var(--radio);
  font-variant-numeric: tabular-nums;
}
input::placeholder, textarea::placeholder { color: var(--tinta3); }
select { appearance: none; background-image: none; padding-right: var(--e4); }

/* Campo de cifra: la unidad va dentro, a la derecha, en tinta terciaria. */
.z-cifra-campo { position: relative; }
.z-cifra-campo input { text-align: right; padding-right: var(--e6); font-variant-numeric: tabular-nums; }
.z-cifra-campo .z-u {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: var(--t-micro); color: var(--tinta3); letter-spacing: .1em; text-transform: uppercase;
  pointer-events: none;
}

/* Casilla */
.z-casilla { display: flex; align-items: flex-start; gap: var(--e2); font-size: var(--t-chico); cursor: pointer; }
.z-casilla input { width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; accent-color: var(--tinta); flex: 0 0 auto; }

/* Fila de filtros: una sola arriba de la tabla, con el total como cifra. */
.z-filtros {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e3);
  border-bottom: 1px solid var(--regla); padding-bottom: var(--e2); margin-bottom: var(--e2);
}
.z-filtros .z-campo { margin: 0; min-width: 140px; }
.z-filtros .z-campo select, .z-filtros .z-campo input { min-height: 34px; font-size: var(--t-chico); }
.z-filtros .z-total { margin-left: auto; text-align: right; }
.z-filtros .z-total b { font-size: var(--t-medio); font-weight: 600; font-variant-numeric: tabular-nums; }
.z-filtros .z-total small { font-size: var(--t-micro); color: var(--tinta3); margin-left: var(--e1); }

/* ---------------------------------------------------------------------------
   6. Tablas. Regla fina entre filas, sin franjas alternas y sin caja.
   --------------------------------------------------------------------------- */

.z-tabla-env { overflow: auto; max-height: 70vh; }
table.z-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-chico); }
table.z-tabla thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--fondo);
  text-align: left; font-weight: 600;
  font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta2);
  padding: var(--e2) var(--e2);
  border-bottom: 1px solid var(--regla);
  white-space: nowrap;
}
table.z-tabla thead th.n, table.z-tabla td.n { text-align: right; font-variant-numeric: tabular-nums; }
table.z-tabla thead th[aria-sort] { cursor: pointer; user-select: none; }
table.z-tabla thead th[aria-sort]:hover > span { box-shadow: inset 0 -1px 0 var(--tinta2); }
table.z-tabla thead th[aria-sort="none"]::after { content: " \2195"; color: var(--regla-n); }
table.z-tabla thead th[aria-sort="ascending"]::after  { content: " \2191"; color: var(--tinta); }
table.z-tabla thead th[aria-sort="descending"]::after { content: " \2193"; color: var(--tinta); }
table.z-tabla tbody td {
  height: var(--fila);
  padding: 0 var(--e2);
  border-bottom: 1px solid var(--regla-n);
  vertical-align: middle;
}
table.z-tabla tbody tr { cursor: pointer; }
table.z-tabla tbody tr:hover { background: var(--elev); }
table.z-tabla tbody tr[aria-selected="true"] { background: var(--panel); font-weight: 600; }
table.z-tabla tbody tr.z-anulado td { color: var(--tinta3); text-decoration: line-through; }
table.z-tabla td .z-ver { font-size: var(--t-micro); color: var(--tinta2); border-bottom: 1px solid var(--tinta3); }

@media (pointer: coarse) {
  table.z-tabla tbody td { height: var(--fila-tactil); }
}

/* ---------------------------------------------------------------------------
   7. Burbuja de detalle. Una sola por tipo de registro, la misma desde la
   tabla y desde el mapa. Muestra todos los campos; el vacio dice sin dato.
   --------------------------------------------------------------------------- */

.z-burbuja {
  position: fixed; z-index: 60;
  width: 420px; max-width: calc(100vw - 2 * var(--e3));
  max-height: 75vh; display: flex; flex-direction: column;
  background: var(--sup); color: var(--tinta);
  border: 1px solid var(--regla); border-radius: var(--radio);
}
.z-burbuja > header {
  position: sticky; top: 0;
  display: flex; align-items: flex-start; gap: var(--e2);
  padding: var(--e3); border-bottom: 1px solid var(--regla);
  background: var(--sup);
}
.z-burbuja > header h3 { flex: 1 1 auto; font-size: var(--t-base); }
.z-burbuja > header .z-cod { font-size: var(--t-micro); color: var(--tinta3); font-variant-numeric: tabular-nums; }
.z-burbuja > header button {
  background: none; border: 0; cursor: pointer; color: var(--tinta2);
  font-size: var(--t-medio); line-height: 1; padding: 0 var(--e1); font-family: var(--f-ui);
}
.z-burbuja .z-cuerpo { overflow: auto; padding: var(--e3); }
.z-burbuja footer { padding: var(--e3); border-top: 1px solid var(--regla); display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }

/* Lista de definicion separada por reglas finas */
dl.z-campos { margin: 0; }
dl.z-campos > div {
  display: grid; grid-template-columns: 148px 1fr; gap: var(--e2);
  padding: 7px 0; border-bottom: 1px solid var(--regla-n);
}
dl.z-campos dt { font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta3); font-weight: 600; }
dl.z-campos dd { margin: 0; font-size: var(--t-chico); overflow-wrap: anywhere; }
dl.z-campos dd.n { font-variant-numeric: tabular-nums; }
dl.z-campos .z-grupo { display: block; grid-template-columns: none; border-bottom: 0; padding-top: var(--e3); }

/* Resumen del cursor sobre el mapa */
.z-resumen {
  position: fixed; z-index: 55; width: 272px;
  background: var(--sobre-mapa); color: var(--tinta);
  border: 1px solid var(--regla); border-radius: var(--radio);
  padding: var(--e2) var(--e3) var(--e3);
}
.z-resumen h4 { font-size: var(--t-chico); margin-bottom: var(--e1); }
.z-resumen .z-v { display: flex; align-items: baseline; gap: var(--e1); }
.z-resumen .z-v b { font-size: var(--t-medio); font-weight: 600; font-variant-numeric: tabular-nums; }
.z-resumen button { width: 100%; margin-top: var(--e2); text-align: left; }

/* En el celular la burbuja sube desde abajo como una hoja. */
@media (max-width: 720px) {
  .z-burbuja {
    left: 0; right: 0; bottom: 0; top: auto; width: auto;
    max-height: 86vh; border-radius: var(--radio) var(--radio) 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
  }
  .z-resumen { left: var(--e2); right: var(--e2); width: auto; }
  dl.z-campos > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------------------------------------------------------------------------
   8. Mapa
   --------------------------------------------------------------------------- */

.z-mapa { position: relative; background: var(--panel); }
.z-mapa canvas:focus { outline: 3px solid var(--foco); }
.z-sobre-mapa {
  position: absolute; z-index: 10;
  background: var(--sobre-mapa); color: var(--tinta);
  border: 1px solid var(--regla-n); border-radius: var(--radio);
  padding: var(--e2);
  font-size: var(--t-micro);
}
.z-mapa .maplibregl-ctrl-attrib, .z-mapa .maplibregl-ctrl-attrib a {
  font-family: var(--f-ui); font-size: 10.5px; color: var(--tinta2) !important;
  background: var(--sobre-mapa) !important;
}
.z-mapa .maplibregl-ctrl-scale {
  font-family: var(--f-ui); font-size: 10.5px; font-variant-numeric: tabular-nums;
  background: var(--sobre-mapa); color: var(--tinta); border-color: var(--tinta2);
}

/* Barra calibrada con cortes numericos. La leyenda de cajitas esta vetada. */
.z-escala { display: flex; height: 8px; border: 1px solid var(--regla-n); }
.z-escala i { flex: 1 1 0; }
/* La muestra del gris de dato faltante, cuando no hay escala que mostrar. */
.z-muestra-sin-dato { display: inline-block; width: 22px; height: 8px; border: 1px solid var(--regla-n); background: var(--mag-0); }
.z-cortes { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--tinta3); font-variant-numeric: tabular-nums; margin-top: 3px; }
/* Variante de la barra que diverge: un rotulo por tramo, centrado bajo el suyo,
   porque ahi la posicion del rotulo dice a cual color corresponde. */
.z-cortes.z-cortes-reja { display: grid; justify-content: stretch; text-align: center; }
.z-norte { font-size: var(--t-micro); text-align: center; line-height: 1.1; }

/* Etiqueta sobre el satelite: halo oscuro de 2 px.
   El halo no es adorno. Debajo de una etiqueta hay tejado claro, monte oscuro o
   nube blanca en la misma pantalla, asi que no existe un color de texto que
   funcione contra todos: lo que la hace legible es el halo. Por eso la prueba
   de accesibilidad no mide esta etiqueta contra el fondo de la pagina -seria un
   numero que no describe nada- sino que comprueba que el halo este puesto. */
.z-etq-mapa {
  font-size: 11px; font-weight: 600; color: #FFFFFF; text-align: center;
  line-height: 1.25; pointer-events: none; white-space: nowrap;
  text-shadow: 0 0 2px var(--halo-etq), 0 0 2px var(--halo-etq), 0 0 3px var(--halo-etq);
}
.z-etq-mapa-cifra {
  font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums; opacity: 0.92;
}
/* Sin imagen de satelite debajo, el rotulo blanco con halo oscuro queda al reves
   de lo que pide un fondo claro: se invierte a tinta con halo claro. */
.z-mapa-sin-imagen .z-etq-mapa { color: var(--tinta); text-shadow: 0 0 2px var(--sup), 0 0 2px var(--sup), 0 0 3px var(--sup); }

/* ---------------------------------------------------------------------------
   9. Estados
   --------------------------------------------------------------------------- */

/* Primera carga: esqueleto de reglas finas, sin brillo que pasa. */
.z-esqueleto > i {
  display: block; height: 1px; background: var(--regla-n); margin: 17px 0;
}
.z-esqueleto > i:nth-child(3n) { width: 62%; }
.z-esqueleto > i:nth-child(4n) { width: 84%; }

/* Recarga: la vista anterior se atenua, sin salto de diseno. */
.z-recargando { opacity: .45; transition: opacity var(--mov) var(--mov-curva); }

/* Vacio: una frase que explica que habria aqui, y una accion. */
.z-vacio { border-top: 1px solid var(--regla); padding: var(--e4) 0; max-width: 56ch; }
.z-vacio p { color: var(--tinta2); }

/* Error de sistema: que fallo, que se conservo, que hacer, y un codigo. */
.z-error-sis { border-top: 1px solid var(--regla); padding: var(--e3) 0 var(--e3) var(--e2); box-shadow: inset 0 2px 0 var(--senal); max-width: 64ch; }
/* La burbuja de evidencia de una alerta lleva una tabla, no una lista de
   campos, asi que necesita mas ancho que la burbuja de un registro. */
.z-burbuja.z-burbuja-ancha { width: min(560px, calc(100vw - 24px)); }
.z-burbuja.z-burbuja-ancha header { padding: 10px 14px; }
.z-burbuja .z-abrible:hover { background: var(--sup-3); }
.z-error-sis .z-cod { font-size: var(--t-micro); color: var(--tinta3); font-variant-numeric: tabular-nums; }

/* Confirmacion breve, abajo a la izquierda, cuatro segundos. */
.z-aviso {
  position: fixed; left: var(--e3); bottom: var(--e3); z-index: 80;
  background: var(--franja); color: var(--franja-txt);
  border-radius: var(--radio); padding: var(--e2) var(--e3);
  font-size: var(--t-chico); display: flex; align-items: center; gap: var(--e3);
  max-width: min(420px, calc(100vw - 2 * var(--e3)));
}
.z-aviso button { background: none; border: 0; color: var(--franja-txt); border-bottom: 1px solid var(--franja-sub); cursor: pointer; font-family: var(--f-ui); font-size: var(--t-chico); }

/* Sin conexion: arriba, con el conteo de lo retenido. Nada se descarta. */
.z-sin-red {
  background: var(--senal); color: var(--senal-txt);
  font-size: var(--t-chico); font-weight: 600;
  padding: var(--e2) var(--e3); text-align: center;
}

/* ---------------------------------------------------------------------------
   10. Impresion: la ficha de una pagina sale en papel sin retoque.
   --------------------------------------------------------------------------- */

/* Lo que solo se ve en papel. */
.z-solo-imprime { display: none; }

@media print {
  .z-solo-imprime { display: block; }
  /* Una ficha de una pagina no arrastra trescientas filas: en papel se cortan
     las primeras diez y se dice cuantas quedaron fuera. */
  .z-corta-al-imprimir tbody tr:nth-child(n+11) { display: none; }
  :root {
    --fondo:#FFFFFF; --sup:#FFFFFF; --panel:#FFFFFF; --elev:#FFFFFF;
    --tinta:#000000; --tinta2:#333333; --tinta3:#555555;
    --regla:#000000; --regla-n:#BBBBBB;
  }
  body { font-size: 10.5pt; }
  .z-franja, .z-filtros, .z-burbuja, .z-resumen, .z-aviso, .z-no-imprime { display: none !important; }
  .z-pagina { padding: 0; max-width: none; }
  .z-tabla-env { max-height: none; overflow: visible; }
  a { border-bottom: 0; }
  .z-bloque, table.z-tabla tbody tr { break-inside: avoid; }
  @page { margin: 14mm 12mm; }
}

/* ---------------------------------------------------------------------------
   11. Movimiento reducido
   --------------------------------------------------------------------------- */

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

/* ---------------------------------------------------------------------------
   10b. Capa de IA (07/10/2026)
   El sello dice quién escribió el texto y si se verificó contra la base. No
   lleva color propio ni ícono: la regla de tinta marca lo redactado y
   verificado, la regla neutra marca el borrador por reglas, y la regla de
   señal se reserva para lo que se desvió (un párrafo que volvió al borrador,
   un campo que no se pudo verificar).
   --------------------------------------------------------------------------- */

.z-redaccion-barra { display: flex; justify-content: flex-end; margin: -4px 0 10px; }
.z-sello { box-shadow: inset 0 2px 0 var(--regla-n); padding: 6px 0 6px 14px; margin: 0 0 var(--e2); }
.z-sello.z-sello-ia { box-shadow: inset 0 2px 0 var(--tinta); }
.z-sello .z-etq { color: var(--tinta2); }
.z-sello p { margin: 2px 0 0; font-size: var(--t-chico); color: var(--tinta2); max-width: 82ch; }

.z-parrafo-ia { border-top: 1px solid var(--regla-n); padding: 10px 0; display: grid; grid-template-columns: 1fr 220px; gap: 16px; }
.z-parrafo-ia.z-revertido { box-shadow: inset 0 2px 0 var(--senal); padding-left: 12px; }
.z-parrafo-ia .z-nota { font-size: var(--t-micro); color: var(--tinta3); margin-top: 4px; }
.z-citas { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.z-cita {
  font-family: var(--f-ui); font-size: var(--t-micro); color: var(--tinta2);
  background: none; border: 0; border-bottom: 1px dotted var(--tinta3);
  padding: 1px 0; cursor: pointer; text-align: right; min-height: 0;
  font-variant-numeric: tabular-nums;
}
.z-cita:hover { color: var(--tinta); border-bottom-style: solid; }
.z-cita[disabled] { cursor: default; border-bottom-color: transparent; }

.z-pregunta-lista { display: flex; flex-direction: column; }
.z-pregunta-lista button {
  text-align: left; background: none; border: 0; border-top: 1px solid var(--regla-n);
  padding: 10px 0; font-family: var(--f-ui); font-size: var(--t-chico); color: var(--tinta);
  cursor: pointer; min-height: var(--fila-tactil);
}
.z-pregunta-lista button:hover { box-shadow: inset 0 -1px 0 var(--tinta3); }
.z-pregunta-lista button[aria-pressed="true"] { font-weight: 600; background: var(--panel); padding-left: 12px; }

.z-lectura-campo {
  border-top: 1px solid var(--regla-n); padding: 12px 0;
  display: grid; grid-template-columns: minmax(150px, 200px) 1fr auto; gap: 6px 20px; align-items: start;
}
.z-lectura-campo.z-por-revisar { box-shadow: inset 0 2px 0 var(--senal); padding-left: 12px; }
.z-lectura-campo.z-decidido .z-valor-leido { color: var(--tinta2); }
.z-lectura-campo blockquote {
  margin: 6px 0 0; padding-left: 10px; border-left: 1px solid var(--regla-n);
  font-size: var(--t-chico); color: var(--tinta2); max-width: 70ch;
}
.z-lectura-acciones { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 720px) {
  .z-parrafo-ia { grid-template-columns: 1fr; gap: 4px; }
  .z-redaccion-barra { justify-content: flex-start; margin-top: 0; }
  .z-citas { align-items: flex-start; }
  .z-cita { text-align: left; }
  .z-lectura-campo { grid-template-columns: 1fr; }
  .z-lectura-acciones { justify-content: flex-start; }
}

@media print {
  .z-cita { border-bottom: 0; color: #333; }
}

/* Utilidades mínimas */
.z-fila { display: flex; align-items: center; gap: var(--e2); }
.z-col { display: flex; flex-direction: column; gap: var(--e2); }
.z-entre { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.z-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.z-der { text-align: right; }
.z-t2 { color: var(--tinta2); }
.z-t3 { color: var(--tinta3); }
.z-chico { font-size: var(--t-chico); }
.z-micro { font-size: var(--t-micro); }

/* ---------------------------------------------------------------------------
   12. Celular. Va al final a proposito: estas reglas tienen que pisar a las de
   arriba, y en CSS con la misma especificidad gana la ultima.
   --------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .z-filtros { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2) var(--e3); }
  .z-filtros .z-campo { min-width: 0; }
  .z-filtros .z-campo select, .z-filtros .z-campo input { width: 100%; }
  .z-filtros .z-total { grid-column: 1 / -1; margin-left: 0; text-align: left; }
  /* El menu se envuelve en vez de cortar una palabra a la mitad. */
  .z-franja nav { flex-wrap: wrap; overflow-x: visible; }
  .z-franja nav a { padding: 10px var(--e3); }
}

/* El cambio de modo cabe en una linea dentro de la franja. */
.z-franja .z-derecha .z-btn-3 { white-space: nowrap; }