/* ═══════════════════════════════════════════════════════════════════════
   Carril UIN (núcleo del frontend): estilos de lo que publican nucleo.js y exportar.js.
   Se carga después de estilo.css y solo lo toca su dueño (UIN). Usa los tokens de estilo.css (--card, --linea,
   --marca…) y no define colores sueltos salvo el naranja de Claude.
   ═══════════════════════════════════════════════════════════════════════ */

:root { --claude: #d97757; }          /* el naranja de Claude (icono de «Revisar con Claude»): lo único de color propio de este fichero */
html.oscuro { --claude: #e58a6b; }
/* La estrella de Claude (ICO.claude) va rellena: el naranja es su «fill», no el «color» de su alrededor (el menú y los botones ponen sus iconos en gris) */
.ico-claude { fill: var(--claude); stroke: none; }
/* …un poco mayor que los demás iconos del menú y de los botones (18 px en vez de 16, con margen negativo para no mover el texto): es una forma maciza y a 16 px se queda en una mancha */
.sub a svg.ico-claude, .menu svg.ico-claude, .btn svg.ico-claude, button svg.ico-claude { width: 18px; height: 18px; margin: -1px; }
.rail-sub a svg.ico-claude { width: 17px; height: 17px; }
/* En la cabecera de «Revisar con Claude» la estrella llena su cajita (48 px, antes 44 con la estrella de 26) */
.titulo-con-icono > .claude-icono { width: 48px; height: 48px; }
.titulo-con-icono > .claude-icono svg { width: 32px; height: 32px; }

/* Lo que solo lee un lector de pantalla */
.solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── el estado «cargando» ─────────────────────────────────────────────── */
/* La barra fina de arriba del contenido (nucleo.js → estadoCarga). Mide 0 de alto: no mueve nada al aparecer. */
.carga { position: relative; height: 0; flex: none; z-index: 30; }
.carga i { position: absolute; left: 0; right: 0; top: 0; height: 2px; overflow: hidden; background: color-mix(in oklab, var(--marca) 16%, transparent); }
.carga i::after { content: ""; position: absolute; top: 0; bottom: 0; width: 34%; border-radius: var(--r-xs); background: var(--marca); animation: carga-ir var(--dur-carga) ease-in-out infinite; }
@keyframes carga-ir { 0% { left: -34%; } 100% { left: 100%; } }
/* Lo que se está cargando se atenúa y no admite clics (así no se actúa sobre algo que está a punto de cambiar) */
.cargando { opacity: .5; pointer-events: none; transition: opacity var(--dur); }
.cargando-vacio { padding: 64px 20px; text-align: center; color: var(--tenue); font-size: var(--t-md); }
/* El botón que espera una respuesta (conCarga): una ruedecita al lado del texto */
button.btn-carga::after { content: ""; width: 13px; height: 13px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gira var(--dur-giro) linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .carga i::after { animation: none; width: 100%; opacity: .55; }
  button.btn-carga::after { animation: none; }
}

/* ── teclado ──────────────────────────────────────────────────────────── */
/* Las filas que se abren con un clic también se abren con el teclado (nucleo.js → prepararFilas): se ve cuál tiene el foco */
[data-ir]:focus-visible, tr.clic:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
tr[data-ir]:focus-visible td, tr.clic:focus-visible td { background: var(--hover); }
.modal:focus { outline: none; }

/* ── el desplegable de periodo (selectorPeriodo) ─────────────────────── */
select.selector-periodo { width: auto; min-width: 190px; }
select.selector-periodo option.op-anio { font-weight: 600; }       /* en la lista, el año («2026») se lee como el encabezado de sus trimestres («Q4 2026»…) */

/* ── las pestañas de Inicio (en vez de su panel lateral) ──────────────── */
/* Una tira bajo la barra de arriba, a todo el ancho: del mismo blanco que la barra y sin raya entre las dos (una sola cabecera). La primera pestaña
   empieza donde empieza el contenido, que lleva --pad-pagina a cada lado. En el móvil se desplaza de lado si no caben. */
.tabs-modulo { flex: none; background: var(--card); border-bottom: 1px solid var(--linea); padding: 0 calc(var(--pad-pagina) - 12px); }
.tabs-modulo a { height: 44px; padding: 0 12px; }
.principal:has(.tabs-modulo:not([hidden])) .barra { border-bottom-color: transparent; }
@media (max-width: 720px) { .tabs-modulo a { height: 44px; } }

/* ── el menú lateral ──────────────────────────────────────────────────── */
/* Los iconos de los modelos (ICO.modelo): un poco mayores para que el número se lea, sin mover el texto */
/* (los márgenes negativos hacen que ocupe lo mismo que un icono de 16 px: todas las filas del menú miden igual) */
.sub a svg.ico-modelo { width: 22px; height: 22px; margin: -3px; }
html[data-nav] .rail .rail-sub a svg.ico-modelo { width: 20px; height: 20px; margin: -2.5px; }
.sub a.activo svg.ico-modelo { color: var(--marca); }
/* El pie del panel sin los enlaces: solo la empresa, bien alineada */
.sub .pie-sub { line-height: 1.5; }

/* Icono de modelo grande (cabeceras y listas): el número y el impuesto debajo, teñido según el impuesto */
.ico-modelo.grande { width: 40px; height: 48px; flex: none; }
.ico-modelo.grande.tono-iva { color: var(--ok-fg); }
.ico-modelo.grande.tono-irpf { color: var(--azul-fg); }
.ico-modelo.grande.tono-is { color: var(--lila-fg); }
.ico-modelo.grande.tono-otro { color: var(--av-fg); }
/* Una cabecera con icono delante: <div class="titulo-con-icono">ICO.modelo(303, 'IVA', {grande:true})<div><h1>…</h1><p>…</p></div></div> */
.cab > .titulo-con-icono, .titulo-con-icono { display: flex; align-items: center; gap: 14px; }
.titulo-con-icono .ico-modelo.grande { width: 44px; height: 53px; }
/* El texto de la cabecera ocupa todo lo que deja el icono (ENCARGOS-07): sin esto medía lo que el título («Revisar con Claude»: 230 px de 1.100) y la frase caía en cuatro líneas */
.titulo-con-icono > :last-child { flex: 1 1 0; min-width: 0; }
.titulo-con-icono > .claude-icono { flex: none; }

/* ═══ Exportación de información (exportar.js) ═══════════════════════════ */
.exp-empresa { display: flex; align-items: center; gap: 10px; margin: -6px 0 18px; font-size: var(--t-sm); color: var(--tenue); }
.exp-empresa svg { width: 16px; height: 16px; flex: none; }
.exp-empresa b { color: var(--texto); font-weight: 500; }
.exp-cuerpo { display: grid; gap: 16px; }          /* a todo el ancho de la cabecera: con un tope de 1040 px las tarjetas acababan 20 px antes que el selector de periodo (ESTETICA-17) */
.exp-sec { overflow: hidden; }
.exp-cab { display: flex; align-items: center; gap: 14px; padding: 16px 20px 12px; }
.exp-cab-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: var(--r); background: var(--marca-suave); color: var(--marca); }          /* 30 px, como el icono de cada fila: el título de la tarjeta y el de sus filas empiezan en el mismo sitio */
.exp-cab-ico svg { width: 16px; height: 16px; }
.exp-cab h2 { font-size: var(--t-md); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.exp-cab p { font-size: var(--t-sm); color: var(--tenue); margin-top: 1px; }
.exp-aviso { padding: 4px 20px 14px; font-size: var(--t-sm); }
.exp-sub { font-size: var(--t-xs); font-weight: 600; color: var(--tenue); padding: 12px 20px 6px; }      /* sin mayúsculas: «3.er trimestre» no es «3.ER» */
.exp-lista { list-style: none; }
.exp-fila { display: flex; align-items: center; gap: 14px; padding: 13px 20px; border-top: 1px solid var(--linea-suave); }
.exp-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; color: var(--tenue); }
.exp-ico svg { width: 22px; height: 22px; }
.exp-ico svg.ico-modelo { width: 28px; height: 28px; color: var(--texto); }
.exp-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.exp-txt b { font-weight: 500; font-size: var(--t-md); text-wrap: balance; }
.exp-txt > span { font-size: var(--t-sm); color: var(--tenue); max-width: 72ch; }
.exp-txt > .exp-nota { color: var(--av-fg); }
.exp-bot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; flex: none; max-width: 46%; }
.exp-aviso-res { margin: 0 20px 18px; }
@media (max-width: 720px) {
  .exp-fila { flex-wrap: wrap; align-items: flex-start; padding: 12px 16px; gap: 10px 12px; }
  .exp-txt { flex-basis: calc(100% - 46px); }
  .exp-bot { flex-basis: 100%; max-width: none; justify-content: flex-start; padding-left: 42px; }
  .exp-cab, .exp-aviso, .exp-sub { padding-left: 16px; padding-right: 16px; }
  .exp-aviso-res { margin-left: 16px; margin-right: 16px; }
}

