:root {
  --papel: #f6f4f8; --hoja: #ffffff; --tinta: #1d1724; --tenue: #615a6b; --linea: #e0dae6;
  --marca: #951ABE; --marca-suave: #f3e6f8; --ok: #0a7a33; --ok-suave: #e1f3e7;
  --ambar: #93590a; --ambar-suave: #fbefd9; --rojo: #a3262a; --rojo-suave: #f8e1e1;
  --display: "Young Serif", Georgia, serif; --texto: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --papel: #141017; --hoja: #1e1823; --tinta: #ece6f1; --tenue: #a79eb1; --linea: #342b3b;
    --marca: #cf8ae8; --marca-suave: #34203d; --ok: #5fd08a; --ok-suave: #173323; --ambar: #f0b45a; --ambar-suave: #3a2a12;
    --rojo: #f08a8d; --rojo-suave: #3d1b1c; color-scheme: dark; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 15px/1.55 var(--texto); }
.envoltura { max-width: 860px; margin: 0 auto; padding: 28px max(16px, env(safe-area-inset-left)) 60px; }
header.cab { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid var(--tinta); padding-bottom: 16px; margin-bottom: 24px; }
.sello { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--marca); display: grid; place-items: center; color: var(--marca); font-family: var(--display); font-size: 18px; flex: none; }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 4vw, 30px); margin: 0; line-height: 1.15; }
h2 { font-family: var(--display); font-weight: 400; font-size: 21px; margin: 0 0 8px; }
h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); margin: 0 0 8px; }
p { margin: 0 0 10px; max-width: 68ch; }
.sub { color: var(--tenue); font-size: 14px; margin: 2px 0 0; }
.bloque { background: var(--hoja); border: 1px solid var(--linea); border-radius: 12px; padding: 18px; margin-bottom: 18px; }
.btn { font: inherit; font-weight: 600; border-radius: 8px; padding: 10px 18px; cursor: pointer; border: 1px solid var(--marca); background: var(--marca); color: var(--hoja); }
.btn.sec { background: transparent; color: var(--marca); }
a.btn, label.btn { text-decoration: none; display: inline-block; }
.btn:disabled { opacity: .5; cursor: default; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mono, code, pre { font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
pre { background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; padding: 12px; white-space: pre-wrap; margin: 0 0 10px; }
.tabla { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linea); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); }
td.num { font-variant-numeric: tabular-nums; }
.pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.pill.ok { background: var(--ok-suave); color: var(--ok); } .pill.no { background: var(--rojo-suave); color: var(--rojo); } .pill.esp { background: var(--ambar-suave); color: var(--ambar); }
.aviso { border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; }
.aviso.ok { background: var(--ok-suave); color: var(--ok); } .aviso.no { background: var(--rojo-suave); color: var(--rojo); } .aviso.esp { background: var(--ambar-suave); color: var(--ambar); }
.aviso strong { font-family: var(--display); font-weight: 400; font-size: 21px; display: block; }
ol.pasos { list-style: none; margin: 0; padding: 0; }
ol.pasos li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--linea); }
ol.pasos li:last-child { border-bottom: 0; }
.ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--hoja); }
.ic.ok { background: var(--ok); } .ic.no { background: var(--rojo); } .ic.esp { background: var(--ambar); }
.tenue { color: var(--tenue); font-size: 13.5px; }
a { color: var(--marca); font-weight: 600; }
input[type=file] { font: inherit; }
label.check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.btn.fb { background: #1877F2; border-color: #1877F2; color: #fff; }
.btn.li { background: #0A66C2; border-color: #0A66C2; color: #fff; }