/* Fuentes servidas por qConta (no se pide nada a Google): Geist y Geist Mono, licencia OFL */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fuentes/geist-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fuentes/geist-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fuentes/geist-mono-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fuentes/geist-mono-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ═══════════════════════════════════════════════════════════════════════
   qCONTA 2 — hoja de estilo

   Estructura de Holded (raíl de iconos · submenú del módulo · barra
   superior · contenido en tarjetas · documento como papel con panel a la
   derecha), con la identidad de qConta: verde bosque, el logo de cuatro
   cuadraditos y los estados en píldora con puntito.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Colores ──────────────────────────────────────────────────────────
     Todo texto sobre su fondo llega a 4,5:1 en los dos temas (WCAG 2.2, 1.4.3: https://www.w3.org/TR/WCAG22/#contrast-minimum);
     los bordes de campos y casillas y el anillo de foco, a 3:1 (1.4.11: https://www.w3.org/TR/WCAG22/#non-text-contrast).
     Si cambias un color, repasa el par en los dos temas: backend/tests/css/test_tokens.py lo calcula. */
  --c-cliente: #1f6b4a; --c-proveedor: #a8612f; --c-ambos: #3f5ea8; --c-empleado: #7a5a99;   /* contactos: un color por tipo */
  --rail: #12291f;
  --rail-txt: #e8f1eb;
  --rail-tenue: rgb(232 241 235 / .72);
  --verde-claro: #79c67f;

  --fondo: #f4f5f2;
  --sub: #fafbf8;
  --card: #ffffff;
  --texto: #16201a;
  --tenue: #5f6a63;
  --linea: #e4e7e1;               /* separadores y borde de tarjeta (decorativos) */
  --linea-suave: #eef0ec;
  --linea-fuerte: #c3c9c2;        /* borde de botones secundarios, chips y bloques que se pulsan */
  --campo-borde: #868f89;         /* borde de campos y casillas: 3:1 sobre la tarjeta */
  --hover: #f1f4f0;
  --marca: #1f6b4a;
  --marca-fg: #ffffff;
  --marca-suave: #e6f1ea;
  --foco: #1f6b4a;                /* anillo de foco: línea sólida de 2 px */
  --ring: rgb(31 107 74 / .3);    /* halo de los campos con foco */

  --ok-bg: #dff0e0;   --ok-fg: #26703a;
  --av-bg: #faeec9;   --av-fg: #7a5a0d;
  --no-bg: #fbe1de;   --no-fg: #b02f22;
  --gris-bg: #ebecef; --gris-fg: #5b5b66;
  --azul-bg: #e2ebfa; --azul-fg: #1b4f9c;
  --lila-bg: #efe6f8; --lila-fg: #6c3aa0;
  --no-solido: #b02f22; --no-solido-fg: #ffffff;   /* aviso de error: fondo sólido con su texto */
  --blanco: #ffffff;                                /* texto sobre un fondo de color o sobre el raíl (no cambia con el tema) */
  --punto: #f0a64b; --punto-fg: #1b1405;            /* el puntito naranja del raíl y su contador (7,7:1) */
  --tip-bg: #0d1712;                                /* globo de ayuda */
  --relleno-bg: #fff0a0; --relleno-fg: #5b4a00;     /* «[POR RELLENAR]» de los textos legales */

  /* Superficies oscuras (el raíl, la tarjeta del saldo, la pantalla de entrar): blanco con transparencia, igual en los dos temas */
  --sobre-oscuro: rgb(255 255 255 / .72);           /* texto secundario sobre fondo oscuro (≥ 7:1) */
  --sobre-oscuro-tenue: rgb(255 255 255 / .6);      /* pie y notas sobre fondo oscuro (≥ 5:1) */
  --rail-hover: rgb(255 255 255 / .07);
  --rail-activo: rgb(255 255 255 / .12);
  --rail-linea: rgb(255 255 255 / .12);
  --velo: rgb(8 18 13 / .5);                        /* el telón detrás de una ventana */
  --borde-scroll: rgb(16 40 30 / .14);              /* la sombrita del borde de una caja que se desplaza */

  /* Papel: lo que imita una hoja impresa (ticket, vista previa de la factura, QR). Es blanco también de noche, como el papel de verdad. */
  --papel: #ffffff; --papel-tinta: #1b211d; --papel-tenue: #4a524c; --papel-linea: #eceeea; --papel-hueco: #8a938c; --papel-alerta: #c0392b;
  --vp-u: 9px; --borde-papel: rgb(0 0 0 / .06);   /* el cuerpo de la vista previa de la factura (una A4 a escala) y el borde de la hoja */
  --ticket-papel: #fbfaf7; --ticket-tinta: #1a1a1a; --ticket-borde: #d8d8d2; --ticket-corte: #b4b4ae;
  --sello-borde: #b78b1a; --sello-fondo: #fdf6e3; --sello-tinta: #6f5410;     /* «Simulación», sobre papel */
  --sim-borde: #6c3aa0; --sim-fondo: #f4eefa; --sim-tinta: #4f2a78;            /* el mismo sello en lila (factura simulada), sobre papel */

  /* Colores de las gráficas (revisión 13-10): uno por serie, con contraste de 3:1 o más
     sobre la tarjeta en los dos temas. Se usan con var(--g-…) en barras, leyendas y puntos. */
  --g-ventas: #1f6b4a; --g-gastos: #858f88; --g-resultado: #a8650f; --g-cobros: #2c7a3f; --g-pagos: #3b72c4;

  /* Plano (decisión 13-10): nada de sombra para separar bloques, eso lo hace
     la línea. La sombra se reserva para lo que de verdad flota encima:
     menús, diálogos y avisos. */
  --sombra-xs: none;
  --sombra-sm: none;
  --sombra-md: 0 4px 14px -6px rgb(16 40 30 / .16);
  --sombra-lg: 0 16px 36px -12px rgb(16 40 30 / .28);

  --fuente: "Geist", "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* ── Escala de texto: siete pasos y nada de medios píxeles. Pesos: 400, 500 y 600.
     15-10-2026: Iker lo veía «todo muy comprimido». El repaso del 14-10 había bajado el texto de interfaz de 13,5 a 13 px; ahora vuelve a 14 (y sube lo pequeño un
     paso, para que la diferencia entre lo principal y lo secundario siga siendo la misma). ── */
  --t-3xs: 11px;   /* solo el nombre bajo un icono del raíl */
  --t-2xs: 12px;   /* rótulos en mayúsculas, contadores, teclas */
  --t-xs: 13px;    /* notas, pistas, píldoras, segunda línea de una celda */
  --t-sm: 14px;    /* texto de interfaz: tablas, botones, campos, menús */
  --t-md: 14px;    /* texto corrido y título de tarjeta (el título se distingue por el peso, 600) */
  --t-lg: 16px;    /* título de ventana y de sección */
  --t-xl: 20px;    /* cifra secundaria, número de un día */
  --t-2xl: 26px;   /* título de la página y cifra de una tarjeta de total */
  --t-hero: 46px;  /* solo el titular de la pantalla de entrar */

  /* ── Alturas de control: normal, compacto y mínimo (botones, campos, chips, pestañas). Más altos que el 14-10 (36 · 32 · 28): con texto de 14 px un control de 36 se veía apretado. ── */
  --alto-md: 40px;
  --alto-sm: 34px;
  --alto-xs: 30px;

  /* ── Esquinas: 8 para todo lo que se ve como caja, 6 para lo diminuto (botón mínimo, etiquetas), redonda para píldoras ── */
  --r: 8px;
  --r-sm: 6px;
  --r-xs: 3px;      /* cuadraditos de color (leyenda, logo, marca de texto) */
  --r-pill: 999px;

  /* ── Espaciado: 4 · 8 · 12 · 16 · 24 · 32 ── */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px;

  /* ── Movimiento: una duración y una curva para todo lo que responde a un gesto; lo demás son bucles con su nombre ── */
  --dur: .15s;
  --dur-lenta: .45s;        /* una barra que se llena */
  --dur-giro: .7s;          /* una ruedecita */
  --dur-carga: 1.1s;        /* la barra fina de arriba mientras se carga */
  --dur-brillo: 1.4s;       /* el esqueleto que brilla */
  --curva: cubic-bezier(.2, .8, .2, 1);

  /* ── Estructura ── */
  --ancho-rail: 84px;
  --ancho-sub: 248px;   /* el panel de secciones: «Mandatos de domiciliación» (170 px con el texto de 14) cabe entera */
  --pad-pagina: 24px;      /* margen lateral de la barra y del contenido: las migas caen sobre el título. 24 hasta 1.599 px de pantalla (la hoja de gastos, de diez columnas, necesita 1.054 px de caja en un 1440 con el panel abierto), 32 desde 1.600 y 16 en el móvil */
  --pad-card: 20px;        /* relleno lateral de una tarjeta, de un total y de las tablas dentro de ellas */
  --alto-barra: 64px;      /* la barra de arriba */

  /* Altura de fila de las tablas. La intermedia es la de fábrica; cada
     persona la cambia en su menú y se guarda en su navegador. */
  --fila: 40px;

  /* ── Cristal (21-10, la portada de la administración): vidrio oscuro con degradado verde. Es oscuro en los dos temas: es una pieza, no el tema de la pantalla ── */
  --cristal-fondo: radial-gradient(900px 520px at 78% -10%, rgb(79 177 132 / .38), transparent 60%), radial-gradient(700px 480px at 4% 96%, rgb(48 140 120 / .30), transparent 62%), linear-gradient(160deg, #0c1f17, #123326 55%, #0f2a20);
  --cristal: rgb(255 255 255 / .07);
  --cristal-hover: rgb(255 255 255 / .11);
  --cristal-borde: rgb(255 255 255 / .14);
  --cristal-sombra: 0 10px 30px -14px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .10);
  --cristal-txt: #eaf3ee;
  --cristal-tenue: rgb(234 243 238 / .68);
  --cristal-marca: #4fb184;
  --cristal-ok: #6fdba5;
  --cristal-av: #f0b35a;
  --cristal-no: #ff8a7a;
}

@media (min-width: 1600px) { :root { --pad-pagina: 32px; } }
html[data-densidad="comoda"]   { --fila: 48px; }
html[data-densidad="compacta"] { --fila: 32px; }

html.oscuro {
  --c-cliente: #25805a; --c-proveedor: #a0612f; --c-ambos: #4a66b0; --c-empleado: #7f63a0;
  /* El verde de noche (19-10-2026): a Iker el verde claro de antes (#79c67f en botones, texto y fondos con tinte) le cansaba la vista. Ahora el botón principal es un verde
     profundo con texto blanco (--boton), el acento de texto y de foco baja de brillo (de 0,46 a 0,31 de luminancia) y los fondos pierden tinte. Todo sigue por encima de 4,5:1. */
  --rail: #0c1410;
  --fondo: #111715;
  --sub: #141b18;
  --card: #19201c;
  --texto: #e3eae5;
  --tenue: #9fada5;
  --linea: rgb(255 255 255 / .1);
  --linea-suave: rgb(255 255 255 / .06);
  --linea-fuerte: rgb(255 255 255 / .22);
  --campo-borde: #6f7d75;
  --hover: rgb(255 255 255 / .05);
  --boton: #2f7d52; --boton-fg: #ffffff;
  --marca: #5aa77a;
  --marca-fg: #0d1a14;
  --marca-suave: rgb(90 167 122 / .13);
  --foco: #5fae80;
  --ring: rgb(90 167 122 / .34);
  --verde-claro: #68b487;
  --ok-bg: rgb(90 167 122 / .15);   --ok-fg: #78bd92;
  --av-bg: rgb(227 194 100 / .16);   --av-fg: #e3c264;
  --no-bg: rgb(240 138 125 / .16);   --no-fg: #f08a7d;
  --gris-bg: rgb(255 255 255 / .08); --gris-fg: #a3aca7;
  --azul-bg: rgb(120 160 230 / .16); --azul-fg: #9db8ee;
  --lila-bg: rgb(180 140 230 / .16); --lila-fg: #c9a8f0;
  --no-solido: #f08a7d; --no-solido-fg: #1a0d0b;
  --relleno-bg: #5b4a00; --relleno-fg: #fff0a0;
  --g-ventas: #38996b; --g-gastos: #7d8a82; --g-resultado: #d08a2c; --g-cobros: #388d55; --g-pagos: #7da6e8;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* lo escondido se esconde siempre, aunque su clase diga display:flex */
[hidden] { display: none !important; }
html, body { height: 100%; }
body { background: var(--fondo); color: var(--texto); font: var(--t-md)/1.5 var(--fuente); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 600; }
/* Texto que no se parte mal: los títulos se reparten entre sus líneas y un párrafo no deja una palabra sola en la última (textos partidos) */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, .pista, .nota, .sub2, .vacio, .tenue.chico { text-wrap: pretty; }
/* Foco visible en TODO lo que se puede pulsar (WCAG 2.4.7, https://www.w3.org/TR/WCAG22/#focus-visible): línea sólida de 2 px con separación; los campos usan además su borde de marca */
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.rail :focus-visible, .movil :focus-visible { outline-color: var(--verde-claro); }
.rail :focus-visible { outline-offset: -2px; }

.app { display: grid; grid-template-columns: var(--ancho-rail) var(--ancho-sub) minmax(0, 1fr); height: 100vh; }
/* En el editor de documentos el submenú se aparta: el papel necesita sitio */
.app.enfoque { grid-template-columns: var(--ancho-rail) minmax(0, 1fr); }
.app.enfoque .sub { display: none; }
/* Inicio (y lo que sea de un grupo con pestañas, nucleo.js: MODULOS_CON_PESTANAS) no lleva el panel blanco de secciones: la barra de la izquierda y la pantalla.
   Sus pantallas van como pestañas bajo la barra de arriba (.tabs-modulo, más abajo). */
.app.sin-sub { grid-template-columns: var(--ancho-rail) minmax(0, 1fr); }
.app.sin-sub .sub { display: none; }

/* ══════════════════════════════════════════════════════════ raíl ══ */
.rail { background: var(--rail); color: var(--rail-txt); display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 2px; }
/* El isotipo de qConta (15-10-2026): la q con el rabo en visto bueno (/marca/isotipo.svg, del kit MARCA/). Se pinta con una
   máscara en el color del sitio: el verde de la marca sobre claro y el verde claro sobre el raíl y la pantalla de entrar.
   Las <i> de dentro (los cuatro cuadraditos de antes) ya no se ven. Mide 55 × 46: las cajas guardan esa proporción. */
.iso { width: 32px; height: 27px; display: block; margin-bottom: 14px; background: var(--marca);
  -webkit-mask: url("/marca/isotipo.svg") center / contain no-repeat; mask: url("/marca/isotipo.svg") center / contain no-repeat; }
.iso i { display: none; }
.rail .iso, .acceso-marca .iso { background: var(--verde-claro); }
/* Cada icono lleva su nombre debajo: sin pasar el ratón ya se sabe qué es cada cosa */
.rail a, .rail button.r {
  width: calc(var(--ancho-rail) - 8px); height: 52px; display: grid; justify-items: center; align-content: center; gap: 3px; border-radius: var(--r); color: var(--rail-tenue);
  background: transparent; border: 0; cursor: pointer; position: relative; padding: 0;
}
.rail a:hover, .rail button.r:hover { background: var(--rail-hover); color: var(--rail-txt); opacity: 1; }
.rail a.activo { background: var(--rail-activo); color: var(--verde-claro); }
.rail svg { width: 20px; height: 20px; }
.rail .punto { position: absolute; top: 7px; right: 22px; width: 7px; height: 7px; border-radius: 50%; background: var(--punto); box-shadow: 0 0 0 2px var(--rail); }
.rail a[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: 54px; top: 50%; transform: translateY(-50%); z-index: 40;
  background: var(--tip-bg); color: var(--blanco); font-size: var(--t-xs); padding: 5px 9px; border-radius: var(--r-sm); white-space: nowrap; pointer-events: none;
}

/* ══════════════════════════════════════════════════════════ submenú ══ */
.sub { background: var(--sub); border-right: 1px solid var(--linea); padding: 22px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.sub h2 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.01em; padding: 2px 10px 16px; }
/* (20-10) El «Nuevo» de la barra de arriba es el acceso rápido a crear cualquier cosa: con borde, para que el verde sea solo el de la acción principal de cada pantalla (el panel de la izquierda ya no lleva botón de crear) */
#btn-nuevo { background: var(--card); color: var(--texto); border: 1px solid var(--linea-fuerte); font-weight: 500; }
#btn-nuevo:hover { background: var(--hover); border-color: var(--campo-borde); opacity: 1; }
#btn-nuevo svg { color: inherit; }
.sub .grupo { font-size: var(--t-2xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); padding: 20px 10px 8px; }
.sub a { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 7px 10px; border-radius: var(--r); font-size: var(--t-sm); line-height: 1.3; color: var(--texto); }
.sub a:hover { background: var(--hover); }
.sub a.activo { background: var(--marca-suave); color: var(--marca); font-weight: 500; }
.sub a svg { width: 16px; height: 16px; color: var(--tenue); flex: none; }
.sub a > span:not(.n) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }          /* nada se parte en dos líneas: el texto largo acaba en «…» (el título del enlace lo dice entero) */
.sub a.activo svg { color: var(--marca); }
.sub a .n { margin-left: auto; flex: none; }
.sub a .n.av { background: var(--av-bg); color: var(--av-fg); }
.sub .pie-sub { margin-top: auto; padding: 16px 10px 0; font-size: var(--t-xs); color: var(--tenue); border-top: 1px solid var(--linea); }

/* ══════════════════════════════════════════════════════════ principal ══ */
.principal { display: flex; flex-direction: column; min-width: 0; height: 100vh; position: relative; }
/* La barra de arriba: migas · buscador · empresa y «Nuevo». Es una fila flexible (antes, tres columnas de rejilla: con el texto de 14 px las migas se cortaban a 1280 px).
   · Las migas miden lo que mide su texto y no ceden (hasta el 55 % de la barra): son la ubicación de la pantalla y se ven enteras («Impuestos / Modelo 036» se cortaba con «…»
     a 1024 px: ESTETICA-07).
   · El buscador mide hasta 340 px (240 hasta el 14-10: Iker lo quiso «un poquito más ancho», en el mismo sitio, pegado al selector de empresa) y es el que cede: se encoge
     mil veces más deprisa que la columna de la derecha y no baja de 120 px. Todo lo que sobra queda a la izquierda, entre las migas y él.
   · La de la derecha mide lo que miden sus botones y, solo cuando el buscador ya no puede ceder más, se encoge (el nombre de la empresa acaba en «…»): nunca se sale de la pantalla.
   · Cuando la barra mide menos de 800 px (700 hasta el 14-10: el texto de 14 px pide más sitio) el buscador es un icono (más abajo, @container barra). Así cabe con cualquier barra de la izquierda (compacta, ancha o
     una columna) y con tu usuario arriba o abajo: antes, con la ancha y el usuario arriba, se salía entre 1020 y 1099 px (ESTETICA-03).
   .barra-caja es la caja que mide la barra: una consulta de contenedor no puede cambiar el contenedor mismo. */
.barra-caja { flex: none; container: barra / inline-size; }
.barra { position: relative; height: var(--alto-barra); flex: none; display: flex; align-items: center; gap: var(--e4); padding: 0 var(--pad-pagina); background: var(--card); border-bottom: 1px solid var(--linea); }
.migas { flex: 0 0 auto; max-width: 55%; margin-right: auto; font-size: var(--t-sm); color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.migas b { color: var(--texto); font-weight: 500; }
.buscar { position: relative; flex: 0 1000 340px; min-width: 120px; }
.buscar input { padding-left: 38px; text-overflow: ellipsis; height: var(--alto-md); border-radius: var(--r); background: var(--fondo); border-color: transparent; box-shadow: none; }
.buscar > svg { position: absolute; left: 12px; top: 12px; width: 16px; height: 16px; color: var(--tenue); pointer-events: none; }
.buscar .res { position: absolute; top: 46px; left: 0; right: 0; z-index: 50; background: var(--card); border: 1px solid var(--linea); border-radius: var(--r); box-shadow: var(--sombra-lg); padding: 6px; display: none; max-height: 60vh; overflow: auto; }
.buscar .res.abierto { display: block; }
.buscar .res .g { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .07em; color: var(--tenue); padding: 8px 10px 4px; }
.buscar .res a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: var(--r); font-size: var(--t-sm); }
.buscar .res a:hover { background: var(--hover); }
/* (flex: 0 1 auto y un mínimo: si la barra no da para más, el nombre de la empresa acaba en «…» en vez de empujar los botones fuera de la pantalla) */
.empresa-sel { display: flex; align-items: center; gap: 10px; height: var(--alto-md); padding: 0 12px 0 6px; border-radius: var(--r); border: 1px solid var(--linea-fuerte); background: var(--card); cursor: pointer; font-size: var(--t-sm); max-width: 250px; min-width: 52px; flex: 0 1 auto; color: var(--texto); }
.empresa-sel:hover { background: var(--hover); opacity: 1; }
/* El «+» de crear empresa, pegado al selector (19-10): un cuadrado con borde, de la altura del selector */
.empresa-mas { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--alto-md); height: var(--alto-md); padding: 0; margin-left: -4px; border-radius: var(--r); border: 1px solid var(--linea-fuerte); background: var(--card); color: var(--texto); cursor: pointer; }
.empresa-mas[hidden] { display: none; }
.empresa-mas:hover { background: var(--hover); opacity: 1; }
.empresa-mas svg { width: 16px; height: 16px; }
.aj-resalta { animation: aj-resalta calc(var(--dur-lenta) * 3) ease-out 1; }
@keyframes aj-resalta { from { box-shadow: 0 0 0 3px var(--marca-suave); } to { box-shadow: 0 0 0 3px transparent; } }
.avatar { width: 28px; height: 28px; border-radius: var(--r); display: grid; place-items: center; color: var(--blanco); font-size: var(--t-xs); font-weight: 600; flex: none; }
.empresa-sel span.nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.contenido { flex: 1; min-height: 0; overflow-y: auto; padding: 28px var(--pad-pagina) 48px; }
.contenido.ancho { padding: 0; }

