/* Fuentes autoalojadas (subset latin) — generado por fonts/build_fonts.py */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/archivo-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibmplexmono-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibmplexmono-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibmplexmono-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/ibmplexsans-400-italic.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url(/fonts/ibmplexsans-400-normal.woff2) format('woff2')}

@font-face{font-family:'Archivo respaldo';src:local('Arial');size-adjust:119.62%;ascent-override:73.40%;descent-override:17.56%;line-gap-override:0%}
@font-face{font-family:'IBM Plex Sans respaldo';src:local('Arial');size-adjust:120.75%;ascent-override:84.88%;descent-override:22.77%;line-gap-override:0%}
/* VeriFactu Claro — estilo documento fiscal */

/* ---------------------------------------------------------------- TOKENS
   Dos familias de color:
   - Las "de papel" (papel, tinta, blanco, linea) se invierten en modo oscuro.
   - Las "de cromo" (--chrome*) NO se invierten: la barra de plazo, el pie, las
     cabeceras de tabla y los bloques de código siguen siendo azul tinta oscuro
     en ambos modos. Es lo que mantiene reconocible la identidad del sitio y
     evita el fallo clásico de invertirlo todo y acabar con texto blanco sobre
     fondo blanco. */
:root{
  color-scheme:light dark;
  --tinta:#152238;
  --tinta-suave:#3c4a63;
  --papel:#f6f5f1;
  --blanco:#ffffff;
  --sello:#c22f21;
  --sello-texto:#9e2016;   /* rojo oscurecido para texto pequeño: AA sobre papel */
  --timbre:#20509e;
  --ok:#187a4b;
  --linea:#d9d6cc;
  --linea-fuerte:#8d8778;  /* bordes de elementos pulsables: >=3:1 (WCAG 1.4.11) */
  --medida:44rem;          /* Medida de las paginas CON indice lateral: el sobrante de la
                              columna de texto lo ocupa la columna 2. En rem y no en ch:
                              'ch' es el ancho del cero DE LA FUENTE DEL ELEMENTO, asi que
                              la ficha en monoespaciada resolvia distinto que el cuerpo si
                              se usaba esa unidad. Por encima de las ~80 caracteres que
                              recomienda WCAG 1.4.8 (AAA, no obligatorio en AA): se prioriza
                              aprovechar el ancho de la pagina sobre el limite ideal. */
  --sombra:rgba(21,34,56,.12);
  --cebra:#fbfaf7;
  --hover-suave:#eef2fa;
  /* Cromo: constante en ambos modos */
  --chrome:#152238;
  --chrome-texto:#ffffff;
  --chrome-tenue:#c8cedd;
  --chrome-linea:#2b3a57;
  --chrome-acento:#ffd9d4;
  --e0:.15rem; --e1:.3rem; --e2:.6rem; --e3:.85rem; --e4:1.15rem;
  --e5:1.5rem; --e6:2.4rem; --e7:3.4rem;   /* escala de espaciado */
  --alto-cabecera:6rem;                    /* debe seguir a header.site pegajosa */
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'IBM Plex Sans','IBM Plex Sans respaldo',system-ui,sans-serif;
  --display:'Archivo','Archivo respaldo',var(--sans);
}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]){
    --tinta:#e7e4dd;
    --tinta-suave:#a9b2c4;
    --papel:#11151d;
    --blanco:#1a2029;
    --sello:#f0655a;
    --sello-texto:#ff9086;
    --timbre:#84acf0;
    --ok:#4fcb8d;
    --linea:#2e3746;
    --linea-fuerte:#66718a;
    --sombra:rgba(0,0,0,.5);
    --cebra:#1e242e;
    --hover-suave:#232c3a;
  }}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--alto-cabecera)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body{margin:0;font-family:var(--sans);color:var(--tinta);background:var(--papel);line-height:1.65;font-size:1.06rem;-webkit-text-size-adjust:100%}

/* Barra countdown permanente */
.barra-plazo{background:var(--chrome);color:var(--chrome-texto);font-family:var(--mono);font-size:.82rem;text-align:center;padding:var(--e1) var(--e3);letter-spacing:.02em}
.barra-plazo strong{color:var(--chrome-acento);font-weight:600}
.bp-corto{display:none}
@media(max-width:760px){.bp-largo{display:none}.bp-corto{display:inline}}
/* Reserva de ancho para el contador: evita CLS al inyectar el número por JS */
[data-plazo],[data-plazo-res]{display:inline-block;min-width:3ch;text-align:center}

