/* BALAM Reportes. Identidad visual v1.2 (balam-bot/docs/identidad-visual.md): fondo blanco siempre, tinta para la
   estructura, cobalto para lo que se toca. Sin fuentes web, sin modo oscuro, sin hojas externas. Secciones:
   1 tokens · 2 base · 3 estructura y marca · 4 pestañas · 5 título · 6 selector de periodo · 7 recuadros y retículas
   8 bloques y gráficas · 9 tablas · 10 estados y mensajes · 11 formularios · 12 pie · 13 impresión · 14 movimiento */

/* 1. Tokens: guía §8.1 y §8.2 tal cual */
:root{
  --tinta:#17130F; --papel:#FFFFFF; --arena:#EFE6D8; --hueso-claro:#F6F0E6;
  --linea:#E6E6E2; --piedra:#6D665D; --historico:#9A8D7C;
  --cobalto:#2447C9; --cobalto-palido:#E9EDFD;
  --agave:#487243; --barro:#B4452C; --barro-tint:#F7E6E1;
  --fondo-desktop:#FFFFFF; /* blanco obligatorio; la columna se delimita con --linea */
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-pill:999px; --r-card:12px; --r-msg:10px; --r-logo:8px; /* solo ficha alterna */ --r-sheet:20px;
  --rule-w:44px; --rule-h:3px; /* regla cobalto bajo el título */
  --pad-x:20px; --app-max:520px;
  --row-h:56px; --tap:40px; --cta-h:50px;
}
:root{
  --obsidiana:#17130F; --obsidiana-2:#211B15; --obsidiana-3:#2B241C;
  --piedra-suave:#A39888; --historico-oscuro:#76695B;
  --cobalto-relleno:#6A88FF; --agave-relleno:#8FB587; --barro-relleno:#E07A5F;
  color-scheme:light;
}

/* 2. Base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--font);font-size:16px;line-height:1.35;-webkit-font-smoothing:antialiased}
h2,h3,p{margin:0}
a{color:var(--cobalto);font-weight:500}
button,input,select{font:inherit;color:inherit}
button{padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cobalto);outline-offset:2px}
.agave{color:var(--agave)} .barro{color:var(--barro)} .neutro,.piedra{color:var(--piedra)} /* siempre junto a un signo o a un texto */

/* 3. Estructura y marca: una columna en teléfono; en computadora hasta 1,180 px con una línea de 1 px a cada lado */
.wrap{max-width:1180px;min-height:100vh;min-height:100dvh;margin:0 auto;padding:0 var(--pad-x)}
.wrap.simple{max-width:var(--app-max)}
@media (min-width:900px){.wrap{border-left:1px solid var(--linea);border-right:1px solid var(--linea)}}
@media (min-width:521px){.wrap.simple{border-left:1px solid var(--linea);border-right:1px solid var(--linea)}}
.brand{display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 0 0}
.brand img{display:block;flex:none;width:auto;height:26px}
.wordmark{flex:none;font-size:15px;font-weight:600;letter-spacing:.14em}
.modulo{flex:none;font-size:12px;color:var(--piedra)}
.quien{min-width:0;margin-left:auto;overflow:hidden;font-size:13px;color:var(--piedra);text-overflow:ellipsis;white-space:nowrap}
.brand form{flex:none;margin:0}
.salir{min-height:var(--tap);padding:0 14px;border:1px solid var(--linea);border-radius:var(--r-pill);font-size:13px;font-weight:500}
.salir:hover{border-color:var(--piedra)}
.prog{height:2px;margin:10px 0 0;overflow:hidden;border-radius:2px;background:var(--linea);opacity:0;transition:opacity .2s}
.prog i{display:block;width:0;height:100%;border-radius:2px;background:var(--cobalto);transition:width .5s ease-out}
.prog.on{opacity:1} .prog.on i{width:100%}

/* 4. Pestañas (guía §6.13): se desplazan en teléfono, sin barra; la línea de abajo es una sombra interior para que el
   subrayado de la activa quede encima sin provocar desplazamiento vertical */
