/* ===========================================================================================
   Finanzas — Caja diaria, Cierre, Deudas y Liquidacion (B8, 23/9/2026).

   Archivo aparte de panel.css a proposito: son cuatro pantallas nuevas y ninguna clase de acá
   la usa el resto del panel. Si mañana Finanzas se retira, se saca el <link> y no queda nada
   colgando en la hoja grande.

   Usa los tokens de panel.css (--navy, --line, --ok...). No define colores propios salvo los
   dos del rojo/verde de la plata, que necesitan un tono mas fuerte que --bad/--ok para leerse
   sobre una tabla densa.

   REGLA DE ANCHO: la pagina nunca scrollea de costado. Toda tabla ancha vive adentro de un
   .fin-scroll, que scrollea sola. Medido a 393 px (iPhone 15) en la verificacion del bloque.
   =========================================================================================== */

/* ---- barra de arriba: la fecha o el mes que se esta mirando, siempre a la vista ---- */
.fin-bar{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:13px 16px;margin-bottom:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fin-bar .fin-bar-t{font-size:13px;font-weight:800;letter-spacing:-.01em}
.fin-bar .fin-bar-s{font-size:12px;color:var(--muted);font-weight:500}
.fin-bar .fin-sp{margin-left:auto}
.fin-bar input[type=date],.fin-bar input[type=month],.fin-bar select{font:inherit;font-size:13px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 9px;max-width:100%}
.fin-nav{display:inline-flex;gap:6px}
.fin-nav button{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;display:grid;place-items:center;font:inherit;font-size:14px;font-weight:700}
.fin-nav button:hover{background:var(--accent-soft)}
/* Lo que el navegador esta haciendo con lo que se escribio. Nunca un cartel flotante: en una
   hoja que se autoguarda, el estado tiene que estar al lado de la hoja. */
.fin-estado{font-size:12px;font-weight:600;color:var(--muted);min-height:16px}
/* Un filtro con su nombre a la vista: dos campos de fecha pegados no dicen cual es el de arranque
   y cual el de corte, y el title solo aparece si uno sabe que tiene que dejar el mouse quieto. */
.fin-filtro{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--muted)}
.fin-estado.ok{color:var(--ok)}
.fin-estado.mal{color:var(--bad)}

