/* =========================================================
   BASE PÚBLICO — GlezSystem
   Compartido por: index (landing), registro, codigo_otp, confirmacion
   ========================================================= */

:root{
    /* Core palette */
    --bg: #0a0b0f;
    --bg-elevated: #0f1116;
    --surface: #13151c;
    --surface-hover: #181b24;
    --border: #1f222c;
    --border-strong: #2a2e3a;

    /* Text */
    --text: #f4f5f7;
    --text-secondary: #8b8f9c;
    --text-muted: #5f6472;

    /* Accents */
    --accent: #22d3ee;
    --accent-hover: #06b6d4;
    --accent-dark: #0891b2;
    --accent-glow: rgba(34, 211, 238, 0.15);
    --accent-soft: rgba(34, 211, 238, 0.08);

    --accent-2: #a78bfa;
    --accent-2-soft: rgba(167, 139, 250, 0.10);

    /* Semantic */
    --error: #f87171;
    --error-soft: rgba(248, 113, 113, 0.10);
    --error-border: rgba(248, 113, 113, 0.35);
    --success: #4ade80;
    --success-soft: rgba(74, 222, 128, 0.12);
    --warn: #fbbf24;
    --warn-soft: rgba(251, 191, 36, 0.12);

    /* Layout */
    --radius: 14px;
    --radius-sm: 9px;
    --radius-lg: 20px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 8px 24px -8px rgba(0,0,0,.5);
    --shadow-glow: 0 0 0 1px rgba(34,211,238,.15), 0 8px 32px -8px rgba(34,211,238,.4);

    --transition: 180ms cubic-bezier(.4,0,.2,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter', sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

a{ color:inherit; }
::selection{ background:var(--accent); color:var(--bg); }

.wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 24px;
    width:100%;
}

/* Monospace para labels y numéricos */
.mono{ font-family:'JetBrains Mono', monospace; }

@keyframes pulse{
    0%,100%{ opacity:1; }
    50%{ opacity:.4; }
}

/* ---------- NAV ---------- */
.nav{
    border-bottom:1px solid var(--border);
    background:rgba(10,11,15,.72);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    position:sticky;
    top:0;
    z-index:50;
}
.nav .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:64px;
}
.nav-logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    font-size:1rem;
    text-decoration:none;
    letter-spacing:-0.015em;
}
.nav-logo-mark{
    width:32px;
    height:32px;
    border-radius:8px;
    background:linear-gradient(135deg, var(--accent), var(--accent-dark));
    color:var(--bg);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.95rem;
    font-weight:800;
    box-shadow:0 0 20px -4px rgba(34,211,238,.6);
}
.nav-links{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:.88rem;
    font-weight:500;
}
.nav-links a{
    text-decoration:none;
    color:var(--text-secondary);
    padding:8px 14px;
    border-radius:8px;
    transition:color var(--transition), background var(--transition);
}
.nav-links a:hover{ color:var(--text); background:var(--surface); }
.btn-nav-login{
    background:var(--surface) !important;
    color:var(--text) !important;
    border:1px solid var(--border-strong);
    padding:8px 16px !important;
    font-weight:600 !important;
}
.btn-nav-login:hover{
    background:var(--surface-hover) !important;
    border-color:var(--accent);
    color:var(--accent) !important;
}

/* ---------- BUTTONS (base) ---------- */
/* Nota: en las páginas de registro/OTP/confirmación, auth.css agrega
   width:100% a estos mismos botones para que ocupen la tarjeta completa. */
.btn-primary{
    background:var(--accent);
    color:#001014;
    border:none;
    padding:14px 26px;
    border-radius:10px;
    font-size:.94rem;
    font-weight:700;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    cursor:pointer;
    font-family:inherit;
    transition:all var(--transition);
    box-shadow:0 0 0 1px rgba(34,211,238,.4), 0 8px 24px -8px rgba(34,211,238,.5);
    letter-spacing:-0.01em;
}
.btn-primary:hover{
    background:#67e8f9;
    transform:translateY(-1px);
    box-shadow:0 0 0 1px rgba(34,211,238,.6), 0 12px 32px -8px rgba(34,211,238,.7);
}
.btn-primary:disabled{
    opacity:.4;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}

.btn-secondary{
    background:var(--surface);
    color:var(--text);
    border:1px solid var(--border-strong);
    padding:14px 26px;
    border-radius:10px;
    font-size:.94rem;
    font-weight:600;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    cursor:pointer;
    font-family:inherit;
    transition:all var(--transition);
}
.btn-secondary:hover{
    background:var(--surface-hover);
    border-color:var(--accent);
    color:var(--accent);
}
.btn-secondary:disabled{
    opacity:.4;
    cursor:not-allowed;
}

/* ---------- ALERTAS (usadas en registro, OTP; también útiles en landing) ---------- */
.alert{
    display:none;
    align-items:flex-start;
    gap:12px;
    padding:14px 16px;
    border-radius:10px;
    font-size:.86rem;
    margin-bottom:20px;
    line-height:1.5;
    border:1px solid;
}
.alert.show{ display:flex; }
.alert-icon{
    width:20px;
    height:20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.72rem;
    font-weight:800;
    flex-shrink:0;
    margin-top:1px;
    font-family:'JetBrains Mono', monospace;
}
.alert-body{ flex:1; }
.alert-title{ font-weight:700; margin-bottom:2px; }
.alert-text{ opacity:.9; }

.alert.error{ background:var(--error-soft); border-color:var(--error-border); color:#fca5a5; }
.alert.error .alert-icon{ background:var(--error); color:#1a0808; }

.alert.warn{ background:var(--warn-soft); border-color:rgba(251,191,36,.35); color:#fcd34d; }
.alert.warn .alert-icon{ background:var(--warn); color:#1a1204; }

.alert.success{ background:var(--success-soft); border-color:rgba(74,222,128,.35); color:#86efac; }
.alert.success .alert-icon{ background:var(--success); color:#041a0a; }

/* ---------- FOOTER ---------- */
footer{
    border-top:1px solid var(--border);
    padding:24px 0;
    background:var(--bg-elevated);
}
footer .wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
    font-size:.82rem;
    color:var(--text-muted);
}
footer a{
    text-decoration:none;
    color:var(--text-secondary);
    font-weight:600;
    transition:color var(--transition);
}
footer a:hover{ color:var(--accent); }
.footer-links{ display:flex; gap:24px; }

@media (max-width:560px){
    footer .wrap{ justify-content:center; text-align:center; }
    .footer-links{ gap:16px; }
}