.menu { position: absolute; z-index: 60; background: var(--card); border: 1px solid var(--linea); border-radius: var(--r); box-shadow: var(--sombra-lg); padding: 8px; min-width: 240px; }
.menu button, .menu a { display: flex; width: 100%; height: auto; min-height: var(--alto-md); padding: 8px 12px; align-items: center; justify-content: flex-start; gap: 10px; background: transparent; color: var(--texto); border-radius: var(--r); font-weight: 400; font-size: var(--t-sm); text-align: left; }
.menu button:hover, .menu a:hover { background: var(--hover); opacity: 1; }
.menu .sep { height: 1px; background: var(--linea); margin: 6px 4px; }
.menu .tit { font-size: var(--t-2xs); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); padding: 8px 12px 6px; }
.menu svg { width: 16px; height: 16px; color: var(--tenue); flex: none; }

/* ══════════════════════════════════════════════════════════ cabecera de página ══ */
.cab { display: flex; align-items: flex-end; gap: var(--e3) var(--e4); flex-wrap: wrap; margin-bottom: var(--e5); }
.cab h1 { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.cab p { color: var(--tenue); font-size: var(--t-md); margin-top: 4px; }
.cab p > b { display: inline-block; max-width: 100%; }          /* un nombre en negrita (la empresa: «ENIGMA GLOBAL SL») baja entero a la línea siguiente, no deja «SL» solo */
/* El bloque del título mide lo que mide su título (flex-basis: max-content): si el título y los botones no caben en una fila, son los botones los que bajan a la
   siguiente (a la derecha) y el título se queda en UNA línea («Modelo 123 · Retenciones de dividendos e intereses» se partía en dos con la mitad de la cabecera
   para los botones: ESTETICA-06). El subtítulo no cuenta para esa medida (width: 0; min-width: 100%): se parte en las líneas que haga falta en el hueco que sobre.
   Un título más largo que la pantalla se parte (nunca más ancho que la cabecera), como siempre. El bloque no se queda por debajo de 20 em (320 px): si no, un título
   corto («Ventas») con los botones al lado dejaba su frase en tres líneas de 170 px; con ese mínimo bajan los botones y la frase cabe en una o dos. */
.cab > :first-child:not(.acc) { flex: 1 1 max-content; min-width: min(100%, 20em); }
.cab > :first-child:not(.acc) p { width: 0; min-width: 100%; }
.cab .acc { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }          /* los botones, siempre pegados a la derecha, también cuando bajan y se parten en dos filas */
.cab .acc select { width: auto; min-width: 96px; }

/* ══════════════════════════════════════════════════════════ tarjetas y rejillas ══ */
.card { background: var(--card); border: 1px solid var(--linea); border-radius: var(--r); box-shadow: var(--sombra-xs); min-width: 0; }
.card > .ct { display: flex; align-items: center; gap: 4px 12px; padding: 18px var(--pad-card) 0; flex-wrap: wrap; }
.card > .ct h3 { font-size: var(--t-md); font-weight: 600; }
.card > .ct .mas { margin-left: auto; font-size: var(--t-sm); color: var(--marca); font-weight: 500; cursor: pointer; padding: 6px 0; }
.card > .cc { padding: 16px var(--pad-card) var(--pad-card); }
.grid { display: grid; gap: var(--e5); }
.grid:has(> .card > .cc > :is(.lista-mini, .tareas, .linea-t)) { align-items: start; }
/* Cada tarjeta mide lo suyo (sin estirarse hasta la más alta, que dejaba 300 px en blanco) cuando son columnas distintas: lo principal y lo de al lado, dos formularios, dos tablas.
   Los totales (.kpi), los planes y las listas de tarjetas iguales sí se igualan. */
.g-21, .g2:has(table), .grid:has(> .card:not(.plan-ed) .campo) { align-items: start; }
.grid > .card:has(> .cc > p.tenue:only-child) { align-self: start; }          /* una tarjeta que solo dice «Sin facturas en este trimestre» no se estira hasta la gráfica de al lado */
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.mb { margin-bottom: 24px; }

/* (20-10, Iker: «las casillas, un poco más pequeñas») la cifra de una tarjeta de total baja un paso de la escala (26 → 20) y el relleno, de 18 a 14 */
.kpi { padding: 14px var(--pad-card); }
.kpi .k { font-size: var(--t-xs); color: var(--tenue); display: flex; align-items: center; gap: 8px; }
.kpi .k i { width: 8px; height: 8px; border-radius: var(--r-xs); display: inline-block; }
.kpi .v { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin-top: 4px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Lo que no es un importe (una fecha, el nombre de un plan, un formato): cifra compacta, nunca otro tamaño suelto */
.kpi .v.txt, .kpi.sm .v { font-size: var(--t-xl); }
.kpi .s { font-size: var(--t-xs); color: var(--tenue); margin-top: 4px; }
.kpi .s b { font-weight: 500; }
.kpi.oscuro { background: var(--rail); color: var(--blanco); border-color: transparent; position: relative; overflow: hidden; }
.kpi.oscuro .k, .kpi.oscuro .s { color: var(--sobre-oscuro); }
/* El spark (la rayita del saldo) va en su propia fila, a ras de los bordes de la tarjeta: ya no pisa el texto */
.kpi.oscuro .spark { margin: 14px calc(var(--pad-card) * -1) -18px; color: var(--verde-claro); }
.spark svg { display: block; }
/* El icono de un modelo (ICO.modelo): el impuesto escrito debajo lleva opacity en el SVG, que baja el contraste a menos de 4,5:1; el color ya lo da currentColor */
.ico-modelo text { opacity: 1; }
.spark-t { display: block; padding: 2px var(--pad-card) 11px; font-size: var(--t-2xs); color: var(--sobre-oscuro); }
.pos { color: var(--ok-fg); } .neg { color: var(--no-fg); }

/* avisos de inicio */
.tareas { display: grid; gap: 10px; }
.tarea { display: flex; align-items: center; gap: var(--e3); padding: 12px var(--e4); border: 1px solid var(--linea); border-radius: var(--r); font-size: var(--t-sm); background: var(--card); }
.tarea:hover { background: var(--hover); }
.tarea .ic { width: 30px; height: 30px; border-radius: var(--r); display: grid; place-items: center; font-weight: 600; font-size: var(--t-sm); flex: none; }
.tarea .ic.av { background: var(--av-bg); color: var(--av-fg); }
.tarea .ic.no { background: var(--no-bg); color: var(--no-fg); }
.tarea .ic.sec { background: var(--gris-bg); color: var(--gris-fg); }
.tarea .fl { margin-left: auto; color: var(--tenue); }

/* ══════════════════════════════════════════════════════════ tablas ══ */
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
/* UNA cabecera para todas las tablas (11 px, mayúsculas, --tenue, 500): la hoja de gastos y las líneas de un documento solo cambian el fondo y las rayas */
.tabla th, .hoja-tabla thead th, .lineas th { text-align: left; font-size: var(--t-2xs); font-weight: 500; color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; }
.tabla th { padding: 12px 10px; border-bottom: 1px solid var(--linea); background: var(--card); position: sticky; top: 0; z-index: 1; }          /* una cabecera de varias palabras baja de línea antes de que la tabla se desplace de lado */
.tabla th.acc-fila, .tabla th.chk { white-space: nowrap; }
/* la altura manda sobre el relleno: así la densidad se nota de verdad */
.tabla td { height: var(--fila); padding: 5px 10px; border-bottom: 1px solid var(--linea-suave); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr.clic { cursor: pointer; }
.tabla tbody tr.clic:hover td { background: var(--hover); }
.tabla tfoot td { padding: 12px 10px; font-weight: 600; border-top: 1px solid var(--linea); background: var(--sub); }
.tabla .n, .tabla th.n, .hoja-tabla td.n, .hoja-tabla th.n, .lineas th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tabla td.n, .hoja-tabla td.n, .hoja-tabla th.n { white-space: nowrap; }          /* una cifra no se parte; la cabecera de una columna de cifras sí puede bajar de línea */
.tabla .doc { font-family: var(--mono); font-size: var(--t-xs); white-space: nowrap; }
.tabla .sub2 { font-size: var(--t-xs); color: var(--tenue); margin-top: 2px; }
.tabla td.chk, .tabla th.chk { width: 44px; padding-right: 0; }
.caja-tabla { overflow: auto; border-radius: var(--r); }
/* Listas largas (más de 15 filas): la caja se desplaza por dentro y así la cabecera se queda fija (INTERFAZ-07).
   Las cortas no llevan scroll propio. En el móvil, la página entera es la que se desplaza. */
@media (min-width: 721px) { .caja-tabla:has(> table > tbody > tr:nth-child(16)) { max-height: max(420px, calc(100vh - 230px)); } }
/* Si la tabla no cabe y hay que desplazarla de lado, el borde que esconde más columnas se ve (ESTETICA/INTERFAZ-08) */
.caja-tabla {
  background:
    linear-gradient(to right, var(--card), var(--card)) left center / 18px 100% no-repeat local,
    linear-gradient(to left, var(--card), var(--card)) right center / 18px 100% no-repeat local,
    linear-gradient(to right, var(--borde-scroll), transparent) left center / 10px 100% no-repeat scroll,
    linear-gradient(to left, var(--borde-scroll), transparent) right center / 10px 100% no-repeat scroll;
}
.vacio { text-align: center; padding: 48px var(--e5); color: var(--tenue); font-size: var(--t-sm); }
.vacio b { display: block; color: var(--texto); font-size: var(--t-md); font-weight: 600; margin-bottom: 6px; }
.vacio svg { width: 32px; height: 32px; color: var(--linea-fuerte); margin-bottom: 12px; }
/* UI 19-10: un vacío dentro de una tarjeta ya tiene el relleno de la tarjeta: sumaba 48 + 32 y dejaba ~100 px en blanco por arriba y por abajo (Integraciones: dos tarjetas de 360 px casi vacías) */
.card > .cc > .vacio:only-child { padding: 16px var(--e5) 8px; }

/* pestañas de estado (Todos · Borrador · Pendiente…) */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--linea); padding: 0 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }          /* overflow-y: con overflow-x: auto el otro eje pasa a auto y la raya de 1 px que sobresale (margin-bottom: -1px) pintaba una barra de desplazamiento vertical (ESTETICA-01). Sin barra tampoco al lado: sobraba 1 px de ancho en Tesorería a 390 px y salía una barra horizontal fina; si las pestañas no caben, la última queda cortada (señal de que hay más) y se desplaza con el dedo o la rueda */
.tabs::-webkit-scrollbar, .pest-lat::-webkit-scrollbar, .legal-tabs::-webkit-scrollbar { display: none; }
.tabs a, .pest-lat button { height: 46px; padding: 0 12px; font-size: var(--t-sm); color: var(--tenue); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: flex; gap: 7px; align-items: center; cursor: pointer; }
.tabs a:hover, .pest-lat button:hover { color: var(--texto); opacity: 1; }
.tabs a.activo, .pest-lat button.activo { color: var(--texto); border-bottom-color: var(--marca); font-weight: 500; }
/* Contador: la bolita con un número (menú, pestañas, chips). Sin clase suelta por pantalla: .n dentro de .sub/.tabs/.sub-chips, o .contador en cualquier sitio */
.contador, .sub a .n, .tabs a .n, .tabs .n-tab, .sub-chips a .n, .rail-sub a .n { box-sizing: border-box; display: inline-block; min-width: 20px; height: 20px; font-size: var(--t-2xs); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 20px; text-align: center; padding: 0 7px; border-radius: var(--r-pill); background: var(--contador-bg, var(--linea-suave)); color: var(--contador-fg, var(--tenue)); flex: none; }
.contador.av, .tabs a .n.av, .sub-chips a .n.av { background: var(--av-bg); color: var(--av-fg); }
.filtros { display: flex; gap: var(--e3); align-items: center; padding: 14px var(--pad-card); flex-wrap: wrap; border-bottom: 1px solid var(--linea-suave); }
.filtros input, .filtros select { width: auto; min-width: 150px; height: var(--alto-sm); min-height: var(--alto-sm); }
.filtros .total { margin-left: auto; font-size: var(--t-sm); color: var(--tenue); }
.filtros .total b { color: var(--texto); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════ píldoras ══ */
.eti { display: inline-flex; width: fit-content; align-items: center; gap: 6px; border-radius: var(--r-pill); border: 1px solid transparent; padding: 1px 10px; font-size: var(--t-xs); font-weight: 500; white-space: nowrap; line-height: 20px; }
.eti::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.eti.sin::before { display: none; }
.eti.ok { background: var(--ok-bg); color: var(--ok-fg); }
.eti.av { background: var(--av-bg); color: var(--av-fg); }
.eti.no { background: var(--no-bg); color: var(--no-fg); }
.eti.gris { background: var(--gris-bg); color: var(--gris-fg); }
.eti.azul { background: var(--azul-bg); color: var(--azul-fg); }
.eti.lila { background: var(--lila-bg); color: var(--lila-fg); }
.eti.borde { border-color: var(--linea-fuerte); color: var(--tenue); }
/* Tipo de contacto: los mismos colores que su avatar (ESTETICA2-29). Uso: <span class="eti eti-tipo cliente">Cliente</span> */
.eti-tipo { --tc: var(--tenue); background: color-mix(in oklab, var(--tc) 14%, var(--card)); color: color-mix(in oklab, var(--tc) 80%, var(--texto)); }
.eti-tipo.cliente { --tc: var(--c-cliente); } .eti-tipo.proveedor { --tc: var(--c-proveedor); }
.eti-tipo.ambos { --tc: var(--c-ambos); } .eti-tipo.empleado { --tc: var(--c-empleado); }

/* ══════════════════════════════════════════════════════════ botones ══ */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--alto-md); padding: 0 18px;
  border-radius: var(--r); border: 1px solid transparent; font: 500 var(--t-sm) var(--fuente); cursor: pointer; white-space: nowrap;
  background: var(--boton, var(--marca)); color: var(--boton-fg, var(--marca-fg)); transition: background-color var(--dur), border-color var(--dur), opacity var(--dur);
}
button, .btn { max-width: 100%; }
/* Un botón con un texto largo que va solo en su tarjeta (con el nombre de una empresa, por ejemplo) baja de línea en vez de salirse de ella */
.card > .cc > :is(button, .btn):only-child:not(.sm, .xs, .ico) { white-space: normal; height: auto; min-height: var(--alto-md); padding-top: 6px; padding-bottom: 6px; text-align: left; }
button:hover, .btn:hover { opacity: .92; }
/* Secundario: borde y fondo de tarjeta */
button.sec, .btn.sec { background: var(--card); color: var(--texto); border-color: var(--linea-fuerte); box-shadow: var(--sombra-xs); }
button.sec:hover, .btn.sec:hover { background: var(--hover); opacity: 1; }
/* Fantasma: sin fondo ni borde. Sirve para <button> y para <a class="btn fan"> (ESTETICA1-01) */
button.fan, .btn.fan { background: transparent; color: var(--texto); border-color: transparent; }
button.fan:hover, .btn.fan:hover { background: var(--hover); opacity: 1; }
button.peligro, .btn.peligro { background: var(--card); color: var(--no-fg); border-color: var(--linea-fuerte); }
button.peligro:hover, .btn.peligro:hover { background: var(--no-bg); opacity: 1; }
/* Tamaños: normal 36 (cabeceras, formularios, pie de ventana) · sm 32 (tarjetas, panel lateral) · xs 28 (fila de tabla) */
button.sm, .btn.sm { height: var(--alto-sm); padding: 0 14px; font-size: var(--t-sm); }
button.xs, .btn.xs { height: var(--alto-xs); padding: 0 12px; font-size: var(--t-xs); border-radius: var(--r-sm); }
button.ico, .btn.ico { width: var(--alto-md); padding: 0; }
button.sm.ico, .btn.sm.ico { width: var(--alto-sm); }
button.xs.ico, .btn.xs.ico { width: var(--alto-xs); }
button svg, .btn svg { width: 16px; height: 16px; flex: none; }
button[disabled] { pointer-events: none; opacity: .45; }
/* Cargando: lo hace nucleo.js (conCarga: .btn-carga + aria-busy; cargando(): .cargando) y sus estilos están en carriles/uin.css.
   Aquí solo la ruedecita suelta, para un texto de «Cargando…» o una tarjeta: <span class="spinner" role="status" aria-label="Cargando"></span> */
.spinner { display: inline-block; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gira var(--dur-giro) linear infinite; vertical-align: -2px; color: var(--tenue); }
@keyframes gira { to { transform: rotate(360deg); } }
.ancho-total { width: 100%; }

/* ══════════════════════════════════════════════════════════ formularios ══ */
input, select, textarea {
  width: 100%; min-height: var(--alto-md); padding: 8px 12px; background: var(--card); color: var(--texto);
  border: 1px solid var(--campo-borde); border-radius: var(--r); font: var(--t-sm) var(--fuente); box-shadow: var(--sombra-xs);
}
textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
input:hover:not(:disabled):not([readonly]):not(:focus), select:hover:not(:disabled):not(:focus), textarea:hover:not(:disabled):not([readonly]):not(:focus) { border-color: var(--tenue); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--ring); }
/* Error: el campo con aria-invalid (lo pone el formulario al fallar) o, solo después de tocarlo, el que no cumple su regla.
   El mensaje, debajo: <div class="pista error">Escribe un NIF válido</div> */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], .campo.error :is(input, select, textarea) { border-color: var(--no-fg); background: color-mix(in oklab, var(--no-bg) 45%, var(--card)); }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--no-fg); background: color-mix(in oklab, var(--no-bg) 45%, var(--card)); }
input[aria-invalid="true"]:focus, select[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--no-fg) 30%, transparent); }
input:user-invalid:focus, select:user-invalid:focus, textarea:user-invalid:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--no-fg) 30%, transparent); }
.pista.error, .campo.error .pista { color: var(--no-fg); font-weight: 500; }
/* Desactivado (no se puede cambiar ahora) y solo lectura (se ve y se copia, pero no se escribe) */
input:disabled, select:disabled, textarea:disabled { background: var(--fondo); color: var(--tenue); border-color: var(--linea); cursor: not-allowed; opacity: 1; }
input[readonly], textarea[readonly] { background: var(--fondo); }
/* Casillas y radios: dibujadas a mano para que se vean igual en todos los sistemas y en los dos temas. La caja del <input> mide 24 px (la zona de pulsación
   mínima de WCAG 2.5.8, https://www.w3.org/TR/WCAG22/#target-size-minimum) y el dibujo, de 18, va dentro (::before); el tic o el punto, en ::after. */
input[type=checkbox], input[type=radio] { -webkit-appearance: none; appearance: none; position: relative; box-sizing: border-box; flex: none; width: 24px; height: 24px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; vertical-align: middle; }
input[type=checkbox]::before, input[type=radio]::before { content: ""; position: absolute; inset: 3px; box-sizing: border-box; border: 1.5px solid var(--campo-borde); background: var(--card); transition: background-color var(--dur), border-color var(--dur); }
input[type=checkbox]::before { border-radius: var(--r-sm); }
input[type=radio]::before { border-radius: 50%; }
input[type=checkbox]::after, input[type=radio]::after { content: ""; position: absolute; opacity: 0; transition: opacity var(--dur); }
input[type=checkbox]::after { left: 9px; top: 5px; width: 6px; height: 11px; border: solid var(--marca-fg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
input[type=radio]::after { inset: 8px; border-radius: 50%; background: var(--marca); }
input[type=checkbox]:hover:not(:disabled)::before, input[type=radio]:hover:not(:disabled)::before { border-color: var(--tenue); }
input[type=checkbox]:checked::before, input[type=checkbox]:indeterminate::before { background: var(--marca); border-color: var(--marca); }
input[type=checkbox]:checked::after, input[type=radio]:checked::after { opacity: 1; }
input[type=radio]:checked::before { border-color: var(--marca); }
input[type=checkbox]:indeterminate::after { opacity: 1; left: 7px; top: 11px; width: 10px; height: 0; border-width: 0 0 2px; transform: none; }
input[type=checkbox]:focus-visible::before, input[type=radio]:focus-visible::before { border-color: var(--marca); box-shadow: 0 0 0 3px var(--ring); }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: none; }
input[type=checkbox]:disabled, input[type=radio]:disabled { cursor: not-allowed; background: transparent; }
input[type=checkbox]:disabled::before, input[type=radio]:disabled::before { background: var(--fondo); border-color: var(--linea-fuerte); }
input[type=checkbox]:checked:disabled::before { background: var(--linea-fuerte); }
input[type=checkbox][aria-invalid="true"]::before { border-color: var(--no-fg); }
input[type=color] { padding: 3px; height: var(--alto-md); width: 56px; }
label { display: block; font-size: var(--t-sm); font-weight: 500; margin-bottom: 6px; }
.campo { margin-bottom: var(--e4); min-width: 0; }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--e5); }
.campos .todo { grid-column: 1 / -1; }
/* En una columna estrecha (la de la derecha de una pantalla 2/3 + 1/3, el panel de un documento) dos campos lado a lado dejan las etiquetas partidas y los campos
   a distinta altura: una sola columna */
@media (min-width: 1201px) { .g-21 > :nth-child(2) .campos { grid-template-columns: minmax(0, 1fr); } }
.lateral .campos { grid-template-columns: minmax(0, 1fr); }
.pista { font-size: var(--t-xs); color: var(--tenue); margin-top: 6px; }
.check { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: var(--t-sm); margin: 0; cursor: pointer; }

