/* Carril FISC: estilos propios de este carril. Se carga después de estilo.css; solo lo toca su dueño.
   Impuestos: el calendario como línea de tiempo (fx-linea, fx-mes, fx-tarj), todos los modelos (fx-modelo) y el manual (fx-manual).
   Solo tokens de estilo.css (nada de colores ni tamaños sueltos) y rejillas con minmax(0, 1fr): se leen igual a 1440, 1280 y 390 px. */

/* ── tira de los doce meses ───────────────────────────────────────────── */
.fx-tira { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: var(--e1); margin-bottom: var(--e4); }
.fx-tira .fx-mes-b { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: auto; min-height: 40px; padding: var(--e1) 0;
  background: var(--card); color: var(--texto); border: 1px solid var(--linea); border-radius: var(--r); white-space: normal; }
.fx-tira .fx-mes-b:hover:not(:disabled) { background: var(--hover); opacity: 1; }
.fx-tira .fx-mes-b span { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); }
.fx-tira .fx-mes-b i { font-style: normal; font-size: var(--t-xs); font-weight: 600; min-width: 22px; line-height: 20px; padding: 0 6px; border-radius: var(--r-pill);
  text-align: center; font-variant-numeric: tabular-nums; }
.fx-tira .fx-mes-b i:empty { visibility: hidden; }
.fx-tira .fx-mes-b i.ok { background: var(--ok-bg); color: var(--ok-fg); }
.fx-tira .fx-mes-b i.av { background: var(--av-bg); color: var(--av-fg); }
.fx-tira .fx-mes-b i.gris { background: var(--gris-bg); color: var(--gris-fg); }
.fx-tira .fx-mes-b.hoy { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.fx-tira .fx-mes-b.vacio { background: transparent; border-color: transparent; cursor: default; }
.fx-tira .fx-mes-b.vacio span { color: var(--tenue); }

/* ── la línea de tiempo ───────────────────────────────────────────────── */
.fx-linea { --sang: var(--e5); position: relative; padding-left: var(--sang); margin-bottom: var(--e4); }
.fx-linea::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--linea); }
.fx-mes { position: relative; scroll-margin-top: var(--e4); }
.fx-mes::before { content: ""; position: absolute; left: calc(-1 * var(--sang)); top: 5px; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%;
  background: var(--card); border: 2px solid var(--linea-fuerte); }
.fx-mes.actual::before { background: var(--marca); border-color: var(--marca); }
.fx-mes > h2 { display: flex; align-items: baseline; gap: var(--e2); margin: 0 0 var(--e3); font-size: var(--t-lg); font-weight: 600; text-transform: capitalize; }
.fx-mes > h2 span { font-size: var(--t-sm); font-weight: 400; color: var(--tenue); }
.fx-plegado { margin-bottom: var(--e4); }
.fx-plegado > summary { cursor: pointer; font-size: var(--t-sm); color: var(--tenue); padding: var(--e1) 0 var(--e3); }
.fx-plegado[open] > summary { color: var(--texto); }
@media (max-width: 760px) { .fx-linea { --sang: var(--e4); } }

/* ── una tarjeta por plazo ────────────────────────────────────────────── */
.fx-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
/* La tarjeta es una columna: lo de arriba arriba y los botones SIEMPRE abajo del todo, así en una fila de tarjetas de distinta altura los botones quedan a la misma altura (ESTETICA-02) */
.fx-tarj { display: flex; flex-direction: column; min-width: 0; background: var(--card);
  border: 1px solid var(--linea); border-radius: var(--r); }
