:root{--primary:#0D1B2A;--secondary:#6C7278;--tertiary:#C0392B;--neutral:#F4F5F7;--surface:#FFFFFF;
--border:#DDE1E7;--dark2:rgba(255,255,255,.45);--negative:#E74C3C;--positive:#2ECC71}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Public Sans",system-ui,sans-serif;font-size:14px;line-height:1.6;background:var(--neutral);color:var(--primary)}
.top{background:var(--primary);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:16px 24px;gap:16px;flex-wrap:wrap}
.logo{color:#fff;text-decoration:none;font-weight:600;letter-spacing:.08em;display:flex;align-items:center;gap:10px}
.logo-mark{width:14px;height:14px;background:var(--tertiary);display:inline-block}
nav{display:flex;align-items:center;gap:16px}
.nav-item,.label{font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.nav-item{color:var(--dark2)}
.nav-btn{background:none;border:0;color:#fff;cursor:pointer;font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:0}
.inline{display:inline}
.hero{background:var(--primary);color:#fff;padding:24px 24px 40px}
.hero .label{color:var(--dark2);margin-bottom:8px;display:block}
.hero h1{font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.body{max-width:1200px;margin:0 auto;padding:24px 16px}
.panel{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--primary);padding:24px;max-width:480px}
.form{display:flex;flex-direction:column;gap:16px}
label{display:flex;flex-direction:column;gap:4px;font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--secondary)}
input{font:inherit;font-size:15px;padding:10px;border:1px solid var(--border);border-radius:0;color:var(--primary);text-transform:none;letter-spacing:0}
button,.btn{font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:10px 20px;border:0;border-radius:0;cursor:pointer;background:var(--primary);color:#fff;text-decoration:none;display:inline-block}
.btn-accent{background:var(--tertiary);color:#fff}
.btn-accent:hover{background:#922B21}
.btn-sec{background:var(--neutral);color:var(--primary);border:1px solid var(--border)}
.link{color:var(--secondary);font-size:12px}
.error{color:var(--negative);font-weight:600}
.nota{color:var(--secondary);font-size:12px}
.clave{font-family:"Space Grotesk",monospace;font-size:24px;letter-spacing:.08em;margin:16px 0;user-select:all}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--primary);padding:16px;display:flex;flex-direction:column;gap:8px;color:var(--primary);text-decoration:none}
.card-accion:hover{border-left-color:var(--tertiary)}
.card-titulo{font-size:16px;font-weight:600;line-height:1.3}
.card .label{color:var(--secondary)}
.card dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:12px}
.card dt{color:var(--secondary)}
.card dd{overflow-wrap:anywhere}
.card .acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.card .acciones button,.card .acciones a{padding:6px 10px}
.inactivo{opacity:.55}
details.nuevo{margin-bottom:24px}
details.nuevo summary{cursor:pointer;list-style:none;display:inline-block}
details.nuevo .panel{margin-top:16px}
.visor{background:var(--primary);height:100vh;display:flex;flex-direction:column}
.visor-barra{padding:8px 16px}
.visor-barra a{color:#fff;font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.visor iframe{flex:1;border:0;width:100%;background:#fff}
@media (max-width:600px){.hero h1{font-size:22px}.top{padding:12px 16px}.hero{padding:16px 16px 24px}}