/* ---- avisos ---- */
.fin-aviso{border-radius:12px;padding:11px 14px;font-size:12.5px;font-weight:600;line-height:1.5;margin-bottom:12px;display:flex;gap:10px;align-items:flex-start}
.fin-aviso svg{flex-shrink:0;margin-top:1px}
.fin-aviso.warn{background:var(--warn-soft);border:1px solid #edd6a8;color:#8a5a08}
.fin-aviso.bad{background:var(--bad-soft);border:1px solid #f2c4bb;color:#9c3323}
.fin-aviso.ok{background:var(--ok-soft);border:1px solid #bfe6d5;color:#14704c}
.fin-aviso.info{background:var(--accent-soft);border:1px solid var(--line);color:var(--navy-deep)}
.fin-aviso b{font-weight:800}
.fin-aviso .fin-aviso-acc{margin-left:auto;flex-shrink:0}
/* Lista de dias adentro de un aviso (los dias sin cerrar del mes): baja a su propio renglon en vez
   de pelear por el ancho con el texto, y cada uno es el boton que lleva a ese dia. */
.fin-aviso{flex-wrap:wrap}
.fin-aviso .fin-dias{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}

/* ---- cajas ---- */
.fin-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
.fin-box > h4{font-size:13px;font-weight:800;letter-spacing:-.01em;padding:13px 16px 11px;border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:9px}
.fin-box > h4 .fin-h4s{font-size:11.5px;font-weight:500;color:var(--muted);letter-spacing:0}
.fin-box > h4 .fin-sp{margin-left:auto;display:flex;gap:7px;align-items:center}
.fin-cuerpo{padding:12px 16px}
/* Cuerpo sin margen propio: la tabla va de borde a borde de la caja y el aire lo pone la tabla.
   Es una clase y no un `style="padding:0"` suelto porque el celular necesita distinguir los dos
   casos: ver `.fin-scroll` abajo, en el bloque de celular. */
.fin-cuerpo0{padding:0}
.fin-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px;align-items:start}
.fin-cols .fin-box{margin-bottom:0}
/* Una columna de .fin-cols que lleva mas de una caja apiladas: sin esto las cajas quedan
   pegadas entre si, porque adentro de la grilla se les saca el margen de abajo. */
.fin-pila{display:grid;gap:14px;align-content:start;min-width:0}
.fin-ancho{grid-column:1/-1}

/* ---- renglones clave/valor (arqueo, liquidacion, totales del mes) ---- */
.fin-kv{display:flex;align-items:baseline;gap:10px;padding:6px 0;font-size:13px;border-bottom:1px dashed var(--line2)}
.fin-kv:last-child{border-bottom:0}
.fin-kv .k{color:var(--muted);font-weight:600}
.fin-kv .v{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.fin-kv .sub{font-size:11.5px;color:var(--faint);font-weight:500}
.fin-kv.total{border-top:1px solid var(--line);border-bottom:0;margin-top:5px;padding-top:9px;font-size:14px}
.fin-kv.total .k{color:var(--ink);font-weight:800}
.fin-kv.total .v{font-size:16px;font-weight:800}
.fin-mas{color:var(--ok)}
.fin-menos{color:var(--bad)}
.fin-cero{color:var(--faint)}

/* ---- tablas ---- */
.fin-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Listas que no tienen largo fijo (las deudas de un año son 134 filas): la caja se queda del alto
   de la pantalla y scrollea adentro, en vez de estirar la página a 15.000 px y dejar la barra de
   filtros afuera de la vista justo cuando hace falta. La cabecera se queda pegada arriba para que
   no haya que adivinar de qué columna es cada número. */
.fin-alto{max-height:62vh;overflow:auto}
.fin-alto table.fin-tabla thead th{position:sticky;top:0;z-index:2}
table.fin-tabla{width:100%;border-collapse:collapse;font-size:12.5px;min-width:520px}
table.fin-tabla th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;padding:9px 10px;background:var(--bg);border-bottom:1px solid var(--line);white-space:nowrap}
table.fin-tabla td{padding:8px 10px;border-bottom:1px solid var(--line2);vertical-align:middle}
table.fin-tabla tbody tr:last-child td{border-bottom:0}
table.fin-tabla tbody tr:hover{background:var(--line2)}
table.fin-tabla .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.fin-tabla .fin-vacia td{color:var(--faint);font-weight:500;padding:16px 10px;text-align:center}
table.fin-tabla tr.fin-anulada td{color:var(--faint);text-decoration:line-through}
table.fin-tabla tr.fin-anulada td.fin-motivo{text-decoration:none;font-style:italic}

/* ---- la hoja del dia: se escribe como en el cuaderno ---- */
.fin-tabs{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.fin-tabs .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-right:3px}
.fin-tab{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:6px 13px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.fin-tab:hover{background:var(--accent-soft)}
.fin-tab.on{background:var(--navy);border-color:var(--navy);color:#fff}
.fin-tab.add{color:var(--muted);font-weight:600;max-width:190px}
table.fin-hoja{width:100%;border-collapse:collapse;font-size:12.5px;min-width:560px}
table.fin-hoja th{text-align:center;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:7px 6px;background:var(--bg);border:1px solid var(--line)}
table.fin-hoja td{border:1px solid var(--line2);padding:0}
table.fin-hoja input{width:100%;border:0;outline:0;background:none;font:inherit;font-size:12.5px;padding:8px 9px;color:var(--ink)}
table.fin-hoja input:focus{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--navy-soft);border-radius:3px}
table.fin-hoja input.plata{text-align:right;font-variant-numeric:tabular-nums}
table.fin-hoja tfoot td{background:var(--bg);font-weight:800}
table.fin-hoja tfoot .lbl{padding:8px 9px;text-align:right;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
table.fin-hoja tfoot input{font-weight:800}
/* La suma de la columna, debajo de lo escrito a mano. Si no coinciden se marca en ambar: no es
   un error del sistema, es una diferencia que alguien tiene que explicar. */
.fin-cruda{display:block;font-size:10.5px;font-weight:600;color:var(--faint);padding:0 9px 5px;text-align:right}
.fin-cruda.diff{color:var(--warn)}
.fin-borrar{width:26px;text-align:center}
.fin-borrar button{border:0;background:none;color:var(--faint);cursor:pointer;padding:5px;line-height:0;border-radius:6px}
.fin-borrar button:hover{color:var(--bad);background:var(--bad-soft)}

/* ---- avisos de fila (lo que la hoja no puede calcular sola) ---- */
.fin-filavisos{padding:10px 16px;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:7px}
.fin-filaviso{font-size:12px;line-height:1.45;display:flex;gap:8px;align-items:flex-start;color:#8a5a08;background:var(--warn-soft);border:1px solid #edd6a8;border-radius:9px;padding:8px 10px}
.fin-filaviso .fin-aviso-acc{margin-left:auto;flex-shrink:0}

/* ---- pastillas de estado ---- */
.fin-pill{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;border-radius:7px;white-space:nowrap}
.fin-pill.abierto{background:var(--accent-soft);color:var(--navy-deep)}
.fin-pill.cerrado{background:var(--ok-soft);color:#14704c}
.fin-pill.pend{background:var(--warn-soft);color:#8a5a08}
.fin-pill.mal{background:var(--bad-soft);color:#9c3323}
.fin-pill.sin{background:var(--bg);color:var(--faint)}

/* ---- botones chicos dentro de las cajas ---- */
.fin-mini{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:9px;padding:5px 11px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.fin-mini:hover{background:var(--accent-soft)}
.fin-mini.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.fin-mini.primary:hover{background:var(--navy-deep)}
.fin-mini.mal{color:var(--bad);border-color:#f2c4bb}
.fin-mini.mal:hover{background:var(--bad-soft)}
.fin-mini:disabled{opacity:.45;cursor:not-allowed}
/* Los botones de una fila de tabla: en una sola linea mientras entren, y si no entran bajan
   en vez de estirar la columna y empujar la tabla a lo ancho. */
.fin-acc{display:flex;align-items:center;gap:6px;justify-content:flex-end;flex-wrap:wrap}
/* Los de una fila de deuda no bajan: son siempre los mismos tres y, si se apilan, cada fila pasa
   de 40 a 110 px de alto y la lista entera deja de leerse de un vistazo. La tabla ya scrollea a
   lo ancho adentro de su caja, asi que en pantalla chica se corre en vez de romperse. */
.fin-acc1{flex-wrap:nowrap}
/* Una fecha ISO se parte por los guiones y ocupa tres renglones de alto para no ahorrar
   nada de ancho: sale mas barato dejarla entera y que la tabla se corra. */
.fin-nw{white-space:nowrap}
/* La columna que se come el espacio que sobra. Sin esto el sobrante se reparte parejo y la
   columna de botones termina con 270 px vacios mientras el concepto se parte en seis renglones. */
.fin-ancha{width:100%}

/* Aclaracion abajo del nombre de una columna, cuando el titulo solo es ambiguo: «Saldo
   pendiente» no dice de que periodo, y la nota al pie la lee el que llega hasta abajo. */
.fin-th-s{display:block;margin-top:2px;font-size:10px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted);opacity:.85}

/* ---- excepcion de porcentaje: la etiqueta y sus dos acciones son una sola pieza ---- */
.fin-exc{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 5px 3px 10px;margin:0 5px 5px 0}
.fin-exc button{border:0;background:transparent;color:var(--muted);cursor:pointer;font:inherit;font-size:12px;line-height:1;padding:3px 4px;border-radius:999px}
.fin-exc button:hover{background:var(--accent-soft);color:var(--navy-deep)}

/* ---- procedencia: de que pantalla sale cada numero (regla 9 de la skill) ---- */
.fin-fuente{font-size:11.5px;color:var(--muted);line-height:1.5;padding:10px 16px;border-top:1px solid var(--line2);background:var(--bg)}
.fin-fuente b{color:var(--ink);font-weight:700}

/* ---- guia de la pantalla, adentro del panel (regla 15 de la skill) ---- */
.fin-guia{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
.fin-guia > summary{cursor:pointer;padding:12px 16px;font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:9px;list-style:none}
.fin-guia > summary::-webkit-details-marker{display:none}
.fin-guia > summary .fin-guia-mas{font-weight:500;color:var(--muted);font-size:11.5px}
.fin-guia[open] > summary{border-bottom:1px solid var(--line2)}
.fin-guia .fin-guia-c{padding:4px 16px 16px;font-size:12.5px;line-height:1.6;color:var(--ink)}
.fin-guia .fin-guia-c p{margin:4px 0 10px;color:var(--muted)}
.fin-guia .fin-guia-c b.paso{display:block;margin-top:12px;font-size:12px;color:var(--navy-deep)}
.fin-guia .fin-guia-c i.ej{font-style:normal;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:11.5px}
.fin-kbd{display:inline-block;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px;font-size:11px;font-weight:700;background:#fff}

/* ---- modales de plata: el detalle chico debajo de un campo ---- */
.fin-modal-nota{font-size:11.5px;color:var(--muted);line-height:1.5;margin:-4px 0 12px}
.fin-modal-sug{font-size:12px;color:var(--navy-deep);background:var(--accent-soft);border-radius:8px;padding:8px 10px;margin:-4px 0 12px;line-height:1.5}

/* ---- celular ---- */
@media(max-width:760px){
  .fin-bar{padding:11px 13px;gap:9px}
  .fin-bar .fin-sp{margin-left:0;width:100%}
  .fin-cuerpo{padding:11px 13px}
  .fin-box > h4{padding:11px 13px 10px;flex-wrap:wrap}
  .fin-box > h4 .fin-sp{margin-left:0;width:100%}
  .fin-fuente{padding:10px 13px}
  .fin-cols{grid-template-columns:1fr}
  /* La tabla scrollea adentro de su caja; la pagina no se mueve de costado. El padding va adentro
     del scroll (se corre con la tabla) y el margen negativo lo saca del padding del cuerpo, para que
     la tabla use todo el ancho de la caja. En un `.fin-cuerpo0` no hay padding que cancelar: con el
     margen negativo puesto, el area de scroll queda 26 px mas ancha que la caja, el `overflow:hidden`
     de `.fin-box` le come los 13 px de aire de cada punta y la tabla termina pegada al borde.
     Medido el 25/9/2026 a 393 px en las 9 tarjetas de Finanzas (B10.3). */
  .fin-scroll{margin:0 -13px;padding:0 13px}
  .fin-cuerpo0{padding:0}
  .fin-cuerpo0 > .fin-scroll{margin:0}
}