.nota { border: 1px solid var(--linea); border-radius: var(--r); padding: 14px var(--e4); font-size: var(--t-sm); background: var(--card); }
.nota b { display: block; margin-bottom: 4px; }
.nota strong { font-weight: 600; }      /* negrita dentro del texto (la <b> es el título) */
.nota.av { border-color: color-mix(in oklab, var(--av-fg) 30%, transparent); background: var(--av-bg); }
.nota.no { border-color: color-mix(in oklab, var(--no-fg) 30%, transparent); background: var(--no-bg); }
.nota.ok { border-color: color-mix(in oklab, var(--ok-fg) 30%, transparent); background: var(--ok-bg); }
.nota.azul { border-color: color-mix(in oklab, var(--azul-fg) 30%, transparent); background: var(--azul-bg); }

/* ══════════════════════════════════════════════════════════ editor de documento ══ */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 380px; min-height: 100%; }       /* el formulario a la izquierda; a la derecha el panel con pestañas y vista previa */
.mesa { padding: var(--e5) var(--e5) 56px; background: var(--fondo); min-width: 0; }
.papel { background: var(--card); border: 1px solid var(--linea); border-radius: var(--r); box-shadow: var(--sombra-sm); padding: var(--e5); max-width: 900px; margin: 0 auto; }
.papel .pc { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 26px; }
.papel .emisor b { font-size: var(--t-lg); letter-spacing: -.015em; }
.papel .emisor div { font-size: var(--t-xs); color: var(--tenue); }
.papel .tipo { text-align: right; }
.papel .tipo h2 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.02em; }
.papel .tipo .num { font: 500 var(--t-md) var(--mono); color: var(--tenue); }
.bloques { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; margin-bottom: 22px; }
.bloque { background: var(--fondo); border-radius: var(--r); padding: 14px 16px; }
.bloque .k { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); margin-bottom: 6px; }
.bloque .cli b { font-size: var(--t-md); }
.bloque .cli div { font-size: var(--t-xs); color: var(--tenue); }
.bloque .mini { display: grid; gap: 6px 10px; align-items: center; font-size: var(--t-sm); }          /* (las columnas, auto + minmax(0, 1fr), están en vent.css: ESTETICA-19) */
.bloque .mini input, .bloque .mini select { min-height: var(--alto-sm); height: var(--alto-sm); padding: 4px 9px; }
.lineas { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.lineas th { padding: 0 6px 8px; border-bottom: 1px solid var(--linea); }
.lineas td { padding: 6px 4px; border-bottom: 1px solid var(--linea-suave); vertical-align: top; }
.lineas td input { border-color: transparent; box-shadow: none; background: transparent; padding: 0 7px; height: var(--alto-sm); min-height: var(--alto-sm); }
.lineas td input:hover { border-color: var(--linea); }
.lineas td input:focus { border-color: var(--marca); background: var(--card); }
.lineas td input.n { text-align: right; font-variant-numeric: tabular-nums; }
.lineas td.imp { text-align: right; padding: 13px 8px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lineas td.x { width: 34px; }
.lineas .det { font-size: var(--t-xs); color: var(--tenue); }
.lineas tr:hover .quitar, .lineas .quitar:focus-visible { opacity: 1; }
.quitar { opacity: 0; width: var(--alto-xs); height: var(--alto-xs); padding: 0; background: transparent; color: var(--tenue); border-radius: var(--r); margin-top: 3px; }
.quitar:hover { background: var(--no-bg); color: var(--no-fg); }
.anadir { display: inline-flex; align-items: center; gap: 6px; color: var(--marca); font-weight: 500; font-size: var(--t-sm); margin: 12px 4px; cursor: pointer; background: none; border: 0; height: var(--alto-xs); padding: 0 6px; }
.pie-doc { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; margin-top: 18px; align-items: start; }
.totales { display: grid; gap: 6px; font-size: var(--t-sm); }
.totales .f { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.totales .f span:first-child { color: var(--tenue); }
.totales .f.t { border-top: 1.5px solid var(--texto); padding-top: 10px; margin-top: 4px; font-size: var(--t-xl); font-weight: 600; }
.totales .f.t span:first-child { color: var(--texto); }
.totales .f input { width: 72px; min-height: var(--alto-xs); height: var(--alto-xs); padding: 2px 6px; text-align: right; }
.papel.bloqueado .lineas td input, .papel.bloqueado .lineas td select, .papel.bloqueado .bloque input, .papel.bloqueado .bloque select, .papel.bloqueado textarea, .papel.bloqueado .totales input { pointer-events: none; border-color: transparent; background: transparent; box-shadow: none; appearance: none; }
.papel.bloqueado input::-webkit-calendar-picker-indicator { display: none; }
.papel.bloqueado textarea:placeholder-shown { display: none; }

.lateral { background: var(--card); border-left: 1px solid var(--linea); padding: 20px var(--e4); display: flex; flex-direction: column; gap: var(--e4); overflow-y: auto; }
.lateral .estado-gr { display: flex; justify-content: space-between; align-items: center; }
.lateral .grande { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lateral .acciones { display: grid; gap: 8px; }
.lateral .acciones .fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lateral .acciones .fila2 > :only-child, .lateral .acciones .fila2 > :has(+ span:empty) { grid-column: 1 / -1; }      /* un botón solo no se queda a medias */
.lateral h4 { font-size: var(--t-2xs); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); margin-bottom: 8px; }
.cadena { display: flex; align-items: flex-start; gap: 0; }
.cadena .paso { flex: 1; text-align: center; font-size: var(--t-2xs); color: var(--tenue); position: relative; }
.cadena .paso .bola { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--linea); background: var(--card); display: grid; place-items: center; margin: 0 auto 5px; font-size: var(--t-xs); position: relative; z-index: 1; }
.cadena .paso.hecho .bola { background: var(--marca); border-color: var(--marca); color: var(--marca-fg); }
.cadena .paso.hecho { color: var(--texto); }
.cadena .paso:not(:last-child)::after { content: ""; position: absolute; top: 11px; left: 50%; width: 100%; height: 2px; background: var(--linea); }
.cadena .paso.hecho:not(:last-child)::after { background: var(--marca); }
.linea-t { display: grid; gap: 12px; position: relative; padding-left: 16px; }
.linea-t::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1.5px; background: var(--linea); }
.linea-t .ev { position: relative; font-size: var(--t-sm); }
.linea-t .ev::before { content: ""; position: absolute; left: -15.5px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--marca); box-shadow: 0 0 0 3px var(--card); }
.linea-t .ev span { display: block; font-size: var(--t-xs); color: var(--tenue); }
/* Una rejilla sin columnas crea una columna «auto» que crece con el texto sin saltos: por eso las filas se salían de su tarjeta */
.grid > *, .g-21 > *, .lista-mini > *, .pasos-modelo > * { min-width: 0; }
.lista-mini, .pasos-modelo, .resultado-modelo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.lista-mini .it { display: flex; justify-content: space-between; gap: var(--e3); font-size: var(--t-sm); padding: 11px 14px; border-radius: var(--r); background: var(--fondo); align-items: center; min-width: 0; }
.lista-mini .it .t { min-width: 0; }
.lista-mini .it .t span { display: block; font-size: var(--t-xs); color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Una lista cuyas líneas son explicaciones (no un título con un subtítulo corto): el texto se parte en líneas en vez de cortarse con «…» */
.lista-mini.texto .it .t span, .cb-explica .it .t span { white-space: normal; overflow: visible; text-overflow: clip; }
.lista-mini .it .der { flex: none; white-space: nowrap; text-align: right; }
.huella { font: var(--t-2xs) var(--mono); color: var(--tenue); word-break: break-all; }

/* ══════════════════════════════════════════════════════════ gastos: la hoja ══ */
.soltar { border: 1.5px dashed var(--linea); border-radius: var(--r); padding: 28px; text-align: center; background: var(--card); cursor: pointer; transition: border-color var(--dur), background-color var(--dur); display: flex; align-items: center; justify-content: center; gap: 14px; }
.soltar:hover, .soltar.encima { border-color: var(--marca); background: var(--marca-suave); }
.soltar svg { width: 26px; height: 26px; color: var(--marca); }
.soltar b { font-size: var(--t-md); }
.soltar span { color: var(--tenue); font-size: var(--t-sm); display: block; }
.hoja-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.hoja-tabla th, .hoja-tabla td { border-right: 1px solid var(--linea-suave); border-bottom: 1px solid var(--linea-suave); }
.hoja-tabla thead th { position: sticky; top: 0; z-index: 2; background: var(--sub); padding: 12px 12px; line-height: 1.25; vertical-align: bottom; }
.hoja-tabla thead th.n { white-space: nowrap; }
/* Que quepa: con las columnas de fábrica medía 1.439 px y la caja de un portátil de 1.440 deja 1.066. Las cifras, las fechas y las píldoras no se
   parten nunca; los textos largos (proveedor, categoría, concepto) saltan de línea o, con .corta, acaban en «…»; el n.º de factura (la segunda columna en
   letra de máquina) tampoco se parte: o cabe o acaba en «…» y su título lo dice entero. */
.hoja-tabla td { height: var(--fila); padding: 4px 12px; white-space: normal; overflow-wrap: break-word; }
.hoja-tabla td.mono, .hoja-tabla td.nfila { white-space: nowrap; }
.hoja-tabla td.mono { font-size: var(--t-2xs); }          /* la hoja es densa: la letra de máquina del n.º y la fecha, 12 px (el n.º largo baja a dos líneas de 14 caracteres en 104 px) */          /* (las cifras .n ya son nowrap, más arriba) */
.hoja-tabla td.mono + td.mono { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.hoja-tabla .nfila { width: 30px; padding-left: 2px; padding-right: 2px; text-align: center; color: var(--tenue); font: var(--t-2xs) var(--mono); background: var(--sub); }
@container (max-width: 1100px) {
  /* La hoja es una hoja de cálculo de diez columnas: en una caja de portátil (el contenido de un 1440 con el panel abierto mide 1.028 px) vuelve al texto de 12 px y a los
     6 px de relleno de antes del 15-10, y así conserva todas sus columnas (con 13 px y 8 de relleno el cálculo de columnas de gastos.js quitaba la categoría). */
  .hoja-tabla { font-size: var(--t-2xs); }
  .hoja-tabla td, .hoja-tabla thead th { padding-left: 6px; padding-right: 6px; }
  .hoja-tabla .eti { font-size: var(--t-2xs); }
}
@container (max-width: 1000px) {
  .hoja-tabla .eti { padding: 1px 7px; }
  .hoja-tabla .eti::before { display: none; }
  .hoja-tabla td.mono + td.mono { max-width: 112px; }
}
.hoja-tabla tbody tr { cursor: pointer; }
.hoja-tabla tbody tr:hover td { background: var(--hover); }
/* El pie fijo: con border-collapse su borde de arriba no viaja con él y la fila que pasa por debajo parecía cortada; la raya se pinta con sombra, que sí se queda pegada */
.hoja-tabla tfoot td { position: sticky; bottom: -1px; background: var(--sub); font-weight: 600; padding: 12px 12px; border-top: 0; box-shadow: inset 0 2px 0 var(--tenue); }
tr.v-dup td:not(.nfila) { color: var(--tenue); }          /* una duplicada se atenúa con --tenue, no con opacity (baja el contraste del texto) */
tr.v-dup td.n { text-decoration: line-through; }
tr.v-nocuadra td.total { color: var(--no-fg); font-weight: 600; }
.mono { font-family: var(--mono); font-size: var(--t-xs); }
.tenue { color: var(--tenue); }

/* Importes con significado. El color acompaña a la palabra, no la sustituye:
   con daltonismo o impreso en blanco y negro se sigue entendiendo. */
.imp { font-variant-numeric: tabular-nums; white-space: nowrap; }
.imp .pal { font-size: .85em; font-weight: 500; letter-spacing: .01em; }
.imp.bueno { color: var(--ok-fg); }
.imp.malo  { color: var(--no-fg); }
.imp.cero  { color: var(--tenue); }
.imp.neutro { color: var(--texto); }
.ticket-papel { background: var(--ticket-papel); color: var(--ticket-tinta); border: 1px solid var(--ticket-borde); border-radius: var(--r-sm); box-shadow: var(--sombra-md); padding: 15px 17px; font-family: var(--mono); font-size: var(--t-2xs); line-height: 1.55; transform: rotate(-.5deg); }
.ticket-papel .cent { text-align: center; }
.ticket-papel .corte { border-top: 1px dashed var(--ticket-corte); margin: 8px 0; }
.ticket-papel .lin { display: flex; justify-content: space-between; gap: 10px; }
.ticket-papel .tot { font-weight: 600; font-size: var(--t-sm); }
.foto-ticket { width: 100%; border-radius: var(--r); border: 1px solid var(--linea); background: var(--fondo); max-height: 80vh; object-fit: contain; }
/* (20-10, Iker: «que el PDF se vea más y la tabla sea más pequeña hacia la derecha») el documento, un poco más de la mitad; el formulario, el resto (antes 300 px contra todo lo demás) */
.revision { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 24px; }
.conf { font-size: var(--t-2xs); font-weight: 500; color: var(--ok-fg); margin-left: 6px; }
.conf.baja { color: var(--av-fg); }
.dudoso input { border-color: color-mix(in oklab, var(--av-fg) 55%, transparent); }

/* correo */
.correo { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 18px; align-items: start; }
.cola-item { display: flex; align-items: center; gap: 10px; width: 100%; height: auto; padding: 10px 12px; text-align: left; border: 1px solid var(--linea); border-radius: var(--r); background: var(--card); color: var(--texto); font-weight: 400; margin-bottom: 6px; }
.cola-item:hover { background: var(--hover); opacity: 1; }
.cola-item.activo { border-color: var(--marca); background: var(--marca-suave); }
.cola-item .t3 { min-width: 0; flex: 1; }
.cola-item .t3 b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cola-item .t3 span { font-size: var(--t-xs); color: var(--tenue); }
.sobre .cab-mail { padding: 14px 18px; border-bottom: 1px solid var(--linea); display: grid; gap: 4px; font-size: var(--t-sm); }
.sobre .cab-mail .l { display: flex; gap: 8px; }
.sobre .cab-mail .k { color: var(--tenue); min-width: 58px; }
.sobre .cuerpo-mail { padding: 16px 18px; font-size: var(--t-sm); line-height: 1.62; white-space: pre-wrap; max-height: 46vh; overflow: auto; }
.sobre .tabla-mini { display: block; margin: 8px 0 10px; font-family: var(--mono); font-size: var(--t-xs); background: var(--fondo); border-radius: var(--r); padding: 10px 12px; white-space: pre; overflow-x: auto; }
.sobre .pie-mail { padding: 12px 18px; border-top: 1px solid var(--linea); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ══════════════════════════════════════════════════════════ tesorería ══ */
.cuentas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.cuenta { padding: 16px 18px; cursor: pointer; border-left: 4px solid var(--c, var(--marca)); }
.cuenta:hover { border-color: var(--marca); }
.cuenta.activa { outline: 2px solid var(--marca); }
.cuenta .b { font-size: var(--t-xs); color: var(--tenue); }
.cuenta .s { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.02em; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.cuenta .iban { font: var(--t-2xs) var(--mono); color: var(--tenue); }
.conc { display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); align-items: stretch; border-bottom: 1px solid var(--linea-suave); }
.conc:last-child { border-bottom: 0; }
.conc > div { padding: 12px 14px; min-width: 0; }
.conc .mov { display: flex; gap: 11px; align-items: center; }
.conc .flecha { width: 30px; height: 30px; border-radius: var(--r); display: grid; place-items: center; flex: none; }
.conc .flecha.e { background: var(--ok-bg); color: var(--ok-fg); }
.conc .flecha.s { background: var(--gris-bg); color: var(--gris-fg); }
.conc .flecha svg { width: 16px; height: 16px; }
.conc .imp { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.conc .enlace { display: grid; place-items: center; color: var(--tenue); }
.conc .enlace svg { width: 18px; height: 18px; }
.conc .enlace.ok { color: var(--ok-fg); }
.conc .lado { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.conc .sug { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px dashed var(--linea); border-radius: var(--r); width: 100%; background: transparent; color: var(--texto); height: auto; font-weight: 400; justify-content: flex-start; text-align: left; }
.conc .sug:hover { border-style: solid; border-color: var(--marca); background: var(--marca-suave); opacity: 1; }
.conc .sug .pt { margin-left: auto; font-size: var(--t-2xs); color: var(--ok-fg); font-weight: 600; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ══════════════════════════════════════════════════════════ impuestos ══ */
.trims { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.trim { padding: 16px 18px; }
.trim.actual { outline: 2px solid var(--marca); }
.trim h3 { font-size: var(--t-md); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.trim .plazo { font-size: var(--t-xs); color: var(--tenue); margin: 2px 0 12px; }
.trim .m { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-top: 1px solid var(--linea-suave); font-size: var(--t-sm); cursor: pointer; }
.trim .m:hover b { color: var(--marca); }
.trim .m span { color: var(--tenue); }
.trim .m b { font-variant-numeric: tabular-nums; font-weight: 600; }
.casillas td.cas { font-family: var(--mono); font-size: var(--t-xs); color: var(--tenue); width: 60px; }

/* ══════════════════════════════════════════════════════════ gráficas ══ */
/* El alto lo pone cada llamada a barras() (style en el contenedor); el SVG se pinta al ancho real */
.grafica { position: relative; width: 100%; overflow: hidden; touch-action: pan-y; }
.grafica > svg { position: absolute; left: 0; top: 0; display: block; }
.grafica text { fill: var(--tenue); font: var(--t-xs) var(--fuente); }
.grafica .eje { stroke: var(--linea); }
.leyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--t-xs); color: var(--tenue); }
.leyenda span { white-space: nowrap; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-xs); margin-right: 6px; vertical-align: -1px; }
/* UNA barra (10 px, redonda): .progreso trae su relleno verde de «hecho»; .barra-h no lleva color, lo pone el modificador (col-*, barra-ventas…) */
.progreso, .barra-h { height: 10px; border-radius: var(--r-pill); background: var(--linea-suave); overflow: hidden; }
.progreso i, .barra-h i { display: block; height: 100%; border-radius: var(--r-pill); }
.progreso i { background: var(--ok-fg); }
.barra-h i { transition: width var(--dur-lenta) var(--curva); }

/* ══════════════════════════════════════════════════════════ modal y avisos ══ */
.velo { position: fixed; inset: 0; z-index: 80; background: var(--velo); display: none; place-items: center; padding: 20px; }
.velo.abierto { display: grid; }
.modal { background: var(--card); border: 1px solid var(--linea); border-radius: var(--r); box-shadow: var(--sombra-lg); width: min(640px, 100%); max-height: 90vh; overflow: auto; }
.modal.grande { width: min(940px, 100%); }
.modal > header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e3); padding: 22px 28px 8px; }
.modal > header h2 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.01em; }
.modal > header p { font-size: var(--t-sm); color: var(--tenue); margin-top: 4px; }
.modal .cuerpo { padding: var(--e4) 28px var(--e5); }
.modal > footer { display: flex; justify-content: flex-end; gap: var(--e3); padding: 16px 28px; border-top: 1px solid var(--linea); position: sticky; bottom: 0; background: var(--card); }
/* Un solo pie: [acción destructiva a la izquierda] … [Cancelar secundario] [acción principal]. El «Cancelar» fantasma de ventanas antiguas se ve igual que el secundario (ESTETICA1-09) */
.modal > footer > button.fan:not(.peligro) { background: var(--card); border-color: var(--linea-fuerte); }
.modal > footer > button.fan:not(.peligro):hover { background: var(--hover); }
.modal > footer .izq { margin-right: auto; }
#avisos { position: fixed; right: 18px; bottom: 18px; z-index: 95; display: flex; flex-direction: column; gap: var(--e2); max-width: 360px; }
/* El aviso emergente (toast) vive solo dentro de #avisos: antes «.aviso» pintaba también los <li class="aviso"> de otras pantallas (ESTETICA1-02) */
#avisos .aviso { display: flex; align-items: center; gap: 14px; background: var(--texto); color: var(--card); border-radius: var(--r); box-shadow: var(--sombra-lg); padding: 12px var(--e3) 12px 16px; font-size: var(--t-sm); animation: entra var(--dur) var(--curva); }
#avisos .aviso.ok { background: var(--marca); color: var(--marca-fg); }
#avisos .aviso.no { background: var(--no-solido); color: var(--no-solido-fg); }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }
/* Reducir movimiento: también los ::before y ::after (el triángulo de los plegables). La ruedecita suelta sigue, más despacio: es información. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .spinner, .cargando-txt::before { animation: gira 2.4s linear infinite !important; }
}

.fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crece { flex: 1; }
.der { text-align: right; }
.b { font-weight: 600; }
.chico { font-size: var(--t-xs); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--linea); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Con el panel de secciones abierto el contenido mide la pantalla menos 332 px (a 1100, 720): por eso las rejillas se pliegan por la pantalla ANTES de lo que
   parecería, para que un panel de la derecha no quede en 175 px con sus botones partidos en dos líneas */
@media (max-width: 1200px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-21 { grid-template-columns: minmax(0, 1fr); }
  .trims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor { grid-template-columns: minmax(0, 1fr); }
  .lateral { border-left: 0; border-top: 1px solid var(--linea); }
}
@media (max-width: 1100px) {
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g2:has(table) { grid-template-columns: minmax(0, 1fr); }          /* dos tablas lado a lado no caben: una debajo de otra */
}
@media (max-width: 1000px) {
  .app { grid-template-columns: var(--ancho-rail) minmax(0, 1fr); }
  .sub { display: none; }
}
@media (max-width: 720px) {
  .g2, .g3, .g4, .trims, .campos, .bloques, .pie-doc, .revision, .correo { grid-template-columns: minmax(0, 1fr); }
  :root { --pad-pagina: 16px; --pad-card: 16px; --alto-barra: 60px; }
  .contenido { padding: var(--e4) var(--pad-pagina) var(--e5); }
  .buscar { display: none; }
  .barra { padding: 0 12px; gap: 8px; }
  .migas { display: none; }
  .empresa-sel { margin-left: auto; }
  .empresa-sel span.nom, .empresa-sel svg { display: none; }
  .cab .acc { margin-left: 0; justify-content: flex-start; }
  .mesa { padding: 14px; }
  .papel { padding: 20px 16px; }
}
@media print {
  .rail, .sub, .barra, .lateral { display: none !important; }
  .app { display: block; }
}

/* ── acceso ─────────────────────────────────────────────────────────── */
/* (la pantalla de acceso va al final, en «acceso dividido») */
/* ── el cliente (visor): solo consulta ───────────────────────────────── */
.visor #btn-nuevo { display: none !important; }
/* El cliente con UNA empresa no tiene a qué cambiar; con varias (body.visor-varias, lo pone ajustes.js) puede cambiar entre las suyas */
.visor:not(.visor-varias) #empresa-sel svg { display: none !important; }
.visor:not(.visor-varias) #empresa-sel { pointer-events: none; }
/* Lo que el cliente NO ve es lo que escribe. El servidor ya se lo cierra (usuarios.py:
   VISOR_ESCRIBE), así que esto solo evita enseñarle botones que acabarían en «esto lo hace tu
   gestoría». Lista EXPLÍCITA, no «todo menos…»: antes se escondía todo [data-a] salvo unos pocos
   y el cliente se quedaba sin «Entendido», sin «Foto», sin «Más» y sin marcar lo que le pide su
   gestoría. Lo que no esté aquí se ve (menús, avisos, preferencias, aviso legal, 2FA, la foto).
   Si añades un botón que escribe: apúntalo aquí o ponle la clase «solo-gestoria». */
:is(.visor, .solo-lectura) .solo-gestoria,
:is(.visor, .solo-lectura) :is(
  [data-a="plan-guardar"],
  /* ventas: documentos, cobros, rectificativas, lotes, recurrencias */
  [data-a="doc-anular"], [data-a="doc-borrar"], [data-a="doc-cobro"], [data-a="doc-convertir"], [data-a="doc-correo"], [data-a="doc-correo-ok"],
  [data-a="doc-duplicar"], [data-a="doc-emitir"], [data-a="doc-enviado"], [data-a="doc-estado"], [data-a="doc-guardar"], [data-a="doc-rectificar"],
  [data-a="rect-hacer"], [data-a="cobro-ok"], [data-a="borrar-pago"], [data-a="linea-mas"], [data-a="linea-menos"], [data-a="cliente-rapido"],
  [data-a="fila-borrar"], [data-a="fila-correo"], [data-a="fila-duplicar"], [data-a="fila-enviado"], [data-a="agrupar-albaranes"],
  [data-a="lote-borrar"], [data-a="lote-enviado"], [data-a="lote-pdf"], [data-a="lote-quitar"], [data-a="plantilla-correo"],
  [data-a="rec-alternar"], [data-a="rec-borrar"], [data-a="rec-editar"], [data-a="rec-generar"], [data-a="rec-nueva"], [data-a="rec-ok"],
  /* gastos: tickets, pagos, pedir facturas, revisión con Claude */
  [data-a="nuevo-gasto"], [data-a="ticket-borrar"], [data-a="ticket-guardar"], [data-a="ticket-leer"], [data-a="ticket-pagar"],
  [data-a="adjuntar-doc"], [data-a="gasto-ok"], [data-a="pago-ok"], [data-a="borrar-pago-t"], [data-a="prov-rapido"],
  [data-a="pedir-fin"], [data-a="pedir-parar"], [data-a="pedir-todos"], [data-a="marcar-pedidas"], [data-a="enviar-mail"],
  [data-a="poner-mail"], [data-a="poner-mail-ok"], [data-a="claude-aplicar"], [data-a="claude-cargar"],
  [data-a="ticket-revisado"], [data-a="prov-editar"], [data-a="buscar-existente"], [data-a="fusionar"], [data-a="subida-quitar"],
  /* contactos y productos */
  [data-a="nuevo-contacto"], [data-a="editar-contacto"], [data-a="guardar-contacto"], [data-a="baja-contacto"], [data-a="guardar-notas"],
  [data-a="nuevo-producto"], [data-a="editar-producto"], [data-a="guardar-producto"], [data-a="baja-producto"],
  [data-a="comprobar-vies"], [data-a="vies-rellenar"],
  /* banco */
  [data-a="importar-extracto"], [data-a="importar-ok"], [data-a="elegir-csv"], [data-a="nueva-cuenta"], [data-a="cuenta-ok"],
  [data-a="auto-conciliar"], [data-a="conciliar"], [data-a="deshacer-conc"], [data-a="ignorar-mov"], [data-a="ignorar-ok"],
  [data-a="mov-a-gasto"], [data-a="mov-a-gasto-ok"], [data-a="mov-ia"],
  /* impuestos y contabilidad */
  [data-a="marcar-presentado"], [data-a="aeat-fichero"], [data-a="aeat-fichero-ok"],
  [data-a="asiento-borrar"], [data-a="asiento-guardar"], [data-a="asiento-linea"], [data-a="asiento-quitar"],
  [data-a="bien-borrar"], [data-a="bien-desde-gasto"], [data-a="bien-editar"], [data-a="bien-guardar"], [data-a="bien-nuevo"], [data-a="posible-descartar"],
  /* lo que pide la gestoría (el cliente solo MARCA lo hecho: peticion-hecha se ve) */
  [data-a="peticion-borrar"], [data-a="peticion-nueva"], [data-a="peticion-ok"],
  /* ajustes, usuarios, cuentas, VERI*FACTU, correo */
  [data-a="guardar-diseno"], [data-a="guardar-empresa"], [data-a="logo-empresa"], [data-a="logo-empresa-quitar"],
  [data-a="marca-logo"], [data-a="marca-logo-quitar"], [data-a="marca-nombre"], [data-a="rm-al-pie"],
  [data-a="serie-editar"], [data-a="serie-nueva"], [data-a="serie-ok"], [data-a="smtp-clave"], [data-a="smtp-prueba"], [data-a="lector-clave"],
  [data-a="usuario-borrar"], [data-a="usuario-clave"], [data-a="usuario-editar"], [data-a="usuario-invitar"], [data-a="usuario-mas"], [data-a="usuario-nuevo"],
  [data-a="usuario-ok"], [data-a="usuario-sin2fa"], [data-a="usuarios-recargar"], [data-a="acceso-cliente"], [data-a="u-marcar"],
  [data-a="empresa-archivar"], [data-a="empresa-mas"], [data-a="empresa-recuperar"],
  [data-a="cuenta-alta"], [data-a="cuenta-baja"], [data-a="cuenta-crear"], [data-a="cuenta-editar"], [data-a="cuenta-entrar"],
  [data-a="cuenta-guardar"], [data-a="cuenta-nueva"], [data-a="nueva-empresa"], [data-a="nueva-empresa-ok"], [data-a="entrar-empresa"],
  [data-a="vf-cert"], [data-a="vf-enviar"], [data-a="vf-guardar"], [data-a="vf-productor"], [data-a="vf-reintentar"],
  /* cobros y pagos: remesas, mandatos, recordatorios, crear ingreso (todo lo de cobros.js lleva «cb-») */
  [data-a^="cb-"], [data-a="doc-recordatorio"]
) { display: none !important; }
/* Un cliente sin permiso para subir tickets no ve nada de la subida (lo marca body.sin-subir desde recargarArranque) */
.sin-subir [data-a="subir-tickets"], .sin-subir [data-a="subir-facturas"], .sin-subir [data-a="hacer-foto"] { display: none !important; }
.visor #f-ticket input, .visor #f-ticket select, .visor #f-ticket textarea { pointer-events: none; background: transparent; }

/* ── el colaborador: un cliente que trabaja con su empresa (body.colaborador, lo pone nucleo.js) ──────────────────────────────────────────────────────────────────
   Sube tickets, apunta gastos, da de alta a sus clientes y hace, emite y cobra sus facturas, así que NO se le esconden los botones que escriben (a diferencia de
   «.visor» de arriba), solo los que son de la gestoría: impuestos, banco, contabilidad y ajustes ni siquiera tienen pantalla para él (nucleo.js: RUTAS_COLABORADOR).
   El servidor ya le cierra todo eso con un 403 (usuarios.py: COLABORADOR_ESCRIBE); esto evita enseñarle botones que acabarían en «lo hace tu gestoría».
   Si añades un botón de la gestoría en una pantalla suya (ventas, gastos, contactos, inicio): apúntalo aquí. */
.colaborador:not(.visor-varias) #empresa-sel svg { display: none !important; }
.colaborador:not(.visor-varias) #empresa-sel { pointer-events: none; }
.colaborador :is(
  /* ventas: anular, subsanar el registro de VERI*FACTU, recordatorios de cobro, Facturae, recurrencias */
  [data-a="doc-anular"], [data-a="doc-subsanar"], [data-a="doc-recordatorio"], [data-a="doc-facturae"], [data-a="fila-facturae"], [data-a^="rec-"],
  /* gastos: darlo por revisado, fusionar repetidos, quitar una subida entera, Claude, pedir facturas al proveedor, pasarlo a inmovilizado */
  [data-a="ticket-revisado"], [data-a="fusionar"], [data-a="buscar-existente"], [data-a="subida-quitar"], [data-a^="claude-"],
  [data-a="pedir-fin"], [data-a="pedir-todos"], [data-a="marcar-pedidas"], [data-a="enviar-mail"], [data-a="poner-mail"],
  [data-a="bien-luego"], [data-a="bien-no"], [data-a="bien-si"],
  /* contactos: la calidad de la gestoría y sus notas internas */
  [data-a="contacto-revisado"], [data-a="fusionar-contacto"], [data-a="normalizar-contacto"], [data-a="contacto-empleado"], [data-a="contacto-ambos"],
  [data-a="guardar-notas"], [href$="?pest=notas"], [href="#/contactos/calidad"], [href^="#/contactos/empleados"],
  /* inicio y empresas: dar accesos, entrar en una empresa que lleva la gestoría, importar el extracto, las peticiones a clientes */
  [data-a="acceso-cliente"], [data-a="entrar-empresa"], [data-a="importar-extracto"], [data-a="peticion-borrar"], [data-a="peticion-nueva"], [data-a="peticion-ok"],
  [data-a^="cb-"]
) { display: none !important; }
.colaborador .sin-colaborador { display: none !important; }       /* lo que una pantalla marca a mano como «no es del colaborador» */

/* ═══════════════════════════════════════════════════════════════════════
   DECISIONES DEL 13-10-2026 (ver DECISIONES.md)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── raíl: marca arriba, tu usuario abajo ─────────────────────────────── */
.rail .marca-g { display: grid; justify-items: center; gap: 3px; margin-bottom: 12px; height: auto; padding: 0; border-radius: var(--r); }
.rail .marca-g:hover { background: transparent; }
.rail .marca-g .iso { margin: 0; }
.rail .marca-g img { width: 34px; height: 34px; object-fit: contain; border-radius: var(--r-sm); background: var(--blanco); padding: 2px; }
.rail .marca-g span { font-size: var(--t-3xs); letter-spacing: .01em; color: var(--rail-tenue); white-space: nowrap; max-width: calc(var(--ancho-rail) - 12px); overflow: hidden; text-overflow: ellipsis; }
.rail button.yo { margin-top: 6px; }
.rail button.yo .avatar { background: var(--verde-claro); color: var(--rail); border-radius: 50%; }
.rail button.yo:hover .avatar { box-shadow: 0 0 0 3px var(--rail-activo); }

/* ── menús ──────────────────────────────────────────────────────────── */
.menu { animation: entra var(--dur) var(--curva); }
.menu.arriba { position: fixed; min-width: 280px; max-height: calc(100vh - 16px); overflow-y: auto; }
.menu .yo-cab { display: flex; gap: 10px; align-items: center; padding: 8px 10px 6px; min-width: 0; }
.menu .yo-cab .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--marca); color: var(--marca-fg); }
.menu .yo-cab b { font-weight: 600; display: block; }
.menu .tecla, .buscar .tecla { margin-left: auto; font: 500 var(--t-2xs) var(--fuente); color: var(--tenue); border: 1px solid var(--linea); border-radius: var(--r-sm); padding: 0 5px; line-height: 17px; }
.menu .item-info { display: flex; gap: 10px; padding: 8px 10px; font-size: var(--t-sm); color: var(--ok-fg); }
.menu .item-info svg { color: var(--ok-fg); }
/* Segmentos: elegir un modo entre 2-4 (tema, cuentas/subcuentas, mensual/anual). Sirve también para .seg (radios con etiqueta) */
.segmentos, .seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--r); }
.segmentos button, .seg label { display: flex; align-items: center; justify-content: center; height: var(--alto-xs); min-height: 0; padding: 0 14px; margin: 0; background: transparent; color: var(--tenue); border: 0; border-radius: var(--r-sm); font: 500 var(--t-xs) var(--fuente); cursor: pointer; white-space: nowrap; }
.segmentos button:hover:not(.activo), .seg label:hover:not(.activo) { background: var(--hover); color: var(--texto); opacity: 1; }
.segmentos button.activo, .seg label.activo { background: var(--card); color: var(--texto); box-shadow: 0 0 0 1px var(--linea-fuerte); }
.menu .segmentos { display: grid; margin: 2px 8px 8px; }
.menu .segmentos button { height: var(--alto-xs); min-height: 0; padding: 0 4px; justify-content: center; }

