/* =============================================================
   Copia limpia — hoja de estilos única
   1. Fuentes  2. Tokens (primitivo → semántico → componente)
   3. Base  4. Utilidades  5. Componentes  6. Portada
   7. App  8. Cuenta y páginas de texto  9. Movimiento  10. Responsive
   ============================================================= */

/* ============================== 1. Fuentes (alojadas aquí: nada sale a terceros) */
@font-face {
  font-family: "Source Serif 4 Variable";
  src: url("assets/fonts/source-serif-4-latin-opsz.woff2") format("woff2-variations");
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Variable";
  src: url("assets/fonts/geist-latin-wght.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono Variable";
  src: url("assets/fonts/geist-mono-latin-wght.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ============================== 2. Tokens */
:root {
  /* --- Primitivos: valores crudos --- */
  --paper-50:  #FBFBFA;  --paper-50:  light-dark(#FBFBFA, #141418);
  --paper-100: #F7F6F3;  --paper-100: light-dark(#F7F6F3, #16161B);
  --paper-200: #EFEDE8;  --paper-200: light-dark(#EFEDE8, #1E1E25);
  --paper-300: #E4E1DA;  --paper-300: light-dark(#E4E1DA, #2A2A32);
  --white:     #FFFFFF;  --white:     light-dark(#FFFFFF, #1A1A20);
  --ink-950:   #0B0B0B;  --ink-950:   light-dark(#0B0B0B, #F6F6F4);
  --ink-900:   #111111;  --ink-900:   light-dark(#111111, #EDEDEA);
  --ink-700:   #2F3437;  --ink-700:   light-dark(#2F3437, #C8C8C3);
  --ink-600:   #4A4946;  --ink-600:   light-dark(#4A4946, #ADACA6);
  --ink-500:   #6B6A66;  --ink-500:   light-dark(#6B6A66, #94938C);
  --ink-400:   #8C8B86;  --ink-400:   light-dark(#8C8B86, #76756E);
  --rule-200:  #EAEAEA;  --rule-200:  light-dark(#EAEAEA, #26262D);
  --rule-300:  #E1DED7;  --rule-300:  light-dark(#E1DED7, #303039);
  --blue-700:  #1F4B8F;  --blue-700:  light-dark(#1F4B8F, #82AAE9);
  --blue-800:  #183A70;  --blue-800:  light-dark(#183A70, #A2C3F2);

  --pastel-blue:   #E1F3FE;  --pastel-blue-ink:   #1F6C9F;  --pastel-blue-line:   #C4E4F8;
  --pastel-yellow: #FBF3DB;  --pastel-yellow-ink: #7A5300;  --pastel-yellow-line: #EFE1BD;
  --pastel-green:  #EDF3EC;  --pastel-green-ink:  #346538;  --pastel-green-line:  #D2E2D0;
  --pastel-red:    #FDEBEC;  --pastel-red-ink:    #9F2F2D;  --pastel-red-line:    #F3CFD1;
  --pastel-grey:   #EFEDE8;  --pastel-grey-ink:   #4A4946;  --pastel-grey-line:   #DEDBD4;

  /* En oscuro no valen los mismos pasteles aclarados: un #FBF3DB sobre
     fondo negro deslumbra. Se invierte la relación —fondo teñido oscuro,
     tinta clara— manteniendo el mismo significado de cada color. */
  --pastel-blue:   light-dark(#E1F3FE, #102A3C);  --pastel-blue-ink:   light-dark(#1F6C9F, #8FCBF2);  --pastel-blue-line:   light-dark(#C4E4F8, #1B4560);
  --pastel-yellow: light-dark(#FBF3DB, #322A12);  --pastel-yellow-ink: light-dark(#7A5300, #E8C168);  --pastel-yellow-line: light-dark(#EFE1BD, #4E4220);
  --pastel-green:  light-dark(#EDF3EC, #16281A);  --pastel-green-ink:  light-dark(#346538, #86C98C);  --pastel-green-line:  light-dark(#D2E2D0, #24412A);
  --pastel-red:    light-dark(#FDEBEC, #341A1B);  --pastel-red-ink:    light-dark(#9F2F2D, #F09490);  --pastel-red-line:    light-dark(#F3CFD1, #53292A);
  --pastel-grey:   light-dark(#EFEDE8, #25252C);  --pastel-grey-ink:   light-dark(#4A4946, #B0AFA9);  --pastel-grey-line:   light-dark(#DEDBD4, #33333B);

  --font-serif: "Source Serif 4 Variable", "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans:  "Geist Variable", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "Geist Mono Variable", "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;   --space-6: 2rem;    --space-7: 3rem;    --space-8: 4.5rem;
  --space-9: 6.5rem;   --space-10: 9rem;

  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 12px; --radius-pill: 9999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 600ms;

  /* --- Semánticos: para qué sirve cada valor --- */
  --color-ground:      var(--paper-100);
  --color-ground-alt:  var(--paper-200);
  --color-sheet:       var(--white);
  --color-text:        var(--ink-900);
  --color-text-soft:   var(--ink-700);
  --color-text-muted:  var(--ink-500);
  --color-rule:        var(--rule-300);
  --color-rule-sheet:  var(--rule-200);
  --color-accent:      var(--blue-700);
  --color-accent-hover:var(--blue-800);
  /* La tacha NO se invierte. Va sobre el documento, que sigue siendo blanco
     también en oscuro (ver --color-page): una barra clara sobre papel claro
     no taparía nada, y lo que se ve en pantalla tiene que ser exactamente
     lo que saldrá impreso. */
  --color-redaction:   #0B0B0B;
  --color-focus:       var(--blue-700);
  --color-danger:      var(--pastel-red-ink);
  --color-ok:          var(--pastel-green-ink);

  --type-display: clamp(2.5rem, 1.3rem + 4.6vw, 5.25rem);
  --type-h2:      clamp(2rem, 1.35rem + 2.4vw, 3.25rem);
  --type-h3:      1.3125rem;
  --type-body:    1.0625rem;
  --type-small:   0.9375rem;
  --type-xs:      0.78rem;

  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --folio-max: 76rem;
  --margin-col: 19rem;

  /* --- Componentes --- */
  --btn-height: 2.75rem;
  --btn-bg: var(--ink-900);
  --btn-bg-hover: #2A2A29;  --btn-bg-hover: light-dark(#2A2A29, #D6D6D1);
  --btn-fg: var(--paper-50);
  --btn-radius: var(--radius-md);
  --switch-w: 2.25rem; --switch-h: 1.25rem;
  --switch-on: var(--ink-900);
  --note-num-w: 1.75rem;
  --sheet-pad: clamp(1.25rem, 0.6rem + 3vw, 2.75rem);
  /* El documento —la hoja de la portada y las páginas del PDF— se queda en
     papel blanco con los dos temas. Es un visor: el lienzo del PDF que pinta
     pdf.js es blanco de por sí, así que teñir el marco dejaría un recuadro
     oscuro alrededor de una página clara. Vale para el resto de la interfaz,
     no para lo que el usuario va a imprimir o enviar. */
  --color-page:        #FFFFFF;
  --color-page-text:   #2F3437;
  --color-page-strong: #111111;
  --color-page-rule:   #EAEAEA;
  --color-page-muted:  #6B6A66;

  --focus-ring: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus);

  /* light-dark() necesita saber en qué esquema está. Sin pin, sigue al
     sistema; el botón de tema fija data-theme y con él color-scheme. */
  color-scheme: light dark;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* ============================== 3. Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-ground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  font-feature-settings: "ss01" 0;
}
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
p { text-wrap: pretty; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
h1, h2 { font-family: var(--font-serif); font-optical-sizing: auto; letter-spacing: -0.028em; line-height: 1.04; }
h3 { font-size: var(--type-h3); line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; }
code, kbd, .mono { font-family: var(--font-mono); font-size: 0.9em; font-variant-numeric: tabular-nums; }
kbd {
  display: inline-block; min-width: 1.6em; padding: 0.05em 0.4em; text-align: center;
  border: 1px solid var(--color-rule); border-radius: var(--radius-sm);
  background: var(--paper-50); font-size: 0.8em; line-height: 1.5;
}
::selection { background: var(--ink-900); color: var(--paper-50); }
:focus { outline: none; }
:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
[tabindex="-1"]:focus-visible { box-shadow: none; }
input::placeholder { color: var(--ink-400); }
html { scrollbar-color: var(--paper-300) transparent; }

/* ============================== 4. Utilidades */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: var(--space-4); top: var(--space-4); z-index: 100;
  background: var(--ink-900); color: var(--paper-50); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md); text-decoration: none;
  transform: translateY(calc(-100% - var(--space-5))); transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: none; }
.folio { width: min(var(--folio-max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--type-small); }
.xs { font-size: var(--type-xs); }

/* ============================== 5. Componentes */

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--btn-height); padding: 0 1.15rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bg); border-radius: var(--btn-radius);
  font-weight: 500; font-size: 0.975rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
/* Respuesta al presionar, no sólo al soltar. En táctil no hay :hover, así
   que sin esto la mitad de los controles de la app no acusan el toque hasta
   que la acción termina —y algunas (analizar, descargar) tardan. */
.btn:active { transform: scale(0.98); }

/* El resaltado gris nativo de iOS/Android tapa el propio feedback. */
.btn, .herramienta, .pestana, .switch, .tema-btn, .soltar, .cab__enlace {
  -webkit-tap-highlight-color: transparent;
}

.herramienta:active:not(:disabled) { transform: scale(0.97); transition-duration: 90ms; }
.pestana:active { transform: scale(0.98); transition-duration: 90ms; }
/* El interruptor no escala entero: se aplasta un poco el pulsador, que es
   la pieza que el dedo está tocando. */
.switch:active::after { transform: translate(calc(-50% - (var(--switch-w) - var(--switch-h)) / 2), -50%) scale(0.86); }
.switch[aria-checked="true"]:active::after { transform: translate(calc(-50% + (var(--switch-w) - var(--switch-h)) / 2), -50%) scale(0.86); }
/* La zona de soltar ocupa media pantalla: un scale(.97) ahí se vería tosco.
   Un 0.5 % basta para que el dedo note que ha dado en el sitio. */
.soltar:active { transform: scale(0.995); transition-duration: 90ms; }

@media (prefers-reduced-motion: reduce) {
  .btn:active, .herramienta:active:not(:disabled), .pestana:active,
  .tema-btn:active, .soltar:active { transform: none; }
}
.btn[disabled], .btn[aria-disabled="true"] { background: var(--paper-300); border-color: var(--paper-300); color: var(--ink-500); cursor: not-allowed; transform: none; }
.btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-rule); }
.btn--ghost:hover { background: var(--color-sheet); border-color: var(--ink-400); }
.btn--big { min-height: 3.25rem; padding: 0 1.5rem; font-size: 1.0625rem; }
.btn--full { width: 100%; white-space: normal; text-align: center; padding-block: 0.5rem; }
.btn .btn-meta { font-family: var(--font-mono); font-size: 0.8em; opacity: 0.72; font-weight: 400; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::after {
  content: ""; width: 0.9em; height: 0.9em; border-radius: 50%;
  border: 1.5px solid currentColor; border-right-color: transparent;
  animation: girar 0.7s linear infinite;
}
.link {
  color: var(--color-accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.link:hover { text-decoration-color: currentColor; }
button.link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
button.link:disabled { opacity: 0.5; cursor: not-allowed; text-decoration: none; }
.centro { text-align: center; }

/* Etiquetas de tipo de dato y estado */
.tag {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.18em 0.62em; border-radius: var(--radius-pill);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4;
  background: var(--pastel-grey); color: var(--pastel-grey-ink); white-space: nowrap;
}
.tag--identidad    { background: var(--pastel-blue);   color: var(--pastel-blue-ink); }
.tag--identificador{ background: var(--pastel-yellow); color: var(--pastel-yellow-ink); }
.tag--contacto     { background: var(--pastel-green);  color: var(--pastel-green-ink); }
.tag--financiero   { background: var(--pastel-red);    color: var(--pastel-red-ink); }
.tag--otro, .tag--manual { background: var(--pastel-grey); color: var(--pastel-grey-ink); }
.tag--demo { background: var(--pastel-yellow); color: var(--pastel-yellow-ink); }

/* Interruptor accesible: <button role="switch" aria-checked> */
.switch {
  position: relative; flex: none; display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem; margin: -0.75rem -0.25rem -0.75rem 0;
}
.switch::before {
  content: ""; width: var(--switch-w); height: var(--switch-h); border-radius: var(--radius-pill);
  background: var(--color-sheet); border: 1.5px solid var(--ink-400);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.switch::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: calc(var(--switch-h) - 6px); height: calc(var(--switch-h) - 6px); border-radius: 50%;
  background: var(--ink-500);
  transform: translate(calc(-50% - (var(--switch-w) - var(--switch-h)) / 2), -50%);
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.switch[aria-checked="true"]::before { background: var(--switch-on); border-color: var(--switch-on); }
.switch[aria-checked="true"]::after { background: var(--white); transform: translate(calc(-50% + (var(--switch-w) - var(--switch-h)) / 2), -50%); }
.switch:focus-visible { box-shadow: none; }
.switch:focus-visible::before { box-shadow: var(--focus-ring); }
.switch:disabled { cursor: not-allowed; opacity: 0.5; }

/* Tachón (el motivo de la marca) */
.tacha {
  background: var(--color-redaction); color: transparent; border-radius: var(--radius-xs);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 0.04em 0.12em; margin: 0 -0.06em;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  -webkit-user-select: none; user-select: none;
}
.tacha.is-lifted {
  background: var(--pastel-yellow); color: var(--color-text);
  box-shadow: inset 0 -1px 0 var(--pastel-yellow-ink);
  -webkit-user-select: text; user-select: text;
}
/* Asomar: el tachón bajo el cursor deja leer lo tapado en blanco, sin dejar de ser negro; los demás no cambian */
@media (hover: hover) and (pointer: fine) {
  .tacha:not(.is-lifted):hover { color: var(--white); }
}
.tacha.is-focus { box-shadow: 0 0 0 2px var(--color-page), 0 0 0 3px var(--color-accent); }

/* Notas al margen (diligencia) */
.notas { list-style: none; padding: 0; counter-reset: nota; }
.nota {
  display: grid; grid-template-columns: var(--note-num-w) minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: start;
  padding: var(--space-3) 0; border-top: 1px solid var(--color-rule);
  transition: opacity var(--dur-base) var(--ease-out);
}
.nota:last-child { border-bottom: 1px solid var(--color-rule); }
.nota__num { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-text-muted); padding-top: 0.2rem; font-variant-numeric: tabular-nums; }
.nota__cuerpo { min-width: 0; display: grid; gap: 0.2rem; }
.nota__valor { font-family: var(--font-mono); font-size: 0.86rem; line-height: 1.4; overflow-wrap: anywhere; color: var(--color-text); }
.nota__ref { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-text-muted); }
.nota.is-off .nota__valor { color: var(--color-text-muted); text-decoration: line-through; text-decoration-color: var(--ink-400); }
.nota.is-focus .nota__num { color: var(--color-accent); }
.nota--nueva { animation: nota-entra var(--dur-slow) var(--ease-out) both; }
.margen .nota--nueva { animation-duration: var(--dur-base); }
.nota__btn { display: block; width: 100%; text-align: left; padding: 0; border-radius: var(--radius-sm); }

/* Contador de créditos */
.creditos {
  display: inline-flex; align-items: baseline; gap: 0.4em;
  padding: 0.35rem 0.75rem; border: 1px solid var(--color-rule); border-radius: var(--radius-pill);
  min-height: 44px; align-items: center;
  background: var(--color-sheet); font-size: 0.875rem; white-space: nowrap; text-decoration: none;
}
.creditos__num { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.creditos.is-bajo { border-color: var(--pastel-red-ink); }
.creditos.is-bajo .creditos__num { color: var(--pastel-red-ink); }

/* Aviso de modo demo */
.aviso-demo {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--pastel-yellow-line); border-radius: var(--radius-md);
  background: var(--pastel-yellow); color: var(--pastel-yellow-ink); font-size: var(--type-small); line-height: 1.45;
}
.aviso-demo svg { flex: none; margin-top: 0.2em; }

/* Avisos en página (nunca alert()) */
.aviso {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--color-rule); border-radius: var(--radius-md);
  background: var(--color-sheet); font-size: var(--type-small); line-height: 1.5;
}
.aviso--error { background: var(--pastel-red); border-color: var(--pastel-red-line); color: var(--pastel-red-ink); }
.aviso--ok { background: var(--pastel-green); border-color: var(--pastel-green-line); color: var(--pastel-green-ink); }
.aviso--ojo { background: var(--pastel-yellow); border-color: var(--pastel-yellow-line); color: var(--pastel-yellow-ink); }
.aviso svg { flex: none; margin-top: 0.15rem; }

.toast-zona {
  position: fixed; left: 50%; bottom: var(--space-5); z-index: 90; transform: translateX(-50%);
  display: grid; gap: var(--space-2); width: min(28rem, 100% - 2rem); pointer-events: none;
}
.toast {
  pointer-events: auto; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--ink-900); color: var(--paper-50); font-size: var(--type-small); line-height: 1.45;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@starting-style { .toast { opacity: 0; transform: translateY(8px); } }
.toast.is-saliendo { opacity: 0; transform: translateY(8px); transition-duration: var(--dur-fast); }

/* Formularios */
.campo { display: grid; gap: var(--space-2); }
.campo label { font-size: var(--type-small); font-weight: 500; }
.campo__ayuda { font-size: var(--type-xs); color: var(--color-text-muted); }
.input {
  width: 100%; min-height: var(--btn-height); padding: 0 var(--space-3);
  border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-sheet);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input:hover { border-color: var(--ink-400); }
.input:focus-visible { border-color: var(--color-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 18%, transparent); border-radius: var(--radius-md); }
.input[aria-invalid="true"] { border-color: var(--pastel-red-ink); }
.campo__error { font-size: var(--type-xs); color: var(--pastel-red-ink); }

/* Diálogo */
.dialogo {
  width: min(31rem, 100% - 2rem); max-height: calc(100dvh - 2rem); padding: 0; margin: auto;
  border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-sheet); color: var(--color-text);
}
.dialogo {
  opacity: 0; transform: translateY(10px) scale(0.985);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
    overlay var(--dur-fast) allow-discrete, display var(--dur-fast) allow-discrete;
}
.dialogo[open] { opacity: 1; transform: none; transition-duration: var(--dur-base); }
@starting-style { .dialogo[open] { opacity: 0; transform: translateY(10px) scale(0.985); } }
.dialogo::backdrop {
  background: rgb(17 17 17 / 0);
  transition: background-color var(--dur-fast) var(--ease-out), overlay var(--dur-fast) allow-discrete, display var(--dur-fast) allow-discrete;
}
.dialogo[open]::backdrop { background: rgb(17 17 17 / 0.42); transition-duration: var(--dur-base); }
@starting-style { .dialogo[open]::backdrop { background: rgb(17 17 17 / 0); } }
.dialogo__cab { display: flex; justify-content: space-between; align-items: start; gap: var(--space-4); padding: var(--space-5) var(--space-5) 0; }
.dialogo__cab h2 { font-size: 1.75rem; }
.dialogo__cuerpo { padding: var(--space-4) var(--space-5) var(--space-5); display: grid; gap: var(--space-4); }
.dialogo__cerrar { width: 2.75rem; height: 2.75rem; margin: -0.6rem -0.75rem 0 0; display: grid; place-items: center; border-radius: var(--radius-md); color: var(--color-text-muted); }
.dialogo__cerrar:hover { color: var(--color-text); background: var(--color-ground); }
.tarjeta-demo {
  display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px dashed var(--color-rule); border-radius: var(--radius-md);
  background: var(--paper-50); font-family: var(--font-mono); font-size: 0.9rem; color: var(--color-text-muted);
}
.tarjeta-demo__fila { display: flex; justify-content: space-between; gap: var(--space-3); }

/* Acordeón de preguntas */
.faq { border-top: 1px solid var(--color-rule); }
.faq details { border-bottom: 1px solid var(--color-rule); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  min-height: 3.5rem; padding: var(--space-3) 0; font-weight: 500; font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 0.8rem; height: 0.8rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform var(--dur-base) var(--ease-in-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__resp { padding: 0 0 var(--space-5); max-width: 60ch; color: var(--color-text-soft); }
.faq__resp p + p { margin-top: var(--space-3); }

/* La respuesta se despliega en vez de aparecer de golpe (solo navegadores que saben animar a height:auto) */
@supports selector(::details-content) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content {
    height: 0; overflow: clip;
    transition: height var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete;
  }
  .faq details[open]::details-content { height: auto; }
}

/* Cabecera y pie compartidos */
.cab {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--color-ground) 92%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out);
}
@supports (backdrop-filter: blur(1px)) { .cab { backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); } }
.cab.is-scrolled { border-bottom-color: var(--color-rule); }
.cab__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 4rem; }
.marca { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; min-height: 44px; white-space: nowrap; }
.marca__signo { width: 1.55rem; height: 1.55rem; flex: none; }
.cab__nav { display: flex; align-items: center; gap: var(--space-1); }
.cab__nav a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.7rem; border-radius: var(--radius-md);
  text-decoration: none; font-size: 0.95rem; color: var(--color-text-soft); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.cab__nav a:not(.btn):hover { color: var(--color-text); background: var(--paper-200); }
