:root {
    --papel:      #EAEEF1;
    --superficie: #FFFFFF;
    --hueco:      #F4F7F8;
    --tinta:      #13202A;
    --tinta-2:    #46606F;
    --tinta-3:    #7C939F;
    --regla:      #C7D5DD;
    --regla-2:    #DFE7EC;
    --acento:     #14607F;
    --valido:     #1A6B4C;
    --invalido:   #A32B1C;
    --aviso:      #8A5A10;
    --sombra:     0 1px 2px rgba(19,32,42,.06), 0 12px 32px -18px rgba(19,32,42,.35);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --papel:      #0E171D;
      --superficie: #142129;
      --hueco:      #101B22;
      --tinta:      #E6EDF1;
      --tinta-2:    #A2B7C2;
      --tinta-3:    #758996;
      --regla:      #294049;
      --regla-2:    #1E313A;
      --acento:     #58B0D0;
      --valido:     #4FBF8B;
      --invalido:   #EE8474;
      --aviso:      #D9A45B;
      --sombra:     0 1px 2px rgba(0,0,0,.5), 0 12px 32px -18px rgba(0,0,0,.8);
    }
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--papel);
    background-image:
      repeating-linear-gradient(102deg, transparent 0 22px, rgba(20,96,127,.045) 22px 23px),
      repeating-linear-gradient(-14deg, transparent 0 31px, rgba(20,96,127,.035) 31px 32px);
    color: var(--tinta);
    font-family: Karla, ui-sans-serif, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  .hoja {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 4vw, 2rem) 4rem;
  }

  /* ── Encabezado ─────────────────────────────────────── */

  header { border-bottom: 2.5px solid var(--tinta); padding-bottom: 1.1rem; }

  .marca {
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--acento);
    margin: 0 0 .5rem;
  }

  h1 {
    font-family: "Zilla Slab", Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.85rem, 1.4rem + 2vw, 2.7rem);
    line-height: 1.05;
    letter-spacing: -.018em;
    margin: 0;
    text-wrap: balance;
  }

  .subtitulo {
    color: var(--tinta-2);
    margin: .6rem 0 0;
    max-width: 54ch;
    text-wrap: pretty;
  }

  /* ── Campos del expediente ──────────────────────────── */

  .campos { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; }

  fieldset {
    border: 1px solid var(--regla);
    border-radius: 3px;
    background: var(--superficie);
    padding: 1.15rem 1.25rem 1.3rem;
    margin: 0;
    box-shadow: var(--sombra);
  }

  legend {
    font-family: "DM Mono", monospace;
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tinta-3);
    padding: 0 .45rem;
    margin-left: -.45rem;
  }

  .rotulo {
    font-family: "Zilla Slab", serif;
    font-weight: 600;
    font-size: 1.06rem;
    margin: 0 0 .15rem;
  }

  .ayuda { color: var(--tinta-2); font-size: .855rem; margin: 0 0 .85rem; text-wrap: pretty; }

  /* Zona de arrastre */
  .soltar {
    border: 1.5px dashed var(--regla);
    border-radius: 3px;
    background: var(--hueco);
    padding: 1.1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
  }
  .soltar:hover, .soltar:focus-visible { border-color: var(--acento); background: var(--superficie); }
  .soltar.encima { border-color: var(--acento); border-style: solid; background: var(--superficie); }
  .soltar:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

  .soltar-texto { font-size: .9rem; color: var(--tinta-2); }
  .soltar-texto b { color: var(--acento); font-weight: 600; }

  .elegido {
    display: none;
    margin-top: .8rem;
    padding: .7rem .85rem;
    background: var(--hueco);
    border-left: 3px solid var(--acento);
    border-radius: 0 3px 3px 0;
    font-size: .875rem;
  }
  .elegido.visible { display: block; }
  .elegido .nombre { font-weight: 600; word-break: break-all; }
  .elegido .peso { color: var(--tinta-2); font-family: "DM Mono", monospace; font-size: .78rem; }

  .huella {
    font-family: "DM Mono", monospace;
    font-size: .7rem;
    color: var(--tinta-2);
    word-break: break-all;
    margin-top: .35rem;
    line-height: 1.5;
  }

  /* Barra de progreso del hash */
  .progreso { margin-top: .7rem; display: none; }
  .progreso.visible { display: block; }
  .barra { height: 4px; background: var(--regla-2); border-radius: 2px; overflow: hidden; }
  .barra > i { display: block; height: 100%; width: 0%; background: var(--acento); transition: width .12s linear; }
  .progreso-texto {
    font-family: "DM Mono", monospace;
    font-size: .7rem;
    color: var(--tinta-2);
    margin-top: .35rem;
  }

  textarea {
    width: 100%;
    min-height: 92px;
    resize: vertical;
    padding: .7rem .8rem;
    border: 1px solid var(--regla);
    border-radius: 3px;
    background: var(--hueco);
    color: var(--tinta);
    font-family: "DM Mono", monospace;
    font-size: .74rem;
    line-height: 1.55;
  }
  textarea:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }

  .separador-o {
    display: flex; align-items: center; gap: .8rem;
    margin: .9rem 0 .75rem;
    font-family: "DM Mono", monospace;
    font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--tinta-3);
  }
  .separador-o::before, .separador-o::after {
    content: ""; flex: 1; height: 1px; background: var(--regla-2);
  }

  /* ── Accion ─────────────────────────────────────────── */

  .accion { margin-top: 1.6rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

  button.verificar {
    font-family: "Zilla Slab", serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .01em;
    color: #fff;
    background: var(--tinta);
    border: none;
    border-radius: 3px;
    padding: .78rem 1.9rem;
    cursor: pointer;
    transition: background .16s ease, transform .1s ease;
  }
  button.verificar:hover:not(:disabled) { background: var(--acento); }
  button.verificar:active:not(:disabled) { transform: translateY(1px); }
  button.verificar:disabled { opacity: .38; cursor: not-allowed; }
  button.verificar:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

  .nota-privacidad {
    font-size: .8rem;
    color: var(--tinta-2);
    max-width: 40ch;
    text-wrap: pretty;
  }

  /* ── Veredicto ──────────────────────────────────────── */

  .veredicto { margin-top: 2.2rem; display: none; }
  .veredicto.visible { display: block; }

  .sello-zona {
    position: relative;
    background: var(--superficie);
    border: 1px solid var(--regla);
    border-radius: 3px;
    padding: 2.1rem 1.5rem;
    text-align: center;
    box-shadow: var(--sombra);
    overflow: hidden;
  }

  .sello {
    display: inline-block;
    border: 4px solid currentColor;
    border-radius: 5px;
    padding: .55rem 1.6rem;
    font-family: "Zilla Slab", serif;
    font-weight: 700;
    font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.05rem);
    letter-spacing: .1em;
    text-transform: uppercase;
    transform: rotate(-5.5deg);
    animation: estampar .42s cubic-bezier(.2, 1.5, .45, 1) both;
  }
  .sello.ok  { color: var(--valido); }
  .sello.mal { color: var(--invalido); }

  @keyframes estampar {
    0%   { opacity: 0; transform: rotate(-16deg) scale(1.75); }
    62%  { opacity: 1; transform: rotate(-3.5deg) scale(.94); }
    100% { opacity: 1; transform: rotate(-5.5deg) scale(1); }
  }

  @media (prefers-reduced-motion: reduce) {
    .sello { animation: none; }
    .barra > i { transition: none; }
  }

  .veredicto-detalle {
    margin: 1rem auto 0;
    max-width: 46ch;
    color: var(--tinta-2);
    font-size: .9rem;
    text-wrap: pretty;
  }

  /* ── Tabla de datos ─────────────────────────────────── */

  .datos { margin-top: 1rem; border: 1px solid var(--regla); border-radius: 3px; background: var(--superficie); overflow: hidden; }
  .fila { display: grid; grid-template-columns: 13.5rem 1fr; gap: .5rem 1rem; padding: .7rem 1.1rem; border-bottom: 1px solid var(--regla-2); }
  .fila:last-child { border-bottom: 0; }
  .fila dt {
    font-family: "DM Mono", monospace;
    font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
    color: var(--tinta-3);
    padding-top: .12rem;
  }
  .fila dd { margin: 0; font-family: "DM Mono", monospace; font-size: .78rem; word-break: break-all; line-height: 1.55; }
  dl { margin: 0; }

  .marca-si { color: var(--valido); font-weight: 500; }
  .marca-no { color: var(--invalido); font-weight: 500; }

  /* ── Errores y llave ────────────────────────────────── */

  .error {
    display: none;
    margin-top: 1.2rem;
    padding: .85rem 1.05rem;
    border: 1px solid var(--invalido);
    border-left-width: 3px;
    border-radius: 3px;
    background: var(--superficie);
    color: var(--invalido);
    font-size: .88rem;
  }
  .error.visible { display: block; }

  details.llave { margin-top: 1.4rem; }
  details.llave summary {
    cursor: pointer;
    font-family: "DM Mono", monospace;
    font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--tinta-3);
  }
  details.llave summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
  details.llave input {
    margin-top: .6rem;
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--regla);
    border-radius: 3px;
    background: var(--superficie);
    color: var(--tinta);
    font-family: "DM Mono", monospace;
    font-size: .78rem;
  }
  details.llave input:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

  footer {
    margin-top: 2.6rem; padding-top: 1.1rem;
    border-top: 1px solid var(--regla);
    font-size: .8rem; color: var(--tinta-3); text-wrap: pretty;
  }
  footer a { color: var(--acento); }

  .oculto-visual {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }

  /* ── Navegación entre las dos vistas ─────────────────── */

  .cambio-vista { margin-bottom: .9rem; }
  .cambio-vista a {
    font-family: "DM Mono", monospace;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-3);
    text-decoration: none;
    border-bottom: 1px solid var(--regla);
    padding-bottom: .12rem;
    transition: color .16s ease, border-color .16s ease;
  }
  .cambio-vista a:hover { color: var(--acento); border-color: var(--acento); }
  .cambio-vista a:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
  .cambio-vista a::before { content: "← "; }

  /* ── Acta de emisión (vista de certificar) ───────────── */

  .acta { margin-top: 2.2rem; display: none; }
  .acta.visible { display: block; }

  .acta-cabecera {
    background: var(--superficie);
    border: 1px solid var(--regla);
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    padding: 1.9rem 1.5rem 1.6rem;
    text-align: center;
    box-shadow: var(--sombra);
  }

  .acta-titulo {
    font-family: "Zilla Slab", serif;
    font-weight: 700;
    font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem);
    color: var(--valido);
    margin: 0 0 .9rem;
    letter-spacing: -.01em;
  }

  .folio-grande {
    font-family: "DM Mono", monospace;
    font-size: clamp(.95rem, .8rem + .7vw, 1.25rem);
    font-weight: 500;
    letter-spacing: .02em;
    word-break: break-all;
    padding: .6rem 1rem;
    border: 2px solid var(--valido);
    border-radius: 4px;
    display: inline-block;
    color: var(--valido);
    animation: estampar .42s cubic-bezier(.2, 1.5, .45, 1) both;
  }

  .folio-rotulo {
    font-family: "DM Mono", monospace;
    font-size: .62rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tinta-3);
    margin: 0 0 .5rem;
  }

  .fecha-cierta {
    margin: 1.1rem 0 0;
    font-size: .92rem;
    color: var(--tinta-2);
  }
  .fecha-cierta b { color: var(--tinta); font-weight: 600; }

  /* ── Descargas ───────────────────────────────────────── */

  .descargas {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--regla);
    border: 1px solid var(--regla);
    border-radius: 0 0 3px 3px;
    overflow: hidden;
  }

  .descarga {
    flex: 1 1 220px;
    background: var(--superficie);
    padding: 1rem 1.15rem;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: background .16s ease;
  }
  .descarga:hover { background: var(--hueco); }
  .descarga:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

  .descarga .que {
    font-family: "Zilla Slab", serif;
    font-weight: 600;
    font-size: .98rem;
    color: var(--acento);
    display: block;
  }
  .descarga .que::after { content: " ↓"; }
  .descarga .porque {
    font-size: .8rem;
    color: var(--tinta-2);
    display: block;
    margin-top: .15rem;
    text-wrap: pretty;
  }
  .descarga.principal { border-left: 3px solid var(--valido); }

  .campo-texto {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--regla);
    border-radius: 3px;
    background: var(--hueco);
    color: var(--tinta);
    font-family: Karla, sans-serif;
    font-size: .9rem;
  }
  .campo-texto:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

  .opcion {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-top: .9rem;
    font-size: .875rem;
    color: var(--tinta-2);
    cursor: pointer;
  }
  .opcion input { margin-top: .25rem; accent-color: var(--acento); }

  .aviso-respaldo {
    margin-top: .9rem;
    padding: .65rem .9rem;
    border-left: 3px solid var(--aviso);
    background: var(--hueco);
    border-radius: 0 3px 3px 0;
    font-size: .84rem;
    color: var(--tinta-2);
  }

  /* ── Huella traída por el QR de la constancia ─────────── */

  .esperada {
    margin: 0 0 .9rem;
    padding: .7rem .9rem;
    background: var(--hueco);
    border-left: 3px solid var(--tinta-3);
    border-radius: 0 3px 3px 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    transition: border-color .18s ease;
  }
  .esperada.coincide { border-left-color: var(--valido); }
  .esperada.difiere  { border-left-color: var(--invalido); }

  .esperada-rotulo {
    font-family: "DM Mono", monospace;
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tinta-3);
  }
  .esperada-valor {
    font-family: "DM Mono", monospace;
    font-size: .7rem;
    word-break: break-all;
    line-height: 1.5;
  }
  .esperada-nota {
    font-size: .8rem;
    color: var(--tinta-2);
    text-wrap: pretty;
  }