header.site{background:var(--blanco);border-bottom:2px solid var(--tinta);position:sticky;top:0;z-index:40}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--e4)}
/* Sin índice lateral que ocupe la columna sobrante (home, checklist, FAQ,
   legales y guías cortas), el texto no tiene por qué quedarse en la medida
   pensada para dejar hueco a esa columna: se ensancha para usar la página. */
.wrap:not(.wrap-guia){--medida:62rem}
nav.principal{display:flex;align-items:center;gap:var(--e4);flex-wrap:wrap;padding:var(--e3) 0}
.logo{font-family:var(--display);font-weight:800;font-size:1.3rem;text-decoration:none;color:var(--tinta);letter-spacing:-.02em;flex:none}
.logo span{color:var(--sello)}
nav.principal ul{display:flex;gap:var(--e1) var(--e4);flex-wrap:wrap;list-style:none;margin:0 0 0 auto;padding:0;font-size:.92rem}
nav.principal li{max-width:none}
nav.principal a{color:var(--tinta-suave);text-decoration:none;padding:var(--e1) 0;border-bottom:2px solid transparent;white-space:nowrap}
nav.principal a:hover,nav.principal a[aria-current=page]{color:var(--tinta);border-bottom-color:var(--sello)}
nav.principal a:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--timbre);outline-offset:2px;border-radius:2px}
/* Sobre el azul tinta del pie y del enlace de salto, el azul del foco daba 2,05:1.
   El blanco da 15,94:1 y funciona sobre cualquiera de las dos superficies. */
footer.site a:focus-visible,.saltar:focus-visible,.saltar:focus{outline:3px solid var(--chrome-texto);outline-offset:2px}

/* Saltar al contenido (accesibilidad) */
.saltar{position:fixed;left:-9999px;top:0;z-index:100;background:var(--chrome);color:var(--chrome-texto);padding:var(--e2) var(--e4);font-family:var(--mono);font-size:.85rem}
.saltar:focus{left:.5rem;top:.5rem}

/* Conmutador de tema. Nace con hidden y lo revela el JS: sin JS no
   funcionaria, y un control muerto es peor que ninguno. */
.tema{font:inherit;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
      text-transform:uppercase;background:none;border:1px solid var(--linea-fuerte);
      color:var(--tinta-suave);padding:var(--e1) var(--e2);cursor:pointer;flex:none;
      margin-left:var(--e2)}
.tema:hover{color:var(--tinta);border-color:var(--tinta)}
@media(max-width:760px){.tema{order:-1;margin-left:auto}}

/* Miga de pan (breadcrumb) */
.miga{font-family:var(--mono);font-size:.78rem;color:var(--tinta-suave);margin:0 0 var(--e4);letter-spacing:.02em}
.miga a{color:var(--tinta-suave);text-decoration:none}
.miga a:hover{color:var(--sello);text-decoration:underline}
.miga span[aria-current]{color:var(--tinta)}

main{padding:var(--e6) 0 var(--e7)}
/* Escala fluida: antes h1 crecía hasta 3rem mientras h2 y h3 se quedaban fijos,
   así que en pantallas grandes la jerarquía se aplanaba. */
h1{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4.5vw,3rem);line-height:1.12;letter-spacing:-.025em;margin:var(--e1) 0 var(--e4);text-wrap:balance}
h2{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2.4vw,1.75rem);line-height:1.25;letter-spacing:-.015em;margin:var(--e6) 0 var(--e2);text-wrap:balance}
h3{font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,1.5vw,1.2rem);line-height:1.35;margin:var(--e5) 0 var(--e2)}
p,li{max-width:var(--medida)}
a{color:var(--timbre)}
a:hover{text-decoration-thickness:2px}
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sello-texto);margin:0}
.intro{font-size:1.15rem;color:var(--tinta-suave);max-width:var(--medida);text-wrap:pretty}

