/* Carril GAST: estilos propios de este carril. Se carga después de estilo.css; solo lo toca su dueño.
   Gastos (hoja, importar, por revisar, ficha) y Tesorería (tarjetas de banco). Sin colores a mano: tokens de estilo.css; el único color
   que no es un token es el de cada banco, que llega como dato en --c (style="--c:#…") desde el servidor (bancos.py). */

/* ── pequeñas utilidades que usa gastos.js en vez de style="…" ────────────── */
body:not(.visor) .solo-visor { display: none !important; }           /* el botón «Subir tickets» de la hoja es solo del cliente de solo consulta que puede subir */
.normal { font-weight: 400; }
.enlace { color: var(--marca); font-weight: 500; }
.enlace:hover { text-decoration: underline; }
.centrado { text-align: center; }
.m-14 { margin: 14px; }
.v-pequeno { font-size: var(--t-md); font-weight: 400; }
.etiqueta-campo { display: block; font-size: var(--t-sm); font-weight: 500; margin-bottom: 5px; }
.ev-mal { color: var(--no-fg); }
.barra-marca i { background: var(--marca); }
.lectura-ia .barra-h i, .serie-prog .barra-h i { background: var(--marca); }

/* ── la hoja del trimestre: el buscador y los filtros por estado en una sola línea (las columnas y el Excel, en la fila de las pestañas) ──────────────────── */
.hoja-filtros { flex-wrap: wrap; row-gap: var(--e2); }
.hoja-filtros .buscar-hoja { flex: 1 1 260px; min-width: 260px; max-width: 320px; }        /* con el texto de 14 px, «Buscar proveedor, n.º o concepto» cabe en 260 px (el de antes, más largo, pedía 300: Interfaz 15-10) y los cinco filtros caben a su lado en una sola línea desde 1.280 px */
.hoja-filtros .chips { margin: 0; flex: 1 1 auto; gap: var(--e2); }
.hoja-filtros .chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin-left: 0; }   /* estilo.css empuja a la derecha a todo botón de esta barra */
.hoja-filtros .chip-n { color: var(--tenue); font-variant-numeric: tabular-nums; }
.hoja-filtros .chip.activo .chip-n { color: inherit; }
/* Columnas y Descargar Excel viven en la fila de las pestañas, a la derecha: así los filtros caben en una sola línea y la cabecera no se parte en dos filas */
.hoja-cab { display: flex; align-items: stretch; }
.hoja-cab .tabs { flex: 1 1 auto; min-width: 0; }
.hoja-herr { flex: none; display: flex; align-items: center; gap: var(--e2); padding: 0 var(--e3); border-bottom: 1px solid var(--linea); }
.hoja-herr .btn, .hoja-herr button { margin-left: 0; }
@media (max-width: 720px) {
  .hoja-cab { flex-wrap: wrap; }
  .hoja-cab .hoja-herr { flex: 1 1 100%; justify-content: flex-end; padding: var(--e2) var(--e3); }
  .hoja-herr [data-a="cols-gastos"] { display: none; }               /* en el móvil la hoja es una lista de tarjetas: no hay columnas que elegir */
}
/* LA FILA DE TOTALES SE VE SIEMPRE (encargo de Iker, 15-10: «lo único que no se ve en mi pantalla es la fila final de los sumatorios»).
   En un portátil de 768 a 900 px de alto la hoja era más alta que la pantalla y los totales quedaban debajo, fuera de la vista. Ahora la tarjeta de la hoja
   ocupa justo lo que queda de pantalla (sin pasar de ella): la tabla se desplaza por dentro, con su cabecera arriba y su fila de totales abajo, fijas (estilo.css:
   thead th y tfoot td son «sticky»). Con pocas filas la tarjeta mide lo que mide la tabla. Si la pantalla es tan baja que no cabe ni una hoja mínima, se
   desplaza la página entera, como siempre. En el móvil (< 721 px) la hoja es una lista de tarjetas y la página entera es la que se desplaza. */