/* ═══ Teclado y lectores de pantalla (INTERFAZ-06, INTERFAZ-23) ═══════════ */
/* «Saltar al contenido»: invisible hasta que recibe el foco con Tab (es lo primero que se alcanza) */
.saltar { position: fixed; left: 12px; top: 8px; z-index: 1000; transform: translateY(-200%); padding: 8px 14px; border-radius: var(--r); background: var(--marca); color: var(--marca-fg);
  font-size: var(--t-sm); font-weight: 500; text-decoration: none; transition: transform var(--dur) var(--curva); }
.saltar:focus { transform: none; outline: 2px solid var(--foco); outline-offset: 2px; }
#main:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .saltar { transition: none; } }

/* ═══ Las migas de pan son enlaces (ESTETICA2-06) ═════════════════════════ */
.migas a { color: var(--tenue); border-radius: var(--r-sm); }
.migas a:hover { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; }
.migas a:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
/* «‹ Facturas»: el camino de vuelta visible donde se esconde el menú de la izquierda (el editor de una factura, la revisión en serie) */
.migas .miga-volver { display: none; }
.app.enfoque .migas .miga-volver { display: inline-flex; align-items: center; gap: 2px; min-height: 24px; margin-right: 12px; padding: 0 10px 0 4px; border-right: 1px solid var(--linea); color: var(--texto); font-weight: 500; }
.app.enfoque .migas .miga-volver:hover { color: var(--marca); }
.migas .miga-volver svg { width: 16px; height: 16px; flex: none; margin: 0; vertical-align: -3px; color: currentColor; }
@media (max-width: 720px) {          /* en el móvil las migas se esconden, pero en el modo de enfoque el camino de vuelta se queda, entre la marca y los botones */
  .app.enfoque .barra { display: flex; align-items: center; gap: 8px; }
  .app.enfoque .marca-barra, .app.enfoque .barra-der { flex: none; }
  .app.enfoque .marca-barra b { display: none; }          /* queda el isotipo sin el nombre: así el «‹ Gastos» cabe entero en 375 px (la revisión en serie, el editor de una factura) */
  .app.enfoque .migas { display: block; flex: 1 1 auto; max-width: none; min-width: 0; text-align: right; }
  .app.enfoque .migas > :not(.miga-volver) { display: none; }
  .app.enfoque .migas .miga-volver { margin-right: 0; padding-right: 0; border-right: 0; max-width: 100%; }
}

