/*
 * ============================================================
 *  AUTH — pantalla de inicio de sesión (index.php) y diálogo de
 *  cierre de sesión (Modal.confirm, ver confirmar_salir() en events.js).
 *  Usa los tokens de inotek-ds.css, cargado antes que este archivo.
 * ============================================================
 */

.ids-auth-page {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ids-space-4);
    background: var(--ids-bg-page, #f8fafc);
    font-family: var(--ids-font-family, 'Inter', sans-serif);
}

.ids-auth-card {
    width: 100%;
    max-width: 480px;
    background: var(--ids-island);
    backdrop-filter: var(--ids-blur);
    -webkit-backdrop-filter: var(--ids-blur);
    border: 1px solid var(--ids-island-border);
    border-radius: 28px;
    box-shadow: var(--ids-shadow-island);
    padding: var(--ids-space-10) var(--ids-space-8);
    display: flex;
    flex-direction: column;
    gap: var(--ids-space-6);
    box-sizing: border-box;
    animation: ids-island-in 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .ids-auth-card { animation: none; }
}

.ids-auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ids-space-3);
    text-align: center;
}

/* logoinotek.png es un logo horizontal (2281×312, ~7.3:1) con el isotipo y
   el nombre juntos en una sola imagen — nada de forzarlo a un cuadro chico
   como cuando eran 2 imágenes separadas (isotipo + texto). */
.ids-auth-brand__mark {
    width: 100%;
    max-width: 300px;
    height: auto;
    object-fit: contain;
}

.ids-auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--ids-space-4);
}

.ids-auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ids-auth-field label {
    font-size: var(--ids-text-xs);
    font-weight: var(--ids-weight-semibold);
    color: var(--ids-text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ids-auth-submit {
    width: 100%;
    justify-content: center;
    margin-top: var(--ids-space-1);
}

.ids-auth-message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--ids-text-sm);
    font-weight: var(--ids-weight-medium);
    padding: 10px 14px;
    border-radius: var(--ids-radius-sm);
    line-height: 1.4;
}

.ids-auth-message:empty { display: none; }

.ids-auth-message svg { flex: none; margin-top: 1px; }

.ids-auth-message--info {
    background: var(--ids-primary-50);
    color: var(--ids-primary-700);
}

.ids-auth-message--warning {
    background: var(--ids-warning-bg);
    color: var(--ids-warning-text);
    border: 1px solid var(--ids-warning-border);
}

.ids-auth-message--danger {
    background: var(--ids-danger-bg);
    color: var(--ids-danger-text);
    border: 1px solid var(--ids-danger-border);
}