.cab__nav .btn { margin-left: var(--space-2); }

/* Volver arriba (comun.js, initVolverArriba). Las páginas legales y la
   portada son largas; la app queda excluida desde el JS. */
.arriba {
  position: fixed; z-index: 40;
  right: var(--gutter);
  /* La barra de gestos de iOS se come el borde inferior. */
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-rule); background: var(--color-sheet); color: var(--color-text);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 10px 26px -14px rgb(0 0 0 / 0.35);
  opacity: 0; transform: translateY(8px) scale(0.92); pointer-events: none; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base), border-color var(--dur-fast) var(--ease-out);
}
.arriba.is-visible { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.arriba svg { width: 1.1rem; height: 1.1rem; }
.arriba:active { transform: scale(0.92); transition-duration: 90ms; }
@media (hover: hover) and (pointer: fine) {
  .arriba:hover { border-color: var(--ink-400); }
}
@media (prefers-reduced-motion: reduce) {
  .arriba { transition: opacity 0.01s, visibility 0s; }
  .arriba:active { transform: none; }
}
@media print { .arriba { display: none !important; } }

/* Botón de tema (comun.js, initTema). Mismo tamaño de diana que el resto
   de controles de la cabecera y sin fondo propio: es una utilidad, no una
   acción, y no debe competir con «Probar gratis». */
.tema-btn {
  display: grid; place-items: center; flex: none;
  width: 2.25rem; height: 2.25rem; margin-inline: var(--space-1);
  border-radius: var(--radius-md); color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.tema-btn svg { width: 1.05rem; height: 1.05rem; }
.tema-btn:active { transform: scale(0.92); transition-duration: 90ms; }
@media (hover: hover) and (pointer: fine) {
  .tema-btn:hover { color: var(--color-text); background: var(--paper-200); }
}
.app-cab__der .tema-btn { margin-right: var(--space-2); }
@media print { .tema-btn { display: none !important; } }

.pie { border-top: 1px solid var(--color-rule); padding-block: var(--space-7) var(--space-6); margin-top: var(--space-9); font-size: var(--type-small); color: var(--color-text-muted); }
.pie__fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-5); }
.pie nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.pie a { text-decoration: none; display: inline-flex; min-height: 2.75rem; align-items: center; }
.pie a:hover { color: var(--color-text); text-decoration: underline; }