/* ---------------------------------------------------- RETÍCULA DE GUÍA
   Al estrechar la prosa a su medida legible quedaba una columna derecha vacía
   de 474 px y cinco bordes derechos distintos por página. Esa columna es
   justamente donde debe ir el aparato de una obra de consulta: el índice.
   Por debajo de 1080 px la retícula se deshace y el índice se pliega arriba. */
.col-texto,.col-cabecera{min-width:0}
.indice{font-size:.88rem;background:none;border:0;padding:0;margin:0}
.indice summary{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sello-texto);margin:0 0 var(--e2);padding:0;font-weight:600}
.indice ol{list-style:none;margin:0;padding:0;counter-reset:sec}
.indice li{counter-increment:sec;margin:0;max-width:none;border-left:2px solid var(--linea);padding:0}
.indice a{display:block;padding:var(--e1) var(--e2);color:var(--tinta-suave);text-decoration:none;line-height:1.35;border-left:2px solid transparent;margin-left:-2px}
.indice a::before{content:counter(sec) ". ";font-family:var(--mono);font-size:.78rem;color:var(--tinta-suave);opacity:.7}
.indice a:hover{color:var(--tinta);border-left-color:var(--sello);background:var(--blanco)}
.indice a[aria-current="true"]{color:var(--tinta);border-left-color:var(--sello);background:var(--blanco);font-weight:600}

@media(min-width:1080px){
  .wrap-guia{max-width:63rem;display:grid;grid-template-columns:minmax(0,46rem) 13.6rem;
             gap:var(--e7);align-items:start}
  .wrap-guia > .miga{grid-column:1/-1;grid-row:1}
  .wrap-guia > .col-cabecera{grid-column:1;grid-row:2}
  .wrap-guia > .col-texto{grid-column:1;grid-row:3}
  /* El indice abarca las dos filas de contenido: si solo ocupara la de la
     cabecera, el sticky quedaria preso de ese alto y no acompanaria al texto. */
  .wrap-guia > .indice{grid-column:2;grid-row:2/span 2}
  .indice{position:sticky;top:var(--alto-cabecera);max-height:calc(100vh - 8rem);overflow-y:auto;
          scrollbar-width:thin;padding-bottom:var(--e2)}
  /* En escritorio no hay nada que plegar: la lista queda fija. */
  .indice summary{list-style:none;cursor:default;pointer-events:none}
  .indice summary::-webkit-details-marker{display:none}
}
@media(max-width:1079px){
  /* Sin columna lateral el indice se pliega: cerrado ocupa una linea. Orientarse
     en una guia de 1.400 palabras sigue haciendo falta en un telefono; lo que no
     cabe es la lista entera comiendose un tercio de la primera pantalla. */
  .indice{border:1px solid var(--linea-fuerte);background:var(--blanco);
          padding:var(--e3) var(--e4);margin:0 0 var(--e5);max-width:var(--medida)}
  .indice summary{cursor:pointer;margin:0}
  .indice[open] summary{margin:0 0 var(--e2)}
  .indice ol{columns:2;column-gap:var(--e5)}
  .indice li{break-inside:avoid}
}
@media(max-width:560px){.indice ol{columns:1}}

/* Ficha de artículo bajo el H1: autoría, fecha de revisión y tiempo de lectura */
.ficha-art{font-family:var(--mono);font-size:.8rem;color:var(--tinta-suave);margin:-.4rem 0 var(--e5);letter-spacing:.01em;max-width:var(--medida);border-bottom:1px solid var(--linea);padding-bottom:var(--e3)}
.ficha-art a{color:var(--tinta-suave)}
.ficha-art time{white-space:nowrap}

/* "Que cambio en esta revision": el lector que vuelve necesita saber si lo que
   recuerda sigue valiendo. Plegado por defecto para no competir con el H1. */
.cambios{background:none;border:0;border-left:2px solid var(--linea-fuerte);
         padding:0 0 0 var(--e3);margin:calc(var(--e5) * -1) 0 var(--e5);max-width:var(--medida)}
.cambios summary{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--tinta-suave);padding:var(--e1) 0;font-weight:400}
.cambios summary:hover{color:var(--tinta)}
.cambios p{font-size:.9rem;color:var(--tinta-suave);margin:var(--e1) 0 var(--e2);max-width:none}
.cambios[open]{border-left-color:var(--sello)}

