:root{
  --fondo:#f6f4ef; --papel:#ffffff; --tinta:#1d2b2e; --suave:#5d6c6f; --linea:#dcd8cd;
  --acento:#0e5a63; --acento-2:#0b454c; --acento-fondo:#e3f0ef; --aviso:#8a4b00; --aviso-fondo:#fff1dc; --error:#9b1c1c; --error-fondo:#fde8e8;
  --radio:14px; --sombra:0 1px 2px rgba(20,40,40,.06),0 6px 18px rgba(20,40,40,.05);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fondo:#121819; --papel:#1a2223; --tinta:#e6eeee; --suave:#97a8aa; --linea:#2c3839;
    --acento:#5cc0c9; --acento-2:#8bd6dc; --acento-fondo:#18383b; --aviso:#ffc27a; --aviso-fondo:#3a2a12; --error:#ff9d9d; --error-fondo:#3b1a1a;
    --sombra:none;
  }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.cabecera,main,.legal{width:min(860px,100% - 32px);margin-inline:auto}
.cabecera{padding:28px 0 8px}
.marca{display:flex;align-items:center;gap:16px}
.logo{height:46px;width:auto;border-radius:6px;background:#fff;padding:4px}
h1{margin:0;font:700 clamp(1.7rem,4vw,2.3rem)/1.1 Georgia,"Times New Roman",serif;letter-spacing:-.01em}
.lema{margin:4px 0 0;color:var(--suave)}
main{padding:12px 0 24px}
.etiqueta{display:block;font-weight:600;margin:12px 0 8px}
textarea,input{width:100%;font:inherit;color:inherit;background:var(--papel);border:1.5px solid var(--linea);border-radius:var(--radio);padding:14px 16px;box-shadow:var(--sombra);resize:vertical}
textarea{min-height:76px}
textarea:focus,input:focus,button:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb,var(--acento) 45%,transparent);outline-offset:2px;border-color:var(--acento)}
.codigo{margin-top:12px}.codigo label{font-weight:600;display:block;margin-bottom:6px}
.acciones{display:flex;align-items:center;gap:14px;margin-top:12px}
#enviar,.acceso button{font:600 1rem/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--acento);color:#fff;border:0;border-radius:999px;padding:14px 28px;cursor:pointer;transition:background .15s,transform .05s}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #enviar,:root:not([data-theme="light"]) .acceso button{color:#06282b}}
#enviar:hover,.acceso button:hover{background:var(--acento-2)}#enviar:active{transform:translateY(1px)}
#enviar:disabled{opacity:.55;cursor:wait}
.atajo{color:var(--suave);font-size:.85rem}
.ejemplos,.recientes{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.recientes{align-items:baseline}.recientes>span{font-size:.85rem;color:var(--suave)}
.recientes #lista-recientes{display:contents}
.chip{font:inherit;font-size:.9rem;text-align:left;color:var(--acento-2);background:var(--acento-fondo);border:1px solid transparent;border-radius:999px;padding:7px 14px;cursor:pointer;line-height:1.35}
.chip:hover{border-color:var(--acento)}
.estado{margin-top:22px;padding:18px 20px;border-radius:var(--radio);background:var(--papel);border:1px solid var(--linea);color:var(--suave)}
.estado.error{background:var(--error-fondo);color:var(--error);border-color:transparent}
.cargando{display:flex;align-items:center;gap:12px}
.puntos{display:inline-flex;gap:5px}.puntos i{width:8px;height:8px;border-radius:50%;background:var(--acento);animation:pulso 1.1s infinite ease-in-out}
.puntos i:nth-child(2){animation-delay:.15s}.puntos i:nth-child(3){animation-delay:.3s}
@keyframes pulso{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.puntos i{animation:none}}
.resultado{margin-top:22px;display:grid;gap:16px}
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:20px 22px;box-shadow:var(--sombra)}
.tarjeta h2{margin:0 0 10px;font:600 .8rem/1 system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--acento)}
.tarjeta.breve{border-left:6px solid var(--acento);background:linear-gradient(0deg,var(--papel),var(--papel)),var(--papel)}
.tarjeta.breve .texto{font-size:1.2rem;line-height:1.5;font-weight:500}
.texto p{margin:0 0 .8em}.texto p:last-child,.texto ul:last-child,.texto ol:last-child{margin-bottom:0}
.texto ul,.texto ol{margin:.2em 0 .9em;padding-left:1.3em}.texto li{margin:.25em 0}
.cita{display:inline-block;min-width:1.25em;padding:0 .3em;margin-left:.15em;font-size:.72em;font-weight:700;line-height:1.5;text-align:center;vertical-align:super;color:var(--acento-2);background:var(--acento-fondo);border-radius:6px;text-decoration:none}
.cita:hover{background:var(--acento);color:#fff}
.aviso{padding:14px 18px;border-radius:var(--radio);background:var(--aviso-fondo);color:var(--aviso);font-weight:500}
.fuentes{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fuentes li{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:12px 14px;border:1px solid var(--linea);border-radius:10px;scroll-margin-top:16px}
.fuentes li:target{border-color:var(--acento);background:var(--acento-fondo)}
.num{grid-row:span 3;align-self:start;width:1.8rem;height:1.8rem;display:grid;place-items:center;border-radius:50%;background:var(--acento-fondo);color:var(--acento-2);font-weight:700;font-size:.85rem}
.doc{font-weight:600;overflow-wrap:anywhere}
.det{color:var(--suave);font-size:.9rem}
.fuentes a.abrir{justify-self:start;font-size:.9rem;font-weight:600;color:var(--acento-2)}
.pie{margin:0;text-align:right;font-size:.8rem;color:var(--suave)}
.legal{padding:8px 0 40px;color:var(--suave);font-size:.82rem;border-top:1px solid var(--linea)}
@media (max-width:520px){.tarjeta{padding:16px}.atajo{display:none}#enviar{width:100%}.acciones{display:block}}

.bloqueado #formulario,.bloqueado #estado,.bloqueado #resultado{display:none !important}
.acceso{max-width:360px;margin:8vh auto 0;padding:24px;border:1px solid var(--linea);border-radius:14px;background:var(--papel)}
.acceso h2{margin:0 0 14px;font-size:1.25rem}
.acceso label{font-weight:600;display:block;margin:12px 0 6px}
.acceso input{width:100%;padding:10px 12px;font:inherit;border:1px solid var(--linea);border-radius:8px;background:transparent;color:inherit}
.acceso button{margin-top:18px;width:100%}
.acceso-error{color:var(--error);margin:12px 0 0}