/* ============================== 6. Portada */

/* El eje: una columna principal y la columna de margen, separadas por una única regla */
.pliego { display: grid; grid-template-columns: minmax(0, 1fr); }
.pliego__margen { border-top: 1px solid var(--color-rule); padding-top: var(--space-5); }
.pliego__margen:empty { display: none; }

.hero { padding-block: var(--space-7) var(--space-8); }
.hero__titulo { font-size: min(var(--type-display), 4.5rem); max-width: 19ch; font-weight: 450; }
.hero__titulo .tacha { padding-inline: 0.08em; }
.hero__entrada { margin-top: var(--space-5); max-width: 48ch; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); color: var(--color-text-soft); line-height: 1.55; }
.hero__acciones { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.hero__nota { font-size: var(--type-small); color: var(--color-text-muted); }

/* La diligencia de ejemplo */
.diligencia { margin-top: var(--space-6); }
.diligencia__pestanas { display: flex; gap: var(--space-1); margin-bottom: var(--space-3); }
.pestana {
  min-height: 2.75rem; padding: 0 0.95rem; border: 1px solid transparent; border-radius: var(--radius-pill);
  font-size: 0.9rem; color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pestana:hover { color: var(--color-text); }
.pestana[aria-selected="true"] { color: var(--color-text); border-color: var(--color-rule); background: var(--color-sheet); }
.diligencia__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
/* El documento va en papel con los dos temas (ver --color-page). */
.hoja {
  position: relative; background: var(--color-page); border: 1px solid var(--color-page-rule); border-radius: var(--radius-xs);
  padding: var(--sheet-pad); font-family: var(--font-serif); font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem); line-height: 1.75; color: var(--color-page-text);
}
.hoja__membrete { display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-4); margin-bottom: var(--space-5); border-bottom: 1px solid var(--color-page-rule); font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-page-muted); letter-spacing: 0.02em; }
.hoja__titulo { font-family: var(--font-serif); font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem); letter-spacing: 0.02em; text-transform: uppercase; font-weight: 600; margin-bottom: var(--space-4); color: var(--color-page-strong); }
.hoja p + p { margin-top: var(--space-3); }
.hoja__linea { position: relative; }
.hoja__pie { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--color-page-rule); font-family: var(--font-sans); font-size: var(--type-xs); color: var(--color-page-muted); }
.diligencia__margen { padding-top: var(--space-5); }
.diligencia__margen-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); }
.diligencia__margen-cab h2 { font-family: var(--font-sans); font-size: 0.95rem; letter-spacing: 0; font-weight: 600; line-height: 1.3; }
.diligencia__cuenta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-text-muted); }
.diligencia__ayuda { margin-top: var(--space-4); font-size: var(--type-xs); color: var(--color-text-muted); line-height: 1.55; }