/* La nota del buscador («Hay más: escribe algo más para afinar») */
.buscar .res .pista-buscar { padding: 2px 10px 6px; }

/* El nombre del grupo dentro de la tira de chips (tablet y móvil): una etiqueta pequeña, sin ser un chip */
.sub-chips .chip-grupo { flex: none; align-self: center; margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--linea); white-space: nowrap;
  font-size: var(--t-2xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.sub-chips > .chip-grupo:first-child { margin-left: 0; padding-left: 0; border-left: 0; }

/* ═══ Una tabla en una columna estrecha (15-10) ══════════════════════════ */
/* El histórico de versiones de la declaración (Ajustes → Declaración) vive en la columna de la derecha, de unos 240 px de ancho útil a 1280 px. Con el relleno y el
   texto de 14 px sus tres columnas (la versión «2.1+9dc99216f4cd», el estado y «PDF») piden 280: en vez de desplazar la tabla de lado, cada fila pasa a dos líneas
   (la versión arriba; el estado y el botón, debajo) cuando su caja mide menos de 280 px. */
@container (max-width: 280px) {
  .tabla-version, .tabla-version tbody { display: block; }
  .tabla-version thead { display: none; }
  .tabla-version tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--linea-suave); }
  .tabla-version tr:last-child { border-bottom: 0; }
  .tabla-version td { display: block; height: auto; padding: 0; border: 0; }
  .tabla-version td:first-child { flex: 1 1 100%; }
  .tabla-version td.acc-fila { width: auto; margin-left: auto; }
}