@media (min-width: 721px) {
  #main:has(> .hoja-card.ajusta) { display: flex; flex-direction: column; padding-bottom: var(--e4); }
  #main:has(> .hoja-card.ajusta) > :not(.hoja-card) { flex: none; }
  .hoja-card.ajusta { flex: 0 1 auto; display: flex; flex-direction: column; min-height: 300px; }
  .hoja-card.ajusta > * { flex: none; }
  .hoja-card.ajusta > #hoja-tabla { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .hoja-card.ajusta .caja-tabla { flex: 0 1 auto; min-height: 0; max-height: none; }
}
.pista-menu { padding: 2px 10px 8px; max-width: 240px; }
.hoja-tabla tfoot .normal { font-weight: 400; }
.hoja-tabla tfoot td[colspan] { white-space: normal; min-width: 0; }
/* ESTETICA-23: lo largo (proveedor, categoría, concepto) se parte en hasta dos líneas y solo lo que aún no cabe acaba en «…» (su título lo dice entero).
   Antes todo se cortaba en una línea a 17 o 14 caracteres y casi la mitad de las filas salían con «…». Dos líneas de 13 px caben en la altura de una fila. */
.hoja-tabla .corta { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; max-width: none; overflow: hidden; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
.hoja-tabla .corta-cat { min-width: 104px; }          /* para que quepa «profesionales · 623» (la última palabra más larga con su cuenta): sin esto la columna se quedaba en ~90 px y la cuenta caía a una tercera línea */
/* El n.º también baja a la segunda línea (DS-AEU-INV-ES-2025-93392162): con «…» se perdía justo lo que distingue una factura de otra. Si en lo que se ve hay
   alguno largo, la columna pide 104 px de texto (gastos.js pone .nums-largos) para que quepa en dos líneas de 14 caracteres; con n.º cortos no cambia nada. */
.hoja-tabla.nums-largos .corta-num { min-width: 104px; }
.hoja-tabla .no-parte { white-space: nowrap; }          /* «· 629» no se parte del todo: si la categoría baja de línea, se va entero abajo */
.hoja-tabla .prov-cel { display: flex; align-items: center; gap: 6px; }
.hoja-tabla .prov-cel .corta { min-width: 0; }
.hoja-tabla .prov-cel .ico-clip { flex: none; }
@media (max-width: 720px) { .hoja-tabla .corta { display: inline; max-width: none; white-space: normal; min-width: 0; } .hoja-tabla .prov-cel { display: inline; } }
/* Con la caja de un portátil (≤ 1.100 px) las píldoras de estado, factura y pago van compactas (sin el punto): le devuelven ~57 px a proveedor y
   categoría, que eran los que se cortaban («Servicios profesionales · 623», «Vehículo y reparaciones · 622»). Con datos reales de Enigma pasa de
   9 a 1 recortadas en un trimestre y de 4 a 0 en otro. Es lo mismo que ya hace estilo.css por debajo de 1.000 px. */
@container (max-width: 1100px) {
  .hoja-tabla .eti { padding: 1px 7px; }
  .hoja-tabla .eti::before { display: none; }
}

/* ── Importar gastos ──────────────────────────────────────────────────────────────────────────────── */
.imp-rejilla { align-items: stretch; }
.imp-card { height: 100%; }
.imp-card > .cc { display: flex; flex-direction: column; gap: var(--e3); height: 100%; }
.imp-cab { display: flex; align-items: flex-start; gap: var(--e3); }
.imp-cab b { display: block; font-size: var(--t-md); font-weight: 600; }
.imp-cab p { font-size: var(--t-sm); margin-top: 2px; }
.imp-icono { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r); background: var(--marca-suave); color: var(--marca); }
.imp-icono svg { width: 20px; height: 20px; }
/* ESTETICA-16: las tres zonas de soltar con el mismo alto y en el mismo sitio (el pie de la tarjeta), y las descripciones con la misma altura mínima
   (cinco líneas, la de la tercera), para que ninguna deje un hueco distinto antes de su zona. La frase cabe en una línea. */
.imp-cab { min-height: 6.5em; }
.imp-card .soltar { flex-direction: column; gap: 4px; margin-top: auto; padding: var(--e4); text-align: center; min-height: 112px; }
.imp-card .soltar b { font-size: var(--t-sm); }
.imp-card .soltar span { font-size: var(--t-xs); }
.imp-card .cc > .fila { margin-top: 0; }
.claude-aviso > .cc { align-items: center; gap: var(--e4); }
.claude-ico { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r); background: color-mix(in srgb, var(--claude, var(--marca)) 14%, var(--card)); }
.claude-ico svg { width: 22px; height: 22px; }
.claude-aviso p { font-size: var(--t-sm); margin-top: 2px; }
.elige-clase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
.elige-clase button { display: grid; justify-items: start; gap: 4px; height: auto; padding: var(--e4); text-align: left; white-space: normal; font-weight: 400; }
.elige-clase button svg { width: 22px; height: 22px; color: var(--marca); }
.elige-clase button span { font-size: var(--t-xs); color: var(--tenue); }
@media (max-width: 720px) { .elige-clase { grid-template-columns: minmax(0, 1fr); } .claude-aviso > .cc { flex-wrap: wrap; } .claude-aviso > .cc > .crece { flex-basis: 100%; } }      /* el texto ocupa la línea y el botón baja (sino se queda un texto de cuatro palabras por línea) */