/* Secciones de la portada */
.seccion { padding-block: var(--space-9) 0; }
.seccion__cab { max-width: 40rem; }
.seccion__cab h2 { font-size: var(--type-h2); }
.seccion__cab p { margin-top: var(--space-4); color: var(--color-text-soft); font-size: 1.125rem; max-width: 56ch; }

/* Qué pasa con tu archivo: el recorrido real */
.recorrido { margin-top: var(--space-7); display: grid; gap: 0; border-top: 1px solid var(--color-rule); }
.recorrido__paso { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-5); border-bottom: 1px solid var(--color-rule); }
.recorrido__donde { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-text-muted); }
.recorrido__donde .punto { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ink-900); }
.recorrido__donde .punto--servidor { background: transparent; border: 1.5px solid var(--ink-900); }
.recorrido__paso h3 { font-family: var(--font-serif); font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 500; letter-spacing: -0.015em; }
.recorrido__paso p { color: var(--color-text-soft); max-width: 60ch; }
.recorrido__muestra { font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.6; padding: var(--space-3) var(--space-4); background: var(--color-sheet); border: 1px solid var(--color-rule-sheet); border-radius: var(--radius-sm); color: var(--ink-600); overflow-x: auto; white-space: pre; }

/* Qué datos reconoce */
.datos { margin-top: var(--space-7); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.datos__pais h3 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.015em; padding-bottom: var(--space-3); border-bottom: 1px solid var(--ink-900); }
.datos__lista { list-style: none; padding: 0; }
.datos__lista li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding-block: 0.7rem; border-bottom: 1px solid var(--color-rule); }
.datos__lista .mono { color: var(--color-text-muted); font-size: 0.8rem; text-align: right; }
.datos__nota { margin-top: var(--space-5); font-size: var(--type-small); color: var(--color-text-muted); max-width: 64ch; }