/* Sello countdown — elemento firma */
.sello-plazo{display:inline-block;transform:rotate(-2deg);vertical-align:top;border:3px double var(--sello);color:var(--sello);padding:var(--e3) var(--e5);margin:var(--e5) var(--e4) var(--e5) 0;font-family:var(--mono);background:var(--blanco);box-shadow:2px 3px 0 var(--sombra)}
.sello-plazo .num{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:600;letter-spacing:.04em}
.sello-plazo .txt{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase}
.sello-plazo + .sello-plazo{transform:rotate(1.5deg)}

/* Test interactivo */
.test{background:var(--blanco);border:1.5px solid var(--tinta);box-shadow:5px 5px 0 var(--sombra);padding:var(--e5);margin:var(--e5) 0;scroll-margin-top:var(--alto-cabecera)}
.test .num-reg{font-family:var(--mono);font-size:.75rem;color:var(--tinta-suave);display:flex;justify-content:space-between;gap:var(--e4);border-bottom:1px solid var(--linea);padding-bottom:var(--e2);margin-bottom:var(--e4);flex-wrap:wrap}
.test h2{margin-top:0}
.pregunta p{font-weight:600;font-size:1.12rem}
.opciones{display:grid;gap:var(--e2);margin-top:var(--e3)}
.opciones button{font:inherit;text-align:left;background:var(--papel);border:1.5px solid var(--linea-fuerte);padding:var(--e3) var(--e4);cursor:pointer;color:var(--tinta);transition:border-color .12s,background .12s}
.opciones button:hover{border-color:var(--timbre);background:var(--hover-suave)}
.progreso{font-family:var(--mono);font-size:.78rem;color:var(--tinta-suave);margin-top:var(--e4)}
.resultado{border-top:2px dashed var(--linea);margin-top:var(--e4);padding-top:var(--e4);display:flex;gap:var(--e4);align-items:flex-start;flex-wrap:wrap}
.resultado .sello-res{flex:0 0 84px;opacity:.85}
.resultado.afecta .sello-res{color:var(--sello)}
.resultado.exento .sello-res{color:var(--ok)}
.resultado .veredicto{font-family:var(--display);font-weight:800;font-size:1.35rem;margin:0 0 var(--e1)}
.resultado.afecta .veredicto{color:var(--sello)}
.resultado.exento .veredicto{color:var(--ok)}
.reiniciar{background:none;border:none;color:var(--timbre);font:inherit;cursor:pointer;text-decoration:underline;padding:0;margin-top:var(--e3)}

