/* foto.nonimo.ai — the tokens of nonimo.ai (src/styles/global.css), light only like the site. No web fonts: this
   origin serves nothing but the tool, and the system font keeps the first load at a few KB. */
:root {
  --acento: #2fbf9f; --acento-texto: #0f7a63; --fondo: #fbfcfb; --panel: #ffffff; --tinta: #10201c;
  --tinta-suave: #4a5c57; --borde: #e3eae7; --marca-suave: #e9f6f2; color-scheme: light;
  --manual: #94601a; --manual-fondo: #fdf3e1;
  --alto-foto: 70vh;   /* the preview's height cap: app.js sets it from the visible window (the parent's, embedded) */
}
* { box-sizing: border-box; margin: 0; }
/* iOS Safari enlarges SOME texts on its own (text autosizing: the one-tap texts came out at different sizes on an iPhone,
   8-oct): the sizes are the stylesheet's, all of them */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
[hidden] { display: none !important; }
body { background: var(--fondo); color: var(--tinta); font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif; }
main { max-width: 1000px; margin: 0 auto; padding: 24px 16px 40px; }
.incrustado body { background: transparent; }
.incrustado main { padding: 0 0 4px; max-width: none; }
.incrustado h1 { display: none; }
h1 { font-size: 1.4rem; line-height: 1.25; margin-bottom: 6px; letter-spacing: -0.01em; }
/* the privacy line, highlighted and right above the place to drop or choose the photo (8-oct), in both modes */
.promesa { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin-bottom: 12px; padding: 8px 12px;
  border-radius: 10px; background: var(--marca-suave); border: 1px solid color-mix(in srgb, var(--acento) 35%, var(--borde));
  color: var(--acento-texto); font-size: 0.92rem; font-weight: 600; line-height: 1.35; }
.promesa svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.soltar { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 16px; text-align: center;
  border: 1.5px dashed color-mix(in srgb, var(--acento) 55%, var(--borde)); border-radius: 14px; background: var(--panel); cursor: pointer; }
