/* ============================================================================
   Paperless — consola de la campaña de impresión, Radial Llantas

   Piel "Mixta": lateral en crema con acento arcilla, contenido en papel cálido
   con tipografía grotesca. Cada zona resuelta con lo que mejor hace — carácter
   a la izquierda, precisión de lectura a la derecha.

   "Paperless" es solo la etiqueta. La base de datos, los logins de SQL, las
   tareas programadas y la clave del registro de los agentes siguen llamándose
   ImprimeMenos: renombrarlos obligaría a reinstalar el agente equipo por equipo.
   ============================================================================ */

:root {
  /* --- contenido --- */
  --lienzo:  #F5F4F1;   /* papel cálido, no blanco: la campaña trata de papel */
  --tarjeta: #FFFFFF;
  --papel-2: #FAFAF8;
  --linea:   #E2E0DA;
  --linea-2: #CFCCC3;
  --pista:   #EEEDE9;
  --texto:   #1F1F1C;
  --texto-2: #57554E;
  --texto-3: #85837A;

  /* Alias de la piel anterior. Catálogos, Cuotas y Bitácora todavía piden
     --gris-secundario y --gris-borde en estilos en línea. Sin definirlos el
     navegador descarta la propiedad entera y ese texto se pinta con el color
     heredado: negro pleno donde se quería un apunte gris. Se declaran aquí en
     vez de repasar diez plantillas por un renombrado de variables. */
  --gris-secundario: var(--texto-3);
  --gris-terciario:  var(--texto-3);
  --gris-borde:      var(--linea);

  /* --- lateral --- */
  --lat:       #F0EEE6;
  --lat-linea: #E2DFD4;
  --nav:       #5C5950;
  --nav-hover: #E7E4DA;
  --nav-on:    #FFFFFF;
  --nav-on-t:  #191917;
  --rot:       #8A8478;

  /* --- acentos --- */
  --arcilla:  #D97757;   /* marca lo activo; nada más */
  --arcilla-2:#C4643F;
  --hoja:     #3F5C46;   /* el árbol, y solo el árbol */
  --marca:    #FFC429;   /* ámbar de Radial, reservado para la identidad */

  /* --- semánticos: separados del acento a propósito --- */
  --bien:       #1E7A3C;  --bien-fondo: #E6F3EA;  --bien-borde: #C7E4D2;
  --ojo:        #8A5D00;  --ojo-fondo:  #FBF2DC;  --ojo-borde:  #EBDCB4;
  --mal:        #B32318;  --mal-fondo:  #FBEAE8;  --mal-borde:  #F0CFCB;
  --marca-fondo:#FDF0E9;

  /* Texto sobre el acento. Es una variable y no un blanco fijo porque en
     oscuro el arcilla queda claro y lo legible encima es tinta, no blanco. */
  --sobre-acento: #FFFFFF;

  /* Velo para chips dentro de una caja de aviso: un tinte del color del texto
     que funciona sobre cualquiera de los tres fondos semanticos. */
  --tinte: rgba(25,25,23,.06);

  /* --- datos: paleta categórica validada para daltonismo --- */
  --d1: #1E6FBF;  --d2: #D19700;  --d3: #C42B1C;
  --d4: #8E44AD;  --d5: #2E8B57;

  --sombra:     0 1px 2px rgba(25,25,23,.05), 0 4px 14px rgba(25,25,23,.05);
  --sombra-2:   0 8px 34px rgba(25,25,23,.14);
  --sombra-nav: 0 1px 2px rgba(25,25,23,.07);

  --f-titulo: Archivo, "Arial Narrow", sans-serif;
  --f-cuerpo: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-lat:    "Instrument Sans", "Segoe UI", sans-serif;
  --f-marca:  Newsreader, Georgia, serif;
  --f-mono:   "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

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

body {
  margin: 0;
  background: var(--lienzo);
  color: var(--texto);
  font-family: var(--f-cuerpo);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-columns: 230px 1fr;
  min-height: 100vh;
}

h1, h2, h3 { font-family: var(--f-titulo); margin: 0; line-height: 1.15; }
a { color: var(--d1); }
:focus-visible { outline: 2px solid var(--arcilla); outline-offset: 2px; }
code { font-family: var(--f-mono); font-size: .92em; }

/* ============================================================ lateral */
.lateral {
  background: var(--lat);
  border-right: 1px solid var(--lat-linea);
  padding: 22px 14px 18px;
  display: flex;
  flex-direction: column;
  font-family: var(--f-lat);
  position: sticky;
  top: 0;
  height: 100vh;
}

.lateral .marca {
  display: flex; align-items: center; gap: 11px;
  padding: 0 6px 22px; text-decoration: none;
}
.lateral .glifo { width: 34px; height: 34px; flex: none; color: var(--hoja); }
.lateral .marca b {
  font-family: var(--f-marca); font-weight: 500; font-size: 20px;
  letter-spacing: -.01em; color: var(--texto); display: block; line-height: 1.1;
}
.lateral .marca .sub {
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--texto-3); display: block; margin-top: 2px;
}