/* Figuras. width/height van en el HTML para reservar el hueco y no provocar CLS. */
figure{margin:var(--e5) 0}
figure img{max-width:100%;height:auto;display:block;border:1px solid var(--linea)}
figcaption{font-size:.85rem;color:var(--tinta-suave);padding-top:var(--e2);line-height:1.45;text-wrap:pretty}
/* Los diagramas son PNG de fondo claro: en modo oscuro se enmarcan en papel
   para que se lean como una lámina pegada y no como un fogonazo blanco. */
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]) figure:not(.foto-post) img,:root:not([data-tema="claro"]) .ficha-diagrama img{background:#f6f5f1;padding:var(--e2);border-color:#39445a}:root:not([data-tema="claro"]) .blog-indice img{background:#f6f5f1}}

/* Fichas de la página de diagramas libres de uso */
.ficha-diagrama{border:1px solid var(--linea);background:var(--blanco);padding:var(--e4);margin:var(--e5) 0}
.ficha-diagrama h3{margin:0 0 var(--e1)}
.ficha-diagrama img{max-width:100%;height:auto;display:block;border:1px solid var(--linea);margin:var(--e3) 0}
.ficha-diagrama .mini{font-size:.88rem;color:var(--tinta-suave);margin:var(--e1) 0 var(--e2)}
.ficha-diagrama pre{background:var(--chrome);color:#e8eaf0;padding:var(--e3);overflow-x:auto;font-size:.8rem;line-height:1.5;margin:var(--e2) 0 0;border:1px solid var(--chrome-linea)}
.ficha-diagrama code{font-family:var(--mono);white-space:pre}

/* Tablas */
.tabla-scroll{overflow-x:auto;margin:var(--e4) 0;-webkit-overflow-scrolling:touch}
.tabla-scroll table{margin:0;min-width:32rem}
table{border-collapse:collapse;width:100%;margin:var(--e4) 0;background:var(--blanco);font-size:.97rem}
caption{text-align:left;font-family:var(--mono);font-size:.78rem;color:var(--tinta-suave);padding-bottom:var(--e1)}
th,td{border:1px solid var(--linea);padding:var(--e2) var(--e3);text-align:left;vertical-align:top}
th{background:var(--chrome);color:var(--chrome-texto);font-family:var(--mono);font-weight:500;font-size:.85rem;letter-spacing:.03em}
tr:nth-child(even) td{background:var(--cebra)}
td.fecha{font-family:var(--mono);white-space:nowrap}

/* Convencion de fuentes: lo que dice la norma frente a nuestra lectura.
   .cita-norma reproduce el texto literal del reglamento con enlace para
   comprobarlo; .clave y .aviso son interpretacion propia y lo dicen. Ningun
   competidor separa las dos cosas, y a casi todos les conviene que se
   confundan. Se explica en /sobre#convencion. */
.cita-norma{margin:var(--e5) 0;max-width:var(--medida);border-left:4px solid var(--tinta);
            background:var(--blanco);padding:var(--e3) var(--e4)}
.cita-norma blockquote{margin:0;font-size:1rem;line-height:1.55}
.cita-norma blockquote p{margin:0;max-width:none;text-wrap:pretty}
.cita-norma blockquote p::before{content:"“"}
.cita-norma blockquote p::after{content:"”"}
.cita-norma figcaption{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
            color:var(--tinta-suave);margin-top:var(--e2);text-transform:none}
.cita-norma figcaption a{color:var(--tinta-suave)}
.cita-norma::before{content:"Texto de la norma";display:block;font-family:var(--mono);
            font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
            color:var(--tinta);margin-bottom:var(--e2)}
.clave strong:first-child::after,.aviso strong:first-child::after{content:" · nuestra lectura";
            font-weight:400;opacity:.7;letter-spacing:.06em}

/* Cajas */
.aviso,.clave{border-left:4px solid var(--timbre);background:var(--blanco);padding:var(--e3) var(--e4);margin:var(--e5) 0;max-width:calc(var(--medida) + 2.2rem)}
.aviso{border-left-color:var(--sello)}
.clave strong:first-child,.aviso strong:first-child{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:var(--e1)}
.aviso strong:first-child{color:var(--sello-texto)}
.clave strong:first-child{color:var(--timbre)}

/* Checklist */
.checklist{list-style:none;padding:0;counter-reset:paso}
.checklist li{background:var(--blanco);border:1px solid var(--linea-fuerte);margin:var(--e2) 0;padding:var(--e3) var(--e4) var(--e3) var(--e3);display:flex;gap:var(--e2);align-items:flex-start;max-width:calc(var(--medida) + 3rem)}
.checklist input[type=checkbox]{width:1.25rem;height:1.25rem;margin-top:var(--e1);accent-color:var(--ok);flex:none}
.checklist label{cursor:pointer}
.checklist input:checked+label{text-decoration:line-through;color:var(--tinta-suave)}

/* FAQ */
details{background:var(--blanco);border:1px solid var(--linea-fuerte);margin:var(--e2) 0;padding:var(--e1) var(--e3)}
summary{font-weight:600;cursor:pointer;padding:var(--e2) 0}
details[open]{border-left:4px solid var(--timbre)}
/* La pregunta de la FAQ es un <h3> dentro del <summary>: se pinta en línea
   para no romper el triángulo del desplegable. */
details summary h3{display:inline;font-size:1.05rem;margin:0}

/* Tarjetas enlaces internos */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--e4);margin:var(--e5) 0;padding:0;list-style:none}
.tarjetas li{max-width:none}
.tarjetas a{display:block;background:var(--blanco);border:1.5px solid var(--linea-fuerte);padding:var(--e4) var(--e4);text-decoration:none;color:var(--tinta);height:100%;transition:border-color .12s,box-shadow .12s,transform .12s}
.tarjetas a:hover{border-color:var(--tinta);box-shadow:3px 3px 0 var(--sombra);transform:translate(-1px,-1px)}
.tarjetas .t{font-family:var(--display);font-weight:700;display:block;margin-bottom:var(--e1)}
.tarjetas .d{font-size:.9rem;color:var(--tinta-suave)}
.tarjetas .ref{font-family:var(--mono);font-size:.72rem;color:var(--sello-texto);display:block;margin-bottom:var(--e1)}