.soltar:hover, .soltar.encima { background: var(--marca-suave); border-color: var(--acento); }
.soltar:focus-within, .soltar:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.soltar input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.soltar-titulo { font-weight: 650; }
.soltar-boton { padding: 10px 20px; border-radius: 999px; background: var(--acento); color: #06231d; font-weight: 650; }
.soltar-nota { color: var(--tinta-suave); font-size: 0.85rem; }
.aviso { margin-top: 10px; padding: 10px 14px; border-radius: 10px; background: var(--manual-fondo); color: var(--manual); font-size: 0.9rem; }
button, select, input[type=text] { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: 0.45; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── the controls: chips on the left, the big «Tapar a mano» on the right (desktop, notebook #38) ── */
.mando { display: grid; gap: 10px 20px; margin-bottom: 10px; }
/* the two columns only with room for them: a narrow desktop window (or a narrow frame) gets one column, never chips
   squeezed one per line beside the button (measured at 375 px with a mouse) */
@media (min-width: 720px) { .escritorio .mando { grid-template-columns: minmax(0, 1fr) 230px; align-items: start; } }
.estado { min-height: 1.5em; color: var(--tinta-suave); font-size: 0.9rem; margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--borde); border-radius: 999px; padding: 4px 11px; font-size: 0.86rem; background: var(--panel); }
.chip[aria-pressed=true] { background: var(--tinta); color: var(--panel); border-color: var(--tinta); }
.ayuda { color: var(--tinta-suave); font-size: 0.82rem; margin-top: 6px; }
.mando-lado { display: grid; gap: 6px; align-content: start; }
.manual { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 10px 14px;
  border: 1.5px solid var(--manual); border-radius: 12px; background: var(--manual-fondo); color: var(--manual); font-weight: 650; }
.manual svg { width: 22px; height: 22px; }
.manual[aria-pressed=true] { background: var(--manual); color: var(--panel); }
.nota { color: var(--tinta-suave); font-size: 0.8rem; line-height: 1.35; }
.acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.acciones button { border: 0; background: transparent; padding: 4px 2px; font-size: 0.85rem; color: var(--acento-texto); text-decoration: underline; text-underline-offset: 2px; }

/* ── the toolbar over the picture: rotate, crop, whole photo, fit ── */
.barra { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.barra button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--borde); border-radius: 8px;
  background: var(--panel); font-size: 0.84rem; }
.barra button.icono { padding: 5px 7px; }
.barra button:hover:not(:disabled) { border-color: var(--acento); }

/* ── the picture: contained — never taller than the window (notebook #4, #31, #41) ── */
.lienzo { position: relative; min-height: 220px; border-radius: 10px; background: color-mix(in srgb, var(--borde) 45%, var(--panel)); }
.hojas { display: grid; gap: 12px; justify-items: center; padding: 8px; }
.hojas canvas { display: block; border-radius: 6px; background: var(--borde); max-width: 100%; }
.hojas.manual-on canvas { cursor: crosshair; }

/* ── «Tapar a mano» on a phone: an explicit drawing mode. Everything but the photo steps aside, the bar sits over it
   (sticky when standalone; embedded the parent scrolls the tool up) and only then does the photo take the finger:
   mano.js sets that on the canvas itself, never this stylesheet (guardian D) ── */
.dibujando .promesa, .dibujando .mando, .dibujando .barra, .dibujando .salida { display: none; }
.dibujo { position: sticky; top: 0; z-index: 2; display: grid; gap: 6px; padding: 6px 0 8px; background: var(--fondo); }
.incrustado .dibujo { background: transparent; }
.dibujo-ayuda { color: var(--manual); font-size: 0.86rem; line-height: 1.35; }
/* the bar's three buttons are mano.js's (src/lib/mano.js, shared with the PDF tool): Deshacer / Empezar de nuevo / Listo */
.dibujo-botones .mano-barra { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dibujo-botones button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 8px;
  border: 1px solid var(--borde); border-radius: 10px; background: var(--panel); font-size: 0.88rem; line-height: 1.2; }
.dibujo-botones .mano-listo { background: var(--manual); color: var(--panel); border-color: var(--manual); font-weight: 650; }
.dibujando .hojas canvas { outline: 2px solid var(--manual); outline-offset: 2px; }
.editor { display: grid; gap: 8px; justify-items: center; padding: 8px; }
/* the crop editor is an explicit mode (shown only between «Ajustar recorte» and «Recortar»/«Cancelar»): while it is shown its
   canvas holds the finger, so dragging a corner does not scroll the page — the ONLY touch-action rule here (guardian D) */
.editor canvas { display: block; max-width: 100%; border-radius: 6px; cursor: grab; touch-action: none; }
.editor-botones { display: flex; gap: 8px; }
.editor-botones button { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--borde); background: var(--panel); }
.editor-botones .primario, .descargar .primario { background: var(--acento); color: #06231d; border-color: var(--acento); font-weight: 650; }
.leyendo .mando, .leyendo .barra, .leyendo .salida { display: none; }
.leyendo .lienzo { min-height: 300px; }
.lienzo.ocupado .hojas, .lienzo.ocupado .editor { opacity: 0.35; pointer-events: none; }

/* ── «Estamos cargando tu imagen» (notebook #3): a big round spinner, in the middle, Nonimo's colours ── */
.cargando { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 16px; }
.rueda { width: 56px; height: 56px; border-radius: 50%; border: 5px solid color-mix(in srgb, var(--acento) 22%, transparent); border-top-color: var(--acento); animation: girar 0.9s linear infinite; }
.cargando-texto { font-weight: 650; font-size: 1.05rem; }
.progreso { color: var(--tinta-suave); font-size: 0.85rem; min-height: 1.3em; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes latir { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .rueda { animation: latir 2.4s ease-in-out infinite; } }

/* ── watermark and download, one compact block under the picture ── */
.salida { display: grid; gap: 10px; margin-top: 12px; }
.estilos { display: inline-flex; border: 1px solid var(--borde); border-radius: 999px; overflow: hidden; background: var(--panel); }
.estilos button { border: 0; background: transparent; padding: 5px 11px; font-size: 0.85rem; }
.estilos button[aria-pressed=true] { background: var(--tinta); color: var(--panel); }
/* min-width: 0 — a <fieldset> does not shrink below its content by default (min-inline-size: min-content): the one-tap texts'
   row (nowrap, it scrolls sideways) widened the whole page to 742 px on a 375 phone (N26, 7-oct) */
.marca { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.interruptor { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.marca input[type=text] { flex: 1 1 240px; padding: 8px 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--panel); }
.marca.apagada .estilos, .marca.apagada input[type=text] { opacity: 0.4; pointer-events: none; }
.descargar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.descargar select, .descargar button { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--borde); background: var(--panel); }
/* «Descargar como» + the format, with a drawn arrow (8-oct: the bare select did not look like a menu) */
/* the edges were not found: one line over the photo, «Ajustar recorte» next to it (9-oct) */
.sin-bordes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; padding: 8px 12px; border-radius: 10px;
  background: var(--marca-suave); border: 1px solid color-mix(in srgb, var(--acento) 35%, var(--borde)); color: var(--tinta); font-size: 0.9rem; line-height: 1.35; }
.sin-bordes-ajustar { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--acento); background: var(--panel); color: var(--acento-texto); font-weight: 600; }
.formato-como { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; color: var(--tinta-suave); }
.formato-como:has(#formato[hidden]) { display: none; }
.formato-caja { position: relative; display: inline-flex; }
.descargar .formato-caja select { appearance: none; -webkit-appearance: none; padding-right: 34px; color: var(--tinta); font-size: 1rem; }
.formato-caja svg { position: absolute; right: 10px; top: 50%; width: 16px; height: 16px; margin-top: -8px; pointer-events: none;
  fill: none; stroke: var(--tinta); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* a phone's bar: the label above its menu, so «Descargar | Compartir | PNG» stays one row */
html:not(.escritorio) .formato-como { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 0.72rem; line-height: 1.1; }
html:not(.escritorio) .descargar .formato-caja select { padding: 8px 30px 8px 10px; }
html:not(.escritorio) .descargar > button { padding: 10px 12px; }
/* the quiet link-like button («Otro documento»): styled WHEREVER it sits — on a phone it leaves the download bar (8-oct), and a
   rule scoped to the bar left it as the system's grey button there; inside the bar it has to outweigh `.descargar button` */
.discreto, .descargar .discreto { border: 0; background: transparent; color: var(--acento-texto); text-decoration: underline; padding: 10px 4px; }
@media (min-width: 720px) { .escritorio .salida { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.mercados { display: grid; gap: 6px; margin-top: 12px; }
.mercados a { color: var(--acento-texto); }
.mando .aviso { margin: 0 0 8px; }

/* ── modo=marca (7-oct): the watermark first, only the two chips, no «Tapar a mano» column; the front's drop zone
   says which side it is and the back has its own, smaller, under the picture. Nothing here applies without the class. ── */
.modo-marca .marca { margin-bottom: 12px; }
.modo-marca .mando-lado { display: none; }
.escritorio.modo-marca .mando { grid-template-columns: minmax(0, 1fr); }
.soltar-cara { font-size: 0.8rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--acento-texto); }
.reverso { margin-top: 10px; padding: 18px 16px; gap: 4px; }
.marca-ajustes { display: flex; flex-wrap: wrap; gap: 8px 18px; width: 100%; }
.marca-ajuste { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--tinta-suave); }
.marca-ajuste input[type=range] { width: 120px; accent-color: var(--acento-texto); }
.marca-ajuste select { padding: 5px 8px; border: 1px solid var(--borde); border-radius: 8px; background: var(--panel); color: var(--tinta); }
.marca.apagada .marca-ajustes { opacity: 0.4; pointer-events: none; }
/* a phone takes one side at a time: no «front» badge on its single drop zone; tighter controls so they fit above the picture */
.modo-marca:not(.escritorio) .soltar-cara { display: none; }
.modo-marca:not(.escritorio) .marca { gap: 8px; margin-bottom: 8px; }
.modo-marca:not(.escritorio) .marca-ajuste input[type=range] { width: 96px; }
.otra-cara { flex-basis: 100%; }

/* ── one-tap watermark texts: one row, scrolling sideways (never taller) ── */
.marca-presets { display: flex; gap: 6px; width: 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.marca-presets::-webkit-scrollbar { display: none; }
.preset { flex: none; border: 1px solid var(--borde); border-radius: 999px; padding: 3px 10px; font-size: 0.82rem; background: var(--panel); white-space: nowrap; }
.preset:hover { border-color: var(--acento); }
.preset { font-size: 0.82rem; line-height: 1.3; }
.preset[aria-pressed=true] { background: var(--tinta); color: var(--panel); border-color: var(--tinta); }
/* the quick angles under the angle slider (8-oct) */
.marca-angulos { display: flex; gap: 6px; grid-column: 1 / -1; }
.angulo { border: 1px solid var(--borde); border-radius: 999px; padding: 3px 10px; font-size: 0.82rem; background: var(--panel); color: var(--tinta); font-variant-numeric: tabular-nums; }
.angulo:hover { border-color: var(--acento); }
.angulo[aria-pressed=true] { background: var(--tinta); color: var(--panel); border-color: var(--tinta); }
/* ── the phone's download bar, standalone: it stays at the bottom of the screen while the page scrolls (the .salida block
   gives its place to its children so the bar's sticky box is the whole tool). Embedded the frame does not scroll, the
   parent does: there the picture's cap keeps the bar on the first screen (N28). Sticky changes no layout: no shift. ── */
html:not(.escritorio):not(.incrustado) .salida { display: contents; }
html:not(.escritorio):not(.incrustado) .salida > #otra { justify-self: start; margin: 2px 0 10px; }
html:not(.escritorio):not(.incrustado) .descargar { position: sticky; bottom: 0; z-index: 3; background: var(--fondo);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--borde); }

/* ── modo=marca, the scene (7-oct afternoon, «everything visible before any file»): the two sides side by side with «Galería» and
   «Cámara» under each and the PDF button under both, on the left; the panel with every watermark option on the right (from
   860 px of width, the page's or the frame's); narrower, the panel goes first and one side shows at a time on a phone ── */
.modo-marca main { max-width: 1180px; }
.modo-marca.incrustado main { max-width: none; }
.marca-izq > .promesa { margin: 0; }
.marca-escena { display: grid; gap: 20px; }
@media (min-width: 860px) { .marca-escena { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .marca-panel { position: sticky; top: 12px; } }
/* narrower: the side to fill comes first (in the first screen) and the options under it — before AND after a file (8-oct, the
   alternative for PRUEBAS: the panel above the picture pushed the photo off the first screen, y = 787 of 812, as if nothing
   had loaded); the panel keeps its heading, and drops only its two notes once a side is read */
@media (max-width: 859px) { .marca-panel { padding: 12px; gap: 10px; } .marca-panel .marca { gap: 10px; }
  .marca-llena .marca-izq > .promesa, .marca-llena #marca-mover { display: none; }
  .marca-llena .marca-panel .marca-ajustes { gap: 8px 14px; } }
.marca-izq { display: grid; gap: 12px; min-width: 0; align-content: start; }
.caras { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.caras:empty { display: none; }
.cara { display: grid; gap: 8px; min-width: 0; align-content: start; }
.cara:has(> .soltar[hidden]) { display: none; }
.caras .soltar { min-height: 210px; justify-content: center; margin: 0; }
.cara-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cara-botones button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 10px; border: 1px solid var(--borde);
  border-radius: 10px; background: var(--panel); font-size: 0.9rem; }
.cara-botones button:hover { border-color: var(--acento); }
.exportar-pdf { padding: 11px 14px; border: 1px solid var(--borde); border-radius: 10px; background: var(--panel); font-weight: 600; }
.exportar-pdf:not(:disabled) { border-color: var(--acento); color: var(--acento-texto); }
.modo-marca:not(.escritorio) .exportar-pdf { display: none; }
.marca-panel { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 16px; border: 1px solid var(--borde); border-radius: 14px; background: var(--panel); }
.marca-panel-titulo { font-size: 1rem; font-weight: 650; line-height: 1.3; }
.marca-panel .marca { display: grid; gap: 14px; margin: 0; }
.marca-fila { display: grid; gap: 6px; min-width: 0; }
.marca-rotulo, .marca-panel .marca-ajuste > span { font-size: 0.82rem; font-weight: 600; color: var(--tinta-suave); }
.marca-panel .estilos { display: flex; }
.marca-panel .estilos button { flex: 1; }
.marca-panel .marca input[type=text] { width: 100%; flex: none; }
.marca-panel .marca-ajustes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.marca-panel .marca-ajuste { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; align-items: center; }
.marca-panel .marca-ajuste > :is(input, select) { grid-column: 1 / -1; }
.marca-panel .marca-ajuste input[type=range] { width: 100%; }
.marca-panel .marca-ajuste select { width: 100%; }
.marca-panel .marca-ajuste input[type=color] { width: 100%; height: 34px; padding: 2px; border: 1px solid var(--borde); border-radius: 8px; background: var(--panel); }
.marca-valor { grid-row: 1; grid-column: 2; font-size: 0.82rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.marca-restablecer { padding: 8px 12px; border: 1px solid var(--borde); border-radius: 10px; background: transparent; font-size: 0.86rem; color: var(--tinta-suave); }
.marca-restablecer:hover { border-color: var(--acento); color: var(--tinta); }
.marca-local { text-align: center; }
.hojas.dos { grid-template-columns: 1fr 1fr; align-items: start; }
/* the one-tap texts in the panel WRAP onto more lines (never cut: ORQ-WEB, 7-oct); a long one wraps inside its own chip */
.marca-panel .marca-presets { flex-wrap: wrap; overflow: visible; }
/* a desktop, cover mode: the one-tap texts wrap instead of scrolling sideways with the scrollbar hidden (measured 8-oct at 1440,
   embedded: the last one read «No válida para otros fines» with its date cut off, against «Descargar») */
.escritorio .marca-presets { flex-wrap: wrap; overflow: visible; }
.reverso-luego { margin: 6px 0 0; text-align: center; font-size: 0.86rem; color: var(--tinta-suave); }
.marca-panel .preset { flex: 0 1 auto; white-space: normal; text-align: left; }
.marca-panel .marca input[type=text] { font-size: 0.95rem; }
/* each side with its own «Girar» pair under it */
.hoja { margin: 0; display: grid; gap: 6px; justify-items: center; }
.hoja-barra { display: flex; gap: 6px; }
.girar-hoja { display: inline-flex; padding: 5px 9px; border: 1px solid var(--borde); border-radius: 8px; background: var(--panel); }
.girar-hoja:hover { border-color: var(--acento); }
/* the empty zones' line drawing of the card (front / back) */
.dibujo-cara { width: 132px; height: 84px; fill: none; stroke: color-mix(in srgb, var(--acento) 70%, var(--borde)); stroke-width: 1.6; }
.dibujo-cara rect:first-child { fill: var(--marca-suave); }
/* the empty desktop fits the panel: the two zones grow to its height (no blank strip under them) */
@media (min-width: 860px) {
  .modo-marca:not(.marca-llena) .marca-escena { align-items: stretch; }
  .modo-marca:not(.marca-llena) .marca-izq { grid-template-rows: auto 1fr auto; }
  .modo-marca:not(.marca-llena) .cara { grid-template-rows: 1fr auto; }
  .modo-marca:not(.marca-llena) .caras .soltar { height: 100%; }
}

/* ── the anonymize page's welcome (7-oct): the drop zone, «Galería» / «Cámara», and on a desktop the drawn card twice —
   as photographed and being covered. The card is the home page's (nonimo-web src/components/DocumentoDibujado.astro),
   its look copied here: this origin serves nothing of the site. ── */
.bienvenida { display: grid; gap: 18px; }
.bienvenida:has(.soltar[hidden]) { display: none; }
html:not(.escritorio) .bienvenida .cara-botones { display: none; }   /* a phone keeps its drop zone as it was */
.demo { display: none; }
@media (min-width: 860px) { .escritorio .demo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } }
.demo-lado { margin: 0; display: grid; gap: 8px; }
.demo-lado figcaption { font-size: 0.82rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); }
.demo-tapando figcaption { color: var(--acento-texto); }
.docs-vivos { --negro: #111; --tinta-tenue: #7c8c87; --mono: ui-monospace, Menlo, Consolas, monospace; }
.docs-vivos .doc { container-type: inline-size; }
.docs-vivos .doc-dentro { position: relative; display: flex; flex-direction: column; gap: 3.2cqw; aspect-ratio: 85.6 / 54; padding: 4.4cqw 5cqw;
  background: var(--panel); border: 1px solid color-mix(in srgb, var(--acento) 35%, var(--borde)); border-radius: 4.5cqw; overflow: hidden;
  box-shadow: 0 1px 2px rgba(14, 59, 52, 0.06); }
.docs-vivos .doc-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 3cqw; padding-bottom: 2cqw; border-bottom: 1px solid var(--borde); }
.docs-vivos .doc-titulo { font-weight: 700; font-size: max(7.5px, 2.7cqw); line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinta); }
.docs-vivos .doc-pais { font-weight: 600; font-size: max(7px, 2.3cqw); line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-suave); white-space: nowrap; }
.docs-vivos .doc-cuerpo { flex: 1; display: grid; grid-template-columns: 26% minmax(0, 1fr); gap: 4.5cqw; min-height: 0; }
.docs-vivos .doc-cuerpo .doc-foto { grid-column: auto; display: block; align-self: start; aspect-ratio: 3 / 4; border: 1px solid color-mix(in srgb, var(--tinta-tenue) 55%, transparent);
  border-radius: 1.6cqw; background: color-mix(in srgb, var(--acento) 4%, var(--panel)); overflow: hidden; }