/* ── Por revisar: una tarjeta por gasto ───────────────────────────────────────────────────────────── */
.gasto-tarjeta { display: flex; gap: var(--e3); padding: var(--e3); color: inherit; }
.gasto-tarjeta:hover { border-color: var(--marca); }
.gt-foto { flex: none; width: 76px; height: 96px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--linea); border-radius: var(--r); background: var(--fondo); }
.gt-foto img { width: 100%; height: 100%; object-fit: cover; }
.gt-cuerpo { min-width: 0; display: grid; gap: var(--e1); align-content: start; }
.gt-aviso { color: var(--av-fg); }

/* ── la ficha de un gasto ─────────────────────────────────────────────────────────────────────────── */
.calculado { margin-left: var(--e2); font-size: var(--t-2xs); font-weight: 400; color: var(--tenue); text-transform: none; letter-spacing: 0; }          /* «calculado»: lo ha puesto el programa (cuota y total de la ficha) */
.calculado::before { content: "· "; }
/* ── «Gasto a mano»: dos columnas (la factura · los importes con su total) y debajo el pago y el documento. En un portátil caben juntas las dos primeras sin desplazarse ───── */
.gasto-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--e5); }
.gasto-col { min-width: 0; }
.gasto-cols + .gasto-cols { margin-top: var(--e1); padding-top: var(--e3); border-top: 1px solid var(--linea-suave); }
.gasto-col .campo { margin-bottom: var(--e3); }
.modal:has(.gasto-cols) .cuerpo { padding-bottom: var(--e3); }
.gasto-grupo { font-size: var(--t-2xs); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); margin: 0 0 var(--e3); }
.gasto-grupo .normal { text-transform: none; letter-spacing: 0; }
.gasto-res { display: grid; gap: var(--e1); padding: var(--e3) var(--e4); border: 1px solid var(--linea); border-radius: var(--r); background: var(--sub); font-size: var(--t-sm); }
.gasto-res-fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); }
.gasto-res-fila b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gasto-res-total { font-size: var(--t-md); margin-top: var(--e1); padding-top: var(--e2); border-top: 1px solid var(--linea); }
@media (max-width: 720px) { .gasto-cols { grid-template-columns: minmax(0, 1fr); } .gasto-col + .gasto-col { margin-top: var(--e2); } }
.fila-prov { flex-wrap: wrap; }
.fila-prov select { flex: 1 1 220px; }
.campo-abajo { align-self: end; }
.foto-pdf { width: 100%; height: 80vh; }
.cent-chico { font-size: var(--t-2xs); }

/* ── Tesorería: tarjetas de banco ─────────────────────────────────────────────────────────────────────
   Cada cuenta lleva el LOGO OFICIAL de su banco (frontend/img/bancos, lo pone el programa: nadie sube nada) en una placa blanca con su marco, y su color
   de marca tiñe la tarjeta con muy poca fuerza y marca el borde de la izquierda. La placa es blanca en claro y en oscuro (los logos son a todo color y se
   leen sobre blanco; un logo blanco lleva .sobre-color y va sobre el color del banco). Un banco sin logo sale con su monograma (.banco-marca). */
