/* ═══════════════════════════════════════════════════════
   ISFIS Auth — UI Redesign v1.7.5
   Estética: Luxury Financial · Dark Navy + Gold Accents
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
    --isfis-navy:    #0B1628;
    --isfis-navy2:   #111F38;
    --isfis-navy3:   #172444;
    --isfis-gold:    #C9A84C;
    --isfis-gold2:   #E8C96A;
    --isfis-silver:  #94A3B8;
    --isfis-white:   #F0F4FF;
    --isfis-red:     #E05252;
    --isfis-green:   #34C97A;
    --isfis-border:  rgba(201,168,76,.18);
    --isfis-glass:   rgba(255,255,255,.04);
    --isfis-font:    'DM Sans', -apple-system, sans-serif;
    --isfis-serif:   'DM Serif Display', Georgia, serif;
}

.isfis-login-page {
    min-height:100vh; width:100%;
    background:var(--isfis-navy);
    display:flex; align-items:center; justify-content:center;
    padding:20px; box-sizing:border-box;
    font-family:var(--isfis-font);
    position:relative; overflow:hidden;
}

/* Fondo geométrico decorativo */
.isfis-login-page::before {
    content:'';
    position:absolute; inset:0; pointer-events:none;
    background:
        radial-gradient(ellipse 60% 50% at 15% 20%, rgba(201,168,76,.08) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at 85% 80%, rgba(17,31,56,.8) 0%, transparent 55%);
}
.isfis-login-page::after {
    content:'';
    position:absolute; inset:0; pointer-events:none;
    background-image:
        linear-gradient(rgba(201,168,76,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,168,76,.04) 1px, transparent 1px);
    background-size:40px 40px;
}