/* La última palabra */
.control { margin-top: var(--space-7); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.control__lista { list-style: none; padding: 0; display: grid; gap: var(--space-5); }
.control__lista li { display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--space-3); }
.control__icono { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-sheet); }
.control__lista h3 { font-size: 1.0625rem; }
.control__lista p { color: var(--color-text-soft); font-size: var(--type-small); margin-top: 0.15rem; }
.control__limites { padding: var(--space-5); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-sheet); }
.control__limites h3 { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 500; }
.control__limites ul { margin-top: var(--space-3); padding-left: 1.1rem; display: grid; gap: var(--space-2); color: var(--color-text-soft); font-size: var(--type-small); }

/* Precios: una hoja de tarifas, no tres tarjetas iguales */
.tarifas { margin-top: var(--space-7); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-sheet); overflow: hidden; }
.tarifas__cols { display: grid; grid-template-columns: minmax(0, 1fr); }
.plan { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; align-content: stretch; gap: var(--space-4); padding: var(--space-6) var(--space-5); border-top: 1px solid var(--color-rule-sheet); }
.plan:first-child { border-top: 0; }
.plan--destacado { background: var(--paper-50); }
.plan--destacado::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--ink-900); }
.plan__nombre { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-weight: 600; font-size: 1.0625rem; }
.plan__precio { display: flex; align-items: baseline; gap: 0.35rem; }
.plan__cifra { font-family: var(--font-serif); font-size: clamp(2.75rem, 2.2rem + 2vw, 3.75rem); font-weight: 450; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: lining-nums; }
.plan__periodo { color: var(--color-text-muted); font-size: var(--type-small); }
.plan__paginas { font-family: var(--font-mono); font-size: 0.9rem; }
.plan__lista { list-style: none; padding: 0; display: grid; gap: var(--space-2); font-size: var(--type-small); color: var(--color-text-soft); }
.plan__lista li { display: grid; grid-template-columns: 1rem 1fr; gap: var(--space-2); }
.plan__lista svg { margin-top: 0.3rem; }
.tarifas__pie { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-rule-sheet); background: var(--paper-50); font-size: var(--type-xs); color: var(--color-text-muted); }
.tarifas__pie p { max-width: 75ch; }

/* Cierre */
.cierre { padding-block: var(--space-9) 0; }
.cierre__caja { border-top: 1px solid var(--ink-900); padding-top: var(--space-6); display: grid; gap: var(--space-5); }
.cierre h2 { font-size: var(--type-h2); max-width: 18ch; }

/* ============================== 7. App */
.app-body { background: var(--color-ground); }
.app-cab { border-bottom: 1px solid var(--color-rule); background: var(--color-ground); position: sticky; top: 0; z-index: 40; }
.app-cab__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 3.75rem; }
.app-cab__der { display: flex; align-items: center; gap: var(--space-2); }
.app-cab .marca { font-size: 1.2rem; }
/* Móvil: la cabecera de la app no cabía (se salía 17 px en la app y 69 px en la cuenta).
   El aviso de demo sigue en la página de cuenta y en el diálogo de pago, que es donde importa. */
