/* Cuentas al Céntimo
   Idea de página: herramientas de papelería fiscal. El resultado se lee como el recibo de una nómina
   (conceptos a la izquierda, importes alineados a la derecha) junto al formulario. Verde de billete,
   cifras en monoespaciada, titulares con carácter y todo lo demás sobrio. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600; font-display: swap; src: url("fuentes/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700; font-display: swap; src: url("fuentes/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fuentes/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fuentes/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fuentes/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fuentes/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fuentes/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  --papel: #f3f6f4;
  --hoja: #ffffff;
  --tinta: #13211e;
  --tenue: #56665f;
  --linea: #d5ded9;
  --linea-suave: #e6ece9;
  --verde: #0a6a55;
  --verde-fuerte: #07503f;
  --verde-suave: #e3f1ec;
  --sobre-verde: #ffffff;
  --resta: #a23e2a;
  --marcador: #f6dc7a;
  --foco: #c98a00;
  --sombra: 0 1px 2px rgb(19 33 30 / 0.06), 0 4px 16px rgb(19 33 30 / 0.05);
  --f-titulo: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-texto: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-cifra: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
  --radio: 6px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #0e1513; --hoja: #151f1b; --tinta: #e5eeeb; --tenue: #98aaa3; --linea: #2b3934; --linea-suave: #22302b;
    --verde: #5cc9aa; --verde-fuerte: #8adcc4; --verde-suave: #16302a; --sobre-verde: #0e1513; --resta: #ec9681;
    --marcador: #5c4d12; --foco: #f0b93a; --sombra: 0 1px 2px rgb(0 0 0 / 0.3); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #0e1513; --hoja: #151f1b; --tinta: #e5eeeb; --tenue: #98aaa3; --linea: #2b3934; --linea-suave: #22302b;
  --verde: #5cc9aa; --verde-fuerte: #8adcc4; --verde-suave: #16302a; --sobre-verde: #0e1513; --resta: #ec9681;
  --marcador: #5c4d12; --foco: #f0b93a; --sombra: 0 1px 2px rgb(0 0 0 / 0.3); color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 1rem/1.62 var(--f-texto); }
.ancho { max-width: 70rem; margin-inline: auto; padding-inline: 1.25rem; }
a { color: var(--verde); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--verde-fuerte); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--f-titulo); line-height: 1.15; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(1.85rem, 4.2vw, 2.75rem); font-weight: 700; letter-spacing: -0.022em; }
h2 { font-size: 1.32rem; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
strong { font-weight: 600; }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 20; background: var(--hoja); padding: 0.5rem 0.8rem; border-radius: var(--radio); }
.saltar:focus { top: 0.75rem; }

/* ---------------------------------------------------------------- cabecera */
.cabecera { background: var(--hoja); border-bottom: 1px solid var(--linea); }
.cabecera .ancho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 0.8rem; }
.marca { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--tinta); font: 600 1.18rem var(--f-titulo); letter-spacing: -0.015em; }
.marca:hover { color: var(--tinta); }
.marca b { color: var(--verde); font-weight: 700; }
.marca-icono { width: 1.75rem; height: 1.75rem; flex: none; }
.marca-icono rect { fill: var(--verde); }
.marca-icono path { stroke: var(--sobre-verde); }
.marca-icono circle { fill: var(--sobre-verde); }
.menu { display: flex; flex-wrap: wrap; gap: 0.2rem 1.25rem; font-size: 0.92rem; }
.menu a { color: var(--tenue); text-decoration: none; padding-block: 0.2rem; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a[aria-current] { color: var(--tinta); border-bottom-color: var(--verde); }

main { display: grid; gap: 2.75rem; padding-block: 1.5rem 4rem; }

/* ---------------------------------------------------------------- migas y entrada */
.migas ol { list-style: none; margin: 0 0 -1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; font-size: 0.85rem; color: var(--tenue); }
.migas li + li::before { content: "›"; margin-right: 0.3rem; color: var(--linea); }
.migas a { color: var(--tenue); text-decoration: none; }
.migas a:hover { color: var(--verde); text-decoration: underline; }
.entrada { display: grid; gap: 0.7rem; max-width: 46rem; }
.entrada p { color: var(--tenue); font-size: 1.08rem; }

/* ---------------------------------------------------------------- portada */
.portada { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; padding-top: 1rem; }
.portada-texto { display: grid; gap: 1rem; }
.portada h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); letter-spacing: -0.03em; }
.portada h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--marcador) 62%, var(--marcador) 92%, transparent 92%); padding-inline: 0.05em; }
.portada-texto > p { color: var(--tenue); font-size: 1.12rem; max-width: 36rem; }
.garantias { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: 0.9rem; color: var(--tenue); }
.garantias li::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.45rem; border-radius: 50%; background: var(--verde); vertical-align: 0.08em; }