.isfis-login-card {
    background:var(--isfis-navy2);
    border:1px solid var(--isfis-border);
    border-radius:20px;
    padding:2.8rem 2.4rem;
    width:100%; max-width:420px;
    box-sizing:border-box;
    position:relative; z-index:1;
    animation:isfis-slideUp .5s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes isfis-slideUp {
    from { opacity:0; transform:translateY(24px); }
    to   { opacity:1; transform:translateY(0); }
}

/* Línea dorada superior */
.isfis-login-card::before {
    content:'';
    position:absolute; top:0; left:2rem; right:2rem; height:2px;
    background:linear-gradient(90deg, transparent, var(--isfis-gold), transparent);
    border-radius:0 0 2px 2px;
}

.isfis-login-header { text-align:center; margin-bottom:2rem; }
.isfis-login-logo { margin-bottom:1rem; }
.isfis-login-logo img {
    max-height:52px; max-width:180px;
    object-fit:contain; display:block; margin:0 auto;
    filter:brightness(1.1);
}
.isfis-login-logo-text {
    font-family: var(--isfis-serif);
    font-size: 2.1rem;
    letter-spacing: .04em; line-height: 1.2;
    display: inline-block;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    /* Color base siempre visible — el admin puede cambiarlo desde configuración */
    color: var(--isfis-white) !important;
    -webkit-text-fill-color: var(--isfis-white) !important;
}
.isfis-login-dot {
    background: none !important;
    background-color: transparent !important;
    /* El color del texto lo define el admin via style inline en PHP */
}
.isfis-login-title {
    font-size:1.05rem; font-weight:500;
    color:var(--isfis-white); margin:0 0 .35rem;
    letter-spacing:-.01em;
}
.isfis-login-sub {
    font-size:.8rem; color:var(--isfis-silver);
    margin:0; line-height:1.5; font-weight:300;
}

.isfis-login-field { margin-bottom:1.1rem; }
.isfis-login-label {
    display:block; font-size:.75rem; font-weight:500;
    color:var(--isfis-silver); margin-bottom:.45rem;
    text-transform:uppercase; letter-spacing:.07em;
}
.isfis-login-input-wrap { position:relative; }
.isfis-login-input {
    width:100%; padding:11px 16px;
    border:1px solid rgba(148,163,184,.2);
    border-radius:10px; font-size:.9rem;
    color:#F0F4FF; background:rgba(255,255,255,.06);
    outline:none; box-sizing:border-box;
    transition:border-color .25s, background .25s;
    font-family:var(--isfis-font); -webkit-appearance:none;
    -webkit-text-fill-color:#F0F4FF;
    caret-color:#F0F4FF;
}
.isfis-login-input::placeholder {
    color:rgba(148,163,184,.5);
    -webkit-text-fill-color:rgba(148,163,184,.5);
}
.isfis-login-input:focus {
    border-color:var(--isfis-gold);
    background:rgba(201,168,76,.06);
    color:#F0F4FF;
    -webkit-text-fill-color:#F0F4FF;
}
/* Neutralizar el autofill del navegador */
.isfis-login-input:-webkit-autofill,
.isfis-login-input:-webkit-autofill:hover,
.isfis-login-input:-webkit-autofill:focus,
.isfis-login-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 60px #111F38 inset !important;
    -webkit-text-fill-color: #F0F4FF !important;
    caret-color: #F0F4FF;
    border-color: rgba(148,163,184,.2) !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* Forzar texto legible si el navegador pone fondo blanco (password fields) */
.isfis-login-input[type="password"] {
    color: #F0F4FF !important;
    -webkit-text-fill-color: #F0F4FF !important;
    background: rgba(255,255,255,.06) !important;
    color-scheme: dark;
}
.isfis-login-input[type="password"]:focus {
    color: #F0F4FF !important;
    -webkit-text-fill-color: #F0F4FF !important;
    background: rgba(201,168,76,.06) !important;
}
/* Si el fondo termina siendo blanco, texto negro */
@media (forced-colors: none) {
    .isfis-login-input {
        field-sizing: content;
    }
}
.isfis-login-input:not(:-webkit-autofill) {
    background-color: rgba(255,255,255,.06) !important;
    color: #F0F4FF !important;
    -webkit-text-fill-color: #F0F4FF !important;
}
.isfis-toggle-pass {
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(148,163,184,.15) !important;
    border-radius: 7px;
    cursor:pointer;
    color: var(--isfis-silver) !important;
    -webkit-text-fill-color: var(--isfis-silver) !important;
    font-size:.9rem;
    padding:5px 8px; min-height:32px; min-width:32px;
    display:flex; align-items:center; justify-content:center;
    opacity:.85;
    transition:all .2s;
    -webkit-tap-highlight-color:transparent;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.isfis-toggle-pass:hover {
    opacity:1;
    color: var(--isfis-gold) !important;
    -webkit-text-fill-color: var(--isfis-gold) !important;
    background: rgba(201,168,76,.12) !important;
    border-color: rgba(201,168,76,.3) !important;
}

.isfis-login-opts {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:1.3rem; flex-wrap:wrap; gap:.4rem;
}
.isfis-login-remember {
    display:flex; align-items:center; gap:7px;
    font-size:.8rem; color:var(--isfis-silver); cursor:pointer;
}
.isfis-login-remember input { accent-color:var(--isfis-gold); cursor:pointer; }
.isfis-login-forgot {
    font-size:.78rem; color:var(--isfis-gold);
    text-decoration:none; opacity:.8; transition:opacity .2s;
}
.isfis-login-forgot:hover { opacity:1; }

.isfis-login-btn {
    width:100%;
    background:linear-gradient(135deg, var(--isfis-gold) 0%, #A8832A 100%);
    color:var(--isfis-navy); border:none; border-radius:10px;
    padding:12px; font-size:.92rem; font-weight:600;
    cursor:pointer; transition:all .25s; min-height:44px;
    font-family:var(--isfis-font); letter-spacing:.02em;
    -webkit-tap-highlight-color:transparent;
}
.isfis-login-btn:hover  { filter:brightness(1.1); transform:translateY(-1px); }
.isfis-login-btn:active { transform:translateY(0); filter:brightness(.95); }

.isfis-login-error {
    background:rgba(224,82,82,.12); border:1px solid rgba(224,82,82,.3);
    color:#FCA5A5; border-radius:8px; padding:9px 13px;
    font-size:.82rem; margin-bottom:.9rem; display:none;
}
.isfis-login-footer {
    text-align:center; font-size:.73rem;
    color:rgba(148,163,184,.4); margin-top:1.6rem; line-height:1.5;
}

/* ════ RESPONSIVE ════ */
@media (max-width:480px) {
    .isfis-login-card { padding:2rem 1.5rem; border-radius:16px; }
    .isfis-login-logo-text { font-size:1.75rem; }
}
@media (max-width:360px) {
    .isfis-login-page  { padding:10px; }
    .isfis-login-card  { padding:1.6rem 1.2rem; border-radius:14px; }
    .isfis-login-logo-text { font-size:1.5rem; }
    .isfis-login-opts  { flex-direction:column; align-items:flex-start; }
}


/* ════════════════════════════════════════════════════════
   FIX GLOBAL DE CONTRASTE — Auth/Login
   ════════════════════════════════════════════════════════ */

/* Título y subtítulo de login */
.isfis-login-title { color: var(--isfis-white) !important; }
.isfis-login-sub { color: var(--isfis-silver) !important; }

/* Labels de los campos */
.isfis-login-label { color: var(--isfis-silver) !important; letter-spacing:.06em !important; }

/* Icono sobre el campo de usuario y contraseña */
.isfis-login-icon { color: var(--isfis-gold) !important; opacity:.9 !important; }

/* Toggle "ver contraseña" — icono siempre visible sobre oscuro */
.isfis-toggle-pass {
    color: var(--isfis-silver) !important;
    -webkit-text-fill-color: var(--isfis-silver) !important;
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(148,163,184,.15) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.isfis-toggle-pass:hover {
    color: var(--isfis-gold) !important;
    -webkit-text-fill-color: var(--isfis-gold) !important;
    background: rgba(201,168,76,.12) !important;
}

/* Botón Entrar — texto oscuro sobre dorado, siempre legible */
.isfis-login-btn {
    color: var(--isfis-navy) !important;
    -webkit-text-fill-color: var(--isfis-navy) !important;
    font-weight: 700 !important;
}

/* Recordar contraseña — texto claro */
.isfis-login-remember { color: var(--isfis-silver) !important; }

/* ¿Olvidó su contraseña? */
.isfis-login-forgot { color: var(--isfis-gold) !important; }

/* Inputs del login — texto siempre blanco */
.isfis-login-input,
.isfis-login-input:focus,
.isfis-login-input:not(:-webkit-autofill) {
    color: #F0F4FF !important;
    -webkit-text-fill-color: #F0F4FF !important;
}

/* ── Toggle ver contraseña — forzar fondo oscuro en todos los navegadores ── */
.isfis-login-toggle-pass {
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(148,163,184,.15) !important;
    border-radius: 7px !important;
    cursor: pointer;
    color: var(--isfis-silver) !important;
    -webkit-text-fill-color: var(--isfis-silver) !important;
    font-size: .9rem;
    padding: 5px 8px; min-height:32px; min-width:32px;
    display: flex; align-items:center; justify-content:center;
    opacity: .85;
    transition: all .2s;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none !important;
    appearance: none !important;
    line-height: 1;
}
.isfis-login-toggle-pass:hover {
    opacity: 1;
    color: var(--isfis-gold) !important;
    -webkit-text-fill-color: var(--isfis-gold) !important;
    background: rgba(201,168,76,.12) !important;
    border-color: rgba(201,168,76,.3) !important;
}

/* ── Logo texto — fondo siempre transparente ── */
.isfis-login-logo-text,
.isfis-login-logo-text *,
.isfis-login-dot {
    background: none !important;
    background-color: transparent !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

/* ══ FIX BOTÓN ENTRAR ══ */
.isfis-login-btn,
.isfis-login-btn:hover,
.isfis-login-btn:focus {
    color: #0B1628 !important;
    -webkit-text-fill-color: #0B1628 !important;
    font-weight: 700 !important;
}
