/* ===================== Login TME Online =====================
   Dos diseños con el mismo HTML (pages/login.html):
     .auth-b  pantalla dividida (panel azul + formulario blanco)
     .auth-a  fondo bg.jpg atenuado + tarjeta oscura
   Paleta TGSI de texasgsinv.com: azul rey #12329a, marino #0f1d41, degradado #113197 → #0e2a7b.            */

.auth {
    --azul: #12329a;
    --azul-claro: #6f95f2;
    --anillo: rgba(18, 50, 154, .16);
    --texto: #1b2a44;
    --texto-2: #5d6b85;
    --borde: #d6deeb;
    --campo: #f5f7fb;
    --campo-focus: #fff;
    --caja: transparent;
    --btn: #12329a;
    --btn-hover: #0e2a7b;
    --link: #12329a;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: #fff;
    color: var(--texto);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Panel de marca (B) ---------- */
.auth-brand {
    position: relative;
    overflow: hidden;
    background: radial-gradient(1100px 650px at 0% 0%, #1a3db0 0%, #113197 40%, #0e2a7b 75%, #0c2366 100%);
    color: #fff;
    padding: 48px 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.auth-brand::after {
    content: "";
    position: absolute;
    right: -180px;
    bottom: -180px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 0 0 70px rgba(255, 255, 255, .03), 0 0 0 140px rgba(255, 255, 255, .02);
    pointer-events: none;
}
.auth-brand-logo { width: 150px; }
.auth-brand h2 { color: #fff; font-size: 34px; line-height: 1.2; font-weight: 700; max-width: 440px; margin-bottom: 16px; }
.auth-brand p { color: #c4d4f1; max-width: 420px; font-size: 16px; line-height: 1.55; margin: 0; }
.auth-pts { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.auth-pts li { display: flex; gap: 10px; align-items: center; color: #dbe6fa; font-size: 15px; }
.auth-pts i { color: var(--azul-claro); font-size: 18px; }
.auth-brand .auth-brand-foot { font-size: 12px; color: #9fb3d9; }

/* ---------- Formulario ---------- */
.auth-side { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-box { width: 100%; max-width: 390px; background: var(--caja); }
.auth-logo { display: none; width: 110px; margin: 0 auto 22px; }

.auth-title { color: var(--texto); font-size: 26px; font-weight: 700; margin: 0 0 6px; }
.auth-sub { color: var(--texto-2); font-size: 15px; line-height: 1.5; margin: 0 0 26px; }
.auth-sub strong { color: var(--texto); }
.auth-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(111, 149, 242, .14); color: var(--azul-claro);
    font-size: 24px; margin-bottom: 18px;
}
.auth-b .auth-icon { color: var(--azul); background: rgba(18, 50, 154, .08); }

.auth-label { display: block; color: var(--texto); font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.auth-in { position: relative; margin-bottom: 18px; }
.auth-in > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 17px; color: var(--texto-2); pointer-events: none; }
.auth input[type="text"], .auth input[type="password"] {
    width: 100%; height: 50px; border-radius: 12px; padding: 0 44px;
    font-size: 16px; /* 16px evita el zoom automático en iPhone */
    background: var(--campo); border: 1px solid var(--borde); color: var(--texto);
    outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.auth input::placeholder { color: var(--texto-2); opacity: .75; }
.auth input:focus { border-color: var(--azul); background: var(--campo-focus); box-shadow: 0 0 0 3px var(--anillo); }
.auth-eye {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; background: none; border: 0; color: var(--texto-2); font-size: 18px; cursor: pointer;
}
.auth .auth-codigo { padding: 0 12px; text-align: center; font-size: 26px; letter-spacing: 10px; font-weight: 600; height: 60px; margin-bottom: 16px; }

.auth .auth-btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 50px; border: 0; border-radius: 12px;
    font-size: 16px; font-weight: 600; margin-top: 6px;
    background: var(--btn); color: #fff; box-shadow: none;
}
.auth .auth-btn:hover, .auth .auth-btn:focus { background: var(--btn-hover); color: #fff; }
.auth .auth-btn:disabled { opacity: .7; }

/* Opciones de activación (radios que arma main.js con clases de Bootstrap) */
.auth .auth-opciones { display: grid; gap: 10px; margin-bottom: 16px; }
.auth .auth-opciones .form-check {
    color: var(--texto) !important; margin: 0 !important;
    border: 1px solid var(--borde); border-radius: 12px; background: var(--campo);
    padding: 14px 14px 14px 44px; min-height: auto;
}
.auth .auth-opciones .form-check-input { margin-left: -28px; margin-top: 3px; }
.auth .auth-opciones .form-check-label { cursor: pointer; }
.auth .auth-opciones .form-check:has(input:checked) { border-color: var(--azul); box-shadow: 0 0 0 3px var(--anillo); }
.auth .text-white { color: inherit !important; }

.auth-check { color: var(--texto); margin: 0 0 14px; }
.auth .form-check-input:checked { background-color: var(--azul); border-color: var(--azul); }
.auth-nota { color: var(--texto-2); font-size: 13px; margin: 0 0 16px; }

.auth-links { display: flex; justify-content: space-between; margin-top: 14px; font-size: 14px; }
.auth a { color: var(--link); font-weight: 600; text-decoration: none; }
.auth a:hover { text-decoration: underline; }

.auth-help { color: var(--texto-2); font-size: 13px; text-align: center; line-height: 1.5; margin: 22px 0 0; }
.auth-secure { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--texto-2); font-size: 12px; margin-top: 18px; }
.auth-contact { display: flex; gap: 24px; justify-content: center; font-size: 18px; margin-top: 14px; }
.auth-contact a { color: var(--texto-2); }
.auth-contact a:hover { color: var(--link); text-decoration: none; }
.auth-copy { text-align: center; font-size: 12px; margin: 10px 0 0; }
.auth-copy a { color: var(--texto-2); font-weight: 400; }

/* Errores */
.auth #msg-error .alert {
    border-radius: 12px; font-size: 14px; margin-bottom: 16px; padding: 12px 40px 12px 14px;
    background: #fdecec; border: 1px solid #f5c2c2; color: #a61b1b; box-shadow: none;
}
.auth #msg-error .alert strong { color: #a61b1b; }
.auth #msg-error .btn-close { padding: 14px; filter: none; opacity: .6; }
.auth-a #msg-error .alert { background: rgba(220, 53, 69, .16); border-color: rgba(255, 120, 130, .35); color: #ffc9ce; }
.auth-a #msg-error .alert strong { color: #ffc9ce; }

/* ---------- Diseño A: fondo atenuado + tarjeta oscura ---------- */
.auth-a {
    --texto: #fff;
    --texto-2: #a7b4d6;
    --azul: #6f95f2;
    --anillo: rgba(111, 149, 242, .25);
    --borde: #26386b;
    --campo: #0b1633;
    --campo-focus: #0d1a3b;
    --caja: rgba(15, 29, 65, .94);
    --btn: #1a3db0;
    --btn-hover: #12329a;
    --link: #8fb0ff;
    position: relative;
    grid-template-columns: 1fr;
    background: #0f1d41 url('/images/background/bg.jpg') center / cover no-repeat;
}
.auth-a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 29, 65, .78), rgba(15, 29, 65, .92)); }
.auth-a .auth-brand { display: none; }
.auth-a .auth-side { position: relative; padding: 24px 16px; }
.auth-a .auth-box {
    max-width: 420px; padding: 34px 32px 24px; border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.auth-a .auth-logo-blanco { display: block; }
.auth-a .auth-title, .auth-a .auth-sub { text-align: center; }
.auth-a .auth-icon { margin-left: auto; margin-right: auto; }
.auth-a .auth-title { font-size: 22px; }

/* ---------- Celular / tableta ---------- */
@media (max-width: 860px) {
    .auth-b { grid-template-columns: 1fr; }
    .auth-b .auth-brand { display: none; }
    .auth-b .auth-logo-color { display: block; }
    .auth-b .auth-title, .auth-b .auth-sub { text-align: center; }
    .auth-b .auth-icon { margin-left: auto; margin-right: auto; }
    .auth-b .auth-side { align-items: flex-start; padding: 36px 16px; }
}
@media (max-width: 480px) {
    .auth-a .auth-box { padding: 28px 20px 22px; }
}