/* =========================================================
   DELIRIUM RP 0.1
   Hoja de estilos principal
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    background: #0b0b0d;
    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   PORTADA
   ========================================================= */

.home {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    padding: 100px 24px 70px;
}

.hero {
    width: 100%;
    max-width: 800px;

    text-align: center;
}

.hero h1 {
    margin: 0;

    font-size: clamp(48px, 8vw, 92px);
    font-weight: 700;

    letter-spacing: 8px;
}

.version {
    margin: 12px 0 34px;

    font-size: 17px;
    letter-spacing: 4px;

    opacity: 0.7;
}

.system-status {
    width: 100%;
    max-width: 470px;

    margin: 0 auto;
    padding: 18px 24px;

    display: flex;
    flex-direction: column;
    gap: 10px;

    background: #111114;

    border: 1px solid #333338;
    border-radius: 8px;
}

.system-status strong {
    font-size: 14px;
}

.system-status span {
    font-size: 14px;
    opacity: 0.8;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
    width: 100%;

    padding: 22px 24px;

    text-align: center;

    font-size: 12px;

    color: rgba(255, 255, 255, 0.65);

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}


/* =========================================================
   LOGIN
   ========================================================= */

.login-page {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 420px;

    padding: 42px;

    background: rgba(15, 15, 18, 0.96);

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;

    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.login-brand {
    margin-bottom: 34px;

    text-align: center;
}

.login-brand h1 {
    margin: 0;

    font-size: 36px;

    letter-spacing: 8px;
}

.login-brand span {
    display: block;

    margin-top: 8px;

    font-size: 11px;
    letter-spacing: 3px;

    opacity: 0.55;
}

.login-card h2 {
    margin: 0 0 8px;

    font-size: 22px;
}

.login-description {
    margin: 0 0 28px;

    font-size: 14px;

    opacity: 0.6;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;

    margin-bottom: 8px;

    font-size: 13px;

    opacity: 0.75;
}

.form-group input {
    width: 100%;

    padding: 13px 14px;

    color: #ffffff;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;

    outline: none;

    font: inherit;
}

.form-group input:focus {
    background: rgba(255, 255, 255, 0.07);

    border-color: rgba(255, 255, 255, 0.35);
}

.login-button {
    width: 100%;

    margin-top: 6px;
    padding: 14px;

    cursor: pointer;

    color: #111111;
    background: #ffffff;

    border: 0;
    border-radius: 7px;

    font-size: 14px;
    font-weight: 700;
}

.login-button:hover {
    opacity: 0.88;
}

.login-error {
    margin-bottom: 20px;
    padding: 12px 14px;

    background: rgba(180, 40, 40, 0.15);

    border: 1px solid rgba(220, 70, 70, 0.35);
    border-radius: 7px;

    font-size: 13px;
}

.login-back {
    display: block;

    margin-top: 24px;

    text-align: center;

    color: inherit;
    text-decoration: none;

    font-size: 13px;

    opacity: 0.55;
}

.login-back:hover {
    opacity: 1;
}


/* =========================================================
   SESIÓN DE USUARIO
   ========================================================= */

.user-session {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 1000;

    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 14px 24px;

    background: rgba(10, 10, 12, 0.96);

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(8px);
}

.user-session-info {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.user-session-info strong {
    font-size: 14px;

    letter-spacing: 0.5px;
}

.user-session-info span {
    font-size: 11px;

    letter-spacing: 1px;
    text-transform: uppercase;

    opacity: 0.5;
}

.user-session-actions {
    display: flex;
    align-items: center;

    gap: 10px;
}

.user-session-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 9px 13px;

    color: #ffffff;

    text-decoration: none;

    font-size: 12px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        opacity 0.2s ease;
}

.user-session-actions a:hover {
    background: rgba(255, 255, 255, 0.08);

    border-color: rgba(255, 255, 255, 0.25);
}

.user-session-actions .logout-link {
    opacity: 0.6;
}

.user-session-actions .logout-link:hover {
    opacity: 1;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

    .user-session {
        position: relative;

        flex-direction: column;
        align-items: flex-start;
    }

    .user-session-actions {
        width: 100%;

        flex-wrap: wrap;
    }

    .home {
        padding-top: 60px;
    }

    .hero h1 {
        letter-spacing: 5px;
    }
}

@media (max-width: 500px) {

    .login-card {
        padding: 30px 22px;
    }

    .login-brand h1 {
        font-size: 29px;

        letter-spacing: 5px;
    }

    .user-session-actions a {
        flex: 1;
    }
}

/* =========================================================
   DELIRIUM HOME v2
   ========================================================= */
.site-header{height:72px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;padding:0 4vw;background:rgba(9,9,11,.96);border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:50}.site-brand{color:#fff;text-decoration:none;font-weight:800;letter-spacing:7px;font-size:20px}.site-nav{display:flex;gap:4px}.site-nav a,.site-account>a{color:#9a9da5;text-decoration:none;font-size:12px;padding:9px 10px;border-radius:6px}.site-nav a:hover,.site-account>a:hover{color:#fff;background:#17181c}.site-account{display:flex;align-items:center;gap:12px}.site-account span{display:flex;flex-direction:column;text-align:right}.site-account strong{font-size:12px}.site-account small{font-size:9px;color:#777;letter-spacing:1px;text-transform:uppercase}.site-account .login-pill{border:1px solid #34363d;color:#fff}.public-home{width:min(1400px,92vw);margin:0 auto}.public-hero{min-height:600px;display:flex;align-items:center;justify-content:space-between;gap:70px;padding:70px 0}.hero-copy{max-width:790px}.home-eyebrow,.home-section-head>span,.social-preview>div>span{color:#c4212d;font-size:10px;font-weight:700;letter-spacing:2.5px}.hero-copy h1{font-size:clamp(70px,10vw,145px);line-height:.9;letter-spacing:8px;margin:14px 0 24px}.hero-copy p{font-size:18px;color:#989ca5;max-width:680px;line-height:1.6}.hero-actions{display:flex;gap:10px;margin-top:28px}.home-btn{display:inline-flex;color:#fff;text-decoration:none;border:1px solid #34363d;border-radius:6px;padding:12px 16px;font-size:12px}.home-btn.primary{background:#b91f2a;border-color:#b91f2a}.hero-status{width:320px;flex:0 0 320px;background:#111216;border:1px solid #2a2c32;border-radius:12px;padding:24px}.hero-status span,.hero-status b,.hero-status small{display:block}.hero-status span{font-size:9px;letter-spacing:2px;color:#777d88}.hero-status strong{display:block;font-size:30px;margin:8px 0}.hero-status b{font-size:12px;color:#c4212d}.hero-status i{display:block;height:1px;background:#2d3037;margin:20px 0}.hero-status small{color:#747a86;line-height:1.5}.home-section{padding:70px 0;border-top:1px solid #24262b}.home-section-head{max-width:760px}.home-section-head h2,.social-preview h2{font-size:36px;margin:9px 0 12px}.home-section-head p,.social-preview p{color:#858a95;line-height:1.6}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px}.feature-grid article{background:#111216;border:1px solid #292b31;border-radius:10px;padding:24px}.feature-grid article>span{color:#c4212d;font-size:11px}.feature-grid h3{font-size:20px;margin:14px 0 9px}.feature-grid p{color:#858a95;font-size:13px;line-height:1.6;min-height:62px}.feature-grid a{color:#fff;text-decoration:none;font-size:12px}.feature-grid small{font-size:9px;color:#6f7580;letter-spacing:1.5px}.social-preview{margin:30px 0 80px;padding:38px;background:linear-gradient(135deg,#121318,#0c0d10);border:1px solid #2b2d33;border-radius:12px;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.social-placeholder{min-height:170px;border:1px dashed #3b3e46;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px}.social-placeholder b{font-size:12px;color:#c4212d;letter-spacing:2px}.social-placeholder span{color:#747a85;font-size:11px}@media(max-width:1000px){.site-nav{display:none}.public-hero{min-height:auto;display:block;padding:70px 0}.hero-status{margin-top:40px;width:100%}.feature-grid{grid-template-columns:1fr}.social-preview{grid-template-columns:1fr}}@media(max-width:600px){.site-header{grid-template-columns:1fr auto}.site-account span{display:none}.hero-copy h1{font-size:58px;letter-spacing:4px}.social-preview{padding:24px}}

/* DELIRIUM Portada V2 */
.register-link{font-size:12px;color:#fff;text-decoration:none;opacity:.72;margin-right:10px}.alpha-invite{width:min(1180px,calc(100% - 48px));margin:0 auto 70px;padding:38px;display:flex;justify-content:space-between;gap:40px;align-items:center;background:linear-gradient(120deg,rgba(180,15,25,.18),rgba(18,18,22,.95));border:1px solid rgba(255,255,255,.09);border-radius:16px}.alpha-invite h2{font-size:clamp(28px,4vw,48px);margin:8px 0 12px}.alpha-invite p{max-width:720px;color:rgba(255,255,255,.72);line-height:1.7}.alpha-invite small{color:rgba(255,255,255,.45)}.alpha-invite-actions{min-width:220px;display:flex;flex-direction:column;gap:10px}.alpha-invite-actions span{text-align:center;font-size:11px;opacity:.55;letter-spacing:1px}.server-live-card strong.state-online{color:#65d38e}.server-live-card strong.state-offline{color:#ff5b63}.server-live-card strong.state-maintenance{color:#e9bd65}.alpha-page{width:min(900px,calc(100% - 40px));margin:90px auto;flex:1}.alpha-signup-card{padding:42px;background:#111114;border:1px solid rgba(255,255,255,.09);border-radius:16px}.alpha-signup-card h1{font-size:42px;margin:10px 0}.alpha-signup-card>p{color:rgba(255,255,255,.65);line-height:1.7}.alpha-current,.form-success{margin:24px 0;padding:16px;border:1px solid rgba(255,255,255,.1);background:#17171b;border-radius:8px}.alpha-current strong{color:#ff4d57}.alpha-form{display:grid;gap:18px;margin-top:24px}.alpha-form select,.alpha-form textarea{width:100%;padding:13px;background:#0c0c0f;color:#fff;border:1px solid #34343a;border-radius:7px}.form-success{border-color:rgba(80,190,120,.35)}
@media(max-width:760px){.alpha-invite{flex-direction:column;align-items:stretch}.alpha-invite-actions{min-width:0}}

/* =========================================================
   DELIRIUM UI v2.2 · identidad y portada amable
   ========================================================= */
.brand-d{color:#e32937!important}.site-nav a.active{color:#fff;background:#17191e}.public-hero-v3{min-height:540px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);gap:64px;padding:78px 0 58px}.public-hero-v3 .hero-copy h1{font-size:clamp(68px,9vw,132px);margin:16px 0 22px}.hero-welcome{background:radial-gradient(circle at top right,rgba(227,41,55,.12),transparent 48%),#111216;border:1px solid #292c33;border-radius:18px;padding:34px;box-shadow:0 24px 80px rgba(0,0,0,.18)}.hero-welcome>span{color:#e32937;font-size:10px;letter-spacing:2.3px;font-weight:800}.hero-welcome h2{font-size:31px;line-height:1.08;margin:13px 0}.hero-welcome p{color:#979ca7;line-height:1.65;font-size:14px}.hero-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}.hero-mini-grid div{padding:15px;background:#0c0d10;border:1px solid #262931;border-radius:10px}.hero-mini-grid b,.hero-mini-grid small{display:block}.hero-mini-grid b{font-size:13px}.hero-mini-grid small{color:#747b87;font-size:10px;margin-top:5px}.server-strip{display:inline-flex;align-items:center;gap:9px;margin-top:28px;padding:9px 12px;border:1px solid #292c33;border-radius:999px;background:#101115;color:#8f95a0;font-size:10px}.server-strip strong{color:#d7d9de;font-size:10px;letter-spacing:.8px}.server-strip b{font-size:10px}.server-strip small{padding-left:8px;border-left:1px solid #30333a;color:#747b87}.server-dot{width:7px;height:7px;border-radius:50%;background:#777;box-shadow:0 0 0 3px rgba(255,255,255,.03)}.server-dot.state-online{background:#65d38e}.server-dot.state-offline{background:#ff5b63}.server-dot.state-maintenance{background:#e9bd65}.server-strip .state-online{color:#65d38e}.server-strip .state-offline{color:#ff5b63}.server-strip .state-maintenance{color:#e9bd65}.alpha-invite-v3{margin-top:12px;background:linear-gradient(120deg,rgba(227,41,55,.10),rgba(17,18,22,.96) 42%,rgba(17,18,22,.96));box-shadow:0 20px 70px rgba(0,0,0,.12)}.feature-grid article{transition:transform .2s ease,border-color .2s ease,background .2s ease}.feature-grid article:hover{transform:translateY(-3px);border-color:#3a3d46;background:#131419}.player-site-header{position:sticky}.player-site-header+.player-wrap{margin-top:44px}@media(max-width:1000px){.public-hero-v3{grid-template-columns:1fr;gap:30px}.hero-welcome{max-width:680px}.server-strip{flex-wrap:wrap}.player-site-header .site-nav{display:none}}@media(max-width:600px){.public-hero-v3 .hero-copy h1{font-size:55px}.hero-welcome{padding:25px}.server-strip small{width:100%;border-left:0;padding-left:16px}.hero-mini-grid{grid-template-columns:1fr}}