/* === ExosData Login Overrides ===
   Paleta naranja #fc7a1c 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: #5a2a0a;
    --brand-800: #7a3a0e;
    --brand-700: #a04e14;
    --brand-600: #d2641a;
    --brand-500: #fc7a1c; /* color principal solicitado */
    --brand-400: #ff9447;
    --brand-300: #ffb07a;
    --brand-200: #ffd1b2;
    --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);
}


/* --------- Logo y título --------- */
.login100-form-logo img {
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.08));
}

.login100-form-title {
    color: var(--ink-900) !important;
    letter-spacing: .5px;
    text-transform: none !important; /* fuera ALL CAPS para un look 2025 */
    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(252,122,28,.20), 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(252,122,28,.18);
    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(252,122,28,.22);
    }

    .login100-form-btn:active {
        background: var(--brand-700) !important;
        transform: translateY(0);
        box-shadow: 0 6px 16px rgba(252,122,28,.20);
    }

    .login100-form-btn:focus {
        outline: 3px solid rgba(252,122,28,.30);
        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;
    }
}