.lateral nav { display: flex; flex-direction: column; gap: 2px; }
.lateral .rot {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rot); padding: 0 10px; margin-bottom: 8px; font-weight: 600;
}
.lateral .rot + a { margin-bottom: 0; }
.lateral nav .rot:not(:first-child) { margin-top: 18px; }

.lateral nav a {
  display: flex; align-items: center; gap: 11px; text-decoration: none;
  padding: 9px 10px; border-radius: 7px; font-size: 13.5px;
  color: var(--nav); font-weight: 500;
}
.lateral nav a svg { width: 16px; height: 16px; flex: none; opacity: .7; }
.lateral nav a:hover { background: var(--nav-hover); }
.lateral nav a.activo {
  background: var(--nav-on); color: var(--nav-on-t); font-weight: 600;
  /* El filete de arcilla es lo único que dice "estás aquí". */
  box-shadow: inset 2px 0 0 var(--arcilla), var(--sombra-nav);
}
.lateral nav a.activo svg { opacity: 1; }

/* El panal vive detras de todo, pegado al borde izquierdo. El degradado no se
   hace con opacidad sino con mascara: asi el trazo mantiene su color y lo que
   se desvanece es la presencia, no el tono. Al 10% se percibe como textura del
   papel; subirlo empieza a competir con el menu. */
