/* =========================
   ⚙️ Variables (paleta base institucional actualizada)
   Cambia SOLO --brand / --brand-accent para rebrand rápido
   ========================= */
:root {
    /* Base oscura */
    --brand: #131006;
    --brand-600: #1d180c;
    --brand-700: #272114;
    --brand-800: #312a1a;
    /* Acento */
    --brand-accent: #cc3366;
    /* Overlays */
    --brand-alpha-55: rgba(19,16,6,.72);
    --brand-alpha-35: rgba(19,16,6,.55);
    /* Texto */
    --text-dark: #f6f2ea;
    --text-muted: #b2aba0;
    /* Fondos tarjeta */
    --card-bg-top: #1d180c;
    --card-bg-btm: #262015;
}

/* ===== Reset + estructura ===== */
* { box-sizing: border-box; }
html, body { height:100%; margin:0; font-family: "Segoe UI", Arial, sans-serif; color: var(--text-dark); background: var(--brand); }


/* Página */
.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, var(--brand-alpha-35), var(--brand-alpha-55)), url("../../imagenes/pages/perseida-1024x539.jpg") center/cover no-repeat fixed;
}

.main { flex:1; display:flex; align-items:center; justify-content:center; padding:24px; }


/* ===== Tarjeta ===== */
.card {
    width:100%; max-width:480px;
    background: #131006 ;
    border-radius:22px;
    box-shadow: 0 14px 34px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05);
    padding:30px 26px 24px; text-align:center; backdrop-filter: blur(6px);
}

/* Encabezado */
.card-header { margin-bottom:12px; }
.logo-animated { width:180px; height:auto; margin-bottom:10px; }
.title { margin:8px 0 4px; font-size:28px; font-weight:800; color: var(--brand-accent); text-shadow:0 2px 6px rgba(0,0,0,.55); }
.subtitle { margin:0; font-weight:600; color: var(--text-muted); opacity:.95; }

/* Cuerpo */
.card-body { margin-top:10px; }
.form-row { margin-top:14px; }


/* ===== DevExpress inputs ===== */
.dxEditors_edt {
    width:100% !important; border-radius:12px !important; padding:0px 0px !important; font-size:20px !important; background-color:#2a2417 !important; color: var(--text-dark) !important;
    border:1px solid #3a3223 !important; transition: box-shadow .25s ease, transform .12s ease, border-color .25s ease, background .3s ease;
}
.dxEditors_edt:hover, .dxEditors_edt:focus {
    box-shadow: 0 0 0 2px rgba(204,51,102,.35), 0 0 12px rgba(204,51,102,.5) !important;
    transform: translateY(-1px);
    border-color: var(--brand-accent) !important;
    background:#332b1b !important;
}

/* Autocomplete Chrome */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow:0 0 0 30px #2a2417 inset !important; -webkit-text-fill-color: #fff !important; }


/* ===== Botón primario ===== */
.btn-primary {
    display:inline-block; width:100% !important; border:0; border-radius:12px !important; padding:0px !important; font-weight:700; color:#fff !important;
    background: linear-gradient(135deg, var(--brand-accent) 0%, #8e2249 75%);
    box-shadow: 0 10px 24px rgba(204,51,102,.55), 0 0 0 1px rgba(255,255,255,.08);
    transition: transform .15s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow:0 14px 30px rgba(204,51,102,.7), 0 0 0 1px rgba(255,255,255,.1); filter: brightness(1.06); }
.btn-primary:active { transform: translateY(0); }


/* Brillo sutil extra */
.glow-on-hover:hover { box-shadow:0 0 0 3px rgba(204,51,102,.4), 0 12px 28px rgba(204,51,102,.65); }


/* ===== Footer ===== */
.footer {
    width:100%; padding:12px 16px; text-align:center; font-size:13px; color:#e9dde0;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-600) 55%, var(--brand) 100%);
    border-top:1px solid rgba(255,255,255,.06);
    position:relative;
}
.footer:before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background: linear-gradient(90deg, var(--brand-accent), #8e2249, var(--brand-accent)); }
.footer a { color:#ff8fb5; text-decoration:none; }
.footer a:hover { text-decoration:underline; }


/* ===== Animaciones ===== */
@keyframes bounce { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-7px) } }
@keyframes slideUp { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:translateY(0) } }
.animate-slide-up { animation: slideUp .9s ease-out; }


/* ===== Responsivo ===== */
@media (max-width: 768px) {
    .card { max-width:92%; padding:26px 18px; }
    .title { font-size:24px; }
    .logo-animated { width:88px; }
}
@media (max-width: 480px) {
    .card { max-width:96%; padding:22px 14px; }
    .title { font-size:22px; }
    .logo-animated { width:78px; }
    .footer { font-size:12px; padding:10px 8px; }
}