/* ── aviso con «Deshacer» ───────────────────────────────────────────── */
#avisos .aviso .deshacer { height: var(--alto-xs); padding: 0 10px; background: color-mix(in oklab, currentColor 18%, transparent); color: inherit; border-radius: var(--r-sm); font-size: var(--t-xs); margin-left: auto; }
#avisos .aviso .deshacer:hover { background: color-mix(in oklab, currentColor 28%, transparent); opacity: 1; }

/* ── paleta de órdenes (Ctrl+K) ─────────────────────────────────────── */
.buscar .res a.orden svg { width: 16px; height: 16px; color: var(--tenue); flex: none; margin-right: 2px; }
.buscar .res a { align-items: center; }
.buscar .res a.sel { background: var(--marca-suave); }
.buscar .res a.sel svg { color: var(--marca); }

/* ── atajos ─────────────────────────────────────────────────────────── */
.lista-atajos { display: grid; gap: 8px; }
.lista-atajos > div { display: flex; justify-content: space-between; gap: 16px; font-size: var(--t-sm); padding: 9px 0; border-bottom: 1px solid var(--linea-suave); }
.lista-atajos i { font-style: normal; color: var(--tenue); font-size: var(--t-xs); margin: 0 2px; }
kbd { font: 500 var(--t-xs) var(--fuente); border: 1px solid var(--linea); border-bottom-width: 2px; border-radius: var(--r-sm); padding: 1px 6px; background: var(--card); }

/* ── acceso dividido: la marca a la izquierda ───────────────────────── */
.acceso { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); background: var(--fondo); }
.acceso-marca { background: var(--rail); color: var(--blanco); padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.acceso-marca::after { content: ""; position: absolute; right: -140px; bottom: -140px; width: 420px; height: 420px; border-radius: 50%; border: 60px solid color-mix(in oklab, var(--verde-claro) 8%, transparent); pointer-events: none; }
.acceso-marca .iso.grande { width: 52px; height: 44px; margin: 0; }
.acceso-marca .am-logo { max-width: 180px; max-height: 70px; object-fit: contain; background: var(--blanco); border-radius: var(--r); padding: 6px; }
.acceso-marca h2 { font-size: clamp(var(--t-2xl), 4vw, var(--t-hero)); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; max-width: 14ch; }
.acceso-marca p { color: var(--sobre-oscuro); font-size: var(--t-lg); margin-top: 12px; max-width: 34ch; }
.acceso-marca .am-pie { font-size: var(--t-sm); color: var(--sobre-oscuro-tenue); }
.acceso-marca .am-pie b { color: var(--verde-claro); font-weight: 600; }
.acceso-lado { display: grid; place-items: center; padding: 24px; background: var(--card); }
.acceso-caja { width: min(360px, 100%); display: grid; gap: 4px; }
.acceso-caja h1 { font-size: var(--t-2xl); letter-spacing: -.02em; }
.acceso-caja .campo { margin-top: 10px; }
.acceso-caja button[type=submit] { margin-top: 10px; }
.codigo-6 { font: 600 var(--t-xl) var(--mono); letter-spacing: .35em; text-align: center; }
/* El código de 6 cifras en casillas (otp.js, 20-10): el campo de verdad va encima, transparente; las casillas solo lo dibujan. Cada cifra entra rodando desde abajo y se va hacia abajo */
.otp { position: relative; display: flex; justify-content: center; gap: var(--e2); margin: var(--e1) 0; }
.otp-c { position: relative; display: grid; place-items: center; width: 44px; height: 52px; border-radius: var(--r); background: var(--hover); border: 1px solid var(--linea);
  overflow: hidden; font: 600 var(--t-xl) var(--mono); color: var(--texto); transition: border-color var(--dur), box-shadow var(--dur); }
.otp-c.activa { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
.otp-n { display: block; line-height: 1; }
.otp-n.entra { animation: otp-entra var(--dur-lenta) var(--curva); }
.otp-n.sale { animation: otp-sale var(--dur) ease-in forwards; }
@keyframes otp-entra { from { transform: translateY(110%); } to { transform: none; } }
@keyframes otp-sale { 0% { transform: none; } 100% { transform: translateY(110%); } }
.otp-cursor { position: absolute; width: 2px; height: 24px; background: var(--marca); opacity: 0; }
.otp-c.activa:not(.lleno) .otp-cursor { opacity: 1; animation: otp-parpadeo var(--dur-brillo) steps(1) infinite; }
@keyframes otp-parpadeo { 50% { opacity: 0; } }
.otp .otp-real { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; opacity: 0; cursor: text; caret-color: transparent; font-size: var(--t-lg); }
.otp.otp-error { animation: otp-tiembla var(--dur-lenta) var(--curva); }
.otp.otp-error .otp-c { border-color: var(--no-fg); box-shadow: 0 0 0 1px var(--no-fg); }
@keyframes otp-tiembla { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.otp.otp-ok .otp-c { border-color: var(--ok-fg); box-shadow: 0 0 0 1px var(--ok-fg); }
.otp.otp-off .otp-c { display: none; }
.otp.otp-off .otp-real { position: static; opacity: 1; height: var(--alto-md); padding: 0 var(--e3); border: 1px solid var(--campo-borde); background: var(--card); border-radius: var(--r); font: 600 var(--t-md) var(--mono); letter-spacing: .1em; text-align: center; caret-color: auto; }
.otp-otro { margin: calc(-1 * var(--e1)) 0 var(--e3); text-align: center; font-size: var(--t-xs); }
.pasos-2fa { display: grid; gap: 12px; }
.pasos-2fa > div { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-sm); }
.pasos-2fa > div b { width: 22px; height: 22px; border-radius: 50%; background: var(--marca-suave); color: var(--marca); display: grid; place-items: center; font-size: var(--t-xs); flex: none; }
.pasos-2fa .qr-2fa { display: flex; gap: 16px; align-items: center; padding-left: 32px; }
.pasos-2fa .qr-2fa svg { width: 150px; height: 150px; background: var(--blanco); padding: 6px; border-radius: var(--r); border: 1px solid var(--linea); flex: none; }

/* ── móvil: barra de abajo con cinco iconos ─────────────────────────── */
.movil { display: none; }
@media (max-width: 720px) {
  .acceso { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .acceso-marca { padding: 24px 22px 28px; }
  .acceso-marca h2 { font-size: var(--t-2xl); }
  .acceso-marca p, .acceso-marca::after { display: none; }
  .app { grid-template-columns: minmax(0, 1fr) !important; }
  .rail { display: none; }
  .contenido { padding-bottom: 92px; }
  .movil { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--card); border-top: 1px solid var(--linea); padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .movil a, .movil button { display: grid; justify-items: center; gap: 2px; height: auto; padding: 6px 0; background: transparent; color: var(--tenue); font-size: var(--t-2xs); font-weight: 500; border-radius: var(--r); }
  .movil a svg, .movil button svg { width: 22px; height: 22px; }
  .movil a.activo { color: var(--marca); }
  .movil button.foto { color: var(--marca-fg); background: var(--marca); margin: -14px 6px 0; padding: 10px 0 7px; border-radius: var(--r); }
  .movil button.foto svg { width: 24px; height: 24px; }
  #avisos { bottom: 86px; left: 12px; right: 12px; max-width: none; }
}

/* ── barra de arriba: empresa y «Nuevo» a la derecha ────────────────── */
.barra-der { display: flex; flex: 0 1 auto; align-items: center; gap: 10px; justify-content: flex-end; min-width: 0; }
.barra .migas { min-width: 0; }

.rail .nom { font-size: var(--t-3xs); font-weight: 500; line-height: 1; letter-spacing: 0; white-space: nowrap; }
.rail button.yo { height: 56px; }
.rail button.yo .avatar { width: 26px; height: 26px; font-size: var(--t-3xs); }
.rail .marca-g { width: calc(var(--ancho-rail) - 8px); }

/* ── lista de ventas: tipo, VERI*FACTU, sello, lote y menú de fila ──── */
.tipo-f { font: 600 var(--t-2xs) var(--mono); padding: 2px 6px; border-radius: var(--r-sm); background: var(--gris-bg); color: var(--gris-fg); }
.tipo-f.r { background: var(--lila-bg); color: var(--lila-fg); }
.sello-imp { font: 500 var(--t-2xs) var(--fuente); color: var(--tenue); border: 1px dashed var(--linea); border-radius: var(--r-sm); padding: 0 5px; margin-left: 4px; vertical-align: 1px; }
.vf-c { width: 34px; text-align: center; }
.vf-ico { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; }
.vf-ico svg { width: 12px; height: 12px; }
.vf-ico.ok { background: var(--ok-bg); color: var(--ok-fg); }
.vf-ico.av { background: var(--av-bg); color: var(--av-fg); }
.vf-ico.no { background: var(--no-bg); color: var(--no-fg); }
.vf-ico.gris { color: var(--tenue); }
.tabla th.acc-fila, .tabla td.acc-fila { width: 40px; padding-left: 0; padding-right: 8px; text-align: right; }
.tabla tr .acc-fila button.ico:not(.sec) { color: var(--tenue); }          /* el «⋯» de cada fila: gris hasta que se pasa por la fila */
.tabla tr:hover .acc-fila button, .tabla .acc-fila button:focus-visible { color: var(--texto); }
.lote-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; background: var(--marca-suave); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 3; }
.lote-barra b { font-weight: 600; margin-right: 6px; }
.menu .rojo, .menu .rojo svg { color: var(--no-fg); }

/* ── editor: formulario a la izquierda, panel con pestañas y vista previa ── */
.papel.formdoc { border-radius: var(--r); padding: var(--e5); box-shadow: none; }
.formdoc .pc { align-items: flex-end; padding-bottom: 16px; border-bottom: 1px solid var(--linea-suave); margin-bottom: 18px; }
.formdoc .tipo-izq .k { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); }
.formdoc .tipo-izq h2 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.02em; }
.formdoc .grande-num { font: 600 var(--t-md) var(--mono); color: var(--marca); }
.cadena .paso .cuando { display: block; font-size: var(--t-2xs); color: var(--tenue); margin-top: 1px; min-height: 13px; }
.pest-lat { display: flex; gap: 2px; border-bottom: 1px solid var(--linea); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin: 0 -2px; }
.pest-lat button { background: transparent; border-radius: 0; border-style: solid; border-color: transparent; border-width: 0 0 2px; }
/* Las pestañas de la hoja de la factura (Cobros · VERI*FACTU · Historial · Vista previa · Relacionado) no caben en una fila en el panel de al lado (unos 280 px): antes se desplazaban con la barra
   escondida y «Vista previa» se quedaba cortada, se veía una «V» (R-IKER-13). Con `.en-filas`, si no caben bajan a otra fila y cada una ocupa el ancho que le sobra: ninguna se corta ni hace falta desplazarse.
   El resto de tiras `.pest-lat` (una sola fila que se desplaza) siguen como estaban. */