.fx-tarj > .fx-acc { margin-top: auto; padding-top: var(--e1); }
.fx-tarj.est-en_plazo { border-color: color-mix(in oklab, var(--av-fg) 45%, transparent); box-shadow: inset 3px 0 0 var(--av-fg); }
.fx-tarj.est-presentado { box-shadow: inset 3px 0 0 var(--ok-fg); }
.fx-tarj.est-no_aplica { background: var(--fondo); border-style: dashed; }
.fx-cab { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: var(--e3); align-items: start; }          /* la fecha y el icono arriba, a la misma altura en todas las tarjetas de la fila (ESTETICA-20) */
.fx-fecha { display: grid; justify-items: center; line-height: 1.05; min-width: 34px; }
.fx-fecha b { font-size: var(--t-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.fx-fecha span { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); }
.fx-tarj.est-en_plazo .fx-fecha b { color: var(--av-fg); }
.fx-ico { display: grid; place-items: center; }
.fx-ico a { display: grid; color: inherit; }
.fx-tit { min-width: 0; }
.fx-tit h3 { margin: 0; font-size: var(--t-md); font-weight: 600; overflow-wrap: anywhere; }
.fx-tit h3 a { color: var(--texto); }
.fx-tit h3 a:hover { color: var(--marca); text-decoration: underline; }
.fx-tit p { margin: 2px 0 0; font-size: var(--t-xs); color: var(--tenue); text-wrap: balance; }        /* (ESTETICA-29: ni «abr» sola en la segunda línea) */
.fx-nw { white-space: nowrap; }
.fx-medio { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--e2) var(--e3); }
.fx-importe { margin-left: auto; text-align: right; font-weight: 500; min-width: 0; }
.fx-importe .imp { white-space: normal; }
.fx-notas { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: var(--t-xs); color: var(--tenue); }
.fx-dif { display: flex; gap: var(--e2); align-items: flex-start; padding: var(--e2) var(--e3); font-size: var(--t-xs); color: var(--no-fg); background: var(--no-bg); border-radius: var(--r-sm); }
.fx-dif svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
/* Los botones de una tarjeta, en columnas iguales: de dos en dos cuando la tarjeta es estrecha (antes «Ya está presentado» se quedaba solo, a la derecha de una fila
   vacía) y todos en una fila cuando cabe */
/* (ESTETICA-02: con minmax(150px) la tarjeta de 1440 px, que mide 303 px por dentro, pedía 308 y los cuatro botones caían en una columna; con 120 caben dos por fila a partir de 248 px
   y los cuatro en una a partir de 504) */
.fx-tarj, .fx-modelo { container-type: inline-size; }
/* Un texto que no cabe en su columna («Lo presento igualmente») baja de línea en vez de salirse del botón */
.fx-acc > :is(button, .btn) { white-space: normal; height: auto; min-height: var(--alto-sm); padding-top: 4px; padding-bottom: 4px; line-height: 1.25; text-align: center; justify-content: center; }

/* ── lo que va plegado: opcionales y «no son para ti» ─────────────────── */
.card.fx-plegable { margin-bottom: var(--e3); }
.fx-plegable > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e3) var(--e4); cursor: pointer; list-style: none; }
.fx-plegable > summary::-webkit-details-marker { display: none; }
.fx-plegable > summary::after { content: ""; width: 8px; height: 8px; flex: none; border-right: 2px solid var(--tenue); border-bottom: 2px solid var(--tenue);
  transform: rotate(45deg); transition: transform var(--dur) var(--curva); }
.fx-plegable[open] > summary::after { transform: rotate(-135deg); }
.fx-plegable[open] > summary { border-bottom: 1px solid var(--linea); }
.fx-sum { display: grid; gap: 2px; min-width: 0; }
.fx-td-ico { display: flex; align-items: center; gap: var(--e2); }
.fx-td-ico svg.ico-modelo { width: 24px; height: 24px; flex: none; color: var(--tenue); }
.fx-n { font-weight: 500; }
.fx-noaplican { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--e2) var(--e4); margin: 0 0 var(--e3); padding: 0; list-style: none; }
.fx-noaplican a { display: flex; align-items: center; gap: var(--e2); color: var(--texto); padding: var(--e1) 0; }
.fx-noaplican a:hover span b { color: var(--marca); }
.fx-noaplican svg.ico-modelo { width: 24px; height: 24px; flex: none; color: var(--tenue); }
.fx-noaplican small { display: block; font-size: var(--t-xs); color: var(--tenue); }
.fx-chip-mod { display: inline-flex; align-items: center; gap: 4px; margin: 0 var(--e2) var(--e1) 0; font-weight: 500; }
.fx-chip-mod svg.ico-modelo { width: 20px; height: 20px; flex: none; }