.app-cab .herramienta { min-width: 44px; min-height: 44px; justify-content: center; padding: 0; }
@media (max-width: 539px) {
  .app-cab .tag--demo { display: none; }
  .app-cab .marca span { font-size: 1.1rem; }
}
.app-main { padding-block: var(--space-6) var(--space-8); }
.pasos { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; padding: 0; margin-bottom: var(--space-5); font-size: var(--type-small); color: var(--color-text-muted); }
.pasos li { display: inline-flex; align-items: center; gap: var(--space-2); }
.pasos__n { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--color-rule); font-family: var(--font-mono); font-size: 0.72rem; }
.pasos li[aria-current="step"] { color: var(--color-text); font-weight: 500; }
.pasos li[aria-current="step"] .pasos__n { background: var(--ink-900); border-color: var(--ink-900); color: var(--paper-50); }
.pasos li.is-hecho .pasos__n { border-color: var(--ink-900); color: var(--ink-900); }

.app-titulo { font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem); margin-bottom: var(--space-2); }
.app-sub { color: var(--color-text-soft); max-width: 62ch; }

/* Zona de soltar */
.soltar {
  position: relative; margin-top: var(--space-5); display: grid; place-items: center; text-align: center; gap: var(--space-3);
  min-height: 19rem; padding: var(--space-6) var(--space-5);
  border: 1px dashed var(--ink-400); border-radius: var(--radius-lg); background: var(--color-sheet);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.soltar:hover, .soltar.is-over { border-color: var(--ink-900); background: var(--paper-50); }
.soltar.is-over { border-style: solid; }
.soltar h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.soltar input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.soltar input[type="file"]:focus-visible + .soltar__marco { box-shadow: var(--focus-ring); }
.soltar__marco { position: absolute; inset: -1px; border-radius: var(--radius-lg); pointer-events: none; }
.soltar__limites { font-size: var(--type-xs); color: var(--color-text-muted); }

/* Ficha del archivo antes de gastar */
.ficha { margin-top: var(--space-5); display: grid; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-sheet); }
.ficha__fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); }
.ficha__nombre { font-weight: 500; overflow-wrap: anywhere; }
.ficha__coste { font-family: var(--font-mono); font-size: 0.9rem; color: var(--color-text-soft); }
.ficha__acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Mesa de revisión: documento + margen */
.mesa { margin-top: var(--space-5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.visor { display: grid; gap: var(--space-4); min-width: 0; }
.visor__barra { position: sticky; top: 3.75rem; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding-block: var(--space-2); background: var(--color-ground); border-bottom: 1px solid var(--color-rule); }
.visor__barra-izq, .visor__barra-der { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.herramienta { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.5rem; padding: 0 0.8rem; border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-sheet); font-size: 0.9rem; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.herramienta:hover { border-color: var(--ink-400); }
.herramienta[aria-pressed="true"] { background: var(--ink-900); border-color: var(--ink-900); color: var(--paper-50); }
.visor__hojas { overflow-x: auto; overscroll-behavior-x: contain; }
.paginas { display: grid; gap: var(--space-5); width: calc(100% * var(--zoom, 1)); }
.zoom { display: inline-flex; align-items: center; gap: var(--space-1); margin-right: var(--space-2); }
.zoom__valor { min-width: 3.4rem; text-align: center; font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-text-soft); font-variant-numeric: tabular-nums; }
.herramienta:disabled { opacity: 0.45; cursor: not-allowed; }
.pagina { position: relative; background: var(--color-page); border: 1px solid var(--color-page-rule); border-radius: var(--radius-xs); overflow: hidden; touch-action: pan-x pan-y pinch-zoom; }
.pagina canvas { width: 100%; height: auto; }
.pagina__capa { position: absolute; inset: 0; }
.pagina__num { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 3; padding: 0.1rem 0.45rem; border-radius: var(--radius-sm); background: rgb(255 255 255 / 0.9); border: 1px solid var(--color-page-rule); font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-page-muted); }
.pagina__estado { position: absolute; left: var(--space-2); top: var(--space-2); z-index: 3; }
.pagina.is-pendiente::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 50%; background: linear-gradient(90deg, transparent, rgb(247 246 243 / 0.55), transparent); transform: translateX(-100%); animation: barrido 1.6s linear infinite; pointer-events: none; }
/* La página renderizada se funde sobre su hueco en vez de saltar */
.pagina canvas { transition: opacity var(--dur-base) var(--ease-out); }
@starting-style { .pagina canvas { opacity: 0; } }
.pagina canvas.is-redibujo { transition: none; }
.caja {
  position: absolute; background: var(--color-redaction); border-radius: 1px;
  transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
/* Tachón recién detectado: se pasa como un rotulador, de izquierda a derecha (el mismo gesto que el titular) */
.caja--llega { animation: caja-traza 280ms var(--ease-out) var(--retraso, 0ms) both; }
@media (hover: hover) and (pointer: fine) {
  .pagina:not(.is-dibujando) .caja:not(.is-off):hover { background: transparent; -webkit-backdrop-filter: invert(1) grayscale(1); backdrop-filter: invert(1) grayscale(1); cursor: pointer; }
}
/* Asomar lo tapado: solo el tachón bajo el cursor (o el tocado en móvil) deja leer en claro lo de debajo;
   los demás siguen negros. Solo en pantalla: el PDF exportado va opaco. */
.caja.is-asomada:not(.is-off) { background: transparent; -webkit-backdrop-filter: invert(1) grayscale(1); backdrop-filter: invert(1) grayscale(1); }
.caja.is-off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pastel-yellow-ink); }
.caja.is-off::after { content: ""; position: absolute; inset: 0; background: rgb(251 243 219 / 0.45); }
.caja.is-focus { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--color-accent); z-index: 2; }
.caja--manual { background: var(--color-redaction); }
.caja-borrador { position: absolute; border: 1.5px dashed var(--color-accent); background: rgb(31 75 143 / 0.12); pointer-events: none; }
.pagina.is-sin-hallazgos { outline: 2px dashed var(--pastel-yellow-ink); outline-offset: -2px; }
.pagina__sello {
  position: absolute; left: var(--space-2); top: var(--space-2); z-index: 3;
  padding: 0.15rem 0.5rem; border-radius: var(--radius-sm);
  background: var(--pastel-yellow); border: 1px solid var(--pastel-yellow-line); color: var(--pastel-yellow-ink);
  font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.4;
}
.pagina.is-dibujando { cursor: crosshair; touch-action: none; }
.pagina.is-sin-analizar { outline: 2px dashed var(--ink-400); outline-offset: -2px; }
.pagina__sello--sin { background: var(--paper-200); border-color: var(--rule-300); color: var(--ink-700); }

