/* ── Paleta clara ──
   El oscuro venía del blog en inglés. Para una herramienta de cálculo fiscal,
   la investigación dice lo contrario: el claro se asocia a claridad y confianza
   —que es lo que aquí importa—, tiene mejor legibilidad por contraste, y los
   temas oscuros fallan las comprobaciones WCAG más a menudo. Y quien calcula
   su finiquito lo hace de día, en el móvil, a veces al sol. */
:root{
  /* El fondo va gris y la tarjeta blanca: así la herramienta se despega de la
     página en lugar de fundirse con ella. Antes eran #fbfbf9 y #ffffff —cuatro
     puntos de diferencia, invisibles. */
  --fondo:#eef0ee;
  --cabecera:#ffffff;
  --tarjeta:#ffffff;
  --texto:#16181d;
  --apagado:#5d636e;
  --verde:#0f7a44;          /* oscurecido: sobre claro necesita más contraste */
  --linea:#e3e2dd;
  --campo:#ffffff;
  --realce:#f6f7f6;
  /* Tipografía neutra: la serif de revista (Playfair) venía del blog. Una
     herramienta de cálculo fiscal necesita parecerse a la Agencia Tributaria,
     no a una revista: fuentes sin personalidad, que el número mande. */
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --serif:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --fondo:#0a2540; --cabecera:#061a30; --tarjeta:rgba(255,255,255,.055);
    --texto:#e2e8f0; --apagado:#94a3b8; --verde:#22c55e;
    --linea:rgba(226,232,240,.14); --campo:#0d2c4d; --realce:rgba(255,255,255,.04);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--texto);font:400 19px/1.62 var(--sans)}
@media (min-width:1400px){body{font-size:20px}}
a{color:var(--verde);text-decoration:none}
a:hover{text-decoration:underline}

.cab{background:var(--cabecera);border-bottom:1px solid var(--linea)}
.cab-in{max-width:1200px;margin:0 auto;height:100px;padding:0 1.5rem;
  display:flex;align-items:center;gap:1.5rem}
.cab nav{flex:1;display:flex;gap:1.4rem}
.cab nav a{color:var(--apagado);font-size:.92rem;font-weight:500}
.cab nav a:hover{color:var(--texto);text-decoration:none}
.marca{font:700 1.5rem var(--serif);color:var(--texto)}
.marca span{color:var(--verde)}
.hueco{flex:1}

main{max-width:760px;margin:0 auto;padding:3.5rem 1.5rem 0}
@media (min-width:1400px){main{max-width:820px}}
.cabecera{margin-bottom:2rem}   /* a la izquierda, como el tema original */
.etiqueta{color:var(--verde);font-size:.78rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;margin:0 0 1rem}
h1{font:600 46px/1.15 var(--serif);margin:0 0 1rem;letter-spacing:-.01em}
.bajada{color:var(--apagado);font-size:1.05rem;margin:0 0 1.5rem;line-height:1.5}
.firma{color:var(--apagado);font-size:.85rem;margin:0;display:flex;align-items:center;gap:.5rem}
.avatar{width:34px;height:34px;border-radius:50%;border:1px solid var(--linea);
  display:grid;place-content:center;font:600 .85rem var(--serif);color:var(--verde)}
/* la portada se sale de la columna de texto, como en el tema original */
.portada{display:block;border-radius:6px;margin:0 0 2.5rem;
  width:100vw;max-width:1000px;height:auto;   /* sin esto, el atributo height la estira */
  aspect-ratio:auto;position:relative;left:50%;transform:translateX(-50%)}
@media (max-width:1040px){.portada{width:calc(100vw - 3rem);max-width:none}}

.contenido p{margin:0 0 1.5rem}
.contenido h2{font:600 27px/1.25 var(--serif);margin:2.8rem 0 1rem}
.contenido h3{font:600 21px/1.3 var(--serif);margin:2rem 0 .8rem}
.contenido ul,.contenido ol{margin:0 0 1.5rem;padding-left:1.4rem}
.contenido li{margin-bottom:.5rem}
.contenido img{max-width:100%;height:auto;border-radius:6px;margin:1.5rem 0}
.contenido blockquote{margin:1.8rem 0;padding-left:1.2rem;border-left:3px solid var(--verde);
  color:var(--apagado);font-style:italic}
.contenido table{width:100%;border-collapse:collapse;margin:1.8rem 0;font-size:.92rem}
.desliza{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (min-width:1100px){
  .desliza{width:min(1040px, calc(100vw - 4rem));position:relative;left:50%;transform:translateX(-50%)}
}
.contenido th{text-align:left;padding:.7rem .8rem;border-bottom:2px solid var(--linea);
  font-weight:700;color:var(--texto);white-space:nowrap}
.contenido td{padding:.7rem .8rem;border-bottom:1px solid var(--linea);vertical-align:top}
.contenido code{background:var(--realce);padding:.15rem .4rem;border-radius:4px;font-size:.88em}
.contenido hr{border:0;border-top:1px solid var(--linea);margin:2.5rem 0}

footer{max-width:680px;margin:5rem auto 0;padding:2rem 1.5rem 3rem;
  border-top:1px solid var(--linea);color:var(--apagado);font-size:.9rem}
footer .mini{font-size:.8rem;opacity:.75}

/* índice */
.lista{max-width:720px;margin:0 auto;padding:2rem 1.5rem}
.item{padding:1.5rem 0;border-bottom:1px solid var(--linea)}
.item h2{font:600 1.35rem/1.3 var(--serif);margin:0 0 .4rem}
.item h2 a{color:var(--texto)}
.item h2 a:hover{color:var(--verde);text-decoration:none}
.item p{color:var(--apagado);font-size:.95rem;margin:0 0 .4rem}
.item .fecha{font-size:.8rem;color:var(--apagado);opacity:.7}

@media (max-width:700px){
  body{font-size:17px}
  main{padding-left:1rem;padding-right:1rem}
  .calc{padding:1.1rem;margin-left:-.4rem;margin-right:-.4rem}
  h1{font-size:32px}
  .contenido h2{font-size:23px}
  .cab-in{height:72px;gap:.8rem}
  .marca{font-size:1.2rem}
  main{padding-top:2rem}
}

/* botón de descarga */
.boton{display:inline-block;padding:.9rem 1.8rem;background:var(--verde);color:#fff;
  border-radius:6px;font-weight:700;font-size:1rem}
.boton:hover{text-decoration:none;filter:brightness(1.08)}

.credito{color:var(--apagado);font-size:.78rem;text-align:right;margin:-1.8rem 0 2.5rem;opacity:.75}

/* ── calculadora embebida ── */
.calc{background:var(--tarjeta);border:1px solid var(--linea);border-radius:14px;
  box-shadow:0 1px 2px rgba(20,24,30,.06), 0 8px 24px -12px rgba(20,24,30,.18);
  padding:1.5rem;margin:2.2rem 0}
/* en pantallas anchas la calculadora se sale de la columna de lectura:
   la prosa quiere 72 caracteres, una tabla de datos quiere sitio */
@media (min-width:1100px){
  .calc{width:min(1040px, calc(100vw - 4rem));position:relative;left:50%;
    transform:translateX(-50%);padding:1.8rem 2rem}
}
.calc-campos{display:grid;gap:.9rem;margin-bottom:1.3rem}
/* minmax(0,...) es lo que impide que un select con opciones largas
   empuje la columna y se salga del contenedor */
@media (min-width:620px){.calc-campos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.calc-campos{grid-template-columns:repeat(3,minmax(0,1fr))}}
.calc label{display:grid;gap:.35rem;font-size:.86rem;color:var(--apagado)}
.calc input,.calc select{width:100%;min-width:0;max-width:100%;
  padding:.65rem .8rem;border:1px solid var(--linea);border-radius:7px;
  background:var(--campo);color:var(--texto);font:inherit;font-size:1rem;min-height:46px;
  text-overflow:ellipsis}
.calc input:focus,.calc select:focus{outline:2px solid var(--verde);outline-offset:1px}
.calc-salida{border-top:1px solid var(--linea);padding-top:1.2rem;margin-top:.3rem}
@media (min-width:620px){
  /* el resultado, sobre un tono distinto: es la respuesta, no un campo más */
  .calc-salida{background:var(--realce);border-radius:10px;padding:1.2rem 1.3rem;
    margin:.3rem -.4rem 0;border-top:0;border:1px solid var(--linea)}
}
.calc-salida .l{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;font-size:.97rem}
.calc-salida .l.apagado{color:var(--apagado);opacity:.65}
.calc-salida .l.tot{border-top:1px solid var(--linea);margin-top:.5rem;padding-top:.7rem;
  font-size:1.12rem;color:var(--verde)}
.calc-salida .nota{font-size:.85rem;color:var(--apagado);margin:.9rem 0 0;line-height:1.5}
.calc-salida .aviso{font-size:.85rem;color:#8a6d00;background:#fff8e1;border-left:3px solid #d4a017;padding:.6rem .8rem;border-radius:0 6px 6px 0;margin:.6rem 0 0;line-height:1.5}

/* bloques dentro del resultado de una calculadora */
.calc-salida .bloque{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--verde);margin:1.2rem 0 .5rem;padding-top:.8rem;border-top:1px solid var(--linea)}
.calc-salida .bloque:first-child{margin-top:0;padding-top:0;border-top:0}
.calc-salida .bloque .ap{font-weight:400;letter-spacing:0;text-transform:none;color:var(--apagado)}
.calc-salida .l.sub{border-top:1px dashed var(--linea);margin-top:.4rem;padding-top:.55rem;font-weight:600}
/* enlace a la herramienta desde el artículo */
.aherr{display:block;background:var(--realce);border:1px solid var(--verde);
  border-radius:10px;padding:1.1rem 1.3rem;margin:2rem 0;text-decoration:none}
.aherr:hover{background:rgba(34,197,94,.14);text-decoration:none}
.aherr b{display:block;color:var(--verde);font-size:1.05rem;margin-bottom:.25rem}
.aherr span{color:var(--apagado);font-size:.9rem}

.calc .ayuda{display:block;font-size:.8rem;color:var(--apagado);line-height:1.45;margin-top:.2rem;
  min-height:2.4em}