:root{--fondo:#f6f7f9;--caja:#fff;--texto:#16181d;--suave:#5b6170;--borde:#e3e6eb;--marca:#2f5bea;--marca-texto:#fff;--ok:#0f7b4f;--ok-fondo:#e7f6ee;--error:#b42318;--error-fondo:#fdecea;--radio:10px;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
@media (prefers-color-scheme:dark){:root{--fondo:#0f1115;--caja:#171a21;--texto:#e7e9ee;--suave:#9aa1b0;--borde:#2a2f3a;--marca:#6b8cff;--marca-texto:#0f1115;--ok:#5ad19a;--ok-fondo:#13261d;--error:#ff8a80;--error-fondo:#2c1614}}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--texto);font-size:16px;line-height:1.55}
a{color:var(--marca)}
.barra{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--borde);background:var(--caja)}
.barra nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.barra nav a{text-decoration:none;color:var(--suave)}
.marca{font-weight:700;text-decoration:none;color:var(--texto)}
main{max-width:1100px;margin:0 auto;padding:24px 16px}
.heroe{max-width:720px;margin:12px auto 24px;text-align:center}
.heroe h1{font-size:30px;line-height:1.2;margin:0 0 10px}
.heroe p{color:var(--suave)}
.caja{background:var(--caja);border:1px solid var(--borde);border-radius:var(--radio);padding:24px;max-width:640px;margin:0 auto 24px}
.caja.ancha{max-width:none}
.caja.estrecha{max-width:420px}
h1{font-size:24px;margin:0 0 12px}
h2{font-size:18px;margin:22px 0 10px}
.form{display:flex;flex-direction:column;gap:14px}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:500}
input,textarea{font:inherit;color:var(--texto);background:var(--fondo);border:1px solid var(--borde);border-radius:6px;padding:10px 12px;width:100%}
input:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.check{flex-direction:row!important;align-items:flex-start;font-weight:400!important}
.check input,.opcion input{width:auto;margin-top:4px}
.opciones{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.opciones legend{font-weight:600;margin-bottom:6px}
.opcion{display:flex!important;flex-direction:row!important;gap:10px;align-items:flex-start;border:1px solid var(--borde);border-radius:6px;padding:10px 12px;font-weight:400!important}
.boton{display:inline-block;font:inherit;font-weight:600;background:var(--marca);color:var(--marca-texto);border:0;border-radius:6px;padding:10px 16px;cursor:pointer;text-decoration:none}
.boton--sec{background:transparent;color:var(--texto);border:1px solid var(--borde)}
.boton--peligro{background:transparent;color:var(--error);border:1px solid var(--error)}
.enlace{background:none;border:0;color:var(--suave);font:inherit;cursor:pointer;padding:0}
.nota,small,.etiqueta{color:var(--suave);font-size:14px}
.etiqueta{margin:0}
.ok{background:var(--ok-fondo);color:var(--ok);padding:10px 12px;border-radius:6px}
.error{background:var(--error-fondo);color:var(--error);padding:10px 12px;border-radius:6px}
.pasos{padding-left:20px}
.pasos li{margin-bottom:8px}
.copiable{user-select:all}
.llave{font-family:ui-monospace,Consolas,monospace;font-size:22px;font-weight:700;letter-spacing:1px;background:var(--fondo);border:1px dashed var(--borde);border-radius:6px;padding:12px;text-align:center}
.clases li{margin-bottom:14px}
.pronto{color:var(--suave);font-size:14px}
.video{position:relative;padding-top:56.25%;margin-top:8px;border-radius:6px;overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tabla{width:100%;border-collapse:collapse;font-size:14px;display:block;overflow-x:auto}
.tabla th,.tabla td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--borde);vertical-align:top}
.tabla tr.alerta td{background:var(--error-fondo)}
.pestanas{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 14px}
.pestana{padding:6px 12px;border:1px solid var(--borde);border-radius:999px;text-decoration:none;color:var(--suave)}
.pestana.activa{background:var(--marca);color:var(--marca-texto);border-color:var(--marca)}
.enlinea{display:inline-flex;gap:6px;align-items:center;margin:2px 0;flex-wrap:wrap}
.enlinea input{width:140px;padding:6px 8px}
.enlinea .boton{padding:6px 10px;font-size:14px}
.buscar{display:flex;gap:8px;margin-bottom:12px}
.legal p{color:var(--texto)}
.pie{max-width:1100px;margin:0 auto;padding:16px;color:var(--suave);font-size:13px;text-align:center}
.pie p{margin:2px 0}
@media (max-width:600px){.caja{padding:16px}.heroe h1{font-size:24px}}