.panal {
  position: absolute; left: 0; bottom: 104px;
  width: 112px; height: 186px; z-index: 0;
  color: var(--hoja); opacity: .19; pointer-events: none;

  /* El grosor se manda desde aqui y no desde el atributo del SVG: el CSS gana
     sobre el atributo de presentacion, asi que todo el ajuste del panal vive en
     esta regla y se afina tocando un solo archivo. */
  stroke-width: 1.1;

  /* UNA sola mascara, radial y anclada al borde izquierdo. La primera version
     usaba dos mascaras cruzadas con mask-composite y el panal desaparecio por
     completo: los dos prefijos, el estandar y el de webkit, no entienden los
     mismos valores, y al no coincidir la interseccion queda vacia. Una elipse
     desde el borde difumina en todas las direcciones sin componer nada. */
  -webkit-mask-image: radial-gradient(118% 74% at 0% 50%, #000 0%, #000 52%, transparent 92%);
          mask-image: radial-gradient(118% 74% at 0% 50%, #000 0%, #000 52%, transparent 92%);
}

/* El menu y el pie por delante del panal. Sin esto el orden lo decide el orden
   del documento, y el panal se dibujaria encima del elemento activo. */
.lateral nav { position: relative; z-index: 1; }

.filigrana { margin-top: auto; padding: 14px 6px 0; position: relative; z-index: 1; }
.filigrana .fondo {
  position: absolute; right: -6px; bottom: 40px; width: 118px; height: 118px;
  color: var(--hoja); opacity: .07; pointer-events: none;
}
.filigrana .quien {
  border-top: 1px solid var(--lat-linea); padding-top: 12px;
  font-size: 12px; color: var(--texto-3); position: relative;
}
.filigrana .quien b { display: block; color: var(--texto); font-weight: 600; font-size: 13px; }
.filigrana .quien span { display: block; }
.filigrana .quien a { color: var(--texto-2); font-size: 12px; display: inline-block; margin-top: 6px; }

/* En pantalla estrecha el lateral se convierte en una banda superior. */
@media (max-width: 860px) {
  body { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; }
  .lateral nav { flex-direction: row; flex-wrap: wrap; }
  .lateral nav .rot { display: none; }
  .filigrana .fondo { display: none; }
  .panal { display: none; }
}

/* ============================================================ contenido */
main { padding: 26px 30px 60px; max-width: 1320px; min-width: 0; position: relative; }

/* La esquina se ancla al hueco de arriba a la derecha, no al flujo, para no
   empujar la cabecera de ninguna pantalla. A cambio hay que reservarle sitio
   con el padding de .cabecera: si no, el parrafo de introduccion le pasa por
   debajo en pantallas anchas.

   Lleva dos cosas: el lema, que es firma, y el boton del tema, que es mando.
   El lema se retira en pantalla estrecha; el boton no, porque un mando que
   desaparece segun el ancho de la ventana no es un mando. */
.esquina {
  position: absolute; top: 22px; right: 30px;
  display: flex; align-items: center; gap: 14px;
}
.lema {
  display: flex; align-items: center; gap: 11px; pointer-events: none;
}
.lema span {
  font-family: var(--f-marca); font-style: italic; font-size: 14.5px;
  color: var(--texto-3); white-space: nowrap;
}
.lema .glifo { width: 27px; height: 35px; color: var(--hoja); opacity: .55; }

.cabecera { margin-bottom: 20px; padding-right: 250px; }
.cabecera h1 { font-size: 26px; font-weight: 600; letter-spacing: -.015em; }
.cabecera p { margin: 5px 0 0; color: var(--texto-2); font-size: 13.5px; max-width: 72ch; }

/* ============================================================ avisos */
.aviso-caja {
  border-radius: 8px; padding: 13px 17px; margin-bottom: 18px;
  font-size: 13.5px; border: 1px solid var(--linea); background: var(--tarjeta);
  border-left: 4px solid var(--linea-2);
}
.aviso-caja.ok    { background: var(--bien-fondo); border-color: var(--bien-borde); border-left-color: var(--bien); }
.aviso-caja.error { background: var(--mal-fondo);  border-color: var(--mal-borde);  border-left-color: var(--mal); }
.aviso-caja.aviso { background: var(--ojo-fondo);  border-color: var(--ojo-borde);  border-left-color: var(--ojo); }
.aviso-caja code { background: var(--tinte); padding: 1px 5px; border-radius: 4px; }

.nota {
  font-size: 13px; color: var(--texto-2); background: var(--papel-2);
  border-left: 3px solid var(--marca); border-radius: 0 6px 6px 0;
  padding: 10px 14px; margin: 0;
}

/* ============================================================ formularios */
button, .boton {
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  padding: 7px 14px; border-radius: 7px;
  border: 1px solid var(--linea-2); background: var(--tarjeta); color: var(--texto);
  text-decoration: none; display: inline-block;
}
button:hover, .boton:hover { background: var(--lienzo); border-color: var(--texto-3); }
button.primario {
  background: var(--arcilla); border-color: var(--arcilla-2);
  color: var(--sobre-acento); font-weight: 600;
}
button.primario:hover { background: var(--arcilla-2); }
button.discreto { padding: 4px 11px; font-size: 12.5px; }

input, select, textarea {
  font: inherit; font-size: 13.5px; padding: 7px 11px;
  border: 1px solid var(--linea-2); border-radius: 7px;
  background: var(--tarjeta); color: var(--texto); font-family: inherit;
}
input:focus, select:focus { border-color: var(--arcilla); }
label { font-size: 12.5px; color: var(--texto-2); font-weight: 500; }

.campos { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo label { font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
               color: var(--texto-3); font-weight: 600; }

.filtros { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.filtros a {
  text-decoration: none; font-size: 13px; font-weight: 500; padding: 6px 13px;
  border: 1px solid var(--linea-2); border-radius: 16px;
  background: var(--tarjeta); color: var(--texto-2);
}
.filtros a:hover { border-color: var(--texto-3); color: var(--texto); }
.filtros a.activo { background: var(--texto); border-color: var(--texto); color: var(--lienzo); }

/* ============================================================ barra de mando */
.mando { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.mando .campo { margin: 0; }
.mando select { min-width: 170px; }
.mando .separa { flex: 1; }
.mando .sello { font-size: 12px; color: var(--texto-3); padding-bottom: 8px; }

/* ============================================================ frescura */
.frescura {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; background: var(--tarjeta); border: 1px solid var(--linea);
  border-left: 3px solid var(--bien); border-radius: 9px;
  padding: 11px 16px; margin-bottom: 18px; box-shadow: var(--sombra);
}
/* Más de una hora sin procesar deja de ser contexto y pasa a ser un problema. */
.frescura.parada { border-left-color: var(--mal); background: var(--mal-fondo); }
.frescura .reloj { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.frescura .reloj strong { font-size: 13.5px; color: var(--texto); font-variant-numeric: tabular-nums; }
.frescura .reloj span { color: var(--texto-2); }
.frescura form { margin: 0; }

/* ============================================================ cifras */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
          gap: 12px; margin-bottom: 20px; }
.cifra {
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 9px;
  padding: 15px 16px; box-shadow: var(--sombra); border-top: 3px solid var(--linea-2);
}
.cifra.t1 { border-top-color: var(--d1); }
.cifra.t2 { border-top-color: var(--d2); }
.cifra.t3 { border-top-color: var(--d3); }
.cifra.t4 { border-top-color: var(--d4); }
.cifra.t5 { border-top-color: var(--d5); }
.cifra.alerta { border-top-color: var(--mal); }
.cifra .rotulo { font-size: 10.5px; color: var(--texto-3); text-transform: uppercase;
                 letter-spacing: .08em; font-weight: 600; }
.cifra .valor { font-family: var(--f-titulo); font-size: 30px; font-weight: 700;
                color: var(--texto); font-variant-numeric: tabular-nums;
                line-height: 1.05; margin-top: 6px; letter-spacing: -.02em; }
.cifra .pie { font-size: 12.5px; color: var(--texto-2); margin-top: 4px; }
.cifra.alerta .valor { color: var(--mal); }

/* En una campaña de reducción bajar es bueno: el verde va con la flecha abajo. */
.delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 600;
         font-size: 12.5px; font-variant-numeric: tabular-nums; }
.delta.baja  { color: var(--bien); }
.delta.sube  { color: var(--mal); }
.delta.igual { color: var(--texto-3); }

/* ============================================================ tarjetas */
.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 9px;
  box-shadow: var(--sombra); margin-bottom: 18px; overflow: hidden;
}
.tarjeta > header {
  padding: 12px 17px; border-bottom: 1px solid var(--linea); background: var(--papel-2);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tarjeta > header h3 { font-size: 15px; font-weight: 600; }
.tarjeta > header .apunte { font-size: 12px; color: var(--texto-3); }
.tarjeta > .cuerpo { padding: 17px; }

.tarjeta > header .clave { display: flex; align-items: center; gap: 12px;
                           font-size: 12.5px; color: var(--texto-2); }
.tarjeta > header .clave span { display: flex; align-items: center; gap: 6px; }
.tarjeta > header .clave .trazo { width: 18px; height: 0; border-top: 3px solid var(--d1);
                                  border-radius: 2px; display: block; }
.tarjeta > header .clave .trazo.previa { border-top: 2px dashed var(--linea-2); }
.tarjeta > header .clave .muestra { width: 15px; height: 15px; border-radius: 3px;
                                    display: block; border: 1px solid var(--linea); }

/* Franja de contexto bajo una cabecera: una frase que interpreta la tabla. */
.franja { padding: 11px 17px; background: var(--ojo-fondo);
          border-bottom: 1px solid var(--linea); font-size: 13px; color: var(--texto); }
.franja strong { font-size: 15px; }

.nota-eje { font-size: 12.5px; color: var(--texto-3); margin: 12px 0 0; }
.vacio { color: var(--texto-3); margin: 0; font-size: 13px; }

/* ============================================================ gráfica de línea */
.lienzo { display: block; width: 100%; height: auto; overflow: visible; }
.lienzo .rejilla { stroke: var(--linea); stroke-width: 1; }
.lienzo .eje-rot { fill: var(--texto-3); font-size: 11px; font-family: var(--f-mono);
                   font-variant-numeric: tabular-nums; }
.lienzo .linea { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.lienzo .linea.hoy { stroke: var(--d1); }
/* El mes pasado es contexto, no protagonista. */
.lienzo .linea.previa { stroke: var(--linea-2); stroke-width: 2; stroke-dasharray: 5 4; }
.lienzo .nodo.hoy { fill: var(--d1); }
.lienzo .nodo.previa { fill: var(--linea-2); }
.lienzo .fin { fill: var(--texto); font-size: 12.5px; font-weight: 700;
               font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* ============================================================ barras */
.grafica { display: flex; flex-direction: column; gap: 10px; }
.gfila { display: grid; grid-template-columns: 128px 1fr auto; gap: 13px; align-items: center; }
.gfila .nombre { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
/* Punto de color junto al nombre: la identidad no depende solo del relleno. */
.gfila .punto { width: 9px; height: 9px; border-radius: 2px; flex: none; }
/* El nombre puede ser un enlace -en Reportes lleva al detalle-, pero se lee
   como el resto de la grafica: el azul de enlace en cada fila convertiria la
   tarjeta en una lista de enlaces y no en un grafico. */
.gfila a.nombre { color: inherit; text-decoration: none; }
.gfila a.nombre:hover, .gfila a.nombre:focus-visible { text-decoration: underline; }
.gpista { background: var(--pista); border-radius: 4px; height: 22px; position: relative; }
.gpista i { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.gfila .dato { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--texto);
               font-weight: 600; min-width: 92px; text-align: right; }
.gfila .dato small { display: block; font-weight: 400; color: var(--texto-3); font-size: 11.5px; }

.b1 { background: var(--d1); } .b2 { background: var(--d2); } .b3 { background: var(--d3); }
.b4 { background: var(--d4); } .b5 { background: var(--d5); }

.leyenda { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px 17px;
           border-top: 1px solid var(--linea); background: var(--papel-2);
           font-size: 12.5px; color: var(--texto-2); }
.leyenda span { display: flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 2px; display: block; }

/* ============================================================ mapa de calor */
.calor { display: flex; flex-direction: column; gap: 3px; }
.calor-fila { display: flex; align-items: center; gap: 3px; }
.calor-fila .rot { width: 34px; flex: none; font-size: 11.5px; color: var(--texto-2);
                   font-weight: 600; padding: 0; margin: 0; text-transform: none;
                   letter-spacing: 0; }
.calor-fila .rot.finde { color: var(--texto-3); font-weight: 400; }
/* Celda vacía en gris, no en blanco: el blanco se confunde con la tarjeta. */
.celda { flex: 1; height: 21px; border-radius: 2px; background: var(--pista); min-width: 0; }
.calor-fila.horas { margin-top: 3px; }
.hora-rot { flex: 1; text-align: center; font-size: 10.5px; color: var(--texto-3);
            font-variant-numeric: tabular-nums; min-width: 0; }

/* ============================================================ columnas por mes */
.columnas-marco { display: flex; gap: 10px; }
.columnas-marco .marcas { display: flex; flex-direction: column; justify-content: space-between;
                          height: 150px; font-size: 10.5px; color: var(--texto-3);
                          font-variant-numeric: tabular-nums; text-align: right; min-width: 34px; }
.columnas { display: flex; align-items: flex-end; gap: 8px; height: 150px; flex: 1;
            border-bottom: 1px solid var(--linea); }
/* max-width: con dos o tres meses, columnas al 33% parecen bloques de color. */
.columna { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
           height: 100%; min-width: 22px; max-width: 74px; }
.columna .caja { background: var(--d1); border-radius: 3px 3px 0 0; min-height: 2px; }
.columna.foco .caja { background: var(--texto); }
.pie-meses { height: auto; border-bottom: 0; margin-top: 6px; padding-left: 44px; }
.pie-meses .columna { height: auto; }
.mes-rot { font-size: 11.5px; color: var(--texto-3); text-align: center; display: block; }
.mes-rot.foco { color: var(--texto); font-weight: 600; }

/* ============================================================ tablas */
.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 9px 17px; border-bottom: 1px solid var(--linea);
         white-space: nowrap; }
thead th { background: var(--papel-2); font-weight: 600; font-size: 10.5px;
           color: var(--texto-3); text-transform: uppercase; letter-spacing: .07em;
           position: sticky; top: 0; }
tbody tr:hover { background: var(--papel-2); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.truncar { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.rango { font-weight: 700; color: var(--texto-3); font-variant-numeric: tabular-nums; }

/* Pista de ancho fijo alineada a la derecha, igual que el número de encima. */
.minibarra { display: block; background: var(--pista); height: 6px; border-radius: 3px;
             overflow: hidden; margin: 5px 0 0 auto; width: 84px; }
.minibarra i { display: block; height: 100%; background: var(--d1); border-radius: 3px; }

/* ============================================================ estados */
.etiqueta { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
            border-radius: 11px; font-size: 12px; font-weight: 600; }
.etiqueta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.etiqueta.ok    { background: var(--bien-fondo); color: var(--bien); }
.etiqueta.aviso { background: var(--ojo-fondo);  color: var(--ojo); }
.etiqueta.malo  { background: var(--mal-fondo);  color: var(--mal); }
.etiqueta.gris  { background: var(--pista);      color: var(--texto-2); }
.etiqueta.marca { background: var(--marca-fondo); color: var(--arcilla-2); }

.barra-uso { background: var(--pista); height: 8px; width: 118px; display: inline-block;
             vertical-align: middle; border-radius: 4px; overflow: hidden; }
.barra-uso i { display: block; height: 100%; background: var(--d1); border-radius: 0 4px 4px 0; }
.barra-uso i.aviso { background: var(--d2); }
.barra-uso i.malo  { background: var(--d3); }

/* ============================================================ dos columnas */
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .dos-col { grid-template-columns: 1fr; } }

/* ============================================================ acceso
   Login y cambio de contraseña son páginas sueltas: no heredan de base.html,
   así que traen su propia rejilla y no tienen lateral. */
/* OJO: la clase va en el propio <body>, no en un hijo. Hay que anular la
   rejilla de dos columnas del layout general — si no, el formulario cae en la
   columna del lateral, de 230 px, y al medir 386 se desborda y se corta por la
   izquierda. Pasó exactamente eso. */
.acceso { min-height: 100vh; display: grid; grid-template-columns: 1fr;
          place-items: center; background: var(--lat); padding: 20px; }
.acceso form { background: var(--tarjeta); border-radius: 12px; box-shadow: var(--sombra-2);
               padding: 34px; width: 386px; border: 1px solid var(--linea);
               border-top: 4px solid var(--arcilla); }
.acceso .marca-caja { display: flex; justify-content: center; align-items: center;
                      gap: 11px; margin-bottom: 20px; }
.acceso .marca-caja .glifo { width: 38px; height: 38px; color: var(--hoja); }
.acceso .marca-caja img { height: 40px; }
.acceso .marca-caja .respaldo { font-family: var(--f-marca); font-weight: 500;
                                font-size: 25px; color: var(--texto); }
.acceso h1 { font-size: 19px; text-align: center; margin-bottom: 4px; font-weight: 600; }
.acceso p.sub { color: var(--texto-2); margin: 0 0 22px; font-size: 13px; text-align: center; }
.acceso .campo { margin-bottom: 15px; }
.acceso .campo input { width: 100%; }
.acceso button { width: 100%; margin-top: 8px; padding: 10px; font-size: 14px; }

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

/* ---------------------------------------------------------------- busqueda
   Barra de filtros escritos de Impresiones. Va debajo de los botones, no en
   lugar de ellos: los botones responden las preguntas de siempre y las cajas
   la pregunta concreta del dia. */
.barra-busqueda { margin: 0 0 18px; align-items: flex-end; }
.barra-busqueda input[type="text"] { width: 168px; }
.barra-busqueda input[type="date"] { width: 148px; }
.barra-busqueda .campo .boton { padding: 7px 14px; }

/* Cuando manda el rango de fechas, los botones de dias siguen visibles pero
   apagados. Ocultarlos moveria la pantalla; dejarlos vivos mentiria. */
/* El nombre de la sucursal, debajo de la division. En texto normal y no en
   monoespaciada: la mono es para codigos, y un nombre puesto en mono se lee
   como si fuera un identificador. */
.sucursal {
  display: block; font-size: 11.5px; color: var(--texto-3);
}

/* El codigo de organizacion, debajo de la division. En monoespaciada porque
   es un codigo y no un nombre: asi el ojo no intenta leerlo como palabra y los
   prefijos comunes —RLLMEN, RLLADM— se alinean en columna y se comparan de un
   vistazo. Va en bloque y no al lado para no ensanchar una tabla que ya era
   demasiado ancha, que fue la queja que dio origen a la pantalla de Personas.

   Cuando exista dim.Organizacion, aqui se pintara el nombre de la sucursal y
   el codigo se movera al title. */
.codigo-org {
  display: block; font-family: var(--f-mono); font-size: 11px;
  color: var(--texto-3); letter-spacing: -.01em;
}

/* El conteo dentro del filtro: mismo cuerpo, menos peso. Informa sin competir
   con la etiqueta, que es lo que se lee primero. */
.filtros a .n {
  margin-left: 6px; opacity: .6; font-variant-numeric: tabular-nums;
}
.filtros a.activo .n { opacity: .75; }

.filtros a.inactivo { opacity: .42; }
.filtros a.inactivo:hover { border-color: var(--linea); color: var(--texto-2); }
.apunte-filtro { align-self: center; font-size: 12px; color: var(--texto-3);
                 font-style: italic; }

/* ------------------------------------------------- totales en el encabezado
   La suma de cada columna, bajo su nombre. El rotulo sigue siendo pequeno y en
   versalitas; la cifra vuelve a tamano de lectura y a color de texto, porque es
   un dato y no una etiqueta. Sin esto heredaria el text-transform y el
   letter-spacing del th, y un numero espaciado se lee peor. */
thead th .total {
  display: block; margin-top: 3px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--texto);
  font-variant-numeric: tabular-nums;
}
/* Los que no son una suma de la columna sino una cuenta —cuantos en color,
   cuantos estimados— van mas apagados: no se suman con los de al lado. */
thead th .total.suave { font-weight: 500; font-size: 11.5px; color: var(--texto-2); }

/* Los mismos totales para pantalla angosta, donde no hay encabezado. */
.totales-estrechos { display: none; }

.pie-tabla { margin: 10px 2px 0; font-size: 12.5px; color: var(--texto-3); }
.pie-tabla a { color: var(--texto-2); }

/* ------------------------------------------------------- orden y navegacion
   Cabeceras que ordenan, en Personas. Heredan el color del th para que la
   tabla no se llene de azules: lo que indica que se puede pulsar es que el
   cursor cambia y que la columna activa esta en negro con su marca. */
thead th a { color: inherit; text-decoration: none; }
thead th a:hover { color: var(--texto); }
thead th a.ordenando { color: var(--texto); }
thead th a.ordenando::after { content: " ▾"; }

/* Enlace dentro de una tabla de datos. Veinte nombres subrayados no se leen,
   asi que el subrayado aparece al pasar por encima. El hueco se reserva desde
   el principio con un borde transparente para que la fila no salte. */
a.hilo { color: inherit; text-decoration: none;
         border-bottom: 1px solid transparent; }
a.hilo:hover { border-bottom-color: var(--texto-3); }

/* ---------------------------------------------------------------- telefono
   El menu lateral en banda superior se comia media pantalla del telefono: seis
   entradas, dos rotulos de grupo y el pie, antes de que empezara el contenido.
   Aqui se pliega detras de un boton y solo se despliega si alguien lo pide. */
.menu-boton {
  display: none; align-items: center; gap: 8px;
  background: var(--tarjeta); border: 1px solid var(--linea-2); border-radius: 6px;
  padding: 8px 13px; font-family: var(--f-lat); font-size: 13.5px;
  color: var(--texto); cursor: pointer;
}
.menu-boton svg { width: 15px; height: 15px; }

/* ============================================================ tema
   El boton. Cuadrado y discreto: es un ajuste personal, no una accion sobre
   los datos, asi que no compite con nada de la pantalla. */
.tema {
  flex: none; width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--linea); border-radius: 8px;
  background: var(--tarjeta); color: var(--texto-2); cursor: pointer;
}
.tema:hover { border-color: var(--linea-2); color: var(--texto); }
.tema svg { width: 17px; height: 17px; }

/* Se dibuja el destino, no el estado: estando en claro se ve la luna, que es
   lo que va a pasar al pulsar. Los dos glifos viven en el DOM y el CSS elige;
   asi el cambio es instantaneo y no depende de que el script redibuje nada. */
.tema .a-claro { display: none; }
:root[data-tema="oscuro"] .tema .a-oscuro { display: none; }
:root[data-tema="oscuro"] .tema .a-claro  { display: inline; }

/* ---------------------------------------------------------------- oscuro
   Las MISMAS 40 variables, con otros valores. Ninguna regla de la hoja sabe
   que existe este bloque: todas piden variables, y aqui se les contesta otra
   cosa. Por eso un tema nuevo no toca ni una sola regla de componente.

   No es el tema claro invertido. Un negro pleno con texto blanco sobre tablas
   de cifras cansa la vista; el fondo es un gris calido muy oscuro —la misma
   familia del papel del tema claro— y el texto se queda en marfil, no en
   blanco. Los semanticos suben de luminosidad para seguir leyendose sobre
   fondo oscuro, y sus fondos bajan a tintes casi negros del mismo tono. */
:root[data-tema="oscuro"] {
  color-scheme: dark;

  /* --- contenido --- */
  --lienzo:  #16150F;
  --tarjeta: #1E1D17;
  --papel-2: #24231C;
  --linea:   #302E26;
  --linea-2: #45423A;
  --pista:   #2A2921;
  --texto:   #EDEBE2;
  --texto-2: #B0ADA1;
  --texto-3: #918D80;

  /* --- lateral --- */
  --lat:       #1B1A14;
  --lat-linea: #2E2C24;
  --nav:       #B5B1A4;
  --nav-hover: #2A2921;
  --nav-on:    #33312A;
  --nav-on-t:  #F3F1E8;
  --rot:       #7D7869;

  /* --- acentos ---
     El arcilla de la marca aguanta el fondo oscuro sin tocarlo. Lo que se
     invierte es la pareja: en claro --arcilla-2 era mas oscuro (hover y
     borde); aqui tiene que ser mas claro para que el hover se lea como
     "sube" y para servir de color de texto en la etiqueta de marca. */
  --arcilla:  #D97757;
  --arcilla-2:#ECA184;
  --hoja:     #7FA98A;
  --marca:    #FFC429;

  /* --- semanticos --- */
  --bien:       #5FBE86;  --bien-fondo: #16281D;  --bien-borde: #2C4735;
  --ojo:        #D3A63C;  --ojo-fondo:  #2B2312;  --ojo-borde:  #46381A;
  --mal:        #E47766;  --mal-fondo:  #2E1916;  --mal-borde:  #4A2A24;
  --marca-fondo:#33231B;

  /* Sobre el arcilla claro lo legible es tinta. Blanco sobre ese naranja
     apenas llega a 2.6:1; la tinta pasa de 7:1. */
  --sobre-acento: #1F1D16;
  --tinte: rgba(237,235,226,.09);

  /* --- datos: la misma paleta, subida de luminosidad --- */
  --d1: #5AA6E8;  --d2: #E3B23C;  --d3: #E4695C;
  --d4: #B57BD0;  --d5: #55B57F;

  /* Sobre fondo oscuro una sombra clara no existe: la separacion la tiene que
     dar el negro, y mas cerrado que en claro. */
  --sombra:     0 1px 2px rgba(0,0,0,.40), 0 4px 14px rgba(0,0,0,.34);
  --sombra-2:   0 8px 34px rgba(0,0,0,.50);
  --sombra-nav: 0 1px 2px rgba(0,0,0,.35);
}

/* Los controles del navegador —el desplegable de un select, la barra de
   desplazamiento, el calendario de un input date— los pinta el navegador, no
   la hoja. Sin esto quedan en blanco sobre la consola oscura. */
:root { color-scheme: light; }

/* ---------------------------------------------------------------- estrecho
   ESTO VA AL FINAL DEL ARCHIVO A PROPOSITO.

   Estaba mas arriba y no aplicaba: las reglas de .lema y de .cabecera se
   declaran despues, con la misma especificidad, asi que ganaban ellas y en el
   movil el lema se pintaba encima del titulo mientras la cabecera seguia
   reservando 250 px para una esquina que ya no existe. El texto caia en una
   columna de tres palabras. Visto el 2026-09-05 en un telefono.

   Al final del archivo nada posterior puede pisarlo. Un solo corte a 1100
   basta: por debajo de 860 tambien se cumple. */
@media (max-width: 1100px) {
  /* Se retira la firma y se queda el mando. El hueco reservado baja de 250 px
     a lo que ocupa el boton: sin eso el titulo de la pantalla le pasa por
     debajo, que es exactamente el fallo que se vio en el telefono. */
  .lema { display: none; }
  .cabecera { padding-right: 52px; }
}

/* --- telefono y tableta estrecha --- */
@media (max-width: 860px) {
  main { padding: 18px 16px 48px; }
  .esquina { top: 15px; right: 16px; }
  .cabecera h1 { font-size: 22px; }

  /* La marca y el boton en una fila; el menu ocupa el ancho completo debajo. */
  .lateral { flex-direction: row; flex-wrap: wrap; align-items: center;
             gap: 10px; padding: 12px 16px; }
  .lateral .marca { flex: 1; min-width: 0; }
  .menu-boton { display: inline-flex; }

  /* Plegado por defecto. Se abre anadiendo la clase al body desde el boton, no
     con :target ni con un checkbox escondido: asi el estado se lee en el DOM y
     el boton puede decir aria-expanded de verdad. */
  .lateral nav,
  .filigrana { display: none; width: 100%; }
  body.menu-abierto .lateral nav { display: flex; flex-direction: column; }
  body.menu-abierto .filigrana { display: block; margin-top: 4px; }
  .lateral nav .rot { display: block; }
}

/* --- las tablas dejan de ser tablas ---
   Doce columnas no caben en un telefono de ninguna manera. El scroll lateral
   existia pero obliga a arrastrar para leer un solo renglon. Cada fila pasa a
   ser una tarjeta y cada celda lleva su rotulo delante, tomado del atributo
   data-rotulo de la plantilla. */
@media (max-width: 720px) {
  .tabla-scroll { overflow-x: visible; border: 0; background: none; }

  .tabla-tarjetas,
  .tabla-tarjetas tbody,
  .tabla-tarjetas tr,
  .tabla-tarjetas td { display: block; width: 100%; }

  .tabla-tarjetas thead { display: none; }

  /* Como el encabezado se va, los totales de columna se ensenan arriba. */
  .totales-estrechos {
    display: flex; flex-wrap: wrap; gap: 6px 16px;
    margin: 0 2px 10px; font-size: 12.5px; color: var(--texto-3);
  }
  .totales-estrechos b {
    font-family: var(--f-mono); font-weight: 600; color: var(--texto);
    font-variant-numeric: tabular-nums;
  }

  .tabla-tarjetas tr {
    background: var(--tarjeta); border: 1px solid var(--linea);
    border-radius: 8px; margin-bottom: 10px; padding: 6px 0;
  }

  .tabla-tarjetas td {
    display: grid; grid-template-columns: 96px 1fr; gap: 10px;
    border: 0; padding: 5px 14px; font-size: 13px;
    /* Sin esto, una etiqueta de estado se estira a todo el ancho de la celda:
       dentro de una rejilla el span se comporta como elemento de rejilla y
       ocupa su columna entera. Se veia como una barra verde, no como pastilla. */
    justify-items: start;
  }
  .tabla-tarjetas td::before {
    content: attr(data-rotulo);
    font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--texto-3); padding-top: 3px;
  }
  /* Los numeros se alinean a la derecha en tabla; en tarjeta quedarian
     descolgados del rotulo que los nombra. */
  .tabla-tarjetas td.num { text-align: left; }
  /* El nombre del documento ya no compite por el ancho: puede ocupar dos
     lineas en lugar de cortarse con puntos suspensivos. */
  .tabla-tarjetas td.truncar { max-width: none; white-space: normal; overflow: visible; }

  /* La fila de "no hay nada" no es una tarjeta con rotulos vacios. */
  .tabla-tarjetas td[data-rotulo=""] { display: block; padding: 12px 14px; }
  .tabla-tarjetas td[data-rotulo=""]::before { content: none; }

  /* El numero de orden se cae en tarjeta: la posicion ya la da el orden de las
     tarjetas, y un renglon que solo dice "# 1" gasta una linea entera. Se
     limita a .tabla-tarjetas para no tocar el ranking del panel, que sigue
     siendo una tabla de verdad. */
  .tabla-tarjetas td.rango { display: none; }

  /* La minibarra fuera. La celda es una rejilla de dos columnas —rotulo y
     valor—, asi que un segundo hijo dentro del valor se va a una fila nueva y
     la barra aparece debajo del rotulo, comparando con nada. En tarjeta el
     numero se lee solo. */
  .tabla-tarjetas .minibarra { display: none; }

  .campos { flex-direction: column; align-items: stretch; }
  .campo .caja, .campo input { width: 100%; }
  .barra-busqueda input[type="text"],
  .barra-busqueda input[type="date"] { width: 100%; }
  .gfila { grid-template-columns: 1fr; gap: 6px; }
}