:root {
    --radius: 14px;
    --radius-sm: 8px;
    /* Texto sobre fondos de acento: en los 4 temas el acento es claro/medio,
       asi que un texto oscuro es el que mejor contrasta en todos. */
    --accent-contrast: #15110A;
}

/* ---- Tema 1: Oscuro (default) ---- */
[data-tema="oscuro"] {
    --bg: #0B0E14;
    --surface: #151924;
    --surface-2: #1C212F;
    --border: #2A2F3E;
    --text: #F5F6F8;
    --text-muted: #9097A8;
    --text-faint: #5C6478;
    --accent: #FF8A00;
    --accent-2: #FFD24A;
    --accent-soft: rgba(255, 138, 0, 0.12);
    --success: #3FAE6E;
    --success-soft: rgba(63, 174, 110, 0.12);
    --danger: #E0524A;
    --danger-soft: rgba(224, 82, 74, 0.12);
}

/* ---- Tema 2: Dorado elegante (prestigio, oscuro calido) ---- */
[data-tema="dorado"] {
    --bg: #15110A;
    --surface: #1E180F;
    --surface-2: #2A2114;
    --border: #3C3120;
    --text: #F4EDE0;
    --text-muted: #B3A38B;
    --text-faint: #756A56;
    --accent: #D4AF37;
    --accent-2: #F0D38A;
    --accent-soft: rgba(212, 175, 55, 0.14);
    --success: #8BAE6E;
    --success-soft: rgba(139, 174, 110, 0.12);
    --danger: #C97B6A;
    --danger-soft: rgba(201, 123, 106, 0.14);
}

/* ---- Tema 3: Claro ---- */
[data-tema="claro"] {
    --bg: #F4F5F7;
    --surface: #FFFFFF;
    --surface-2: #F0F1F4;
    --border: #E2E5EA;
    --text: #1B2A4A;
    --text-muted: #6B7280;
    --text-faint: #9CA3AF;
    --accent: #E07B00;
    --accent-2: #FFB347;
    --accent-soft: rgba(224, 123, 0, 0.10);
    --success: #2E9E63;
    --success-soft: rgba(46, 158, 99, 0.10);
    --danger: #D9534F;
    --danger-soft: rgba(217, 83, 79, 0.10);
}

/* ---- Tema 4: Dorado claro (premium luminoso) ---- */
[data-tema="dorado_claro"] {
    --bg: #FAF6EE;
    --surface: #FFFFFF;
    --surface-2: #F5EFE2;
    --border: #E8DCC4;
    --text: #3A2E1A;
    --text-muted: #8A7A5C;
    --text-faint: #B5A98C;
    --accent: #B8860B;
    --accent-2: #E8C158;
    --accent-soft: rgba(184, 134, 11, 0.10);
    --success: #5E8F4E;
    --success-soft: rgba(94, 143, 78, 0.10);
    --danger: #B5564A;
    --danger-soft: rgba(181, 86, 74, 0.10);
}

/* ---- Tema 5: Morado claro ---- */
[data-tema="morado_claro"] {
    --bg: #F5F3FA;
    --surface: #FFFFFF;
    --surface-2: #F0EBF8;
    --border: #E1D9F0;
    --text: #2A2240;
    --text-muted: #756C8C;
    --text-faint: #A89FBE;
    --accent: #7C3AED;
    --accent-2: #A78BFA;
    --accent-soft: rgba(124, 58, 237, 0.10);
    --success: #2E9E63;
    --success-soft: rgba(46, 158, 99, 0.10);
    --danger: #D9534F;
    --danger-soft: rgba(217, 83, 79, 0.10);
}

/* ---- Tema 6: Morado oscuro ---- */
[data-tema="morado_oscuro"] {
    --bg: #0E0B16;
    --surface: #17131F;
    --surface-2: #201A2C;
    --border: #2E2640;
    --text: #F2F0F7;
    --text-muted: #9C94B0;
    --text-faint: #635A78;
    --accent: #8B5CF6;
    --accent-2: #C4B5FD;
    --accent-soft: rgba(139, 92, 246, 0.14);
    --success: #3FAE6E;
    --success-soft: rgba(63, 174, 110, 0.12);
    --danger: #E0524A;
    --danger-soft: rgba(224, 82, 74, 0.12);
}

/* ---- Tema 7: Brújula (marca - azul marino + dorado del logo) ---- */
[data-tema="brujula"] {
    --bg: #0A1628;
    --surface: #10203A;
    --surface-2: #17294A;
    --border: #24395E;
    --text: #F2F5FA;
    --text-muted: #9FB2CC;
    --text-faint: #5E7396;
    --accent: #C9A15A;
    --accent-2: #E8C87A;
    --accent-soft: rgba(201, 161, 90, 0.14);
    --success: #5FAE8A;
    --success-soft: rgba(95, 174, 138, 0.12);
    --danger: #E0645A;
    --danger-soft: rgba(224, 100, 90, 0.12);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Inter", sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

h1, h2, h3, .brand {
    font-family: "Sora", sans-serif;
}

.brand span {
    font-style: italic;
}

.mono {
    font-family: "JetBrains Mono", monospace;
}

a {
    color: var(--accent);
}

/* ---- Paginas de autenticacion ---- */

.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    max-width: 420px;
}

.auth-card h1 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.auth-card .subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 24px;
}

.field {
    margin-bottom: 16px;
}

.field label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.field input {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text);
    font-family: "Inter", sans-serif;
    font-size: 0.95rem;
}

.field input:focus {
    outline: none;
    border-color: var(--accent);
}

.btn-primary {
    width: 100%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: var(--accent-contrast);
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}

.btn-primary:hover {
    filter: brightness(1.08);
}

.alert-error {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid var(--danger);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
    font-size: 0.9rem;
}

.auth-footer {
    margin-top: 20px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.auth-divisor {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--text-faint);
    font-size: 0.85rem;
}

.auth-divisor::before,
.auth-divisor::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.btn-google {
    width: 100%;
    justify-content: center;
    background: var(--surface-2);
}