/* ═══ Importar gastos: las tres zonas de soltar a la misma altura (15-10) ═══ */
/* Con el texto de 14 px las descripciones de las tres tarjetas (gast.css: .imp-cab p) se partían en 3, 3 y 4 líneas a 1280 px y las zonas de soltar quedaban a distinta
   altura. Las descripciones son texto secundario: 13 px, como hasta el 14-10. */
.imp-card .imp-cab p { font-size: var(--t-xs); }

/* ═══ La hoja de gastos: un n.º corto no se parte por el guion (15-10) ═══ */
/* «A-0001» medía 43,2 px y la columna se quedaba en 42,7 (el texto es de 12 px y la hoja reparte su ancho entre diez columnas): como la celda puede romper en cualquier sitio
   (gast.css: overflow-wrap: anywhere), partía «A-» y «0001». Con un mínimo de 46 px de texto no se parte nunca; el n.º largo sigue bajando a dos líneas con sus 104 px. */
.hoja-tabla .corta-num { min-width: 46px; }

/* (18-10) Novedades: el punto de «Tú» cuando hay algo sin ver, y las tarjetas de la pantalla */
.r.yo { position: relative; }
.punto-nov { position: absolute; top: var(--e1); right: var(--e1); width: var(--e2); height: var(--e2); border-radius: 50%; background: var(--no-solido); border: 2px solid var(--rail); }
.nov-lista { display: grid; gap: var(--e3); max-width: 46rem; }
.nov-item.nov-nueva { border-color: var(--marca); }
/* Novedades por actualización, con la versión que tienes (20-10) */
.nov-version { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2) var(--e3); margin: calc(-1 * var(--e2)) 0 var(--e4); }
.nov-grupo { display: grid; gap: var(--e3); }
.nov-grupo + .nov-grupo { margin-top: var(--e4); }
.nov-fecha { margin: 0; font-size: var(--t-md); font-weight: 600; }
.nov-fecha .tenue { font-weight: 400; font-size: var(--t-sm); }
.nov-item h3 { font-size: var(--t-md); }

/* (18-10) La campana de avisos del equipo (campana.js): un botón redondo junto al selector de empresa, con el número de lo nuevo */
.campana { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--alto-md); height: var(--alto-md); padding: 0; background: transparent; color: var(--tenue); border-radius: 50%; flex: none; }
.campana[hidden] { display: none; }
.campana:hover { background: var(--hover); opacity: 1; }
.campana-ico svg { width: 20px; height: 20px; }
.campana-n { position: absolute; top: 0; right: 0; min-width: var(--e4); height: var(--e4); padding: 0 var(--e1); border-radius: var(--r-pill); background: var(--marca); color: var(--marca-fg); font-size: var(--t-xs); font-weight: 600; line-height: var(--e4); text-align: center; }
.campana-n[hidden] { display: none; }
.campana-lista { display: grid; gap: var(--e1); max-height: 60vh; overflow-y: auto; min-width: min(22rem, 86vw); }
.menu .campana-it { display: grid; justify-content: stretch; gap: 2px; text-align: left; height: auto; padding: var(--e2) var(--e3); white-space: normal; border-left: var(--e1) solid transparent; }
.campana-it .e { font-size: var(--t-xs); color: var(--tenue); }
.campana-it.nuevo { border-left-color: var(--marca); }
.campana-it.urgente .t { color: var(--no-fg); font-weight: 600; }