.mini { background: var(--hoja); border: 1px solid var(--linea); border-radius: 10px; box-shadow: var(--sombra); padding: 1.35rem; display: grid; gap: 1rem; }
.mini form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0.75rem; align-items: end; }
.mini-pregunta { grid-column: 1 / -1; font: 600 1.1rem var(--f-titulo); }
.mini-resultado { border-top: 1px dashed var(--linea); padding-top: 0.9rem; display: grid; gap: 0.2rem; }
.enlace-flecha { font-weight: 500; display: inline-block; margin-top: 0.4rem; }
.enlace-flecha::after { content: " →"; }

.grupos { display: grid; gap: 2.5rem; }
.grupo { display: grid; gap: 0.9rem; scroll-margin-top: 1rem; }
.grupo-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.9rem; border-bottom: 2px solid var(--tinta); padding-bottom: 0.45rem; }
.grupo-cab p { color: var(--tenue); font-size: 0.95rem; }

.tarjetas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 0.75rem; }
.tarjetas a {
  height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 0.3rem; padding: 1rem 1.05rem 0.9rem;
  background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--radio); color: inherit; text-decoration: none;
}
.tarjetas a:hover { border-color: var(--verde); box-shadow: var(--sombra); color: inherit; }
.tarjeta-nombre { font: 600 1.06rem/1.25 var(--f-titulo); color: var(--tinta); }
.tarjetas a:hover .tarjeta-nombre { color: var(--verde); }
.tarjeta-desc { color: var(--tenue); font-size: 0.9rem; line-height: 1.45; }
.tarjeta-dato { margin-top: 0.35rem; font: 500 0.82rem var(--f-cifra); color: var(--verde); }

.metodo { display: grid; gap: 1rem; background: var(--verde-suave); border-radius: 10px; padding: 1.5rem; }
.metodo-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; font-size: 0.95rem; }
.metodo-cols strong { display: block; font-family: var(--f-titulo); font-size: 1.02rem; margin-bottom: 0.2rem; }

/* ---------------------------------------------------------------- calculadora */
.calculadora { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.calculadora form { display: grid; gap: 1rem; background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.25rem; }
.campo { display: grid; gap: 0.3rem; min-width: 0; align-content: start; }
.campo label { font-weight: 500; font-size: 0.94rem; }
.campo small { color: var(--tenue); font-size: 0.83rem; line-height: 1.4; }
.dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
input[type="text"], input[type="date"], select {
  width: 100%; min-width: 0; min-height: 2.75rem; padding: 0.55rem 0.7rem; font: 500 1rem var(--f-cifra);
  color: var(--tinta); background: var(--papel); border: 1px solid var(--linea); border-radius: 4px;
}
input[type="text"]:hover, input[type="date"]:hover, select:hover { border-color: var(--tenue); }
input[type="text"]:focus, input[type="date"]:focus, select:focus { border-color: var(--verde); background: var(--hoja); }
select { font-family: var(--f-texto); }
.con-unidad { position: relative; display: block; }
.con-unidad input { padding-right: 2.1rem; }
.unidad { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--tenue); font: 500 0.95rem var(--f-cifra); pointer-events: none; }
.casilla { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; cursor: pointer; }
.casilla input { margin-top: 0.3rem; width: 1.05rem; height: 1.05rem; accent-color: var(--verde); }

.resultado { display: grid; gap: 0.6rem; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 1rem); min-width: 0; }
.recibo { background: var(--hoja); border: 1px solid var(--linea); border-top: 4px solid var(--verde); border-radius: var(--radio);
  padding: 1.25rem 1.25rem 1.1rem; display: grid; gap: 0.2rem; min-width: 0; box-shadow: var(--sombra); scroll-margin-top: 1rem; }