.docs-vivos .doc-cuerpo .dv-cara { display: block; position: relative; width: 100%; height: 100%; max-width: none; overflow: visible; }
.docs-vivos .doc-cuerpo .dv-cara svg { display: block; width: 100%; height: 100%; fill: none; stroke: color-mix(in srgb, var(--tinta-tenue) 80%, transparent); stroke-width: 1.4; }
.docs-vivos .doc-cuerpo .dv-cara::after { inset: 0; border-radius: 0; }
.docs-vivos .doc-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 2.2cqw 4cqw; min-width: 0; }
.docs-vivos .dv-campo { grid-column: span 2; display: flex; flex-direction: column; gap: 0.5cqw; min-width: 0; }
.docs-vivos .dv-campo.dv-medio { grid-column: span 1; }
.docs-vivos .dv-rotulo { font-weight: 600; font-size: max(6.5px, 1.9cqw); line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinta-tenue);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-vivos .dv-valor { position: relative; align-self: flex-start; max-width: 100%; font: 600 max(9px, 3.1cqw)/1.25 var(--mono); color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.docs-vivos .dv-valor::after { content: ""; position: absolute; inset: 14% -0.4cqw; border-radius: 0.5cqw; background: var(--negro); transform-origin: left center; transform: scaleX(0); }
.docs-vivos .dv-a-la-vista .dv-valor::after { display: none; }
.docs-vivos .doc-mrz { display: flex; flex-direction: column; gap: 0.6cqw; margin-top: auto; }
.docs-vivos .doc-mrz .dv-valor { font: 500 max(7px, 2.75cqw)/1.2 var(--mono); letter-spacing: 0.02em; }
.docs-vivos .dv-marca { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; }
.docs-vivos .dv-trama { position: absolute; inset: -30% -40%; display: flex; flex-direction: column; justify-content: space-around; transform: rotate(-24deg); }
.docs-vivos .dv-trama span { font-size: max(7px, 2.1cqw); line-height: 1; letter-spacing: 0.06em; word-spacing: 0.3em; white-space: nowrap;
  color: color-mix(in srgb, var(--acento-texto) 26%, transparent); }
/* the right card: it starts UNCOVERED like everything we show (7-oct: never a black block over the card), then thin bars
   cover the values one after the other, the watermark last; held, uncovered again, and it starts over. The photo frame (a neutral
   line drawing, nobody's face) stays visible: covered it was one big black block */
.demo-tapando .doc-foto .dv-cara::after { display: none; }
.demo-tapando .dv-valor::after { animation: demo-tapar 10s ease-in-out infinite; animation-delay: inherit; }
.demo-tapando .dv-marca { animation: demo-marca 9s ease-in-out infinite; }
@keyframes demo-tapar { 0%, 22% { transform: scaleX(0); } 24.5%, 84% { transform: scaleX(1); } 88%, 100% { transform: scaleX(0); } }
@keyframes demo-marca { 0%, 52% { opacity: 0; } 58%, 82% { opacity: 1; } 88%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .demo-tapando .dv-valor::after { animation: none; transform: scaleX(1); }
  .demo-tapando .dv-marca { animation: none; opacity: 1; }
}
/* the second zone, the same as the front: its drawing in place of the photo; each side's own bar: rotate + download */
.dibujo-hueco { display: contents; }
html:not(.escritorio) .hoja-descargar { display: none; }   /* a phone: one side at a time, the bar's «Descargar» */
.caras .reverso { padding: 36px 16px; gap: 8px; }   /* in the empty state the second zone is the front's twin */
.hojas > .cara { width: 100%; align-self: stretch; grid-template-rows: 1fr auto; }
.hojas > .cara .soltar { height: 100%; margin: 0; padding: 24px 12px; }
/* the scanning line of the home page: it comes down the right card while the bars cover what it passes (in step with them),
   then leaves; a soft glow above it. Still with prefers-reduced-motion. */
.docs-vivos .barrido { position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: var(--acento); opacity: 0; pointer-events: none; }
.docs-vivos .barrido::before { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 26px;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--acento) 14%, transparent)); }
.demo-tapando .barrido { animation: demo-barrido 10s linear infinite; }
@keyframes demo-barrido { 0%, 20% { top: 8%; opacity: 0; } 22% { top: 8%; opacity: 1; } 50% { top: 96%; opacity: 1; } 53%, 100% { top: 96%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .demo-tapando .barrido { animation: none; opacity: 0; } }
/* the phone's sticky download bar steps aside in the two explicit modes: drawing by hand (its own bar sits over the photo) and the
   crop editor (its «Recortar» / «Cancelar» are under the picture, where the bar would sit over them) */
html.dibujando .descargar, html.recortando .descargar { display: none !important; }
/* each side's bar (7-oct): rotate ×2, crop, and download with its format menu; icons name themselves on hover, and on a phone
   (no hover) a short word goes with each icon */
.hoja-barra { flex-wrap: wrap; justify-content: center; }
.hoja-boton { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--borde); border-radius: 8px; background: var(--panel); font-size: 0.84rem; }
.hoja-boton:hover { border-color: var(--acento); }
.hb-txt { display: none; }
html:not(.escritorio) .hb-txt { display: inline; }
.hoja-descargar { position: relative; display: inline-flex; padding: 0; border: 0; }
.hoja-descargar > button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--borde); background: var(--panel); font-size: 0.84rem; }
.hd-principal { border-radius: 8px 0 0 8px; }
.hd-flecha { border-radius: 0 8px 8px 0; border-left: 0 !important; padding: 5px 8px !important; }
.hoja-descargar > button:hover { border-color: var(--acento); }
.hd-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 5; display: grid; min-width: 96px; padding: 4px; border: 1px solid var(--borde); border-radius: 10px; background: var(--panel); box-shadow: 0 6px 20px rgba(16, 32, 28, 0.12); }
.hd-menu button { padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; text-align: left; font-size: 0.86rem; }
.hd-menu button:hover { background: var(--marca-suave); }