/* Móvil: nota del tachón tocado, fija abajo */
.nota-flotante {
  position: fixed; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); z-index: 45;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); align-items: center;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--ink-900); border-radius: var(--radius-md); background: var(--color-sheet);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@starting-style { .nota-flotante { opacity: 0; transform: translateY(8px); } }
.nota-flotante[hidden] { display: none; }
.nota-flotante__cuerpo { display: grid; gap: 0.2rem; min-width: 0; }
.nota-flotante__cab { display: flex; align-items: center; gap: var(--space-2); }
.nota-flotante__acciones { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--space-2); }
@media (min-width: 960px) { .nota-flotante { display: none !important; } }

/* Columna de margen de la app */
.margen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
.margen__cab { display: grid; gap: var(--space-2); }
.margen__cab h2 { font-family: var(--font-sans); font-size: 1rem; letter-spacing: 0; font-weight: 600; line-height: 1.3; }
.margen__resumen { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-text-muted); }
.grupo { border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-sheet); }
.grupo__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
.grupo__cab-izq { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.grupo__n { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-text-muted); }
.grupo .notas { padding: 0 var(--space-3); }
.grupo .nota:last-child { border-bottom: 0; }
.grupo .nota { grid-template-columns: var(--note-num-w) minmax(0, 1fr) auto; }
.nota__quitar { width: 2.75rem; height: 2.75rem; margin: -0.6rem -0.5rem -0.6rem 0; display: grid; place-items: center; border-radius: var(--radius-md); color: var(--color-text-muted); }
.nota__quitar:hover { color: var(--pastel-red-ink); background: var(--pastel-red); }
.nota__aviso { font-size: var(--type-xs); color: var(--pastel-yellow-ink); }
.anadir { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-sheet); }
.anadir h3 { font-size: 0.95rem; }
.anadir__fila { display: flex; gap: var(--space-2); }
.anadir__fila .input { flex: 1; min-width: 0; }
.atajos { font-size: var(--type-xs); color: var(--color-text-muted); line-height: 1.8; }
.progreso { display: grid; gap: var(--space-2); }
.progreso__barra { height: 2px; background: var(--paper-300); border-radius: 2px; overflow: hidden; }
.progreso__relleno { height: 100%; width: 100%; background: var(--ink-900); transform-origin: left; transform: scaleX(0); transition: transform var(--dur-base) var(--ease-out); }
.progreso__texto { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-text-muted); }
.descargar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--ink-900); border-radius: var(--radius-md); background: var(--color-sheet); }
.descargar p { font-size: var(--type-xs); color: var(--color-text-muted); }
.hecho { margin-top: var(--space-5); display: grid; gap: var(--space-4); padding: var(--space-6) var(--space-5); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-sheet); }
.hecho h2 { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.3rem); }
.hecho__lista { list-style: none; padding: 0; display: grid; gap: var(--space-2); font-size: var(--type-small); color: var(--color-text-soft); }
.hecho__lista li { display: grid; grid-template-columns: 1rem 1fr; gap: var(--space-2); }
.hecho__lista svg { margin-top: 0.3rem; }
.hecho__lista li.is-aviso { color: var(--pastel-yellow-ink); font-weight: 500; }
.vacio { padding: var(--space-4); border: 1px dashed var(--color-rule); border-radius: var(--radius-md); font-size: var(--type-small); color: var(--color-text-muted); }

/* Menú de cuenta */
.menu { position: relative; }
.menu__lista { transform-origin: top right; transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out); }
@starting-style { .menu__lista { opacity: 0; transform: translateY(-4px) scale(0.97); } }
.menu__lista { position: absolute; right: 0; top: calc(100% + 0.4rem); min-width: 13rem; padding: var(--space-1); border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-sheet); z-index: 60; }
.menu__lista a, .menu__lista button { display: flex; width: 100%; min-height: 2.5rem; align-items: center; padding: 0 var(--space-3); border-radius: var(--radius-sm); text-decoration: none; font-size: 0.925rem; text-align: left; }
.menu__lista a:hover, .menu__lista button:hover { background: var(--color-ground); }
.menu__correo { padding: var(--space-2) var(--space-3); font-size: var(--type-xs); color: var(--color-text-muted); border-bottom: 1px solid var(--color-rule); margin-bottom: var(--space-1); overflow-wrap: anywhere; }

/* ============================== 8. Acceso, cuenta y textos */
.acceso { min-height: calc(100dvh - 4rem); display: grid; place-items: center; padding-block: var(--space-7); }
.acceso__caja { width: min(26rem, 100%); display: grid; gap: var(--space-5); }
.acceso__ilustracion { width: 8.5rem; height: auto; margin-bottom: calc(var(--space-2) * -1); }
.acceso__caja h1 { font-size: clamp(2.1rem, 1.7rem + 1.5vw, 2.8rem); line-height: 1.16; }
.acceso__caja h1 .tacha { padding-block: 0; background: linear-gradient(var(--color-redaction), var(--color-redaction)) 0 62% / 100% 0.78em no-repeat; }
.acceso__tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--color-rule); border-radius: var(--radius-md); padding: 3px; background: var(--color-sheet); }
.acceso__tabs button { min-height: 2.5rem; border-radius: var(--radius-sm); font-size: 0.925rem; color: var(--color-text-muted); }
.acceso__tabs button[aria-selected="true"] { background: var(--ink-900); color: var(--paper-50); }
.form { display: grid; gap: var(--space-4); }

.cuenta { padding-block: var(--space-7) var(--space-8); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
.cuenta h1 { font-size: clamp(2.1rem, 1.7rem + 1.5vw, 2.9rem); }
.resumen { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-sheet); }
.resumen__celda { padding: var(--space-5); border-top: 1px solid var(--color-rule-sheet); display: grid; gap: var(--space-1); align-content: start; }
.resumen__celda:first-child { border-top: 0; }
.resumen__etiqueta { font-size: var(--type-xs); color: var(--color-text-muted); }
.resumen__valor { font-family: var(--font-serif); font-size: 2rem; font-weight: 450; letter-spacing: -0.02em; line-height: 1.1; }
.resumen__valor .mono { font-family: var(--font-mono); font-size: 0.6em; letter-spacing: 0; }
.bloque h2 { font-size: 1.6rem; margin-bottom: var(--space-4); }
.tabla-scroll { overflow-x: auto; border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-sheet); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--type-small); }
.tabla th, .tabla td { padding: 0.7rem var(--space-4); text-align: left; border-bottom: 1px solid var(--color-rule-sheet); white-space: nowrap; }
.tabla th { font-size: var(--type-xs); font-weight: 500; color: var(--color-text-muted); }
.tabla tr:last-child td { border-bottom: 0; }
@media (max-width: 599.98px) {
  .tabla th, .tabla td { padding-inline: var(--space-3); }
  .tabla td:nth-child(2) { white-space: normal; min-width: 8.5rem; }
}
.tabla td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.planes-mini { display: grid; gap: var(--space-3); }
.plan-mini { transition: border-color var(--dur-base) var(--ease-out); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-sheet); }
.plan-mini.is-actual { border-color: var(--ink-900); }
.plan-mini__txt { display: grid; gap: 0.1rem; }
.plan-mini__nombre { font-weight: 600; }
.plan-mini__det { font-size: var(--type-small); color: var(--color-text-muted); }