.recibo-titular { font: 500 0.76rem var(--f-cifra); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tenue); }
.recibo-cifra { font: 600 clamp(2rem, 6vw, 2.7rem)/1.1 var(--f-cifra); letter-spacing: -0.03em; color: var(--verde); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.recibo-sub { color: var(--tenue); font-size: 0.9rem; }
.recibo-filas { margin: 0.9rem 0 0; display: grid; }
.recibo-filas:empty { display: none; }
.fila { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-top: 1px dashed var(--linea); font-size: 0.94rem; }
.fila dt { min-width: 0; }
.fila dd { margin: 0; font-family: var(--f-cifra); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.fila.menos dd { color: var(--resta); }
.fila.total { border-top: 2px solid var(--tinta); font-weight: 600; }
.recibo-nota { margin-top: 0.7rem; padding: 0.65rem 0.75rem; background: var(--verde-suave); border-radius: 3px; font-size: 0.88rem; line-height: 1.45; }
.boton-copiar { justify-self: end; background: none; border: 0; padding: 0.3rem 0.1rem; color: var(--verde); font: 500 0.88rem var(--f-texto); cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em; }
.boton-copiar:hover { color: var(--verde-fuerte); }

.barra-resultado { display: none; }
@media (max-width: 46rem) {
  .barra-resultado:not([hidden]) {
    display: flex; align-items: center; gap: 0.6rem; position: fixed; z-index: 10; inset: auto 0 0 0;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px)); background: var(--hoja);
    border-top: 3px solid var(--verde); box-shadow: 0 -4px 16px rgb(0 0 0 / 0.12); font-size: 0.85rem;
  }
  .barra-resultado span { color: var(--tenue); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barra-resultado strong { font: 600 1.05rem var(--f-cifra); color: var(--verde); white-space: nowrap; }
  .barra-resultado a { margin-left: auto; white-space: nowrap; font-weight: 500; }
}

/* ---------------------------------------------------------------- texto explicativo */
.explica { display: grid; gap: 2.1rem; max-width: 46rem; }
.explica section { display: grid; gap: 0.7rem; }
.explica ul, .explica ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.explica li::marker { color: var(--verde); }
.ejemplo { background: var(--hoja); border-left: 4px solid var(--marcador); padding: 1.1rem 1.25rem; border-radius: 0 var(--radio) var(--radio) 0; }
.ejemplo h2 { font-size: 1.1rem; }
.destacado { font-size: 1.15rem; line-height: 1.55; }

.tabla-caja { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--hoja); }
.tabla-alta { max-height: 30rem; overflow-y: auto; }
.tabla-alta thead th { position: sticky; top: 0; background: var(--hoja); box-shadow: 0 1px 0 var(--linea); }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { padding: 0.5rem 0.75rem; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td { font-family: var(--f-cifra); font-size: 0.86rem; border-top: 1px solid var(--linea-suave); }
th { font: 500 0.72rem var(--f-cifra); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tenue); }
th:first-child, td:first-child { text-align: left; }
tbody tr:hover td { background: var(--verde-suave); }
/* tablas de texto (no de cifras) */
td:not(:first-child):only-child, .tabla-caja td { white-space: normal; }

.faq { gap: 0 !important; }
.faq h2 { margin-bottom: 0.6rem; }
.faq details { border-top: 1px solid var(--linea); }
.faq details:last-child { border-bottom: 1px solid var(--linea); }
.faq summary { cursor: pointer; list-style: none; padding: 0.85rem 2rem 0.85rem 0; position: relative; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.25rem; top: 0.7rem; font: 500 1.3rem var(--f-cifra); color: var(--verde); }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--verde); }
.faq details p { padding: 0 0 1rem; color: var(--tenue); }

.fuentes { font-size: 0.9rem; color: var(--tenue); border-top: 1px solid var(--linea); padding-top: 1.25rem; gap: 0.5rem !important; }
.fuentes h2 { font-size: 0.78rem; font-family: var(--f-cifra); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tenue); }
.fuentes ul { gap: 0.25rem !important; }
.revision { font-size: 0.85rem; color: var(--tenue); }
.texto-legal h2 { font-size: 1.15rem; }
.antetitulo { font: 500 0.78rem var(--f-cifra) !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--verde) !important; }
.guia { display: grid; gap: 2rem; }
.guia .explica { font-size: 1.04rem; }
.guia .explica > section:not(.fuentes) > h2 { font-size: 1.25rem; }

.relacionadas { display: grid; gap: 0.9rem; }

/* ---------------------------------------------------------------- pie */
.pie { background: var(--hoja); border-top: 1px solid var(--linea); font-size: 0.9rem; }
.pie .ancho { padding-block: 2.25rem 2.5rem; display: grid; gap: 1.75rem; }
.pie-columnas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
.pie h2 { font: 600 0.9rem var(--f-titulo); margin-bottom: 0.6rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.pie a { color: var(--tenue); text-decoration: none; }
.pie a:hover { color: var(--verde); text-decoration: underline; }
.pie-final { display: grid; gap: 0.4rem; color: var(--tenue); font-size: 0.84rem; border-top: 1px solid var(--linea); padding-top: 1.25rem; max-width: 58rem; }

/* ---------------------------------------------------------------- pantallas pequeñas */
@media (max-width: 60rem) {
  .pie-columnas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portada { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
}
@media (max-width: 46rem) {
  main { gap: 2.25rem; padding-block: 1.1rem 5rem; }
  .calculadora { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .resultado { position: static; }
  .metodo-cols { grid-template-columns: minmax(0, 1fr); }
  .pie-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cabecera .ancho { padding-block: 0.65rem 0; }
  .menu { width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 1.1rem; font-size: 0.88rem; padding-bottom: 0.15rem;
    scrollbar-width: none; mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { white-space: nowrap; padding-block: 0.45rem; }
  .tarjetas { gap: 0.5rem; }
  .tarjetas a { padding: 0.8rem 0.9rem 0.75rem; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 0.75rem; }
  .tarjeta-nombre { grid-column: 1; }
  .tarjeta-desc { grid-column: 1; font-size: 0.86rem; }
  .tarjeta-dato { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; text-align: right; font-size: 0.76rem; max-width: 7.5rem; }
  .portada h1 { font-size: 2.3rem; }
  .calculadora form { padding: 1rem; }
}
@media (max-width: 26rem) {
  .dos, .mini form { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  .tarjetas a, .menu a { transition: border-color 0.15s, box-shadow 0.15s, color 0.15s; }
}