/* ==========================================================================
   Quantum · Modal de login para la portada
   --------------------------------------------------------------------------
   index.html no carga design-system.css (queda fuera a propósito), así que su
   modal de login se veía distinto al del resto del sitio: Inter en vez de
   Archivo, botón blanco en vez del degradado morado, etiquetas sin la
   monoespaciada y radios más grandes.

   Esta hoja copia SOLO las reglas del modal que trae design-system.css, y
   todas van acotadas a .auth-modal para que no toquen nada más de la portada.

   Si algún día la portada pasa a usar el design system, este archivo sobra.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap');

.auth-modal {
    --am-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --am-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --am-acc: #a855f7;
    --am-acc2: #7c3aed;
    --am-accRgb: 168, 85, 247;
    --am-fg: #f6f3ee;
    --am-line: rgba(255, 255, 255, 0.11);
}

/* ------------------------------------------------------------- contenedor */
.auth-modal .auth-modal-content {
    font-family: var(--am-sans);
    color: var(--am-fg);
    background: rgba(13, 11, 18, 0.82) !important;
    background-image: none !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--am-line) !important;
    border-radius: 14px !important;
}

.auth-modal h1,
.auth-modal h2,
.auth-modal h3,
.auth-modal p,
.auth-modal button,
.auth-modal input,
.auth-modal a,
.auth-modal span {
    font-family: var(--am-sans);
}

.auth-modal .auth-header h2 { font-weight: 800; }

/* ---------------------------------------------------------------- pestañas */
.auth-modal .auth-tabs {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--am-line);
    border-radius: 10px;
}

.auth-modal .auth-tab {
    color: rgba(246, 243, 238, 0.34);
    border-radius: 8px;
}

.auth-modal .auth-tab:hover:not(.active) { color: var(--am-fg); }

.auth-modal .auth-tab.active {
    /* antes iba en blanco puro y encandilaba */
    background: rgba(var(--am-accRgb), 0.16);
    color: var(--am-acc);
    box-shadow: inset 0 0 0 1px rgba(var(--am-accRgb), 0.32);
}

/* ------------------------------------------------------------------ campos */
.auth-modal .auth-form-group label {
    font-weight: 600;
    font-size: 0.84rem;
}

.auth-modal .auth-form-group input {
    background: rgba(8, 7, 12, 0.7) !important;
    border: 1px solid var(--am-line) !important;
    border-radius: 8px !important;
    color: var(--am-fg);
    font-family: var(--am-sans);
}

.auth-modal .auth-form-group input:focus {
    outline: none;
    border-color: rgba(var(--am-accRgb), 0.55) !important;
    box-shadow: 0 0 0 3px rgba(var(--am-accRgb), 0.12);
}

/* ------------------------------------------------------------------ botón */
.auth-modal .btn-auth-submit {
    font-family: var(--am-sans);
    font-weight: 800;
    letter-spacing: -0.01em;
    border-radius: 8px !important;
    background: linear-gradient(180deg, var(--am-acc), var(--am-acc2)) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 14px 30px -14px rgba(var(--am-accRgb), 0.8);
    transition: filter 0.2s, transform 0.2s;
}

.auth-modal .btn-auth-submit:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}