.texto-legal { padding-block: var(--space-7) var(--space-8); }
.texto-legal article { max-width: 68ch; }
.texto-legal h1 { font-size: clamp(2.2rem, 1.8rem + 1.5vw, 3rem); margin-bottom: var(--space-3); }
.texto-legal h2 { font-size: 1.5rem; margin-top: var(--space-7); margin-bottom: var(--space-3); }
.texto-legal p, .texto-legal li { color: var(--color-text-soft); }
.texto-legal p + p { margin-top: var(--space-3); }
.texto-legal ul { padding-left: 1.2rem; display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.pendiente { background: var(--pastel-yellow); color: var(--pastel-yellow-ink); padding: 0 0.25em; border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 0.9em; }

/* ============================== 9. Movimiento */
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes nota-entra { from { opacity: 0; transform: translateY(6px); } }
@keyframes barrido { to { transform: translateX(200%); } }
@keyframes caja-traza { from { clip-path: inset(0 100% 0 0); } }
@keyframes tacha-cae { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* La tacha que cae sobre el titular: se dibuja de izquierda a derecha una sola vez */
.js .hero__titulo .tacha--cae { background: transparent; color: var(--color-text); position: relative; transition: color 0s linear 0.52s; }
.js .hero__titulo .tacha--cae::before {
  content: ""; position: absolute; inset: 0.22em -0.05em 0.12em; background: var(--color-redaction); border-radius: var(--radius-xs);
  transform: scaleX(0); transform-origin: left center;
}
.js.is-ready .hero__titulo .tacha--cae { color: transparent; }
.js.is-ready .hero__titulo .tacha--cae::before { animation: tacha-cae 0.62s var(--ease-in-out) 0.35s both; }

/* Cambios de etapa en la app y de paso en el pago: lo nuevo entra en vez de sustituir de golpe */
[data-etapa], .ficha, [data-checkout-paso] { transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
@starting-style { [data-etapa], .ficha, [data-checkout-paso] { opacity: 0; transform: translateY(8px); } }

/* Aparición al hacer scroll: contenido visible por defecto, solo se anima con JS listo */
.js .aparece { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js .aparece.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .aparece { opacity: 1; transform: none; transition: none; }
  .js.is-ready .hero__titulo .tacha--cae::before { animation: none; transform: none; }
  .js.is-ready .hero__titulo .tacha--cae { transition: none; }
  .nota--nueva, .caja--llega { animation: none; }
  /* Menos movimiento = se conservan los fundidos, se quitan los desplazamientos */
  .dialogo, .toast.is-saliendo { transform: none; }
  @starting-style { .nota-flotante { transform: none; } }
  @starting-style {
    [data-etapa], .ficha, [data-checkout-paso], .toast, .dialogo[open] { transform: none; }
    .menu__lista { transform: none; }
  }
  .faq details::details-content { transition: none; }
  .pagina.is-pendiente::after { animation: none; }
  .btn[aria-busy="true"]::after { animation-duration: 2s; }
}

/* Modo de alto contraste (Windows): el anillo de foco es una sombra y ahí desaparece, y los tachones
   perderían su fondo negro, así que parecería que los datos están a la vista. */
@media (forced-colors: active) {
  :focus-visible, .switch:focus-visible::before { outline: 2px solid CanvasText; outline-offset: 2px; }
  .tacha, .caja, .caja--manual, .hero__titulo .tacha--cae::before, .progreso__relleno { forced-color-adjust: none; }
}

/* ============================== 10. Responsive (móvil primero) */
@media (min-width: 540px) {
  .datos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); }
  .resumen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .resumen__celda { border-top: 0; border-left: 1px solid var(--color-rule-sheet); }
  .resumen__celda:first-child { border-left: 0; }
}
@media (min-width: 720px) {
  .recorrido__paso { grid-template-columns: 11rem minmax(0, 1fr); column-gap: var(--space-6); }
  .recorrido__paso > .recorrido__donde { grid-row: span 3; align-self: start; padding-top: 0.55rem; }
  .control { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-8); }
}
@media (min-width: 960px) {
  .pliego, .diligencia__cuerpo { grid-template-columns: minmax(0, 1fr) var(--margin-col); }
  .pliego__margen { border-top: 0; border-left: 1px solid var(--color-rule); padding: 0 0 0 var(--space-5); }
  .diligencia__cuerpo { column-gap: 0; align-items: start; }
  .diligencia__margen { padding: var(--space-2) 0 0 var(--space-5); border-left: 1px solid var(--color-rule); margin-left: var(--space-5); }
  .tarifas__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan { border-top: 0; border-left: 1px solid var(--color-rule-sheet); padding: var(--space-6); }
  .plan:first-child { border-left: 0; }
  .mesa { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-6); }
  .margen { position: sticky; top: 4.5rem; max-height: calc(100dvh - 5.5rem); overflow-y: auto; padding-right: 0.25rem; overscroll-behavior: contain; }
  .cierre__caja { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
@media (min-width: 1280px) {
  .mesa { grid-template-columns: minmax(0, 1fr) 22rem; }
}
@media (max-width: 719.98px) {
  /* En móvil el encabezado enseña la marca y UNA sola acción: la que toca según el estado.
     Con el logotipo a dos palabras no caben tres piezas en 375 px sin que algo parta. */
  .cab__nav a.cab__enlace { display: none; }
  .cab--con-sesion .cab__nav .btn { display: none; }                  /* dentro → «Abrir la app» */
  .cab:not(.cab--con-sesion) .cab__nav a:not(.btn) { display: none; } /* fuera  → «Probar gratis» */
}
@media print {
  .cab, .pie, .toast-zona, .skip-link, .texto-legal button { display: none; }
  body { background: #fff; }
}