/*
 * Tema Millo Tech para el login de Krayin CRM (v1)
 * Alcance: solo elementos dentro de .mt-login (login, recuperar y restablecer contraseña).
 * Paleta: azul #1447C4 · navy #0B2A5B · acento #6ABEFF · fondos #07090c/#0c0f14/#12161d/#181d27
 *         texto #eef1f6 · positivo #6fd3a0 · negativo #f2998a · advertencia #e0a12a
 */
.mt-login {
    --mt-blue: #1447C4;
    --mt-blue-hover: #1a56e0;
    --mt-navy: #0B2A5B;
    --mt-sky: #6ABEFF;
    --mt-void: #07090c;
    --mt-ink: #0c0f14;
    --mt-panel: #12161d;
    --mt-panel2: #181d27;
    --mt-snow: #eef1f6;
    --mt-sub: #b4bccb;          /* texto secundario, AA sobre #0c0f14 / #12161d */
    --mt-ok: #6fd3a0;
    --mt-bad: #f2998a;
    --mt-warn: #e0a12a;
    --mt-line: #7d8aa1;         /* borde de campos: >= 3:1 sobre el panel (WCAG 1.4.11) */

    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px 16px;
    box-sizing: border-box;
    color: var(--mt-snow);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    /* Fondo oscuro con degradado navy -> azul (alternativa sólida si no hay gradientes) */
    background-color: var(--mt-navy);
    background-image:
        radial-gradient(900px 520px at 85% -10%, rgba(106, 190, 255, .22), transparent 60%),
        radial-gradient(800px 600px at 0% 110%, rgba(20, 71, 196, .55), transparent 62%),
        linear-gradient(160deg, var(--mt-void) 0%, #081d42 38%, var(--mt-navy) 62%, var(--mt-blue) 130%);
    background-attachment: fixed;
}

.mt-login *, .mt-login *::before, .mt-login *::after { box-sizing: border-box; }

/* ---------- Tarjeta (vidrio sutil con alternativa sólida) ---------- */
.mt-card {
    width: 100%;
    max-width: 420px;
    padding: 28px 28px 24px;
    border-radius: 20px;
    border: 1px solid rgba(154, 190, 240, .22);
    /* Alternativa sólida por defecto (sin soporte de backdrop-filter) */
    background: var(--mt-panel);
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
    animation: mt-rise .45s ease-out both;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .mt-card {
        background: rgba(12, 15, 20, .72);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        backdrop-filter: blur(18px) saturate(140%);
    }
}

/* Usuarios que piden menos transparencia: tarjeta sólida */
@media (prefers-reduced-transparency: reduce) {
    .mt-card, .mt-login .mt-card {
        background: var(--mt-panel);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Alto contraste: bordes más marcados y tarjeta sólida */
@media (prefers-contrast: more) {
    .mt-card, .mt-login .mt-card {
        background: var(--mt-ink);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-color: var(--mt-snow);
    }
}

/* Sin animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
    .mt-card { animation: none; }
    .mt-login *, .mt-login *::before, .mt-login *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

@keyframes mt-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Marca ---------- */
.mt-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

/* El logo es azul sobre transparente: va en una pastilla clara para mantener contraste */
.mt-logo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .6);
}

.mt-logo-chip img { display: block; width: 170px; height: auto; max-width: 100%; }

.mt-product {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mt-sky);
}

/* ---------- Texto ---------- */
.mt-login .mt-title {
    margin: 0 0 4px;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--mt-snow);
    text-align: center;
}

.mt-login .mt-lead {
    margin: 0 0 22px;
    text-align: center;
    font-size: 14px;
    color: var(--mt-sub);
}

/* ---------- Campos ---------- */
.mt-login .mt-field { margin: 0 0 16px; }

.mt-login .mt-label {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mt-snow);
}

.mt-login input[type="email"],
.mt-login input[type="text"],
.mt-login input[type="password"] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 46px;                 /* objetivo táctil >= 44 px */
    padding: 10px 14px;
    border: 1px solid var(--mt-line);
    border-radius: 10px;
    background: var(--mt-panel2);
    color: var(--mt-snow);
    font: inherit;
    font-size: 16px;                  /* evita zoom automático en iOS */
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.mt-login input::placeholder { color: #9aa6ba; opacity: 1; }   /* >= 4.5:1 sobre #181d27 */

.mt-login input:hover { border-color: var(--mt-sky); }

.mt-login input:focus,
.mt-login input:focus-visible {
    outline: 3px solid var(--mt-sky);
    outline-offset: 2px;
    border-color: var(--mt-sky);
    background: #1c2230;
}

.mt-login .mt-pass-wrap { position: relative; }
.mt-login .mt-pass-wrap input[type] { padding-right: 52px; }

.mt-eye {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mt-sub);
    cursor: pointer;
}

.mt-eye:hover { color: var(--mt-snow); background: rgba(106, 190, 255, .12); }
.mt-eye:focus-visible { outline: 3px solid var(--mt-sky); outline-offset: 0; color: var(--mt-snow); }
.mt-eye .mt-eye-off { display: none; }
.mt-eye.is-shown .mt-eye-on { display: none; }
.mt-eye.is-shown .mt-eye-off { display: block; }

/* Errores de validación (negativo) */
.mt-login input.\!border-red-600,
.mt-login input.border-red-600 { border-color: var(--mt-bad) !important; }

.mt-login .text-red-600,
.mt-login p.text-xs.italic {
    margin-top: 6px;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    color: var(--mt-bad);
}

/* ---------- Acciones ---------- */
.mt-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 16px;
    margin-top: 22px;
}

.mt-login .mt-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mt-sky);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mt-login .mt-link:hover { color: #a9d9ff; }

.mt-login a:focus-visible,
.mt-login button:focus-visible {
    outline: 3px solid var(--mt-sky);
    outline-offset: 2px;
}

.mt-login .mt-btn {
    min-height: 46px;
    padding: 0 26px;
    border: 1px solid var(--mt-blue);
    border-radius: 10px;
    background: var(--mt-blue);          /* #1447C4 */
    color: #fff;                          /* 7.7:1 */
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
    box-shadow: 0 8px 20px -8px rgba(20, 71, 196, .9);
}

.mt-login .mt-btn:hover { background: var(--mt-blue-hover); border-color: var(--mt-blue-hover); }
.mt-login .mt-btn:active { transform: translateY(1px); }
.mt-login .mt-btn:focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px var(--mt-blue); }

/* Pie */
.mt-footer {
    margin: 0;
    max-width: 420px;
    text-align: center;
    font-size: 13px;
    color: #c4cbd8;
}

.mt-footer a { color: var(--mt-sky); text-decoration: underline; text-underline-offset: 2px; border-radius: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
    .mt-login { justify-content: flex-start; padding: 20px 14px 28px; }
    .mt-card { padding: 22px 18px 20px; border-radius: 18px; }
    .mt-login .mt-title { font-size: 22px; }
    .mt-actions { flex-direction: column-reverse; align-items: stretch; }
    .mt-login .mt-btn { width: 100%; }
    .mt-login .mt-link { justify-content: center; }
}

/* Navegador sin soporte de color-scheme / dvh: ya hay alternativas más arriba */