.card.cuenta {
  background: linear-gradient(135deg, color-mix(in srgb, var(--c, var(--marca)) 9%, var(--card)) 0%, var(--card) 62%);
  transition: border-color var(--dur) var(--curva), box-shadow var(--dur) var(--curva);
}
html.oscuro .card.cuenta {
  background: linear-gradient(135deg, color-mix(in srgb, var(--c, var(--marca)) 22%, var(--card)) 0%, var(--card) 70%);
  border-left-color: color-mix(in srgb, var(--c, var(--marca)) 70%, var(--blanco));
}
.cuenta-cab { display: flex; align-items: center; gap: var(--e3); flex-wrap: nowrap; padding-right: 30px; }
.cuenta-nom { min-width: 0; flex: 1 1 auto; display: grid; line-height: 1.3; }
.cuenta-nom b { font-size: var(--t-md); font-weight: 600; }
.cuenta-nom .tenue { font-size: var(--t-xs); }
.banco-marca { flex: none; width: 48px; height: 48px; border-radius: var(--r); display: block; }
.banco-logo { flex: none; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; box-sizing: border-box; width: 112px; height: 48px; padding: 6px var(--e3);
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; }       /* la pista es la placa y no la imagen: un logo casi cuadrado no se sale */
.banco-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.banco-logo.sobre-color { background: var(--c, var(--marca)); border-color: transparent; }       /* --c lo pone la propia placa */
.banco-logo.ancho { width: 148px; max-width: 46%; min-width: 112px; }                 /* un rótulo muy alargado (Banca March, Deutsche Bank…) pide más sitio; el nombre de la cuenta sigue cabiendo */
@media (max-width: 480px) { .banco-logo { width: 96px; } .banco-logo.ancho { width: 140px; min-width: 96px; } }
.card.cuenta .s { margin: var(--e3) 0 var(--e1); }
.cuenta-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); flex-wrap: wrap; }
.cuenta-pie .eti { flex: none; }
.vista-banco { display: flex; align-items: center; gap: var(--e3); padding: var(--e3); border: 1px solid var(--linea); border-radius: var(--r); background: var(--sub); }
.vista-txt { display: grid; gap: 2px; min-width: 0; }
.vista-txt b { font-weight: 600; }
.cuenta-vista { margin-top: calc(var(--e1) * -1); }

/* ── Caja y tarjeta de crédito (ronda 13): la tarjeta de una caja o de una tarjeta es la de un banco, con un icono sobre su color en vez del logo ─────────────────────── */
.cuenta-ico { flex: none; width: 48px; height: 48px; border-radius: var(--r); display: grid; place-items: center; --t: var(--blanco); background: var(--c, var(--marca)); color: var(--t); }          /* --t (la tinta) la pone tesoreria.js según el color de la cuenta; sin ella, blanco */
.cuenta-ico svg { width: 26px; height: 26px; }
.cuenta-datos { display: grid; gap: 2px; margin: 0 0 var(--e2); font-size: var(--t-xs); color: var(--tenue); }
.cuenta-datos .aviso-efectivo { color: var(--av-fg); }
.cuenta-aviso { padding: 0 18px var(--e3); }
.cuenta-aviso button { height: auto; min-height: var(--alto-xs); max-width: 100%; padding-top: var(--e1); padding-bottom: var(--e1); white-space: normal; text-align: left; line-height: 1.3; }
.cuenta-aviso svg { flex: none; }
.vista-banco .cuenta-ico { width: 40px; height: 40px; }
.vista-banco .cuenta-ico svg { width: 22px; height: 22px; }
.campo .seg { display: inline-grid; max-width: 100%; }
.campo .seg label { white-space: normal; text-align: center; line-height: 1.2; height: auto; min-height: var(--alto-xs); padding-top: var(--e1); padding-bottom: var(--e1); }
@media (max-width: 480px) { .campo .seg { grid-auto-flow: row; width: 100%; } }

/* ── lo que tesoreria.js antes escribía con style="…" ─────────────────────────────────────────────────── */
.fw5 { font-weight: 500; }
.self-c { align-self: center; }
.alinea-izq { text-align: left; }
.max-240 { max-width: 240px; }
.max-300 { max-width: 300px; }
.conc.cab-conc { background: var(--sub); }
.conc.cab-conc > div { padding: 9px 14px; }

/* ── Revisar con Claude: lo que añade este carril (el aspecto de los pasos y del texto es de ial.css) ────────────────────────────── */
.rc-texto { margin-top: var(--e2); }
.rc-texto summary { cursor: pointer; color: var(--marca); font-size: var(--t-sm); font-weight: 500; padding: var(--e1) 0; width: max-content; max-width: 100%; }
.rc-texto[open] summary { margin-bottom: var(--e2); }
.rc-suelta { margin-top: var(--e1); text-align: left; }
.claude-pasos .rc-suelta b { display: inline; margin: 0; }          /* ial.css pone en bloque toda negrita de un paso: aquí va en la misma línea que su explicación */
.rc-tras { margin: var(--e3) var(--pad-card) 0; }
@media (max-width: 480px) {          /* la vista previa de lo que hará Claude cabe en un móvil sin desplazarse de lado: el proveedor cede (ial.css le da 220 px) y las celdas ajustan su relleno */
  #claude-plan .claude-prov { max-width: 30vw; }
  #claude-plan .tabla th, #claude-plan .tabla td { padding-left: 6px; padding-right: 6px; }
}

