*{box-sizing:border-box}
:root{--night:#110c0f;--panel:#241518;--gold:#c9a36b;--cream:#f1dfbd;--muted:#c3a98c;--red:#6d2830;--line:#7d5536;--display:'Cinzel',Georgia,serif;--body:'EB Garamond',Georgia,serif}
html{scroll-behavior:smooth}
body{min-height:100vh;margin:0;background:radial-gradient(ellipse 90% 40% at 50% 0%,#392324 0%,transparent 80%),linear-gradient(120deg,#090708,#241618 55%,#0d080a);color:var(--cream);font:20px/1.5 var(--body)}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #e4be73;outline-offset:3px}
[hidden]{display:none!important}
.topbar{border-top:4px solid var(--gold);border-bottom:1px solid #765038;background:#110b0eea;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px clamp(18px,4vw,65px)}
.brand{display:flex;align-items:center;gap:12px;color:var(--cream);text-decoration:none}
.emblem{font:44px Georgia;color:#b65e50}
.brand strong{display:block;letter-spacing:.07em;font:600 16px var(--display)}
.brand small{display:block;font:italic 16px var(--body);color:var(--muted)}
.session{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:end}
.session-name{font-size:17px}
.role-badge{border:1px solid #92714a;color:#ebcb93;padding:4px 8px;font:11px var(--display)}
.text-button{color:#f1d7b2;border:1px solid var(--line);background:#231518;padding:7px 11px}
main{width:min(1200px,calc(100% - 28px));margin:28px auto 55px}
.hero{min-height:300px;display:grid;grid-template-columns:38% 62%;border:2px solid var(--line);background:#1a1114;box-shadow:0 24px 48px #0009}
.hero-visual{min-height:300px;background:linear-gradient(90deg,transparent 50%,#1a1114 99%),url('./assets/noche.webp') center 50%/cover}
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:35px clamp(25px,5vw,70px) 30px 6px;text-align:center}
.kicker{font:600 11px var(--display);letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
h1,h2,h3{font-family:var(--display);font-weight:500}
h1{font-size:clamp(26px,3.5vw,47px);line-height:1.25;margin:15px 0 10px}
h1 em{font-style:normal;color:#cd8071}
.hero-copy p{max-width:470px;margin:8px auto;font-size:21px;color:#d9c2aa}
.divider-ornament{margin-top:15px;color:var(--gold)}
.login-section{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:25px;margin:35px auto;max-width:970px}
.login-intro{padding:28px}
.login-intro h2{font-size:clamp(22px,2.5vw,33px);margin:8px 0}
.login-intro p{color:#e0c9ae}
.notice{font-size:17px!important;color:#d7b88b!important}
.panel{padding:30px;border:2px double #916b45;background:linear-gradient(135deg,#251619,#150e11);box-shadow:0 12px 24px #0008}
.panel.center{text-align:center;margin:30px auto;max-width:650px}
.login-form{display:grid;gap:16px}
.login-form label{display:grid;gap:7px;font-size:19px;color:var(--cream)}
.login-form input{width:100%;min-height:45px;border:1px solid #aa814c;border-radius:2px;background:#f4dfbc;color:#2f1b19;padding:10px 12px}
.primary-button{min-height:45px;color:#f5d8aa;font:600 12px var(--display);background:linear-gradient(#873b41,#4f111b);border:1px solid #a37a4c;padding:12px}
.primary-button:disabled{opacity:.6;cursor:wait}
.error-message{min-height:22px;color:#ffb5a9;font-size:16px;margin:0}
.section-heading{margin:35px 0 20px;text-align:center}
.section-heading h2{font-size:clamp(23px,2.8vw,35px);margin:10px 0}
.section-heading p{color:var(--muted);margin:0}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.campaign-card{border:3px double var(--line);background:linear-gradient(130deg,#e9d0a6,#cda579);color:#38241b;display:flex;flex-direction:column;box-shadow:0 14px 23px #0008}
.campaign-card img{width:100%;height:190px;object-fit:cover;display:block;border-bottom:3px double #825431}
.card-body{padding:22px 20px;display:flex;flex-direction:column;flex:1}
.card-label{font:600 10px var(--display);letter-spacing:.08em;color:#7c4032;text-transform:uppercase}
.card-body h3{font-size:21px;line-height:1.3;margin:10px 0;color:#4e2520}
.card-body p{font-size:18px;line-height:1.36;margin:0 0 23px;flex:1}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:12px;border-top:1px solid #ad8966}
.status{font:600 10px var(--display);letter-spacing:.01em;color:#714e30}
.status.protected{color:#75242e}
.lock{font-size:20px}
.narrator{margin:30px 0 10px}
.narrator h2{margin:10px 0;font-size:23px}
.narrator p{margin:7px 0;font-size:19px;color:#e8d2b1}
.narrator .note{font-size:16px;color:#cda87b}
footer{text-align:center;border-top:1px solid #69452c;background:#110b0d;padding:19px;color:#aa8a66;font-size:15px}
footer span{color:#c39c6d;margin-right:10px}
@media(max-width:950px){.cards{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:42% 58%}.hero-copy{padding:26px 20px}}
@media(max-width:680px){.topbar{padding:13px 16px;flex-direction:column}.session{justify-content:center}.hero{display:block}.hero-visual{min-height:175px;height:175px;background:linear-gradient(0deg,#1a1114,transparent 80%),url('./assets/noche.webp') center/cover}.hero-copy{padding:15px 22px 22px}.hero-copy p{font-size:18px}.login-section{grid-template-columns:1fr;gap:0;margin:18px auto}.login-intro{padding:10px}.panel{padding:20px}.cards{grid-template-columns:1fr}.campaign-card img{height:170px}}

/* Panel real de permisos, con controles inactivos si no se verifica el backend. */
.access-form{display:grid;gap:11px;margin-top:20px}
.access-item{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px;border:1px solid #745039;background:#150d10;font-size:18px}
.access-item strong,.access-item small{display:block}
.access-item small{font-size:15px;color:#c4a988}
.access-item input{width:23px;height:23px;accent-color:#9a4d4f;cursor:pointer}
.access-item input:disabled{opacity:.5;cursor:not-allowed}
.access-actions{display:flex;flex-wrap:wrap;align-items:center;gap:15px}
.access-actions p{margin:0;font-size:16px;color:#e0c09e}