/* Tarjetas del blog: llevan una imagen a sangre en la parte superior, el
   resto de .tarjetas no. Se reutiliza el mismo componente con un modificador
   en vez de crear uno nuevo desde cero. */
.blog-indice a{padding:0}
.blog-indice img{display:block;width:100%;height:auto;border-bottom:1.5px solid var(--linea-fuerte)}
.blog-indice .ref{padding:var(--e4) var(--e4) 0}
.blog-indice .t{padding:0 var(--e4)}
.blog-indice .d{display:block;padding:0 var(--e4) var(--e4)}

/* Mini-FAQ dentro de las guías */
.minifaq{margin-top:var(--e6)}
.minifaq h3{font-size:1.05rem;margin:var(--e4) 0 var(--e1)}
.minifaq p{margin-top:var(--e1)}

/* Bloque de guías relacionadas */
.relacionadas{margin-top:var(--e6);border-top:1px solid var(--linea);padding-top:var(--e1)}
.relacionadas h2{margin-bottom:var(--e1)}

.cta{display:inline-block;background:var(--sello);color:#fff;text-decoration:none;font-family:var(--display);font-weight:700;padding:var(--e3) var(--e5);margin:var(--e2) 0;box-shadow:3px 3px 0 var(--sombra)}
.cta:hover{background:#a72619}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]) .cta{color:#180d0b}:root:not([data-tema="claro"]) .cta:hover{background:#ff8378}}

/* Remate de guía: devuelve al test, que es el activo que convierte */
.remate{background:var(--blanco);border:1.5px solid var(--tinta);box-shadow:5px 5px 0 var(--sombra);padding:var(--e5) var(--e5);margin:var(--e6) 0 0}
.remate .rt{font-family:var(--display);font-weight:800;font-size:1.25rem;margin:0;color:var(--tinta);display:block}
.remate p{margin:var(--e1) 0 var(--e3);color:var(--tinta-suave);max-width:var(--medida)}
.remate .cta{margin:0}

.mono{font-family:var(--mono)}
.meta-doc{font-family:var(--mono);font-size:.78rem;color:var(--tinta-suave);border-top:1px solid var(--linea);margin-top:var(--e6);padding-top:var(--e3);max-width:none}
.fuentes-post{font-size:.85rem;color:var(--tinta-suave)}

/* Hueco publicidad — solo se pinta cuando ADSENSE_ACTIVO está en True */
.pub{margin:var(--e6) 0;min-height:90px;display:flex;align-items:center;justify-content:center}

footer.site{background:var(--chrome);color:var(--chrome-tenue);font-size:.9rem;margin-top:var(--e6)}
footer.site .wrap{padding:var(--e6) var(--e4);display:grid;gap:var(--e5);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
footer.site .fh{color:var(--chrome-texto);font-size:1rem;font-family:var(--display);font-weight:700;margin:0 0 var(--e2)}
footer.site nav{min-width:0}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin:var(--e1) 0;max-width:none}
footer.site a{color:var(--chrome-tenue)}
footer.site .legalinea{grid-column:1/-1;border-top:1px solid var(--chrome-linea);padding-top:var(--e4);font-family:var(--mono);font-size:.75rem;max-width:none}

@media(max-width:760px){
  /* La cabecera deja de ser pegajosa en móvil: con la barra de plazo encima
     se comía demasiado alto de pantalla justo donde más importa. */
  header.site{position:static}
  nav.principal{gap:var(--e2);padding:var(--e2) 0}
  /* Antes los enlaces envolvían en tres filas y empujaban el contenido fuera
     de pantalla. Ahora forman una sola tira deslizable. */
  /* El degradado del borde avisa de que quedan destinos a la derecha: sin el,
     3 de los 6 enlaces eran invisibles y nada indicaba que existieran. */
  nav.principal ul{margin:0;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:var(--e4);padding-bottom:var(--e0);scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;mask-image:linear-gradient(90deg,#000 86%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent)}
  nav.principal li{scroll-snap-align:start}
  nav.principal ul::-webkit-scrollbar{display:none}
}
@media(max-width:640px){
  body{font-size:1.02rem}
  main{padding:var(--e5) 0 var(--e6)}
  .test{padding:var(--e4)}
  .tabla-scroll table{font-size:.9rem}
  .tabla-scroll th,.tabla-scroll td{padding:var(--e2) var(--e2)}
  details summary h3{font-size:1rem}
  .sello-plazo{margin:var(--e4) var(--e4) var(--e4) 0}
  .remate{padding:var(--e4)}
}

/* ---------------------------------------------------------------- IMPRESIÓN
   Una guía fiscal se imprime y se guarda en PDF: es material de consulta que
   la gente lleva a su gestoría. Sin esto salían el menú, el pie, el aviso de
   cookies y los enlaces sin su destino visible. */
@media print{
  :root{--tinta:#000;--tinta-suave:#333;--papel:#fff;--blanco:#fff;--linea:#999;--sombra:transparent;--cebra:#f2f2f2}
  body{font-size:11pt;line-height:1.45;background:#fff;color:#000}
  .barra-plazo,header.site,footer.site,.saltar,.pub,.relacionadas,.remate,.test,.miga,.indice{display:none!important}
  /* Sin esto el folio que llega a la gestoria no dice de donde salio: el pie
     y la cabecera van ocultos y los enlaces internos ya no expanden su URL. */
  main::before{content:"VeriFactu Claro — verifactuclaro.es";display:block;
    font-family:var(--mono);font-size:9pt;letter-spacing:.08em;text-transform:uppercase;
    color:#000;border-bottom:1px solid #999;padding-bottom:.5em;margin-bottom:1.4em}
  main::after{content:"Guía divulgativa de verifactuclaro.es. No sustituye al asesoramiento profesional. Fuentes: BOE y sede electrónica de la AEAT.";
    display:block;font-size:8.5pt;color:#555;border-top:1px solid #999;margin-top:2em;padding-top:.6em}
  main{padding:0}
  .wrap,.wrap-guia{max-width:100%;padding:0;display:block}
  h1{font-size:20pt}
  h2{font-size:14pt;margin-top:1.4em}
  h3{font-size:12pt}
  h1,h2,h3{page-break-after:avoid;break-after:avoid}
  p,li,figure,table,.aviso,.clave{page-break-inside:avoid;break-inside:avoid}
  p,li{max-width:34em}
  a{color:#000;text-decoration:underline}
  /* El destino de los enlaces, visible en papel */
  main a[href^="http"]::after{content:" [" attr(href) "]";font-size:8pt;color:#555;word-break:break-all}
  /* Los internos solo se marcan; su destino no aporta en papel. */
  main a[href^="/"]{text-decoration:underline;text-decoration-style:dotted}
  .sello-plazo{transform:none;box-shadow:none;border:2px solid #000;color:#000}
  th{background:#e8e8e8!important;color:#000!important;border:1px solid #999}
  details{border:1px solid #999}
  details:not([open]) > *:not(summary){display:none}
  .cambios > *{display:block!important}   /* en papel no se pliega nada */
  figure img,.ficha-diagrama img{border:1px solid #999;max-width:100%;background:none;padding:0}
  .cita-norma{border-left:3px solid #000;page-break-inside:avoid}
  .meta-doc{border-top:1px solid #999;font-size:8.5pt}
}

:root[data-tema="oscuro"]{
    --tinta:#e7e4dd;
    --tinta-suave:#a9b2c4;
    --papel:#11151d;
    --blanco:#1a2029;
    --sello:#f0655a;
    --sello-texto:#ff9086;
    --timbre:#84acf0;
    --ok:#4fcb8d;
    --linea:#2e3746;
    --linea-fuerte:#66718a;
    --sombra:rgba(0,0,0,.5);
    --cebra:#1e242e;
    --hover-suave:#232c3a;
  }
:root[data-tema="oscuro"] figure:not(.foto-post) img,:root[data-tema="oscuro"] .ficha-diagrama img{background:#f6f5f1;padding:var(--e2);border-color:#39445a}:root[data-tema="oscuro"] .blog-indice img{background:#f6f5f1}
:root[data-tema="oscuro"] .cta{color:#180d0b}:root[data-tema="oscuro"] .cta:hover{background:#ff8378}