.pest-lat.en-filas { flex-wrap: wrap; overflow: visible; gap: 0 2px; }
.pest-lat.en-filas button { flex: 1 1 auto; justify-content: center; padding: 0 10px; }
.pest-cuerpo { min-height: 120px; }
.vista-previa { background: var(--fondo); border-radius: var(--r); padding: 14px; }
/* Vista previa de la factura: una hoja A4 a escala. Todos sus tamaños salen de --vp-u (9 px) y van en em; los colores, del papel */
.vp-hoja { background: var(--papel); color: var(--papel-tinta); border-radius: var(--r-xs); box-shadow: 0 1px 0 var(--borde-papel), 0 0 0 1px var(--borde-papel); padding: 16px 16px 14px; font-size: var(--vp-u); line-height: 1.35; aspect-ratio: 1 / 1.414; overflow: visible; }
.vp-cab { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start; margin-bottom: 12px; }
.vp-marca img { max-width: 70px; max-height: 28px; object-fit: contain; }
.vp-marca b { font-size: 1.17em; }
.vp-qr { display: grid; justify-items: center; gap: 2px; font-size: .67em; color: var(--papel-tenue); }
.vp-qr i { width: 30px; height: 30px; display: grid; place-items: center; border: 1px dashed var(--papel-linea); font-style: normal; font-size: .61em; color: var(--papel-hueco); }
.vp-doc { background: var(--acento); color: var(--papel); border-radius: var(--r-xs); padding: 6px 8px; display: grid; justify-items: end; gap: 1px; }
.vp-doc b { font-size: 1.11em; }
.vp-partes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.vp-partes i { display: block; font-style: normal; font-size: .72em; font-weight: 600; letter-spacing: .08em; color: var(--acento); margin-bottom: 2px; }
.vp-falta { color: var(--papel-alerta); }
.vp-lin { width: 100%; border-collapse: collapse; }
.vp-lin th { text-align: right; font-size: .78em; font-weight: 600; padding: 3px 4px; background: color-mix(in srgb, var(--acento) 10%, var(--papel)); }
.vp-lin th:first-child, .vp-lin td:first-child { text-align: left; }
.vp-lin td { text-align: right; padding: 3px 4px; border-bottom: 1px solid var(--papel-linea); font-variant-numeric: tabular-nums; }
.vp-tot { margin: 8px 0 0 auto; width: 52%; display: grid; gap: 2px; }
.vp-tot div { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.vp-total { background: var(--acento); color: var(--papel); border-radius: var(--r-xs); padding: 3px 5px; font-weight: 600; font-size: 1.11em; margin-top: 2px; }
.vp-notas { margin-top: 10px; color: var(--papel-tenue); font-size: .89em; }

/* ── correo: el texto a la izquierda, el PDF que va adjunto a la derecha ── */
.correo-con-pdf { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 18px; align-items: start; }
.miniatura-pdf { display: grid; gap: 6px; justify-items: center; text-align: center; font-size: var(--t-xs); color: var(--tenue); }
.miniatura-pdf img { width: 100%; border: 1px solid var(--linea); border-radius: var(--r-sm); background: var(--blanco); }
.miniatura-pdf span { display: flex; gap: 6px; align-items: center; }
.miniatura-pdf span svg { width: 14px; height: 14px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.chip, .sub-chips a { height: var(--alto-xs); padding: 0 14px; border-radius: var(--r-pill); background: var(--card); color: var(--texto); border: 1px solid var(--linea-fuerte); font-size: var(--t-xs); font-weight: 500; }
.chip:hover, .sub-chips a:hover { background: var(--hover); opacity: 1; }
.chip.activo, .sub-chips a.activo { background: var(--marca-suave); border-color: var(--marca); color: var(--marca); }

/* ── inicio: tarjetas, avisos y peticiones ──────────────────────── */
.kpi .k svg { width: 14px; height: 14px; }
.kpi .v.sin-dato { color: var(--tenue); font-size: var(--t-xl); }
.kpi.oscuro .v.sin-dato { color: var(--sobre-oscuro); }
/* La palabra de un resultado o un saldo («Pérdida», «Beneficio», «Descubierto») va en la línea del rótulo, a la derecha de la tarjeta. Antes iba encima de la cifra (delante no
   cabe en una tarjeta de 250 px) y dejaba esa cifra 16 px más abajo que las de las tarjetas de al lado (Informes → Resultados; el mismo defecto de Inicio, ESTETICA-10). */
.kpi:has(.v .imp .pal) { position: relative; }
.kpi:has(.v .imp .pal) .k { padding-right: 6.5em; }
.kpi .v .imp .pal { position: absolute; top: 14px; right: var(--pad-card); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0; line-height: 18px; }
.av-t { color: var(--av-fg); font-weight: 600; }
.leyenda .raya { width: 14px; height: 3px; border-radius: var(--r-xs); vertical-align: 3px; }
.grafica .eje.cero { stroke: var(--tenue); stroke-dasharray: none; }
.sub-bloque { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--linea); }
.sub-bloque .sb-tit { font-size: var(--t-xs); color: var(--tenue); margin-bottom: 6px; display: flex; justify-content: space-between; }
.peticiones { display: grid; gap: 8px; }
.pet { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border: 1px solid var(--linea); border-radius: var(--r); }
.pet b { font-weight: 500; }
.pet.hecha { color: var(--tenue); }
.pet.hecha b { text-decoration: line-through; font-weight: 400; }
.pet-check { width: var(--alto-xs); height: var(--alto-xs); padding: 0; border-radius: var(--r-sm); background: var(--card); border: 1.5px solid var(--tenue); color: var(--marca-fg); flex: none; margin-top: 0; }
.pet.hecha .pet-check { background: var(--marca); border-color: var(--marca); }
.pet-check svg { width: 13px; height: 13px; }
.peticiones-dest { border-color: color-mix(in oklab, var(--av-fg) 40%, transparent); background: var(--av-bg); }
.peticiones-dest .pet { background: var(--card); }

@media (max-width: 720px) {
  .barra .buscar { display: none; }          /* (lo mismo que hace @container barra más abajo; aquí por si el navegador no lo conoce) */
  .correo-con-pdf { grid-template-columns: minmax(0, 1fr); }
  .miniatura-pdf { display: none; }
}

/* La columna del cliente es la que se estira (INTERFAZ-38): se queda con el sitio que dejan las demás y, si el nombre no cabe, acaba en «…».
   Con width: 100% y max-width: 0 la celda toma el sobrante pero nunca ensancha la tabla (ya no hay un tope fijo que corte nombres con sitio de sobra). */
.tabla td.cli-c { width: 100%; max-width: 0; min-width: 14ch; }
.tabla td.cli-c b, .tabla td.cli-c .sub2 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* relleno lateral de las celdas: 14 px (antes 10, y 14 antes del repaso del 14-10); en una caja estrecha baja solo (más abajo, @container) para que las listas con muchas columnas quepan sin barra horizontal */
.tabla th, .tabla td { padding-left: 14px; padding-right: 14px; }
.tabla .doc .sello-imp { display: block; width: fit-content; margin: 2px 0 0; }

/* ── impuestos: aviso discreto y pasos de un modelo ────── */
.aviso-fiscal { display: flex; align-items: center; gap: 7px; font-size: var(--t-xs); color: var(--tenue); margin: -8px 0 16px; }
.aviso-fiscal svg { width: 14px; height: 14px; flex: none; }
.aviso-fiscal a { color: var(--marca); font-weight: 500; padding: 3px; margin: -3px; }
.is-mod .tm-imp .imp, .resultado-modelo .v .imp { white-space: normal; }   /* «A compensar 853,95 €» puede pasar a dos líneas, nunca cortarse */
.mod-num { font: 600 var(--t-xs) var(--mono); background: var(--rail); color: var(--verde-claro); border-radius: var(--r-sm); padding: 2px 6px; min-width: 38px; text-align: center; display: inline-block; }
.pasos-modelo .paso-m { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed var(--linea); }
.pasos-modelo .paso-m:last-of-type { border-bottom: 0; }
.pasos-modelo .paso-m > b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--marca); color: var(--marca-fg); font-size: var(--t-xs); flex: none; }
.pasos-modelo .paso-m.hecho > b { background: var(--marca-suave); color: var(--marca); }
.pasos-modelo .paso-m span { font-weight: 500; }
.resultado-modelo .v { font-size: var(--t-2xl); }

/* ── guía ───────────────────────────────────────────────────────────── */
.guia-txt { padding: 22px 26px; max-width: 760px; font-size: var(--t-md); line-height: 1.65; }
.guia-txt h2 { font-size: var(--t-xl); letter-spacing: -.02em; margin-bottom: 10px; }
.guia-txt h3 { font-size: var(--t-md); margin: 18px 0 6px; }
.guia-txt p { margin: 8px 0; }
.guia-txt ol, .guia-txt ul { margin: 8px 0 8px 22px; display: grid; gap: 6px; }
.guia-txt .nota { margin: 6px 0 12px; }
.modal .guia-txt { padding: 4px 0; max-width: none; font-size: var(--t-sm); }

/* ── ajustes: sociedad o autónomo, logo y primeros pasos ─────────────── */
.tipo-emp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.op-tipo { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1.5px solid var(--linea); border-radius: var(--r); cursor: pointer; margin: 0; font-weight: 400; }
.op-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.op-tipo svg { width: 22px; height: 22px; color: var(--tenue); flex: none; margin-top: 2px; }
.op-tipo b { display: block; font-size: var(--t-md); }
.op-tipo span span { font-size: var(--t-xs); color: var(--tenue); }
.op-tipo.activo, .op-tipo:has(input:checked) { border-color: var(--marca); background: var(--marca-suave); }
.op-tipo.activo svg, .op-tipo:has(input:checked) svg { color: var(--marca); }
.op-tipo:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ring); }
.logo-caja { min-height: 84px; display: grid; place-items: center; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r); padding: 12px; }
.logo-caja img { max-width: 100%; max-height: 72px; object-fit: contain; }
.avatar.logo-av { object-fit: contain; background: var(--blanco); padding: 2px; border: 1px solid var(--linea); }
.primeros .ct { flex-wrap: wrap; }
.pasos-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.paso-p { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--linea); border-radius: var(--r); font-size: var(--t-sm); background: var(--card); color: var(--texto); height: auto; justify-content: flex-start; font-weight: 400; }
.paso-p:hover { border-color: var(--marca); opacity: 1; }
.paso-p.ok { color: var(--tenue); text-decoration: line-through; }
.pp-bola { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--tenue); display: grid; place-items: center; flex: none; }
.paso-p.ok .pp-bola { background: var(--marca); border-color: var(--marca); color: var(--marca-fg); }
.pp-bola svg { width: 12px; height: 12px; }
@media (max-width: 900px) { .pasos-lista, .tipo-emp { grid-template-columns: minmax(0, 1fr); } }

/* ══════════════════════════════ variantes de la barra (tu menú → Barra) ══
   compacta: 80 px, icono con su nombre debajo (la de siempre)
   ancha:    icono y nombre en fila; el panel de secciones sigue al lado
   columna:  una sola barra; las secciones del módulo abierto cuelgan de él */
.rail .marca-txt { display: none; }
.rail button.plegar { height: 40px; margin-top: 2px; }
.rail button.plegar svg { width: 17px; height: 17px; }
.yo-barra { display: none; width: var(--alto-md); height: var(--alto-md); padding: 0; border-radius: 50%; background: transparent; border: 0; place-items: center; cursor: pointer; flex: none; }
.yo-barra .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--marca); color: var(--marca-fg); font-size: var(--t-xs); }
.yo-barra:hover .avatar { box-shadow: 0 0 0 3px var(--marca-suave); }
html[data-yo="arriba"] .yo-barra { display: grid; }
html[data-yo="arriba"] .rail button.yo { display: none; }

html[data-nav="ancha"] .app { grid-template-columns: 200px var(--ancho-sub) minmax(0, 1fr); }
html[data-nav="columna"] .app { grid-template-columns: 264px minmax(0, 1fr); }
html[data-nav="ancha"] .app.enfoque, html[data-nav="ancha"] .app.sin-sub { grid-template-columns: 200px minmax(0, 1fr); }
html[data-nav="columna"] .app.enfoque, html[data-nav="columna"] .app.sin-sub { grid-template-columns: 264px minmax(0, 1fr); }
html[data-nav="columna"] .sub { display: none; }
html[data-nav] .rail { align-items: stretch; padding: 14px 12px 12px; overflow-y: auto; }
html[data-nav] .rail a, html[data-nav] .rail button.r { width: auto; height: var(--alto-md); display: flex; align-items: center; justify-content: flex-start; gap: 11px; padding: 0 11px; flex: none; }
html[data-nav] .rail .nom { font-size: var(--t-sm); font-weight: 500; letter-spacing: 0; }
html[data-nav] .rail a .punto { position: static; margin-left: auto; box-shadow: none; }
html[data-nav] .rail .marca-g { width: auto; display: flex; align-items: center; gap: 10px; padding: 0 8px; margin-bottom: 14px; height: 40px; }
html[data-nav] .rail .marca-g > span { display: none; }
html[data-nav] .rail .marca-g .iso { width: 28px; height: 24px; margin: 0; }
html[data-nav] .rail .marca-txt { display: block; color: var(--blanco); font-size: var(--t-md); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-nav] .rail button.yo { height: 46px; margin-top: 6px; }
html[data-nav] .rail button.yo .nom::after { content: " · tu cuenta"; font-weight: 400; color: var(--rail-tenue); }
html[data-nav] .rail button.plegar { height: var(--alto-sm); }
.rail-sub { display: grid; gap: 1px; margin: 2px 0 8px 22px; padding-left: 10px; border-left: 1px solid var(--rail-linea); }
.rail-sub .grupo { font-size: var(--t-2xs); font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--rail-tenue); padding: 10px 8px 4px; }
html[data-nav] .rail .rail-sub a { height: 31px; font-size: var(--t-sm); gap: 9px; padding: 0 8px; color: var(--rail-tenue); }
/* Nada se parte en dos líneas dentro de una casilla de 31 px: el texto largo acaba en «…» (el título del enlace lo dice entero) (ESTETICA-04) */
.rail-sub a > span:not(.n) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail .rail-sub a svg { width: 15px; height: 15px; }
html[data-nav] .rail .rail-sub a:hover { color: var(--rail-txt); }
html[data-nav] .rail .rail-sub a.activo { background: var(--rail-activo); color: var(--blanco); }
.rail-sub a .n { margin-left: auto; --contador-bg: var(--rail-hover); --contador-fg: var(--rail-tenue); }          /* en el raíl ancho: la medida es la de todos los contadores, solo cambian los colores */
.rail-sub a .n.av { --contador-bg: var(--punto); --contador-fg: var(--punto-fg); }
/* La ancha (200 px) con el panel de secciones (248) se queda con 650 px de contenido a 1100 px de pantalla: la barra de arriba no cabía (ESTETICA-03). Hasta 1100 px
   las secciones salen como chips (arriba del contenido), como en la compacta por debajo de 1000. */
@media (max-width: 1100px) {
  html[data-nav="ancha"] .app { grid-template-columns: 200px minmax(0, 1fr); }
  html[data-nav="ancha"] .sub { display: none; }
}
/* Cada caja de tabla es un contenedor: las columnas que ceden (.oc-*) y el relleno se deciden por SU ancho, no por el de la pantalla */
.caja-tabla { container-type: inline-size; }

/* Gráfica sin datos todavía */
.graf-vacia { display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; color: var(--tenue); font-size: var(--t-sm); line-height: 1.5; }
.graf-vacia svg { width: 26px; height: 26px; opacity: .6; }

/* ── contabilidad: diario, cuentas anuales y editor de asientos ──────── */
.tabla.diario tr.as-cab td { background: var(--sub); font-weight: 500; border-top: 1px solid var(--linea); padding-top: 8px; padding-bottom: 8px; }
.tabla.diario tr.as-cab .eti { margin-right: 6px; }
.tabla.diario tr.as-lin td { border-bottom: 0; height: calc(var(--fila) - 6px); padding-top: 2px; padding-bottom: 2px; font-size: var(--t-sm); }
/* UI 19-10: el número de cuenta de cada línea medía 17 px de alto (189 enlaces por debajo de 24 px): la zona de pulsación crece con relleno y margen negativo, sin tocar la altura de la fila */
.tabla.diario tr.as-lin td.doc a { color: var(--texto); display: inline-block; padding: 4px 6px; margin: -4px -6px; }
.tabla.diario tr.as-lin td.doc a:hover { color: var(--marca); text-decoration: underline; }
.tabla.cuentas-anuales td { padding-top: 7px; padding-bottom: 7px; }
.tabla.cuentas-anuales tr:not(.tit) td:first-child { padding-left: 30px; color: var(--texto); }
.tabla.cuentas-anuales tr.tit td { font-weight: 600; background: var(--sub); }
.tabla.asiento-ed td { padding: 4px 6px; }
.tabla.asiento-ed input { height: var(--alto-sm); }
.tabla.asiento-ed input.n { text-align: right; }
.plantillas-as { display: flex; gap: 6px; flex-wrap: wrap; }
a.chip { display: inline-flex; align-items: center; }

/* ── gastos: caja fina, columnas, adjuntar, lectura con IA y revisión en serie ── */
.soltar.fina { padding: 14px 20px; gap: 12px; justify-content: flex-start; }
.soltar.fina svg { width: 18px; height: 18px; }
.soltar.fina b { font-size: var(--t-sm); font-weight: 500; }
.soltar.fina span { display: inline; font-size: var(--t-xs); }
.soltar.adjuntar { margin-top: 12px; }
.item-check { display: flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: var(--t-sm); border-radius: var(--r-sm); cursor: pointer; }
.item-check:hover { background: var(--hover); }
.lectura-ia { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 320px; background: var(--card); border: 1px solid var(--linea); border-radius: var(--r); padding: 14px; box-shadow: var(--sombra-lg); }
.lectura-ia .li-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: var(--t-sm); }
.lectura-ia .li-cab svg { width: 16px; height: 16px; color: var(--marca); }
.lectura-ia .li-cab span { margin-left: auto; color: var(--tenue); font-variant-numeric: tabular-nums; }
.lectura-ia .li-lista { display: grid; gap: 3px; margin-top: 10px; max-height: 140px; overflow: auto; font-size: var(--t-xs); color: var(--tenue); }
.lectura-ia .li-lista .hecho { color: var(--texto); }
/* La barra de la revisión en serie: «Salir», el progreso, la ayuda de teclas y «Saltar». Se parte en dos líneas antes de salirse de la pantalla (ESTETICA2-33) */
.serie-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); padding: 10px 14px; margin: -6px 0 18px; background: var(--card); border: 1px solid var(--linea); border-radius: var(--r); }
.serie-prog { display: grid; gap: 5px; min-width: min(200px, 100%); }
.serie-prog b { font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.serie-cab > .tenue { margin-left: auto; }
.revision.en-serie .foto-ticket { max-height: 84vh; }
@media (max-width: 720px) { .lectura-ia { left: 12px; right: 12px; width: auto; bottom: 84px; } .serie-cab > .tenue { display: none; } }
.soltar.adjuntar { flex-direction: column; gap: 3px; justify-content: center; text-align: center; padding: 14px; }
.soltar.adjuntar span { display: block; }

/* ── contactos: pestañas sueltas sobre las tarjetas ─────────────────── */
.tabs.tabs-sueltas { border-bottom: 1px solid var(--linea); padding: 0; background: transparent; }
.tabs .punto-tab { width: 6px; height: 6px; border-radius: 50%; background: var(--marca); display: inline-block; flex: none; }
.tabs .punto-tab.av { width: 8px; height: 8px; background: var(--av-fg); }          /* «borrador» en las pestañas de los textos legales: un punto ámbar (el chip con la palabra no cabía: ESTETICA-09) */
/* ── tesorería: pistas de teclado y enlaces dentro de las tarjetas ──── */
.kbd-pista { float: right; font-size: var(--t-2xs); text-transform: none; letter-spacing: 0; color: var(--tenue); }
.enlace-sutil { color: var(--marca); font-weight: 500; cursor: pointer; }
.enlace-sutil:hover { text-decoration: underline; }
.conc[data-mov]:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }

/* ── animaciones sutiles: lo justo para que se note que algo ha cambiado ── */
@keyframes aparece { from { opacity: 0; transform: translateY(4px); } }
@keyframes modal-entra { from { opacity: 0; transform: translateY(6px) scale(.985); } }
/* Entrada de pantalla: solo cuando CAMBIA la ruta. nucleo.js pone la clase «entra» en #main al cambiar de pantalla y la quita al acabar;
   sin ella no hay animación, así que repintar la misma pantalla (teclear en un buscador, conciliar, guardar) ya no hace parpadear la tarjeta. */
#main.entra > * { animation: aparece var(--dur) var(--curva) both; }
#main.entra > *:nth-child(2) { animation-delay: .02s; }
#main.entra > *:nth-child(3) { animation-delay: .04s; }
#main.entra > *:nth-child(n+4) { animation-delay: .06s; }
.velo.abierto .modal { animation: modal-entra var(--dur) var(--curva); }
a.card { transition: border-color var(--dur), box-shadow var(--dur); }
a.card:hover { border-color: color-mix(in oklab, var(--marca) 35%, var(--linea)); }
button:active:not(:disabled), .btn:active { transform: translateY(1px); }
.sub a, .rail a { transition: background-color var(--dur), color var(--dur); }
/* entrar: el enlace de «¿Has olvidado la contraseña?» */
.acceso-caja .olvido { display: block; text-align: center; margin-top: 14px; font-size: var(--t-sm); color: var(--tenue); }
.acceso-caja .olvido:hover { color: var(--marca); text-decoration: underline; }
.ico-clip svg { width: 13px; height: 13px; color: var(--tenue); vertical-align: -2px; }


/* ── gastos: el círculo numerado de «Revisar con Claude» ── */
.paso-n { width: 28px; height: 28px; border-radius: 50%; background: var(--marca); color: var(--marca-fg); display: grid; place-items: center; font-weight: 600; flex: none; }

/* ── cuentas y usuarios (revisión 13-10) ── */
.oculta { display: none !important; }
/* Uso del plan: «3 de 10» con su barra; ámbar casi llena o completa, rojo si se ha pasado */
.uso-plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 16px; }
.uso-item { border: 1px solid var(--linea); border-radius: var(--r); background: var(--card); padding: 16px var(--pad-card); display: grid; gap: 7px; min-width: 0; align-content: start; }
.uso-t { display: flex; justify-content: space-between; align-items: baseline; gap: 2px 12px; flex-wrap: wrap; }
.uso-t b { font-weight: 600; font-size: var(--t-sm); }
.uso-t span { font-size: var(--t-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.uso-s { font-size: var(--t-xs); color: var(--tenue); }
.uso-item.casi .progreso i, .uso-item.lleno .progreso i { background: var(--av-fg); }
.uso-item.pasado .progreso i { background: var(--no-fg); }
.uso-item.casi .uso-t span, .uso-item.lleno .uso-s b { color: var(--av-fg); }
.uso-item.pasado .uso-t span, .uso-item.pasado .uso-s b { color: var(--no-fg); }
.tabla td.uso-pasado { background: var(--no-bg); }
.tabla td.uso-casi, .tabla td.uso-lleno { background: var(--av-bg); }
.tabla td.uso-pasado .uso-n { color: var(--no-fg); font-weight: 600; }
.tabla td.uso-casi .uso-n, .tabla td.uso-lleno .uso-n { color: var(--av-fg); font-weight: 600; }
/* Usuarios y accesos: pestañas Equipo / Clientes y buscador, sobre la tabla */
.us-barra { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; padding: 0 14px 0 8px; border-bottom: 1px solid var(--linea); }
.us-barra .tabs { border-bottom: 0; padding: 0; flex: 1 1 auto; min-width: 0; }
.us-buscar { flex: 0 1 290px; min-width: 0; margin: 8px 0; height: var(--alto-sm); min-height: var(--alto-sm); }
@media (max-width: 720px) { .us-barra { padding: 0 12px 10px; } .us-buscar { flex-basis: 100%; margin-bottom: 0; } }
/* Todas las empresas: quién tiene acceso en cada tarjeta, y las archivadas */
.emp-card { min-width: 0; }
.emp-acceso { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; min-width: 0; }
.acc-chip { height: auto; min-height: 28px; max-width: 100%; min-width: 0; padding: 3px 11px 3px 8px; gap: 6px; font-size: var(--t-xs); font-weight: 400; background: var(--fondo); color: var(--texto); border: 1px solid var(--linea); border-radius: var(--r-pill); box-shadow: none; }
.acc-chip:hover { background: var(--hover); opacity: 1; }
.acc-chip svg { width: 14px; height: 14px; color: var(--tenue); }
.acc-chip span.tenue { white-space: nowrap; font-size: var(--t-2xs); }
.acc-chip[disabled] { opacity: .55; cursor: default; }
.acc-mas { font-size: var(--t-xs); font-weight: 500; color: var(--marca); align-self: center; padding: 0 4px; }
.acc-mas:hover { text-decoration: underline; }
.arch-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linea-suave); }
/* Formulario de un acceso: las empresas, con scroll si son muchas */
.u-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; max-height: 210px; overflow: auto; border: 1px solid var(--linea); border-radius: var(--r); padding: 10px 12px; }
.u-lista label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .u-lista { grid-template-columns: minmax(0, 1fr); } }
/* Avisos fijos de arriba: soporte dentro de la cuenta de otro, y vista previa como cliente */
#bandas { flex: none; }
#bandas:empty { display: none; }
.banda { display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; padding: 10px var(--pad-pagina); font-size: var(--t-sm); border-bottom: 1px solid var(--linea); }
.banda.soporte { background: var(--av-bg); color: var(--av-fg); }
.banda.vista { background: var(--azul-bg); color: var(--azul-fg); }
@media (max-width: 720px) { .banda { padding: 8px 14px; } }

/* ── menús, móvil y cliente (revisión 13-10) ── */
/* Secciones del módulo como barra de chips arriba: donde el panel .sub se esconde (≤1000 px)
   no había otra forma de llegar a «Usuarios y accesos», «Numeración», «VERI*FACTU»… (la pinta pintarSub) */
.sub-chips { display: none; gap: 8px; flex: none; overflow-x: auto; padding: 12px 36px 12px 16px; background: var(--card); border-bottom: 1px solid var(--linea); scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent); mask-image: linear-gradient(to right, black calc(100% - 32px), transparent); }
.sub-chips::-webkit-scrollbar { display: none; }
.sub-chips a { flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
@media (max-width: 1000px) { .sub-chips { display: flex; } }
@media (max-width: 1100px) { html[data-nav="ancha"] .sub-chips { display: flex; } }
.app.enfoque .sub-chips, html[data-nav="columna"] .sub-chips { display: none; }
@media (max-width: 720px) { html[data-nav="columna"] .sub-chips { display: flex; } }
@media print { .sub-chips, .tabs-modulo { display: none !important; } }

/* Barra estrecha (menos de 800 px, sea cual sea la pantalla: el móvil, una tableta o una barra de la izquierda ancha): el buscador es un icono y, al pulsarlo,
   ocupa toda la barra mientras se usa */
.marca-barra, .buscar-movil, .buscar-x { display: none; }
@container barra (max-width: 800px) {
  .barra .buscar { display: none; }
  .buscar-movil { display: inline-flex; width: var(--alto-md); height: var(--alto-md); padding: 0; background: transparent; color: var(--tenue); border-radius: 50%; }
  .buscar-movil:hover { background: var(--hover); opacity: 1; }
  .barra.buscando .buscar { display: block; position: absolute; left: 0; right: 0; top: 0; height: var(--alto-barra); max-width: none; padding: 12px; background: var(--card); z-index: 6; }
  .barra.buscando .buscar > svg { left: 26px; top: calc(var(--alto-barra) / 2 - 8px); }
  .barra.buscando .buscar input { padding-right: 44px; }
  .barra.buscando .buscar .res { top: calc(var(--alto-barra) - 4px); left: 8px; right: 8px; max-height: 70vh; }
  .barra.buscando .buscar-x { display: grid; place-items: center; position: absolute; right: 16px; top: calc(var(--alto-barra) / 2 - var(--alto-sm) / 2); width: var(--alto-sm); height: var(--alto-sm); padding: 0; background: transparent; color: var(--tenue); border-radius: 50%; z-index: 7; }
  .barra.buscando .buscar .buscar-x svg { position: static; width: 15px; height: 15px; }
}
@media (max-width: 720px) {
  .marca-barra { display: flex; flex: 0 1 auto; margin-right: auto; align-items: center; gap: 9px; min-width: 0; font-weight: 600; font-size: var(--t-md); letter-spacing: -.01em; }
  .marca-barra .iso { width: 26px; height: 22px; margin: 0; flex: none; }
  .marca-barra img { height: 30px; max-width: 150px; object-fit: contain; border-radius: var(--r-sm); background: var(--blanco); padding: 2px; }
  .marca-barra b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .barra-der { gap: 6px; }
  #btn-nuevo { padding: 0 12px; }
  .buscar-movil { width: var(--alto-sm); height: var(--alto-sm); }          /* (en el móvil la lupa mide 34 px: con 40 no cabía «‹ Facturas» en la barra del editor) */
  .segmentos button { padding: 0 9px; }
  .empresa-sel { max-width: 54vw; }
  /* El cliente ve de qué empresa son los datos (texto, no se pulsa) */
  .visor .empresa-sel span.nom { display: block; }
  .visor:not(.visor-varias) .empresa-sel { border-color: transparent; background: transparent; padding-left: 0; }
  /* En el menú de tu cuenta, lo que en el móvil no sirve (no hay barra lateral ni teclado) */
  .menu .solo-escritorio { display: none; }
}

/* Tablas que en pantalla estrecha se leen como tarjetas (una fila = una tarjeta con sus etiquetas). La clase «apila» y las etiquetas data-th las pone
   tablasATarjetas() (nucleo.js). SOLO las de 4 columnas o más: una de 2 o 3 (las casillas de un modelo, el Balance, los apartados de un documento) cabe en
   358 px y como tarjetas ocuparía el triple (una línea por dato). Las que se leen mejor como tabla llevan «sin-apilar» (y el Diario y el editor de
   asientos tienen su propia disposición, más abajo). */
.g-21.tabla-ancha { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 721px) { .g-21.tabla-ancha > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(tr > :nth-child(4))), .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(tr > :nth-child(4))) tbody, .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(tr > :nth-child(4))) tfoot { display: block; }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(tr > :nth-child(4))) thead { display: none; }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(tr > :nth-child(4))) tbody tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px 16px; padding: 13px 16px; border-bottom: 1px solid var(--linea-suave); }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(tr > :nth-child(4))) tbody tr:last-child { border-bottom: 0; }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(tr > :nth-child(4))) tfoot tr { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; padding: 12px 16px; background: var(--sub); border-top: 1px solid var(--linea); font-weight: 600; }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(tr > :nth-child(4))) td { display: block; height: auto; padding: 0; border: 0; min-width: 0; max-width: none; text-align: left; white-space: normal; }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(tr > :nth-child(4))) td.n { text-align: left; white-space: normal; }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(tr > :nth-child(4))) td[data-th]::before { content: attr(data-th); display: block; font-size: var(--t-2xs); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--tenue); margin-bottom: 2px; }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(tr > :nth-child(4))) td:first-child::before { display: none; }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(tr > :nth-child(4))) td:first-child, .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(tr > :nth-child(4))) td:last-child, .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(tr > :nth-child(4))) td.todo-ancho { grid-column: 1 / -1; }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(tr > :nth-child(4))) td:last-child .fila { flex-wrap: wrap !important; justify-content: flex-start !important; }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(tr > :nth-child(4))) td.acc-fila { width: auto; text-align: left; }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(tr > :nth-child(4))) td:is(.uso-pasado, .uso-casi, .uso-lleno) { padding: 6px 8px; border-radius: var(--r-sm); }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(tr > :nth-child(4))) td:empty { display: none; }
}
/* Una lista en forma de tabla SIN cabecera y de 4 columnas o más (calidad de contactos: nombre · NIF · explicación · botón): en el móvil cada fila es una tarjetita,
   con el nombre arriba y lo demás debajo (antes, una tabla que se desplazaba de lado con los botones cortados) */
@media (max-width: 720px) {
  .caja-tabla > .tabla:where(:not(:has(thead))):where(:has(tr > :nth-child(4))), .caja-tabla > .tabla:where(:not(:has(thead))):where(:has(tr > :nth-child(4))) tbody { display: block; }
  .caja-tabla > .tabla:where(:not(:has(thead))):where(:has(tr > :nth-child(4))) tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--linea-suave); }
  .caja-tabla > .tabla:where(:not(:has(thead))):where(:has(tr > :nth-child(4))) tr:last-child { border-bottom: 0; }
  .caja-tabla > .tabla:where(:not(:has(thead))):where(:has(tr > :nth-child(4))) td { display: block; height: auto; padding: 0; border: 0; width: auto; max-width: none; min-width: 0; white-space: normal; position: static; box-shadow: none; }
  .caja-tabla > .tabla:where(:not(:has(thead))):where(:has(tr > :nth-child(4))) td:first-child { flex: 1 1 100%; font-weight: 500; }
  .caja-tabla > .tabla:where(:not(:has(thead))):where(:has(tr > :nth-child(4))) td:last-child { margin-left: auto; }
  .caja-tabla > .tabla:where(:not(:has(thead))):where(:has(tr > :nth-child(4))) td:empty { display: none; }
}
@media (max-width: 720px) {
  /* Los totales de arriba (cualquier rejilla que sea solo de tarjetas .kpi), compactos: de dos en dos y, si sobra uno, a todo el ancho (antes cada uno ocupaba media pantalla) */
  .grid:has(> .kpi):not(:has(> :not(.kpi))) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid:has(> .kpi):not(:has(> :not(.kpi))) > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .grid:has(> .kpi):not(:has(> :not(.kpi))) > .kpi { padding: 11px 12px; }
  .grid:has(> .kpi):not(:has(> :not(.kpi))) > .kpi .k { font-size: var(--t-2xs); }
  .grid:has(> .kpi):not(:has(> :not(.kpi))) > .kpi .v { font-size: var(--t-xl); }
  .grid:has(> .kpi):not(:has(> :not(.kpi))) > .kpi .s { font-size: var(--t-2xs); }
}

/* Móvil: cada gasto es una tarjeta (proveedor, total, fecha y sus píldoras); al pulsarla se abre. Sin tabla que se salga */
@media (max-width: 720px) {
  .caja-tabla:has(> .hoja-tabla) { max-height: none !important; overflow: visible; }
  .hoja-tabla, .hoja-tabla tbody { display: block; }
  .hoja-tabla thead, .hoja-tabla tfoot, .hoja-tabla td.nfila { display: none; }
  .hoja-tabla tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 12px 16px; border-bottom: 1px solid var(--linea-suave); }
  .hoja-tabla tbody tr:hover td { background: transparent; }
  /* saltos de línea: arriba proveedor y total; luego fecha y n.º; y debajo las píldoras */
  .hoja-tabla tbody tr::before, .hoja-tabla tbody tr::after { content: ""; flex: 0 0 100%; height: 0; }
  .hoja-tabla tbody tr::before { order: 3; }
  .hoja-tabla tbody tr::after { order: 5; }
  .hoja-tabla td { display: block; height: auto; padding: 0; border: 0; font-size: var(--t-sm); order: 7; }
  .hoja-tabla td:not([class]):not(:has(> .eti)) { order: 1; flex: 1 1 0; min-width: 0; font-weight: 500; font-size: var(--t-md); }   /* el proveedor */
  .hoja-tabla td.total { order: 2; margin-left: auto; font-size: var(--t-md); font-weight: 600; }
  .hoja-tabla td.mono { order: 4; font-size: var(--t-2xs); color: var(--tenue); max-width: none; }          /* (12 px: un n.º de factura de 15 cifras cabe en una línea) */
  .hoja-tabla td:has(> .eti) { order: 6; }
  .hoja-tabla td.tenue, .hoja-tabla td.n:not(.total) { display: none; }
  [data-a="cols-gastos"] { display: none; }            /* sin tabla no hay columnas que elegir */
}

/* ── contabilidad (revisión 13-10) ── */
/* «Cuentas / Subcuentas» de Sumas y saldos: el activo se distingue (antes ese estilo solo existía dentro de .menu) */
.filtros .segmentos { margin: 0; }
/* Libro Mayor: los atajos van en su propia fila y ningún chip se parte en dos líneas */
.mayor-atajos { margin-top: 10px; gap: 6px; }
.mayor-atajos .chip { white-space: nowrap; }
.tabla.cuentas-anuales thead th { padding-top: 8px; padding-bottom: 8px; }
@media (max-width: 720px) {
  /* Libro Diario en el móvil: cada apunte sin N.º ni fecha (van en la cabecera del asiento), para que quepan
     cuenta, nombre, debe y haber sin desplazar la tabla a un lado */
  .tabla.diario, .tabla.diario thead, .tabla.diario tbody { display: block; }
  .tabla.diario tr { display: grid; align-items: center; }
  .tabla.diario thead tr, .tabla.diario tr.as-lin { grid-template-columns: 78px minmax(0, 1fr) 76px 76px; }
  .tabla.diario thead th:nth-child(-n+2), .tabla.diario tr.as-lin td:nth-child(-n+2) { display: none; }
  .tabla.diario thead th, .tabla.diario tr.as-lin td { padding-left: 6px; padding-right: 6px; }
  .tabla.diario tr.as-lin td.n { font-size: var(--t-2xs); }          /* (12 px: cabe «10.404,20» en 76 px) */
  .tabla.diario tr.as-cab { grid-template-columns: 38px 86px minmax(0, 1fr); align-items: start; }
  .tabla.diario tr.as-cab td { height: auto; min-width: 0; padding-left: 6px; padding-right: 6px; line-height: 1.35; }
  .tabla.cuentas-anuales td.n, .tabla.cuentas-anuales th.n { font-size: var(--t-2xs); padding-left: 6px; padding-right: 10px; }
  .tabla.cuentas-anuales tr:not(.tit) td:first-child { padding-left: 18px; }
}

/* ── gráficos (revisión 13-10) ── */
/* El globo con las cifras de un mes (ratón y toque) y la banda que marca el mes */
.grafica .gsel { fill: var(--hover); }
.grafica .anio { font-size: var(--t-2xs); font-weight: 600; }
.graf-tip { position: absolute; z-index: 3; pointer-events: none; min-width: 150px; padding: 8px 11px; background: var(--card); color: var(--texto);
  border: 1px solid var(--linea); border-radius: var(--r-sm); box-shadow: var(--sombra-md); font-size: var(--t-xs); line-height: 1.5; }