/* ── todos los modelos ────────────────────────────────────────────────── */
.fx-modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--e3); }
.fx-modelo { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; padding: var(--e3) var(--e4); background: var(--card); border: 1px solid var(--linea); border-radius: var(--r); }
.fx-modelo > .fx-acc { margin-top: auto; padding-top: var(--e1); }
.fx-modelo.ajeno { background: var(--fondo); }
.fx-modelo-cab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e3); align-items: center; }
.fx-modelo-cab h3 { margin: 0; font-size: var(--t-md); font-weight: 600; overflow-wrap: anywhere; }
.fx-modelo-cab h3 a { color: var(--texto); }
.fx-modelo-cab h3 a:hover { color: var(--marca); text-decoration: underline; }
.fx-modelo-cab p { margin: 2px 0 0; font-size: var(--t-xs); color: var(--tenue); }
.fx-modelo .fx-ico { color: inherit; }
.fx-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-etiquetas .eti svg { width: 12px; height: 12px; }
.fx-para, .fx-si { margin: 0; font-size: var(--t-xs); color: var(--tenue); }
/* «Por qué te sale» / «por qué no te sale»: una línea por modelo, con el motivo en negrita; lo que sale va con el texto normal y lo que no, más tenue */
.fx-porque { margin: 0; font-size: var(--t-xs); line-height: 1.45; color: var(--texto); overflow-wrap: anywhere; }
.fx-porque b { font-weight: 600; }
.fx-porque.no_hay, .fx-porque.no_aplica { color: var(--tenue); }
.fx-porque.no_hay b, .fx-porque.no_aplica b { color: var(--texto); }
.fx-para b { color: var(--texto); font-weight: 500; }
.fx-forma svg { width: 14px; height: 14px; }

/* ── el manual dentro del programa ────────────────────────────────────── */
.fx-manual .fx-col { gap: var(--e4); align-content: start; }
.fx-lista { display: grid; gap: 6px; margin: 0; padding-left: 18px; font-size: var(--t-sm); }
.fx-lista li, .fx-pasos li { min-width: 0; overflow-wrap: anywhere; }         /* una dirección larga en el texto de un manual no ensancha la pantalla en el móvil */
.fx-pasos { display: grid; gap: var(--e2); margin: 0 0 var(--e3); padding-left: 22px; font-size: var(--t-sm); }
.fx-pl { width: 34%; }
.fx-bloque { padding: var(--e3) 0 0; }
.fx-bloque h4 { margin: 0 var(--e4) var(--e2); font-size: var(--t-sm); font-weight: 600; color: var(--tenue); }
.fx-cas td.cas { width: 84px; white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.fx-cas td { vertical-align: top; height: auto; }
.fx-como { margin-top: 2px; font-size: var(--t-sm); overflow-wrap: anywhere; }
.fx-fuentes { display: grid; gap: 6px; margin: 0 0 var(--e3); padding: 0; list-style: none; font-size: var(--t-sm); }
.fx-fuentes a { overflow-wrap: anywhere; }
.fx-total td { border-top: 1px solid var(--linea); }

/* ── piezas de las pantallas de un modelo ─────────────────────────────── */
.titulo-con-icono h1 { overflow-wrap: anywhere; }
.nota a { color: var(--marca); font-weight: 500; }
.tabs.mb { margin-bottom: var(--e4); }
.tabs a svg { width: 14px; height: 14px; }
.cab .acc .fx-forma { align-self: center; }
.fx-col .card.kpi.resultado-modelo { min-width: 0; }

/* ── tu perfil, en el calendario ───────────────────────────────────────── */
.fx-perfil { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); margin: 0 0 var(--e3); }
.fx-perfil .fx-perfil-edita { margin-left: var(--e2); padding: 3px 0; font-size: var(--t-xs); font-weight: 500; color: var(--marca); text-decoration: underline; }          /* 24 px de alto de zona de pulsación */