/* (17-10, P1) Comentarios y preguntas de un gasto o de una factura (comentarios.js) */
.coment { display: grid; gap: var(--e2); }
.coment .ct h3 { display: flex; align-items: center; gap: var(--e2); }
.co-lista { display: grid; gap: var(--e2); }
.co-nota { position: relative; padding: var(--e2) var(--e3); padding-right: calc(var(--e3) + var(--e4)); border: 1px solid var(--linea); border-radius: var(--r); background: var(--card); }
.co-nota.co-abierta { border-color: var(--av-fg); background: var(--av-bg); }
.co-nota.co-resuelta { opacity: .85; }
.co-cab { display: flex; align-items: center; gap: var(--e1); flex-wrap: wrap; font-size: var(--t-sm); }
.co-hace { margin-left: auto; }
.co-texto { margin-top: var(--e1); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-sm); }
.co-pie { display: flex; align-items: center; gap: var(--e2); margin-top: var(--e2); flex-wrap: wrap; }
.co-borrar { position: absolute; top: var(--e1); right: var(--e1); }
.co-nuevo { display: grid; gap: var(--e2); }
.co-nuevo textarea { width: 100%; resize: vertical; min-height: calc(var(--alto-md) * 2); }


/* (18-10) «Compartido desde el móvil» (compartir.js): la miniatura de cada foto que espera */
.miniatura-comp { width: var(--e6); height: var(--e6); object-fit: cover; border-radius: var(--r-sm); flex: none; }
.imp-filas { max-height: 50vh; overflow: auto; }      /* (18-10) la vista previa de un Excel (importar.js): las filas se recorren dentro del cuadro */

/* ── Bloque 9: la conexión directa con el banco en Tesorería (banco.js): una fila por cuenta conectada ── */
.banco-fila { flex-wrap: wrap; row-gap: var(--e2); padding: var(--e3) 0; border-bottom: 1px solid var(--linea); }
.banco-fila:last-child { border-bottom: 0; }
.banco-info { flex: 1 1 18rem; min-width: 0; }
.banco-info .sub2 { display: block; }
.banco-estado { display: flex; flex-wrap: wrap; gap: var(--e2); }
.banco-acc { display: flex; flex-wrap: wrap; gap: var(--e2); margin-left: auto; }
.banco-error { color: var(--no-fg); }

/* ── Bloque 10: nóminas leídas de un PDF (importar.js): una ficha por nómina, que se corrige y se comprueba antes de importar ── */
.nom-ficha { border: 1px solid var(--linea); border-radius: var(--r); padding: var(--e3); margin-bottom: var(--e3); background: var(--card); }
.nom-ficha.apagada { opacity: .55; }
.nom-aviso { color: var(--av-fg); margin-top: var(--e1); }
.nom-res { margin-top: var(--e3); padding-top: var(--e2); border-top: 1px solid var(--linea); }

/* Revisar un gasto (UI 19-10): el formulario va en tres grupos con su rótulo («El documento», «Los importes», «Pago y factura») en vez de quince campos seguidos */
.campos > .campos-grupo { grid-column: 1 / -1; margin: var(--e5) 0 var(--e3); padding-top: var(--e4); border-top: 1px solid var(--linea); }
.campos > .campos-grupo:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ═════════════════════════════════════════ Gastos 2.0 (hoja del trimestre) ══
   Menos apretada: cuatro cifras arriba, filas con más aire y lo normal en voz baja (el visto) para que destaque lo que hay que mirar. */
.gh-cifras { display: grid; gap: var(--e5); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--e5); }
@media (min-width: 900px) { .gh-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gh-cifras .kpi { padding: var(--e4) var(--e5); display: grid; gap: var(--e1); align-content: start; }
.gh-cifras .kpi .v { font-size: var(--t-xl); margin-top: 0; }
.gh-cifras .kpi .s { margin-top: 0; }
html:not([data-densidad]) .hoja-card { --fila: 46px; }
.hoja-card .hoja-tabla td, .hoja-card .hoja-tabla thead th { padding-left: 10px; padding-right: 10px; }
.hoja-card .hoja-tabla td { padding-top: 8px; padding-bottom: 8px; }
.hoja-card .hoja-tabla thead th { padding-top: 14px; padding-bottom: 14px; }
.hoja-card .hoja-filtros { padding: var(--e4) var(--e5); gap: var(--e4); }
.hoja-tabla td.calma { text-align: center; }
.hoja-tabla td.calma svg { width: 16px; height: 16px; vertical-align: -3px; color: var(--ok-fg); opacity: .55; }
.hoja-tabla .corta-cat .no-parte { display: none; }
@media (max-width: 720px) { .hoja-tabla td.calma { display: none; } }