.tabs{display:flex;gap:18px;margin-top:6px;overflow-x:auto;scrollbar-width:none;box-shadow:inset 0 -1px 0 var(--linea)}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;padding:10px 0 11px;border-bottom:2px solid transparent;font-size:15px;font-weight:400;color:var(--piedra);text-decoration:none;white-space:nowrap}
.tabs a:hover{color:var(--tinta)}
.tabs a:focus-visible{outline-offset:-2px}
.tabs a.on{border-bottom-color:var(--cobalto);font-weight:600;color:var(--cobalto)}
.tabs.sub{margin-top:8px} .tabs.sub a{font-size:14px}

/* 5. Título de pantalla (guía §6.3): h2 26/600 y regla cobalto de 44 × 3 */
.top{padding:12px 0 8px}
.top h2{font-size:26px;font-weight:600;line-height:1.2;letter-spacing:-.02em}
.top h2::after{content:"";display:block;width:var(--rule-w);height:var(--rule-h);margin-top:8px;border-radius:2px;background:var(--cobalto)}
.top .sub{margin-top:8px;font-size:14px;color:var(--piedra)}

/* 6. Selector de periodo: píldoras de 34 px (con área de toque de 40), flechas y etiqueta */
.selector{padding-top:4px}
.chips{display:flex;gap:6px;padding:3px 0 6px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{position:relative;display:inline-flex;flex:none;align-items:center;height:34px;padding:7px 12px;border:1px solid var(--linea);border-radius:var(--r-pill);font-size:13px;font-weight:400;color:var(--tinta);text-decoration:none;white-space:nowrap}
.chip::after{content:"";position:absolute;inset:-3px 0}
.chip:hover{border-color:var(--piedra)}
.chip.on{border-color:var(--cobalto);background:var(--cobalto);font-weight:500;color:var(--papel)}
@media (min-width:900px){.chips.envuelve{flex-wrap:wrap;overflow-x:visible}} /* filtros con muchas opciones: en computadora se ven todas */
.chips.paginas{margin-top:12px}
.navper{display:flex;align-items:center;gap:2px;padding:2px 0 4px}
.flecha{display:grid;place-items:center;width:var(--tap);height:var(--tap);font-size:24px;font-weight:500;line-height:1;color:var(--cobalto);text-decoration:none}
.etiqueta{padding:0 6px;font-size:15px;font-weight:600}
.rango{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;padding:6px 0 4px}

/* 7. Recuadros (spec §6) y retículas: 1 columna, 2 desde 600 px, 3 desde 900 px */
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:12px 0 0}
@media (min-width:600px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.recuadro{display:block;min-width:0;padding:14px 16px 16px;border:1px solid var(--linea);border-radius:var(--r-card);color:inherit;font-weight:400;text-decoration:none}
a.recuadro:hover{border-color:var(--piedra)}
.rt{font-size:13px;color:var(--piedra)}
.cifra{margin-top:4px;font-size:26px;font-weight:600;line-height:1.2;letter-spacing:-.02em;font-variant-numeric:proportional-nums;overflow-wrap:anywhere}
.det{margin-top:2px;font-size:14px;color:var(--piedra)}
.det .agave,.det .barro,.det .neutro{font-weight:600}
.recuadro .nota{margin-top:6px;font-size:13px;color:var(--piedra)}
.spark{margin-top:8px} .spark svg{display:block;max-width:100%}

/* 8. Bloques y gráficas: gráfica y tabla lado a lado desde 900 px */
.cuerpo{padding-bottom:8px}
.seccion{margin-top:28px}
.seccion h3{margin-bottom:8px;font-size:18px;font-weight:600}
.seccion>.nota{margin:-4px 0 10px;font-size:13px;color:var(--piedra)}
.cuerpo p.sub{margin-top:4px;font-size:14px;color:var(--piedra)} /* subtítulo o nota que la sección pone en su cuerpo, suelto o dentro de un bloque (`p`: los apartados son `.tabs.sub`) */
.aparte{margin-top:8px;font-size:13px;color:var(--piedra)}
.dos{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:12px}
@media (min-width:900px){.dos{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}}
.svg-grafica{display:block;width:100%;height:auto}
.g-angosta{display:none} /* `adaptable()` pinta dos versiones; con pantalla de 600 px o menos se cambia (bloque de abajo) */
.g-ancha{max-width:720px} /* a ancho completo la gráfica no pasa de su tamaño de diseño (720), alineada a la izquierda: estirada, las barras pasarían de 24 px */

/* 9. Tablas: cifras tabulares, total en arena, encabezado pegajoso en computadora y dos renglones por fila en teléfono */
.tabla-wrap{margin-top:8px}
.tabla{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;font-variant-numeric:tabular-nums}
.tabla th{position:sticky;top:0;z-index:3;padding:10px 12px;border-bottom:2px solid var(--cobalto);background:var(--arena);font-size:13px;font-weight:600;text-align:left}
/* Filas de ~46 px en computadora por densidad de reporte; en teléfono cada fila son dos renglones (abajo) */
.tabla td{padding:12px;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla tbody td:first-child{font-weight:500} /* solo el cuerpo: el total (tfoot) va en negritas por su propia regla */
.tabla .der{text-align:right;white-space:nowrap}
.tabla tfoot td{border-bottom:0;background:var(--arena);font-weight:600}
@media (max-width:899px){.tabla-wrap{overflow-x:auto} .tabla th{position:static}}
/* tablas de siete u ocho columnas (venta por día, cortes) junto a una gráfica: menos aire y cada celda en un renglón; solo caben
   al lado de la gráfica con 1200 px o más (la tabla toma 1.15 de 2.15 del ancho): con menos se apilan debajo de ella */
@media (min-width:601px){.tabla.densa{font-size:14px} .tabla.densa th,.tabla.densa td{padding:10px 6px} .tabla.densa td{white-space:nowrap}}
@media (min-width:900px){.dos:has(.tabla.densa) .tabla-wrap{overflow-x:auto} .dos:has(.tabla.densa){grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}}
@media (max-width:1199px){.dos:has(.tabla.densa){grid-template-columns:minmax(0,1fr)} .dos:has(.tabla.densa)>div:first-child{max-width:720px}}
@media (max-width:600px){
  .g-ancha{display:none} .g-angosta{display:block}
  .tabla,.tabla tbody,.tabla tfoot{display:block}
  .tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabla tr{display:flex;flex-wrap:wrap;gap:4px 20px;padding:10px 0;border-bottom:1px solid var(--linea)}
  .tabla td{display:block;padding:0;border:0}
  .tabla td:first-child{flex:0 0 100%;font-size:16px}
  .tabla td:not(:first-child)::before{content:attr(data-col);display:block;font-size:12px;font-weight:400;color:var(--piedra)}
  .tabla .der{text-align:left}
  .tabla td:empty{display:none} /* una celda vacía (el total sin origen) no pinta su rótulo */
  .tabla tfoot tr{padding:10px 12px;border-bottom:0;background:var(--arena)}
}

/* Horas: el top 5 por franja (muchas columnas) y la matriz «entra y sale» (celdas de 20 px) se deslizan dentro de su recuadro en
   todo ancho; la matriz conserva su forma de tabla también en teléfono, con el nombre del grupo fijo a la izquierda */
.tabla-wrap:has(.tabla.franjas),.tabla-wrap:has(.tabla.matriz){overflow-x:auto}
@media (min-width:601px){.tabla.franjas td:not(.der){white-space:normal}} /* los nombres de grupo largos bajan de renglón en vez de sacar columnas de la pantalla */
/* Movimientos: renglones con texto libre (la descripción del banco, el concepto): las columnas de texto bajan de renglón y la
   fecha no; la tabla se desliza en vez de sacar columnas de la pantalla */
.tabla-wrap:has(.tabla.lista){overflow-x:auto}
@media (min-width:601px){.tabla.lista td:not(.der){white-space:normal} .tabla.lista td:first-child{white-space:nowrap}}
/* Resultados: el signo y el nombre del renglón con sus líneas de 13 px piedra (razón, días, nota); la tira del dinero en una fila */
.tabla .sg{display:inline-block;width:1.1em;color:var(--piedra);font-weight:400}
.tabla .rn{display:block;margin:2px 0 0 1.1em;font-size:13px;font-weight:400;line-height:1.35;color:var(--piedra)}
@media (min-width:900px){.grid.tira{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tabla.matriz{width:auto;font-size:13px}
.tabla.matriz th,.tabla.matriz td{width:20px;min-width:20px;padding:0;text-align:center}
.tabla.matriz th{padding:8px 0}
.tabla.matriz td{height:20px;line-height:20px;vertical-align:middle}
.tabla.matriz th:first-child,.tabla.matriz td:first-child{position:sticky;left:0;z-index:2;width:auto;min-width:132px;padding:0 10px 0 0;text-align:left;white-space:nowrap}
.tabla.matriz td:first-child{background:var(--papel)}
.tabla.matriz th:first-child{background:var(--arena)}
.top5{color:var(--cobalto)} .fuera5{color:var(--piedra)}
@media (max-width:600px){
  .tabla.matriz{display:table}
  .tabla.matriz tbody{display:table-row-group}
  .tabla.matriz thead{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .tabla.matriz tr{display:table-row;padding:0;border-bottom:0}
  .tabla.matriz td{display:table-cell;border-bottom:1px solid var(--linea)}
  .tabla.matriz th:first-child,.tabla.matriz td:first-child{min-width:112px;max-width:112px;padding:2px 8px 2px 0;font-size:12px;line-height:1.25;white-space:normal}
  .tabla.matriz td:not(:first-child)::before{content:none}
}

/* 10. Estados y mensajes (guía §6.18 y §6.23) */
.empty{padding:40px 12px;font-size:15px;text-align:center;color:var(--piedra)}
.empty b{display:block;margin-bottom:4px;font-size:17px;font-weight:600;color:var(--tinta)}
.msg{margin-top:12px;padding:12px 14px;border-radius:var(--r-msg);background:var(--hueso-claro);font-size:14px;line-height:1.45;color:var(--piedra);white-space:pre-wrap}
.msg.barro{background:var(--barro-tint);color:var(--barro)}

/* 11. Formularios (guía §6.21): el botón principal es tinta en la herramienta interna */
.login{display:grid;gap:14px;padding-top:12px}
.login label,.rango label{display:grid;gap:4px;font-size:14px;color:var(--piedra)}
.login input,.rango input{min-height:48px;padding:13px 14px;border:1px solid var(--linea);border-radius:var(--r-card);background:var(--papel);font-size:16px;color:var(--tinta)}
.login input::placeholder{color:var(--piedra)}
.cta,.rango button{min-height:44px;padding:0 22px;border-radius:var(--r-card);background:var(--tinta);font-size:16px;font-weight:600;color:var(--papel)}
.cta{width:100%;min-height:var(--cta-h)}
.cta:active,.rango button:active{background:var(--obsidiana-3)}
.error{font-size:14px;color:var(--barro)}

/* 12. Pie de toda página */
.pie{margin-top:32px;padding:16px 0 28px;border-top:1px solid var(--linea);font-size:13px;color:var(--piedra)}
.pie .otras{margin-top:4px;font-size:12px}
.dev{margin-bottom:20px;font-size:12px;color:var(--piedra)}

/* 13. Impresión: sin menú, selector ni botón de salir; el jaguar y BALAM se quedan */
@media print{
  .brand form,.tabs,.selector,.prog{display:none!important}
  .wrap{max-width:none;padding:0;border:0}
  .tabla th{position:static}
  .recuadro,.tabla tr{break-inside:avoid}
}

/* 14. Movimiento: solo confirma algo (barra de carga) y se apaga si la persona lo pide */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}