/* ── la ficha de la empresa: «Con lo que has elegido» ──────────────────── */
.aj-sub { margin: var(--e4) 0 var(--e2); font-size: var(--t-sm); font-weight: 600; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; }
.perfil-fiscal { display: grid; gap: var(--e3); margin-top: var(--e4); padding: var(--e4); background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--r); }
.pf-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); }
.pf-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-grupo h5 { margin: 0 0 var(--e2); font-size: var(--t-sm); font-weight: 600; }
.pf-mods { display: flex; flex-wrap: wrap; gap: var(--e2); }
.pf-mod { display: inline-flex; align-items: center; gap: var(--e2); padding: var(--e1) var(--e3) var(--e1) var(--e2); background: var(--card); border: 1px solid var(--linea); border-radius: var(--r); }
.pf-mod svg.ico-modelo { width: 24px; height: 24px; flex: none; }
.pf-mod span { display: grid; line-height: 1.2; }
.pf-mod b { font-size: var(--t-sm); font-weight: 600; }
.pf-mod small { font-size: var(--t-xs); color: var(--tenue); }
.perfil-fiscal .nota { margin: 0; }

/* ── los datos que escribe la persona (131, 184, 308, 309 y el IVA del 303) ── */
.fx-editor { display: grid; gap: var(--e5); }
.fx-grupo { display: grid; gap: var(--e3); align-content: start; min-width: 0; }
.fx-grupo[hidden] { display: none; }
.fx-grupo > h4 { margin: 0; font-size: var(--t-md); font-weight: 600; }
.fx-grupo > .pista { margin: calc(-1 * var(--e2)) 0 0; }
.fx-filas { display: grid; gap: var(--e3); }
.fx-fila-f { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--e3); align-items: end; position: relative; min-width: 0;
  padding: var(--e3) var(--e6) var(--e3) var(--e3); background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--r); }
.fx-fila-f .campo { min-width: 0; margin: 0; }
.fx-fila-f .campo.todo { grid-column: 1 / -1; }
.fx-fila-f .fx-quita { position: absolute; top: var(--e2); right: var(--e2); }
.fx-act { padding-top: var(--e4); }
/* Lo menos usado de una actividad del simplificado (reducciones, reparto, temporada y loterías), plegado */
.fx-mas { grid-column: 1 / -1; }
.fx-mas > summary { cursor: pointer; color: var(--tenue); font-size: var(--t-sm); padding: var(--e1) 0; }
.fx-mas-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--e3); align-items: end; padding-top: var(--e3); }
.fx-mas-campos .campo { min-width: 0; margin: 0; }
.fx-fila-q { display: grid; grid-template-columns: 90px repeat(3, minmax(0, 1fr)); gap: var(--e3); align-items: end; }
.fx-fila-q > b { font-size: var(--t-sm); padding-bottom: var(--e2); }
@media (max-width: 760px) { .fx-fila-q { grid-template-columns: minmax(0, 1fr); } }
.fx-marcas { margin-bottom: var(--e3); }

/* ── los grupos en la ficha de la empresa (Ajustes): solo se ven; se definen en Impuestos → Grupos de empresas ── */
.campo-grupo .rotulo { display: block; font-size: var(--t-sm); font-weight: 500; margin-bottom: 5px; }
.campo-grupo .valor { margin: 0; padding: 8px 0 2px; font-size: var(--t-sm); }
.campo-grupo .nota { margin-top: var(--e2); }
.campo-grupo .nota[hidden] { display: none; }
.campo-grupo .nota b { display: block; }

/* ── el manual: una dirección larga o un texto sin espacios no ensancha la pantalla (el 200, el 202, el 222, el 322 y el 353 llevan la de la Sede en «Cómo se presenta») ── */
.fx-manual p, .fx-manual td, .fx-manual .tenue, .fx-manual .sub2 { overflow-wrap: anywhere; min-width: 0; }