.gt-t { font-weight: 600; margin-bottom: 3px; }
.gt-t::first-letter { text-transform: uppercase; }
.gt-f { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.gt-f i { width: 8px; height: 8px; border-radius: var(--r-xs); flex: none; }
.gt-f b { margin-left: auto; padding-left: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.graf-nota { margin-top: 8px; font-size: var(--t-xs); color: var(--tenue); }
.graf-vacia { min-height: 96px; }
/* «Saldo en bancos» (tarjeta oscura): en el tema oscuro no se funde con el fondo de la página */
html.oscuro .kpi.oscuro { background: var(--sub); border-color: var(--linea); }
/* Iconos de «Ir a» (Ventas → Resumen): con tamaño, no a ancho completo */
.lista-mini .it svg { width: 16px; height: 16px; flex: none; }
/* Filas de «Gastos por cuenta contable» y «Antigüedad de saldos»: el importe a la derecha, sin bajar de línea */
.fila.fila-nw { flex-wrap: nowrap; }
.fila-nw .importe { flex: none; white-space: nowrap; }
.barra-h i.resta { background: var(--tenue); opacity: .6; }
@media (max-width: 520px) { .solo-ancho { display: none; } }

/* ── ventas (revisión 13-10) ── */
/* Editor: columnas de las líneas (los anchos iban puestos a mano, celda por celda, y en móvil no cabían) */
.lineas-caja { overflow-x: auto; }
.lineas td.c-cant { width: 72px; min-width: 64px; }
.lineas td.c-precio { width: 120px; min-width: 104px; }
.lineas td.c-dto { width: 64px; min-width: 56px; }
.lineas td.c-iva { width: 104px; min-width: 96px; }
.lineas td select { height: var(--alto-sm); min-height: var(--alto-sm); padding-top: 0; padding-bottom: 0; border-color: transparent; box-shadow: none; background: transparent; }
/* Listas: «Importada» como icono con su explicación al pasar el ratón (el sello duplicaba la altura de cada fila) */
.ico-imp { display: inline-block; margin-left: 4px; vertical-align: middle; }
.ico-imp svg { width: 13px; height: 13px; color: var(--tenue); }
.tabla-ventas .solo-m { display: none; }
.tabla .sub2.aviso-validez { color: var(--av-fg); }
.acc-rec, .nw { white-space: nowrap; }
.kpi .v .nw { white-space: normal; }          /* pegarSimbolos() (nucleo.js) pega cada cifra a su «€»; una cifra grande de una tarjeta que no cabe en ella se parte antes que salirse de la tarjeta */
/* Lista de facturas. Columnas: [casilla] Número · Tipo · Fecha · Cliente · Vence · Base · Total · Pendiente · Estado · [VF] · ⋯
   Ceden primero Tipo y Base (oc-1100: están en el documento) y luego Vence (oc-900); Total, Pendiente y Estado no se quitan nunca.
   Con la barra lateral ancha la lista se queda justa: el relleno se aprieta un poco antes. */
@container (max-width: 1140px) {
  .tabla-ventas th, .tabla-ventas td { padding-left: 10px; padding-right: 10px; }
}
.acc-rec button + button { margin-left: 4px; }
@media (max-width: 720px) {
  /* Líneas del documento: cada una pasa a ser una tarjeta (concepto a lo ancho; debajo, cantidad, precio, descuento, IVA e importe) */
  .lineas thead { display: none; }
  .lineas, .lineas tbody { display: block; }
  .lineas tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 12px 0; border-bottom: 1px solid var(--linea-suave); position: relative; }
  .lineas tr:has(> td[colspan]) { display: block; }
  .lineas td { display: block; width: auto !important; min-width: 0 !important; padding: 0; border: 0; }
  .lineas td:first-child { grid-column: 1 / -1; padding-right: 34px; }
  .lineas td[data-et]::before { content: attr(data-et); display: block; margin-bottom: 3px; font-size: var(--t-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
  .lineas td input, .lineas td select { width: 100%; border-color: var(--linea); background: var(--card); }
  .lineas td.c-iva { grid-column: span 2; }
  .lineas td.imp { padding: 0; text-align: right; align-self: end; font-size: var(--t-md); }
  .lineas td.x { position: absolute; top: 8px; right: 0; }
  .lineas td.x:empty { display: none; }
  .lineas .quitar { opacity: 1; }
}
@container (max-width: 760px) {
  /* Listas de ventas: cada fila, una tarjeta con lo que importa (número, estado, cliente, total, fecha y pendiente);
     el resto de columnas se esconde en vez de quedarse fuera de la pantalla */
  .tabla-ventas, .tabla-ventas tbody { display: block; }
  .tabla-ventas thead { display: none; }
  .tabla-ventas tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 34px; grid-template-areas: "chk num estado acc" "chk cli total acc" "chk fecha pend acc";
    align-items: center; gap: 3px 10px; padding: 11px 12px; border-bottom: 1px solid var(--linea-suave); }
  .tabla-ventas tbody tr:last-child { border-bottom: 0; }
  .tabla-ventas td { display: block; height: auto; padding: 0; border: 0; }
  .tabla-ventas td.chk { grid-area: chk; width: auto; align-self: start; padding: 1px 0 0 2px; }
  .tabla-ventas td.c-num { grid-area: num; }
  .tabla-ventas td.c-estado { grid-area: estado; justify-self: end; text-align: right; }
  .tabla-ventas td.c-cli { grid-area: cli; width: auto; max-width: none; min-width: 0; }
  .tabla-ventas td.c-total { grid-area: total; justify-self: end; }
  .tabla-ventas td.c-fecha { grid-area: fecha; font-size: var(--t-xs); color: var(--tenue); }
  .tabla-ventas td.c-pend, .tabla-ventas td.c-valido { grid-area: pend; justify-self: end; font-size: var(--t-xs); }
  .tabla-ventas td.acc-fila { grid-area: acc; width: auto; padding: 0; align-self: start; }
  /* con .tabla delante: la regla genérica de las tablas que se apilan (más de 8 columnas, `.tabla.apila … td { display: block }`) tiene la misma fuerza y viene después, y en Albaranes,
     Presupuestos y Proformas dejaba «BASE 360,00 €» suelta debajo de la tarjeta */
  .tabla.tabla-ventas td.c-tipo, .tabla.tabla-ventas td.c-vence, .tabla.tabla-ventas td.c-base, .tabla.tabla-ventas td.c-vf { display: none; }
  .tabla-ventas .solo-m { display: inline; }
}

/* ── gastos (revisión 13-10) ── */
.soltar.ocupada { opacity: .55; pointer-events: none; }
.soltar.fina b + span { margin-left: 8px; }
.hoja-filtros { display: flex; align-items: center; gap: 12px; padding: 14px var(--pad-card); border-bottom: 1px solid var(--linea-suave); }
.hoja-filtros button { margin-left: auto; flex: none; }
.buscar-hoja { flex: 1 1 auto; min-width: 300px; max-width: 340px; height: var(--alto-sm); min-height: var(--alto-sm); font-size: var(--t-sm); }          /* (300 px: el texto de 14 px de «Buscar proveedor, número o concepto» no cabía en 280) */
.hoja-tabla a.fila-enlace { color: inherit; text-decoration: none; padding: 5px 0; }   /* el relleno solo agranda la zona de pulsación (24 px) */
.hoja-tabla a.fila-enlace:hover { text-decoration: underline; }
@media (max-width: 720px) { .buscar-hoja { min-width: 0; max-width: none; font-size: var(--t-xs); } }

/* ── tesorería y contactos (revisión 13-10) ── */
/* Tarjetas de cuenta: ocupan toda la fila, el nombre se acorta antes de que la pastilla baje de línea y el «⋯» no es un enlace dentro de otro */
.cuentas:has(> .cuenta:only-child) { grid-template-columns: minmax(260px, 420px); }
.card.cuenta { padding: 0; position: relative; }
.cuenta-enlace { display: block; padding: 16px 18px; color: inherit; text-decoration: none; border-radius: var(--r); }
.cuenta-cab .b { min-width: 0; }
.cuenta-cab .eti { flex: none; }
.cuenta .menu-cuenta { position: absolute; top: 11px; right: 8px; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; }
.cuenta .menu-cuenta svg { width: 16px; height: 16px; }
/* Las dos columnas de «sub2» fuera de las tablas */
.conc .sub2, .ex-fichero .sub2, .plegable .sub2 { font-size: var(--t-xs); color: var(--tenue); margin-top: 1px; }
.conc .lado .icono-lado svg { width: 18px; height: 18px; color: var(--tenue); }
.conc .sug.armada { border-style: solid; border-color: var(--marca); background: var(--marca-suave); box-shadow: 0 0 0 2px var(--marca); }
/* Conciliar en el móvil: el movimiento arriba y su factura o gasto debajo, a todo el ancho */
@media (max-width: 720px) {
  .conc { grid-template-columns: minmax(0, 1fr); }
  .conc.cab-conc, .conc .enlace { display: none; }
  .conc > div { padding: 10px 12px; }
  .conc > div:last-child { border-top: 1px dashed var(--linea-suave); background: var(--sub); }
  .conc .trunc { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .conc .mov { align-items: flex-start; }
  .conc .sug { align-items: flex-start; }
  .conc .sug .pt { flex: none; }
  .conc .fila { flex-wrap: wrap; }
}
/* El icono de un botón dentro de un «vacío» no es el dibujo grande de arriba */
.vacio button svg, .vacio .btn svg { width: 16px; height: 16px; margin: 0; color: currentColor; }
/* Listas plegables (importaciones recientes, cuentas desactivadas) y «ver más» */
details.plegable { background: var(--card); border: 1px solid var(--linea); border-radius: var(--r); }
/* El triángulo va fuera del flujo (position: absolute): el texto y las píldoras del resumen se reparten en líneas entre ellos, pero el ▸ nunca se queda solo
   en una línea y el texto en otra (ESTETICA-05) */
details.plegable > summary { position: relative; cursor: pointer; padding: 13px 20px 13px 40px; font-size: var(--t-sm); font-weight: 500; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary::before { content: '▸'; position: absolute; left: 20px; top: 13px; line-height: calc(var(--t-sm) * 1.5); color: var(--tenue); transition: transform var(--dur); }
details.plegable[open] > summary::before { transform: rotate(90deg); }
.plegable-lista { border-top: 1px solid var(--linea-suave); padding: 6px 20px 10px; display: grid; grid-template-columns: minmax(0, 1fr); }          /* (sin columnas explícitas, una fila que no se parte ensanchaba todas) */
.plegable-lista .fila { padding: 10px 0; flex-wrap: nowrap; border-bottom: 1px solid var(--linea-suave); }
.plegable-lista .fila:last-child { border-bottom: 0; }
@media (max-width: 720px) { .plegable-lista .fila { flex-wrap: wrap; gap: 4px 10px; } }
.mas-movs { padding: 12px; text-align: center; border-top: 1px solid var(--linea-suave); }
/* Importar extractos: elegir, revisar, importar */
.ex-lista { display: grid; gap: 6px; margin-top: 10px; }
.ex-fich { padding: 6px 10px; border: 1px solid var(--linea); border-radius: var(--r); flex-wrap: nowrap; }
.ex-fich svg { width: 16px; height: 16px; color: var(--tenue); vertical-align: -3px; margin-right: 6px; }
.ex-fichero { padding: 14px 16px; margin-bottom: 12px; box-shadow: none; }
.ex-cifras { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 10px; font-size: var(--t-sm); }
.ex-check { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-weight: 500; font-size: var(--t-sm); cursor: pointer; }
.ex-desc td, .ex-muestra td { padding: 5px 8px; font-size: var(--t-xs); }
.ex-fichero .nota details > summary { cursor: pointer; font-weight: 500; margin-top: 4px; }
.ex-fichero .nota.mb:last-of-type { margin-bottom: 10px; }
@media (max-width: 720px) {
  .ex-fichero { padding: 12px; } .ex-cifras { gap: 4px 12px; }
  .modal:has(.ex-fichero) > footer { flex-wrap: wrap; justify-content: flex-end; }
  .modal:has(.ex-fichero) > footer .izq { margin-right: auto; }
  .ex-muestra td:nth-child(2) { max-width: 110px !important; }
  .ex-muestra td:last-child { display: none; }
}
/* Contactos: lo obligatorio, marcado (las listas de Contactos llevan `.tabla-ct`: sus reglas están en carriles/cont.css) */
.req { color: var(--no-fg); font-weight: 600; }

/* ── remates (13-10 noche) ── */
/* Un cuadro con tres botones (p. ej. «¿Es un bien?»): en el móvil los botones pasan a otra línea en vez de salirse */
.modal > footer.pie-ancho { flex-wrap: wrap; }
@media (max-width: 720px) { .modal > footer.pie-ancho button { flex: 1 1 auto; } }

/* ── vf-facturae (13-10 noche) ── */
/* Factura simulada o de pruebas (la AEAT no la tiene): lila, con su palabra, para que no se confunda con «Aceptada» */
.vf-ico.sim { background: var(--lila-bg); color: var(--lila-fg); }
.vf-sim-txt { color: var(--lila-fg); font-weight: 500; white-space: nowrap; }
.sello-sim { flex: none; width: 84px; height: 84px; box-sizing: border-box; display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center;
  border: 1.5px dashed var(--lila-fg); border-radius: var(--r-sm); background: var(--lila-bg); color: var(--lila-fg); font-size: var(--t-2xs); line-height: 1.2; }
.sello-sim svg { width: 20px; height: 20px; }
.sello-sim b { font-size: var(--t-2xs); }
.vp-qr.sim { border: 1px dashed var(--sello-borde); background: var(--sello-fondo); border-radius: var(--r-xs); padding: 3px 6px; color: var(--sello-tinta); text-align: center; justify-items: center; }
.vp-qr.sim b { font-size: .71em; letter-spacing: .04em; }
.vp-qr.sim span { font-size: .62em; color: var(--sello-tinta); }
/* Factura electrónica Facturae: la ventana de antes de descargar, y los datos DIR3 de la ficha del cliente */
.fe-resumen { display: grid; gap: 10px; }
.fe-resumen .nota ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.fe-datos { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: var(--t-sm); }
.fe-datos dt { color: var(--tenue); }
.fe-datos dd { margin: 0; overflow-wrap: anywhere; }
.fe-guia { border: 1px solid var(--linea); border-radius: var(--r); padding: 10px 14px; font-size: var(--t-sm); }
.fe-guia > summary { cursor: pointer; font-weight: 500; }
.fe-guia ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.dir3-bloque { grid-column: 1 / -1; border: 1px solid var(--linea); border-radius: var(--r); padding: 10px 14px; }
.dir3-bloque > summary { cursor: pointer; font-weight: 500; }
.dir3-bloque .campos { margin-top: 10px; }

/* ── export-conta (13-10 noche) ── */
/* La ventana «Exportar a…» del Diario: lo que llevaría el fichero y sus primeras líneas */
#f-exportar .campo[hidden] { display: none; }
#f-exportar .nota ul { margin: 6px 0 0; padding-left: 18px; }
.exp-muestra { border: 1px solid var(--linea); border-radius: var(--r); padding: 8px 12px; font-size: var(--t-xs); margin-bottom: 4px; }
.exp-muestra > summary { cursor: pointer; font-weight: 500; }
.exp-muestra pre { margin: 8px 0 0; overflow-x: auto; font-family: var(--mono); font-size: var(--t-2xs); line-height: 1.55; white-space: pre; padding-bottom: 6px; color: var(--tenue); }
a.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
/* Plantilla «Nómina» del asiento: el líquido es un resultado, no un campo para escribir */
#f-nomina input#nm-liq { text-align: right; font-weight: 600; background: var(--fondo); font-variant-numeric: tabular-nums; }
#f-nomina input#nm-liq.neg { color: var(--no-fg); }
#f-nomina input[readonly]:not(#nm-liq) { background: var(--fondo); }
/* Aviso de Pérdidas y ganancias: el resultado contable no es el de Informes → Resultados, y por qué */
.nota-contraste ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.nota-contraste li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.nota-contraste .imp { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.nota-contraste .imp.neg { color: var(--no-fg); }
@media (max-width: 720px) { .nota-contraste li { grid-template-columns: minmax(0, 1fr); } .nota-contraste .imp { text-align: left; } }

/* ── plataforma (13-10 noche) ── planes, suscripción, solo lectura ───────────────────────────────── */
/* Cuenta en solo lectura (pago pendiente, de baja, prueba acabada): se esconde lo que escribe, como al cliente de consulta
   (la lista de botones es la de «.visor :is(…)» de arriba). El servidor ya cierra las escrituras con un 402 y un mensaje. */
.solo-lectura #btn-nuevo, .solo-lectura #main a[href^="#/ventas/nuevo/"], .solo-lectura #main a[href^="#/contabilidad/asiento/nuevo"] { display: none !important; }
.solo-lectura [data-a="subir-tickets"], .solo-lectura [data-a="subir-facturas"], .solo-lectura [data-a="hacer-foto"] { display: none !important; }
/* Pagar es lo único que el cliente de consulta no puede hacer y la cuenta en solo lectura SÍ (para salir de ahí) */
.visor [data-a="sus-pagar"], .visor [data-a="sus-portal"], .visor [data-a="sus-sincronizar"] { display: none !important; }
.banda.lectura { background: var(--no-bg); color: var(--no-fg); }
.banda.prueba { background: var(--azul-bg); color: var(--azul-fg); }
.banda > .btn { flex: none; }
/* Planes y precios */
.plan-ed { display: flex; flex-direction: column; }
.plan-ed .cc { flex: 1; }
.plan-ed .plan-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--linea-suave); }
.plan-ed .plan-ahorro { margin: -4px 0 12px; min-height: 2.7em; }
.con-sufijo { position: relative; }
.con-sufijo input { padding-right: 28px; text-align: right; font-variant-numeric: tabular-nums; }
.con-sufijo span { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--tenue); pointer-events: none; }
/* Suscripción y plan */
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label:has(input:focus-visible) { outline: 2px solid var(--marca); outline-offset: 1px; }
.sus-planes { align-items: stretch; }
.sus-plan { display: flex; flex-direction: column; }
.sus-plan .cc { display: flex; flex-direction: column; gap: 4px; height: 100%; }
.sus-plan.actual { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca); }
.sus-nom { font-size: var(--t-md); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sus-precio { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.sus-lista { list-style: none; margin: 12px 0 16px; padding: 0; display: grid; gap: 6px; font-size: var(--t-sm); flex: 1; align-content: start; }
.sus-lista li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: var(--r-sm); background: var(--marca); margin-right: 9px; vertical-align: 2px; }
.sus-plan button { width: 100%; justify-content: center; }

/* ── cobros (13-10 noche): remesas SEPA, mandatos, recordatorios e ingresos del banco ── */
.cb-ajustes { padding: 12px 16px 14px; border-top: 1px solid var(--linea-suave); }
.cb-barra { display: flex; align-items: center; gap: 12px; padding: 14px var(--pad-card); border-top: 1px solid var(--linea); position: sticky; bottom: 0; background: var(--card); border-radius: 0 0 var(--r) var(--r); }
.cb-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--t-sm); }
.cb-checks li { display: flex; gap: 9px; align-items: flex-start; }
.cb-checks svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.cb-checks .bien svg { color: var(--ok-fg); }
.cb-checks .mal svg { color: var(--no-fg); }
.cb-checks .aviso svg { color: var(--av-fg); }
.cb-xml { margin: 0; padding: 14px 16px; overflow: auto; max-height: 420px; font-family: var(--mono); font-size: var(--t-xs); line-height: 1.5; border-top: 1px solid var(--linea-suave); white-space: pre; }
.cb-ficha { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea-suave); }
.cb-ficha h4 { font-size: var(--t-xs); font-weight: 600; margin: 0 0 8px; color: var(--tenue); text-transform: uppercase; letter-spacing: .05em; }
.cb-correo-asunto, .cb-correo-texto { background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--r); padding: 10px 12px; font-size: var(--t-sm); }
.cb-correo-texto { white-space: pre-wrap; line-height: 1.55; }
@media (max-width: 720px) { .cb-barra { padding: 10px 12px; flex-wrap: wrap; } .cb-ajustes { padding: 12px; } }

/* ── is-irpf (13-10 noche): modelos 202, 200 y 100, orientativos ──────────────── */
/* El cálculo paso a paso: subtotales con fondo, el resultado en marca, los detalles con sangría */
.is-calculo td { vertical-align: top; padding-top: 8px; padding-bottom: 8px; }
.is-calculo tr.is-sub td { font-weight: 600; background: var(--sub); border-top: 1px solid var(--linea); }
.is-calculo tr.is-tot td { font-weight: 600; font-size: var(--t-md); background: var(--marca-suave); color: var(--marca); border-top: 1px solid var(--linea); }
.is-calculo tr.is-det td:first-child { padding-left: 30px; font-size: var(--t-sm); }
.is-calculo tr.is-det td.n { font-size: var(--t-sm); }
.is-calculo .is-signo { display: inline-block; width: 1.3em; color: var(--tenue); font-variant-numeric: tabular-nums; }
.is-calculo td.acc-fila { width: 44px; }
.is-calculo .sub2 a { color: var(--marca); font-weight: 500; }
/* Los bloques plegables de «Tus datos» */
.is-bloque { border-top: 1px solid var(--linea-suave); padding: 10px 0 2px; }
.is-bloque:first-of-type { border-top: 0; padding-top: 0; }
.is-bloque > summary { cursor: pointer; font-size: var(--t-sm); font-weight: 600; padding: 2px 0 10px; list-style: none; display: flex; align-items: center; gap: 8px; }
.is-bloque > summary::-webkit-details-marker { display: none; }
.is-bloque > summary::before { content: "›"; display: inline-block; width: 10px; color: var(--tenue); transition: transform var(--dur); }
.is-bloque[open] > summary::before { transform: rotate(90deg); }
.is-bloque .campos { grid-template-columns: minmax(0, 1fr); }
.is-bloque .campo.todo { margin-bottom: 10px; }
.is-bloque label.check { display: flex; gap: 6px; align-items: flex-start; font-weight: 400; line-height: 1.4; }
/* El 202: las dos modalidades lado a lado, la que se usa con borde de marca */
.is-mod { border: 1px solid var(--linea); border-radius: var(--r); padding: 16px; background: var(--card); }
.is-mod.elegida { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca) inset; }
.is-mod .tm-imp { font-size: var(--t-xl); font-weight: 600; margin: 10px 0 6px; font-variant-numeric: tabular-nums; }
.is-notas { margin-top: 16px; }
.is-notas > summary { cursor: pointer; font-size: var(--t-sm); font-weight: 500; padding: 4px 0 10px; }
.is-notas .nota { margin-bottom: 8px; }
.is-fuentes { margin-top: 16px; font-size: var(--t-xs); color: var(--tenue); }
.is-fuentes summary { cursor: pointer; }
.is-fuentes ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.is-fuentes a { color: var(--marca); }
@media (max-width: 720px) { .is-calculo tr.is-det td:first-child { padding-left: 18px; } .is-mod { padding: 14px; } }

/* ── iva (13-10 noche) ── */
/* Prorrata general en Ajustes → Empresa: el definitivo de cada año, con su campo para fijarlo a mano */
#e-prorrata { border: 1px solid var(--linea); border-radius: var(--r); padding: 12px 14px; margin-bottom: 14px; }
#prorrata-detalle { margin-top: 12px; }
.prorrata-anio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 8px 0; border-top: 1px solid var(--linea); }
.prorrata-anio .fila { flex-wrap: wrap; gap: 6px; }
@media (max-width: 720px) { .prorrata-anio { align-items: stretch; } }

