/* === ExosData Login Overrides ===
   Paleta celeste #22c3ee (Exos Petrol) con look moderno, sobrio y accesible.
   Este archivo debe cargarse DESPU?S de util.css/main.css para sobrescribir estilos.
*/

/* --------- Tokens de color y superficies --------- */
:root {
    --brand-900: var(--exos-primary-darker, #084f66);
    --brand-800: var(--exos-primary-darker, #0a6a86);
    --brand-700: var(--exos-primary-dark, #0c86a8);
    --brand-600: var(--exos-primary-dark, #10a8d1);
    --brand-500: var(--exos-primary, #22c3ee); /* color de marca, configurable en Tema del sistema */
    --brand-400: var(--exos-primary-light, #55d0f0);
    --brand-300: var(--exos-primary-lighter, #8fe1f6);
    --brand-200: var(--exos-primary-lighter, #d0f0fa);
    --ink-900: #0f172a;
    --ink-700: #1f2937;
    --ink-500: #374151;
    --ink-300: #9ca3af;
    --ink-100: #e5e7eb;
    --surface: #ffffffee; /* blanco con leve transparencia p/ligereza */
}

/* --------- Fondo: overlay oscuro sutil + blur --------- */
.container-login100::before {
    /* el template original usa un overlay muy claro; lo suavizamos y oscurecemos */
    background-color: rgba(15,23,42,0.35) !important;
    backdrop-filter: blur(2px);
}

/* Tarjeta del formulario: degradado celeste de marca en vez del naranja original */
.wrap-login100 {
    background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-400) 100%) !important;
    box-shadow: 0 24px 60px -20px rgba(var(--exos-primary-rgb, 16, 168, 209), 0.45);
}

/* --------- Logo y título --------- */
.login100-form-logo img,
.login100-form-logo .exos-login-logo {
    height: 120px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    /* Fuerza el logo a blanco para que contraste con cualquier color de tema */
    filter: brightness(0) invert(1) drop-shadow(0 8px 16px rgba(0, 0, 0, .18));
}

.login100-form-title {
    color: var(--ink-900) !important;
    letter-spacing: .5px;
    text-transform: none !important;
    margin-bottom: 16px;
}

/* --------- Inputs --------- */
.wrap-input100 {
    border-bottom: none !important;
    margin-bottom: 18px !important;
}

.input100 {
    height: 48px !important;
    color: var(--ink-900) !important;
    background: #fff !important;
    border: 1px solid var(--ink-100);
    border-radius: 12px;
    padding: 0 44px 0 44px !important; /* espacio para el ?cono a la izquierda */
    box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;
}

    .input100::placeholder {
        color: var(--ink-300) !important;
    }

/* ?cono del input (usa el pseudo elemento del template) */
.focus-input100::after {
    color: var(--ink-300) !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%);
    font-size: 20px !important;
    padding-left: 0 !important;
}

.focus-input100::before {
    display: none;
}
/* elimina barra animada inferior */

/* Foco accesible */
.input100:focus {
    border-color: var(--brand-500) !important;
    /* fallback: sombra leve si color-mix no est? disponible */
    box-shadow: 0 0 0 4px rgba(var(--exos-primary-rgb, 34,195,238), .25), 0 1px 0 rgba(0,0,0,.02) inset !important;
    outline: none;
}

.has-val.input100 {
    padding-left: 44px !important;
}

/* --------- Checkbox "Recu?rdame" --------- */
.label-checkbox100 {
    color: var(--ink-700) !important;
}

    .label-checkbox100::before {
        background: #fff !important;
        border: 1px solid var(--ink-100);
        box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;
    }

.input-checkbox100:checked + .label-checkbox100::before {
    color: #fff !important;
    background: var(--brand-500) !important;
    border-color: var(--brand-500) !important;
    content: "\f26b"; /* check de zmdi */
}

/* --------- Bot?n principal --------- */
.login100-form-btn {
    background: var(--brand-500) !important;
    color: #fff !important;
    border-radius: 12px !important;
    height: 48px !important;
    font-weight: 600;
    letter-spacing: .2px;
    box-shadow: 0 8px 20px rgba(var(--exos-primary-rgb, 34,195,238), .28);
    border: none;
}

    .login100-form-btn::before {
        display: none !important;
    }
    /* remueve capa blanca */
    .login100-form-btn:hover {
        background: var(--brand-600) !important;
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(var(--exos-primary-rgb, 34,195,238), .32);
    }

    .login100-form-btn:active {
        background: var(--brand-700) !important;
        transform: translateY(0);
        box-shadow: 0 6px 16px rgba(var(--exos-primary-rgb, 34,195,238), .28);
    }

    .login100-form-btn:focus {
        outline: 3px solid rgba(var(--exos-primary-rgb, 34,195,238), .35);
        outline-offset: 2px;
    }

/* --------- Accesibilidad: menos animaci?n si el usuario lo pide --------- */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* --------- Responsive fino --------- */
@media (max-width: 576px) {
    .wrap-login100 {
        padding: 32px 20px 24px 20px !important;
    }
}