/* El aviso emergente en ámbar: «mira esto», no un error (R-IKER-14: el del prefijo del justificante salía en rojo). Lo pinta presAvisoAmbar (impuestos.js) en #avisos; sólido en los dos temas */
#avisos .aviso.av { background: color-mix(in oklab, var(--av-fg) 16%, var(--card)); color: var(--texto); border: 1px solid color-mix(in oklab, var(--av-fg) 45%, transparent); cursor: pointer; }

/* (18-10) Buscador de casillas y validación antes del fichero («Ir al error») */
.fx-cas-bus { padding: var(--e3) var(--e3) 0; }
.fx-cas-buscar { width: 100%; }
tr.fx-cas-marca td { background: var(--av-bg); transition: background-color var(--dur); }
.fx-val { display: flex; align-items: center; gap: var(--e2); padding: var(--e2) 0; border-top: 1px solid var(--linea-suave); flex-wrap: wrap; }
.fx-val:first-child { border-top: 0; }
.fx-val-txt { flex: 1 1 14rem; font-size: var(--t-sm); }
.fx-validacion { border-color: var(--no-solido); }

/* ── Bloque 8: presentar un modelo en la AEAT (la confirmación, el resultado y el lote) ── */
.pres-conf { display: grid; gap: 0; margin: var(--e3) 0; }
.pres-fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e3); padding: var(--e2) 0; border-bottom: 1px solid var(--linea-suave); }
.pres-fila > .tenue:first-child { flex: 0 0 9rem; }
.pres-importe b { font-size: var(--t-xl); font-weight: 600; }
.pres-banda b { display: block; margin: 0; }
.pres-conforme { align-items: flex-start; }

/* Avisos de una pantalla de modelo: lo que no pide actuar va plegado (UI 19-10) */
.notas-mas > summary { cursor: pointer; width: fit-content; padding: var(--e1) var(--e2); margin-left: calc(-1 * var(--e2)); font-size: var(--t-xs); color: var(--tenue); border-radius: var(--r-sm); }
.notas-mas > summary:hover { color: var(--texto); background: var(--hover); }
.notas-mas[open] > summary { margin-bottom: var(--e2); }

/* ═════════════════════════════════════════ Impuestos 2.0 (calendario) ══
   Menos cajas: el aviso y el perfil en una línea; las tres cifras en una sola tarjeta con rayas; el bloqueo de trimestres, plegado; y en cada modelo, un botón
   principal y lo demás sin caja. */
.fx-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e5); margin: 0 0 var(--e5); }
.fx-meta .fx-perfil, .fx-meta .aviso-fiscal { margin: 0; }
.fx-resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 20-10 (Iker: «las pastillas ahí en medio, feo; lo de arriba, tres cuartas partes de lo mismo»): el resumen más bajo y la tira de meses más ligera */
.fx-res { padding: var(--e3) var(--e4); display: grid; align-content: start; gap: 2px; min-width: 0; }
.fx-res + .fx-res { border-left: 1px solid var(--linea-suave); }
.fx-res .k { font-size: var(--t-sm); color: var(--tenue); }
.fx-res .v { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.fx-res .v.txt { font-size: var(--t-lg); }
.fx-res .s { font-size: var(--t-xs); color: var(--tenue); }
@media (max-width: 860px) { .fx-resumen { grid-template-columns: minmax(0, 1fr); } .fx-res + .fx-res { border-left: 0; border-top: 1px solid var(--linea-suave); } }
.blq-tira > .blq-trims { padding: var(--e4); }
.fx-acc { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.fx-acc > .btn:not(.fan) { flex: 1 1 100%; }          /* el botón principal, a todo el ancho de la tarjeta; lo demás, debajo y sin caja */
.fx-acc > .fan { padding-left: var(--e2); padding-right: var(--e2); height: var(--alto-xs); min-height: 0; font-size: var(--t-xs); color: var(--tenue); }
.fx-acc { column-gap: var(--e1); }
.fx-acc > .fan:hover { color: var(--texto); }
.fx-rejilla { gap: var(--e4); }
.fx-tarj { padding: var(--e4) var(--e5); gap: var(--e3); }
.fx-mes { margin-bottom: var(--e6); }