/* ── rgpd (13-10 noche) ── */
/* Textos legales: una página aparte por encima de todo, se lea con sesión o sin ella (legal.js) */
.legal-pub { position: fixed; inset: 0; z-index: 95; overflow-y: auto; background: var(--fondo); color: var(--texto); }
.legal-barra { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--e3); min-height: 52px; padding: 0 var(--pad-pagina); background: var(--card); border-bottom: 1px solid var(--linea); }
.legal-marca { display: flex; align-items: center; gap: 9px; font-weight: 600; color: var(--texto); flex: none; }
.legal-marca .iso { margin: 0; }
.legal-tabs { display: flex; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex: 1; min-width: 0; margin-left: var(--e2); align-self: stretch; }
.legal-tabs a { height: 100%; min-height: 40px; padding: 0 12px; display: flex; align-items: center; font-size: var(--t-sm); color: var(--tenue); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.legal-tabs a:hover { color: var(--texto); }
.legal-tabs a.activo { color: var(--texto); border-bottom-color: var(--marca); font-weight: 500; }
.legal-caja { max-width: 840px; margin: 0 auto; padding: 26px 20px 56px; outline: none; }
.legal-txt { max-width: none; padding: 26px 30px; }
.legal-txt h1 { font-size: var(--t-2xl); letter-spacing: -.025em; line-height: 1.15; margin-bottom: 6px; }
.legal-txt h2 { font-size: var(--t-lg); letter-spacing: -.01em; margin: 24px 0 6px; }
.legal-txt h3 { font-size: var(--t-md); margin: 16px 0 4px; }
.legal-txt a { color: var(--marca); text-decoration: underline; text-underline-offset: 2px; }
.legal-ped { margin-top: 14px; font-size: var(--t-xs); color: var(--tenue); text-align: center; }
.legal-ped a { color: var(--marca); }
mark.por-rellenar { background: var(--relleno-bg); color: var(--relleno-fg); padding: 0 3px; border-radius: var(--r-xs); }
.legal-aviso a { text-decoration: underline; }
.legal-enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; justify-content: center; font-size: var(--t-xs); line-height: 1.5; color: var(--tenue); }          /* centrados: el punto separador ya no se pega arriba de la caja (ESTETICA-18) */
.legal-enlaces > span { line-height: 1; }
.legal-enlaces a { color: var(--tenue); padding: 4px 2px; }   /* el relleno de un enlace en línea solo agranda la zona de pulsación */
.legal-enlaces a:hover { color: var(--marca); text-decoration: underline; }
/* En la pantalla de entrar el pie va debajo del formulario; las tres piezas se colocan a mano para que no se muevan entre ellas */
.acceso > .acceso-marca { grid-column: 1; grid-row: 1; }
.acceso > .acceso-lado { grid-column: 2; grid-row: 1; }
.acceso > .legal-enlaces { grid-column: 2; grid-row: 1; align-self: end; justify-self: center; padding: 0 16px 16px; z-index: 1; }
@media (max-width: 720px) {
  .acceso > .acceso-lado { grid-column: 1; grid-row: 2; }
  .acceso > .legal-enlaces { grid-column: 1; grid-row: 2; }
  .legal-barra { padding: 8px 12px; flex-wrap: wrap; }
  .legal-tabs { order: 3; flex-basis: 100%; margin-left: 0; }
  .legal-txt { padding: 18px 16px; }
  .legal-caja { padding: 16px 12px 40px; }
}
.menu .legal-menu { padding: 2px 10px 8px; }
.menu .legal-menu .legal-enlaces { justify-content: flex-start; font-size: var(--t-2xs); }
/* (20-10) El menú del usuario, estrecho: antes medía 450 px por culpa de la fila de enlaces legales */
.menu:has(.yo-menu) { width: 272px; min-width: 0; }
/* dentro del menú del usuario, «.menu a» los pintaría como filas: aquí son texto corrido (los enlaces ya no van en el pie del panel de la izquierda: viven en Ajustes → Legal) */
.menu .legal-menu .legal-enlaces a { display: inline; width: auto; height: auto; min-height: 0; padding: 4px 2px; gap: 0; background: transparent; border-radius: 0; font-size: inherit; font-weight: 400; color: var(--tenue); }
.menu .legal-menu .legal-enlaces a:hover { background: transparent; color: var(--marca); }
/* Datos y privacidad, textos legales y borrado de cuentas */
.lg-texto { width: 100%; min-height: 440px; font: var(--t-xs)/1.55 var(--mono); resize: vertical; padding: 10px 12px; }
.rg-h { font-size: var(--t-md); font-weight: 600; margin: 20px 0 6px; }
.rg-reg { padding-bottom: 8px; border-bottom: 1px solid var(--linea-suave); font-size: var(--t-sm); }
.rg-reg:last-child { border-bottom: 0; padding-bottom: 0; }
.rg-avisos { margin: 8px 0 0 18px; display: grid; gap: 3px; font-size: var(--t-xs); }
.rg-conserva { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.rg-conserva li { border: 1px solid var(--linea); border-radius: var(--r); padding: 10px 12px; font-size: var(--t-sm); display: grid; gap: 3px; }
.sep-fino { border: 0; border-top: 1px solid var(--linea-suave); margin: 18px 0; }
.rg-sel { display: flex; gap: 8px; align-items: center; }
.rg-sel > div { flex: 1; min-width: 0; }
@media (max-width: 720px) { .rg-sel { flex-wrap: wrap; } .rg-sel > div, .rg-sel button { flex: 1 1 100%; } }
.modal .rg-conserva li, .modal .rg-h { font-size: var(--t-sm); }

/* ═══════════════════════════════════════════════════════════════════════
   SISTEMA DE DISEÑO · carril CSS (14-10-2026)

   Una variante por componente. Las otras clases siguen funcionando, pero NO se usan en pantallas nuevas.

   Botón ........ <button> o <a class="btn"> primario (verde) · .sec secundario · .fan fantasma · .peligro destructivo
                  tamaños: normal 36 px · .sm 32 · .xs 28 · .ico cuadrado · esperando respuesta: conCarga(boton, f)
   Píldora ...... <span class="eti ok|av|no|gris|azul|lila|borde"> (.sin = sin puntito) · .eti-tipo.cliente|proveedor|ambos|empleado
   Contador ..... <span class="n"> dentro de .sub a / .tabs a / .sub-chips a, o <span class="contador [av]">
   Tabla ........ <div class="caja-tabla"><table class="tabla"> · cifras: class="n" (derecha y tabulares) · 2.ª línea: <div class="sub2">
                  columnas que ceden: class="oc-1100|oc-900|oc-760" en la cabecera Y en las celdas (se ocultan cuando la CAJA mide menos)
                  en el móvil (apila + data-th): 4 columnas o más → tarjetas; 2 o 3 → siguen siendo tabla; «sin-apilar» → tabla siempre
                  una columna que se estira (cliente, nombre): td.cli-c · cabecera: una sola (11 px, mayúsculas) y baja de línea antes de desplazar la tabla
   Tarjeta ...... .card > .ct (título h3 + extras) + .cc (cuerpo) · KPI: .card.kpi > .k (etiqueta) + .v (cifra 26) + .s (pie)
                  cifra que no es un importe (fecha, plan, formato): .v.txt (20) — nada de style="font-size"
   Vistas ....... .tabs (navegar entre vistas, con contador) · .segmentos / .seg (elegir un modo) · .chip (filtros y atajos)
   Ventana ...... .velo > .modal > header + .cuerpo + footer ([.izq destructivo] … Cancelar .sec + acción principal)
   Avisos ....... .nota (+ .ok .av .no .azul): se queda en pantalla · avisar(): el aviso emergente (#avisos .aviso) · .banda: franja de arriba
   Vacío ........ vacio(): .vacio con icono, título y botón · gráfica sin datos: .graf-vacia · zona de soltar: .soltar
   Formulario ... .campo > label + input|select|textarea (+ .pista) · error: aria-invalid="true" y <div class="pista error">
   Carga ........ cargando(el) y conCarga(boton, f) de nucleo.js · .esqueleto/.sk-* · .spinner · .cargando-txt (su ruedecita sale sola si no lleva .spinner)
   Barra ........ .progreso (relleno verde) o .barra-h (color por modificador): la misma, de 10 px · lista de explicaciones: .lista-mini.texto
   Casillas ..... input[type=checkbox|radio]: dibujadas a mano, caja de 24 px y dibujo de 18 (nada de width/height/margin-top en los carriles)

   Tokens: texto --t-3xs … --t-2xl (10 · 11 · 12 · 13 · 14 · 16 · 20 · 26) · control --alto-md/sm/xs (36 · 32 · 28)
           esquinas --r (8) --r-sm (6) --r-xs (3, cuadraditos) --r-pill · espacio --e1 … --e6 (4 · 8 · 12 · 16 · 24 · 32) · movimiento --dur --curva (+ --dur-lenta/-giro/-carga/-brillo)
           colores sobre fondo oscuro --sobre-oscuro… · papel (vista previa, ticket, sellos) --papel… · todo CSS, también el de los carriles, sin #hex ni px de letra (test_carriles.py)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Estado de carga (ESTETICA2-18, ESTETICA1-30) ──
   La pantalla entera y los botones los gestiona nucleo.js (estadoCarga, cargando(), conCarga()) con sus estilos en carriles/uin.css:
   #main.cargando, la barra #carga y button.btn-carga. Aquí, lo que falta para el resto: ruedecita (.spinner, arriba), texto y esqueletos. */
/* Esqueletos: bloques grises que brillan donde irá el contenido */
.esqueleto, .sk { display: block; border-radius: var(--r-sm); color: transparent; user-select: none;
  background: linear-gradient(90deg, var(--linea-suave) 30%, var(--hover) 50%, var(--linea-suave) 70%) 0 0 / 300% 100%; animation: brillo var(--dur-brillo) ease-in-out infinite; }
.sk-linea { height: 12px; margin: 8px 0; }
.sk-linea.corta { width: 40%; }
.sk-titulo { height: 24px; width: 220px; margin-bottom: 8px; }
.sk-kpi { height: 84px; border-radius: var(--r); }
.sk-card { height: 160px; border-radius: var(--r); }
.sk-fila { height: var(--fila); margin: 2px 0; }
@keyframes brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.cargando-txt { display: flex; align-items: center; gap: var(--e2); padding: var(--e4); color: var(--tenue); font-size: var(--t-sm); }
/* La ruedecita de «Cargando…» sale sola, salvo que el texto ya lleve su propio <span class="spinner"> (no salen dos) */
.cargando-txt:not(:has(> .spinner))::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gira var(--dur-giro) linear infinite; }

/* ── Utilidades de espaciado (sustituyen los style="margin-top:…" de los JS) y de texto ── */
.mt-4 { margin-top: var(--e1); } .mt-8 { margin-top: var(--e2); } .mt-12 { margin-top: var(--e3); } .mt-16, .mt { margin-top: var(--e4); } .mt-24 { margin-top: var(--e5); }
.mb-4 { margin-bottom: var(--e1); } .mb-8 { margin-bottom: var(--e2); } .mb-12 { margin-bottom: var(--e3); } .mb-16 { margin-bottom: var(--e4); } .mb-24 { margin-bottom: var(--e5); }
.gap-4 { gap: var(--e1); } .gap-8 { gap: var(--e2); } .gap-12 { gap: var(--e3); } .gap-16 { gap: var(--e4); }
.etiqueta-mayus { font-size: var(--t-2xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.alinea-arriba { align-items: start; }   /* en una .grid: cada tarjeta mide lo suyo, sin estirarse hasta la más alta */
.lista-mini.scroll { max-height: 340px; overflow-y: auto; }

/* ── Columnas que ceden: se ocultan cuando la CAJA de la tabla (no la pantalla) mide menos ──
   Poner la clase en el <th> y en todos los <td> de la columna. Lo importante (importe, estado, acciones) no la lleva. */
@container (max-width: 1100px) { .oc-1100 { display: none; } }
@container (max-width: 900px) { .oc-900 { display: none; } }
@container (max-width: 760px) { .oc-760 { display: none; } }

/* ── Móvil: zonas de pulsación cómodas ── */
@media (max-width: 720px) {
  /* Un botón con un texto largo («Crear el grupo con ENIGMA GLOBAL SL como dominante») se parte en líneas en vez de cortarse contra el borde de la pantalla */
  :is(.cc, .cuerpo, .acc, .fila, .banda) > :is(button, .btn):not(.xs, .ico, .chip, .quitar, .pet-check) { white-space: normal; height: auto; min-height: var(--alto-md); padding-top: 8px; padding-bottom: 8px; text-align: center; line-height: 1.3; }
  button.xs, .btn.xs, .chip, .sub-chips a { height: var(--alto-sm); }
  button.xs.ico, .btn.xs.ico { width: var(--alto-sm); }
  .marca-barra { min-height: 36px; }
  .tabs a, .pest-lat button { height: 44px; }
}

/* (el nombre de la empresa ya no tiene un tope de 170 px por debajo de 800: la barra de arriba reparte el sitio y el nombre acaba en «…» solo si no cabe) */

/* Caja de tabla estrecha (la mitad de la página, o una pantalla pequeña): 8 px a cada lado en vez de 10 */
@container (max-width: 1100px) { .tabla th, .tabla td { padding-left: 12px; padding-right: 12px; } }
@container (max-width: 940px) { .tabla th, .tabla td { padding-left: 10px; padding-right: 10px; } }
@container (max-width: 760px) { .tabla th, .tabla td { padding-left: 8px; padding-right: 8px; } }
@container (max-width: 700px) { .tabla th, .tabla td { padding-left: 6px; padding-right: 6px; } }
/* En una caja estrecha (a 1024 px con el panel abierto quedan unos 640 px) las tablas vuelven al texto de 13 px: con 14 y las columnas de siempre, las de 6 a 8 columnas (Libro Diario,
   Sumas y saldos, Inmovilizado, Proveedores…) se desplazaban de lado, y una tabla no debe hacerlo nunca en escritorio. Con más sitio, 14 px. */
@container (max-width: 760px) {
  .tabla, .tabla.tabla-meses th, .tabla.tabla-meses td, .tabla.diario tr.as-lin td, .tabla.cuentas-anuales td { font-size: var(--t-xs); }
}

/* ── tablas anchas con «apila» (8 columnas o más): tarjetas por el ancho de su caja ── */
@container (max-width: 1060px) {
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(> thead th:nth-child(8))), .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(> thead th:nth-child(8))) tbody, .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(> thead th:nth-child(8))) tfoot { display: block; }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(> thead th:nth-child(8))) thead { display: none; }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(> thead th:nth-child(8))) tbody tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px 16px; padding: 13px 16px; border-bottom: 1px solid var(--linea-suave); }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(> thead th:nth-child(8))) tbody tr:last-child { border-bottom: 0; }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(> thead th:nth-child(8))) tfoot tr { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; padding: 12px 16px; background: var(--sub); border-top: 1px solid var(--linea); font-weight: 600; }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(> thead th:nth-child(8))) td { display: block; height: auto; padding: 0; border: 0; min-width: 0; max-width: none; text-align: left; white-space: normal; }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(> thead th:nth-child(8))) td.n { text-align: left; white-space: normal; }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(> thead th:nth-child(8))) td[data-th]::before { content: attr(data-th); display: block; font-size: var(--t-2xs); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--tenue); margin-bottom: 2px; }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(> thead th:nth-child(8))) td:first-child::before { display: none; }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(> thead th:nth-child(8))) td:first-child, .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(> thead th:nth-child(8))) td:last-child, .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(> thead th:nth-child(8))) td.todo-ancho { grid-column: 1 / -1; }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(> thead th:nth-child(8))) td:last-child .fila { flex-wrap: wrap !important; justify-content: flex-start !important; }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(> thead th:nth-child(8))) td.acc-fila { width: auto; text-align: left; }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(> thead th:nth-child(8))) td:is(.uso-pasado, .uso-casi, .uso-lleno) { padding: 6px 8px; border-radius: var(--r-sm); }
  .tabla.apila:where(:not(.sin-apilar, .diario)):where(:has(> thead th:nth-child(8))) td:empty { display: none; }
}

.rail > * { flex: none; }
.rail .hueco { flex: 1 0 0; }
.rail { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }          /* nueve grupos: en una pantalla baja se desplaza (sin barra visible) en vez de cortar los de abajo */
.rail::-webkit-scrollbar { display: none; }
@media (max-height: 760px) {
  .rail a, .rail button.r { height: 46px; gap: 2px; }
  .rail button.yo { height: 50px; }
  .rail svg { width: 18px; height: 18px; }
  .rail .iso { margin-bottom: 8px; }
  .rail .marca-g { margin-bottom: 6px; }
}


.pasos-modelo .paso-m > div { min-width: 0; flex: 1; }
.pasos-modelo button.sm, .pasos-modelo .btn.sm { max-width: 100%; height: auto; min-height: var(--alto-sm); padding-top: 6px; padding-bottom: 6px; white-space: normal; text-align: left; }
.eti { max-width: 100%; }
.card .cc .eti, .nota .eti { white-space: normal; }          /* una píldora larga dentro de un texto puede bajar de línea (en un resumen plegable, no: ahí es la línea la que salta) */
.tabla .eti, .hoja-tabla .eti { white-space: nowrap; }

@media (max-width: 720px) {
  :where(.caja-tabla > table.tabla:not(.apila, .diario, .tabla-ventas)) :where(th, td):first-child { position: sticky; left: 0; background-color: var(--card); box-shadow: 1px 0 0 var(--linea-suave); }
  .caja-tabla > table.tabla:not(.apila, .diario, .tabla-ventas) th:first-child { z-index: 3; }
  .caja-tabla > table.tabla:not(.apila, .diario, .tabla-ventas) td:first-child { z-index: 1; }
}

@media print { .caja-tabla { max-height: none !important; overflow: visible !important; } }


/* ── (17-10) Colores del modo oscuro que se pueden elegir en Ajustes («Cómo ves qConta»). Sin elegir nada, el oscuro de arriba. Solo se notan con html.oscuro. ── */
/* intenso: el verde claro de antes del 19-10 (botones y acento en #79c67f, fondos con tinte verde) para quien lo prefiera */
html.oscuro[data-paleta="intenso"] {
  --rail: #0b1a13; --fondo: #0f1713; --sub: #121c17; --card: #16211b; --texto: #e8f0ea; --tenue: #a3b0a7; --campo-borde: #74827a;
  --boton: var(--marca); --boton-fg: var(--marca-fg);
  --marca: #79c67f; --marca-suave: rgb(121 198 127 / .14); --foco: #79c67f; --ring: rgb(121 198 127 / .35); --verde-claro: #79c67f;
  --ok-bg: rgb(121 198 127 / .16); --ok-fg: #8fd694; --g-ventas: #4cb882; --g-cobros: #3f9d57;
}
/* grafito: Gris neutro; el verde solo en el botón principal y en los datos */
html.oscuro[data-paleta="grafito"] {
  --boton: #2f7d52; --boton-fg: #ffffff;                 /* el botón principal en un verde más apagado; el verde claro queda para el texto y el foco */
  --rail: #0b0c0d; --fondo: #111213; --sub: #141516; --card: #1a1b1d; --texto: #ececee; --tenue: #a2a4a8; --campo-borde: #6b6e74;
  --marca: #6fbf8a; --marca-suave: rgb(111 191 138 / .12); --foco: #6fbf8a; --ring: rgb(111 191 138 / .3); --verde-claro: #6fbf8a;
  --linea: rgb(255 255 255 / .09); --linea-suave: rgb(255 255 255 / .05); --linea-fuerte: rgb(255 255 255 / .2);
  --hover: rgb(255 255 255 / .05); --rail-hover: rgb(255 255 255 / .06); --rail-activo: rgb(255 255 255 / .1);
}
/* monocromo: Gris neutro y botones blancos; el verde solo en el logo */
html.oscuro[data-paleta="monocromo"] {
  --boton: var(--marca); --boton-fg: var(--marca-fg);
  --rail: #0b0c0d; --fondo: #111213; --sub: #141516; --card: #1a1b1d; --texto: #ececee; --tenue: #a2a4a8; --campo-borde: #6b6e74;
  --marca: #e8e8ea; --marca-fg: #111213; --marca-suave: rgb(255 255 255 / .08); --foco: #e8e8ea; --ring: rgb(255 255 255 / .25); --verde-claro: #79c67f;
  --linea: rgb(255 255 255 / .09); --linea-suave: rgb(255 255 255 / .05); --linea-fuerte: rgb(255 255 255 / .2);
  --hover: rgb(255 255 255 / .05); --rail-hover: rgb(255 255 255 / .06); --rail-activo: rgb(255 255 255 / .1);
}
html.oscuro[data-paleta="monocromo"] .iso { background: var(--verde-claro); }
/* pizarra: Gris azulado, como GitHub */
html.oscuro[data-paleta="pizarra"] {
  --boton: #2f7d52; --boton-fg: #ffffff;                 /* el botón principal en un verde más apagado; el verde claro queda para el texto y el foco */
  --rail: #0b1016; --fondo: #0f141a; --sub: #121920; --card: #172029; --texto: #e6edf3; --tenue: #9aa7b4; --campo-borde: #5f6e7d;
  --marca: #6fbf8a; --marca-suave: rgb(111 191 138 / .12); --foco: #6fbf8a; --ring: rgb(111 191 138 / .3); --verde-claro: #6fbf8a;
  --linea: rgb(255 255 255 / .09); --linea-suave: rgb(255 255 255 / .05); --linea-fuerte: rgb(255 255 255 / .2);
  --hover: rgb(255 255 255 / .05); --rail-hover: rgb(255 255 255 / .06); --rail-activo: rgb(255 255 255 / .1);
}
/* carbon: Gris cálido, como Notion */
html.oscuro[data-paleta="carbon"] {
  --boton: #2f7d52; --boton-fg: #ffffff;                 /* el botón principal en un verde más apagado; el verde claro queda para el texto y el foco */
  --rail: #121110; --fondo: #191817; --sub: #1c1b1a; --card: #232120; --texto: #ece9e5; --tenue: #a9a39c; --campo-borde: #736d66;
  --marca: #74bf8c; --marca-suave: rgb(116 191 140 / .12); --foco: #74bf8c; --ring: rgb(116 191 140 / .3); --verde-claro: #74bf8c;
  --linea: rgb(255 255 255 / .09); --linea-suave: rgb(255 255 255 / .05); --linea-fuerte: rgb(255 255 255 / .2);
  --hover: rgb(255 255 255 / .05); --rail-hover: rgb(255 255 255 / .06); --rail-activo: rgb(255 255 255 / .1);
}