/*
 * ============================================================
 *  CRM-LOGIN — Pantalla de acceso standalone
 *  Tema    : Fintech/datos — "Refinado neutro"
 *  Autor   : Frontend UI Engineer Senior
 *  Versión : 1.0.0 | 2026-06-18
 *
 *  Depende de: crm-modern.css (tokens :root, tipografías)
 *  Carga DESPUÉS de crm-modern.css.
 *  Solo estiliza clases definidas en login.php.
 *  No redefine paleta ni importa fuentes.
 * ============================================================ */


/* ============================================================
   1. FONDO DE PÁGINA — body.crm-login-page
   Patrón geométrico discreto: rejilla hairline en teal
   a muy baja opacidad, sin llamar la atención.
   background-color base = --bg (blanco cálido).
   ============================================================ */

body.crm-login-page {
    margin: 0;
    padding: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    color: var(--text-body);
    background-color: var(--bg);

    /*
     * Patrón: líneas finas en teal (4% opacidad) cada 32px.
     * El degradado radial central agrega un leve "foco de luz"
     * detrás de la card sin sobrecargar visualmente.
     */
    background-image:
        radial-gradient(ellipse 72% 60% at 50% 44%,
            rgba(18, 124, 117, .045) 0%,
            transparent 72%),
        linear-gradient(rgba(18, 124, 117, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18, 124, 117, .035) 1px, transparent 1px);
    background-size: 100% 100%, 32px 32px, 32px 32px;
    background-attachment: fixed;

    /* reset box-sizing heredado de Bootstrap */
    box-sizing: border-box;
}

body.crm-login-page *,
body.crm-login-page *::before,
body.crm-login-page *::after {
    box-sizing: inherit;
}


/* ============================================================
   2. CONTENEDOR CENTRADO — .crm-login-wrap
   Flex de pantalla completa; centra la card en ambos ejes.
   Padding lateral para evitar que la card toque bordes en mobile.
   ============================================================ */

.crm-login-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 24px 16px;
}


/* ============================================================
   3. CARD — .crm-login-card
   Surface blanca, radio, sombra 1px, borde hairline.
   max-width 400px en desktop; casi full-width en mobile.
   Padding generoso: mucho aire interno — look fintech.
   ============================================================ */

.crm-login-card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    width: 100%;
    max-width: 400px;
    padding: 48px 40px 40px;

    /*
     * Transición de sombra al aparecer (fadeIn suave).
     * Sin movimientos bruscos — solo opacidad.
     */
    animation: loginCardIn var(--t-base) ease both;
}

@keyframes loginCardIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* Respetar prefers-reduced-motion: desactivar animaciones */
@media (prefers-reduced-motion: reduce) {
    .crm-login-card {
        animation: none;
    }
}


/* ============================================================
   4. WORDMARK — .crm-login-brand
   "CR‑M" con Space Grotesk 700. El guión non-breaking
   evita que parta en dos líneas.
   El punto en teal: pseudo-elemento sobre la "M" final.
   ============================================================ */

.crm-login-brand {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--ink);
    margin: 0 0 28px 0;
    line-height: 1;

    /* Añadir el punto de acento teal a la derecha */
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}

/* Punto decorativo teal — acento de marca */
.crm-login-brand::after {
    content: '.';
    color: var(--accent);
    font-size: 32px;
    line-height: 1;
    margin-left: 1px;
}


/* ============================================================
   5. TÍTULO Y SUBTÍTULO — .crm-login-title / .crm-login-sub
   ============================================================ */

.crm-login-title {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px 0;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.crm-login-sub {
    font-size: 13.5px;
    color: var(--muted);
    margin: 0 0 28px 0;
    line-height: 1.5;
}


/* ============================================================
   6. CAJA DE ERROR — .crm-login-error / .crm-login-error.is-visible
   Oculta por defecto. Se muestra con .is-visible.
   Fondo danger-soft, borde izquierdo danger como acento.
   ============================================================ */

.crm-login-error {
    display: none;                       /* oculta por defecto */
    align-items: flex-start;
    gap: 8px;
    background-color: var(--danger-soft);
    border: 1px solid rgba(192, 71, 63, .25);
    border-left: 3px solid var(--danger);
    border-radius: var(--radius-input);
    padding: 10px 12px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--danger);
    line-height: 1.45;
    transition: opacity var(--t-fast);
}

.crm-login-error.is-visible {
    display: flex;                       /* visible con .is-visible */
}

/* Ícono de alerta — alineado con primera línea de texto */
.crm-login-error > .fa {
    flex-shrink: 0;
    font-size: 14px;
    margin-top: 1px;                     /* alineación óptica con baseline del texto */
}

.crm-login-error > span {
    flex: 1;
}

@media (prefers-reduced-motion: reduce) {
    .crm-login-error {
        transition: none;
    }
}


/* ============================================================
   7. GRUPOS DE CAMPO — .crm-field / .crm-field label
   Separación entre campos. Label en micro-caps muted.
   ============================================================ */

.crm-login-form .crm-field {
    margin-bottom: 18px;
}

.crm-login-form .crm-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--muted);
    margin-bottom: 6px;
    line-height: 1;
}


/* ============================================================
   8. WRAPPER DE INPUT CON ÍCONO — .crm-input-icon
   Posicionamiento relativo para alojar el ícono izquierdo
   (absoluto) y el botón ojo derecho (absoluto).
   ============================================================ */

.crm-input-icon {
    position: relative;
    display: block;
}

/* Ícono izquierdo: fa-user / fa-lock */
.crm-input-icon > i.fa {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 13px;
    pointer-events: none;               /* no interfiere con el click en el input */
    z-index: 2;
    transition: color var(--t-fast);
}

/*
 * Cuando el input adyacente está en foco, el ícono izquierdo
 * toma color --accent para dar retroalimentación sutil.
 */
.crm-input-icon > i.fa + .form-control:focus ~ i,
.crm-input-icon:focus-within > i.fa {
    color: var(--accent);
}


/* ============================================================
   9. INPUT — .crm-input-icon .form-control
   Reseteo completo del look Bootstrap 3 (border-radius, sombra,
   foco azul). Reemplazado por el sistema de diseño "Refinado neutro".
   ============================================================ */

.crm-input-icon .form-control {
    width: 100%;
    height: 42px !important;            /* gana al .form-control global (height:auto !important de crm-modern) */
    /*
     * !important necesario: crm-modern.css define `.form-control { padding: 8px 14px !important }`,
     * que pisaba este padding-left y hacía que el texto se escribiera encima del ícono fa.
     */
    padding: 0 14px 0 38px !important; /* izq: espacio para el ícono fa */
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: var(--text-body);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-input);
    box-shadow: none;                   /* anular box-shadow de Bootstrap */
    outline: none;
    transition:
        border-color var(--t-fast),
        box-shadow   var(--t-fast);
    -webkit-appearance: none;
    appearance: none;
}

/* Placeholder */
.crm-input-icon .form-control::placeholder {
    color: var(--text-light);
    font-size: 13.5px;
}

/* Estado hover — hairline levemente más oscura */
.crm-input-icon .form-control:hover {
    border-color: #C8C8C3;
}

/*
 * Estado foco accesible:
 * - border-color -> --accent (teal)
 * - box-shadow ring -> --accent-soft (verde muy claro, 3px spread)
 * No se elimina outline sin reemplazo — el ring actúa como sustituto
 * visible de alto contraste.
 */
.crm-input-icon .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}

/* Anular el foco azul de Bootstrap */
.crm-login-page .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}

/* Input de clave: padding derecho extra para el botón ojo */
#crmClave {
    padding-right: 42px !important;     /* gana al padding global de crm-modern */
}

@media (prefers-reduced-motion: reduce) {
    .crm-input-icon .form-control {
        transition: none;
    }
}


/* ============================================================
   10. BOTÓN OJO — .crm-toggle-pass
   Absoluto a la derecha del input de clave.
   Transparente, sin borde, color muted; hover -> accent.
   tabindex="-1" ya en el HTML: no interrumpe flujo de Tab.
   ============================================================ */

.crm-toggle-pass {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-light);
    font-size: 13px;
    transition: color var(--t-fast);
    z-index: 3;
}

.crm-toggle-pass:hover,
.crm-toggle-pass:focus-visible {
    color: var(--accent);
    outline: none;
}

/* Foco visible accesible para el botón ojo */
.crm-toggle-pass:focus-visible {
    box-shadow: 0 0 0 2px var(--accent-soft);
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .crm-toggle-pass {
        transition: none;
    }
}


/* ============================================================
   10b. CLOUDFLARE TURNSTILE — .crm-turnstile
   Contenedor del widget anti-bot. Centrado, con aire arriba
   y abajo. El iframe de Turnstile mide 300x65 por defecto.
   ============================================================ */

.crm-turnstile {
    display: flex;
    justify-content: center;
    margin: 4px 0 18px;
    min-height: 65px;                   /* reserva alto del widget: evita salto de layout */
}


/* ============================================================
   11. BOTÓN SUBMIT — .crm-login-btn
   Full-width, bg --accent, texto blanco, peso 600.
   Hover: --accent-strong. Transición suave.
   Contiene .crm-login-btn-text (label) y .crm-login-spin (spinner).
   ============================================================ */

.crm-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    padding: 0 20px;
    margin-top: 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
    background-color: var(--accent);
    border: none;
    border-radius: var(--radius-btn);
    cursor: pointer;
    letter-spacing: 0.1px;
    transition:
        background-color var(--t-fast),
        box-shadow       var(--t-fast),
        opacity          var(--t-fast);
    -webkit-appearance: none;
    appearance: none;
}

.crm-login-btn:hover {
    background-color: var(--accent-strong);
    box-shadow: 0 2px 8px rgba(18, 124, 117, .22);
}

.crm-login-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px var(--accent-soft),
        0 2px 8px rgba(18, 124, 117, .18);
}

.crm-login-btn:active {
    background-color: var(--accent-strong);
    transform: translateY(1px);
}

/* Estado disabled nativo (cuando el JS lo activa) */
.crm-login-btn:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

@media (prefers-reduced-motion: reduce) {
    .crm-login-btn {
        transition: none;
    }
    .crm-login-btn:active {
        transform: none;
    }
}


/* ============================================================
   12. ESTADO LOADING — .crm-login-form.is-loading
   Cuando el JS agrega .is-loading al form:
   - .crm-login-btn-text se oculta
   - .crm-login-spin se muestra
   - El botón está atenuado (opacity ya manejada por :disabled)
   ============================================================ */

/* Spinner: oculto por defecto */
.crm-login-spin {
    display: none;
    font-size: 15px;
}

/* Loading activo: ocultar texto, mostrar spinner */
.crm-login-form.is-loading .crm-login-btn-text {
    display: none;
}

.crm-login-form.is-loading .crm-login-spin {
    display: inline-block;
}

/*
 * Respetar prefers-reduced-motion para el spinner:
 * detener la rotación fa-spin (Bootstrap Font Awesome usa
 * @keyframes fa-spin). Mostramos el ícono estático.
 */
@media (prefers-reduced-motion: reduce) {
    .crm-login-spin.fa-spin {
        animation: none;
    }
}


/* ============================================================
   13. PIE DE PÁGINA — .crm-login-foot
   Texto muy pequeño, centrado, muted.
   ============================================================ */

.crm-login-foot {
    margin: 28px 0 0 0;
    text-align: center;
    font-size: 11.5px;
    color: var(--text-light);
    letter-spacing: 0.2px;
}


/* ============================================================
   14. RESPONSIVE — MOBILE-FIRST
   La card ya usa width:100% + max-width:400px.
   En pantallas pequeñas reducimos el padding interno
   para que respire sin desperdiciar espacio.
   ============================================================ */

/* <= 480px: casi full-width con padding reducido */
@media (max-width: 480px) {
    .crm-login-wrap {
        padding: 16px 12px;
        align-items: flex-start;        /* card desde arriba en móviles muy pequeños */
        padding-top: 40px;
    }

    .crm-login-card {
        padding: 36px 24px 32px;
        border-radius: 12px;            /* radio levemente mayor en mobile (toca bordes) */
    }

    .crm-login-brand {
        font-size: 24px;
    }

    .crm-login-title {
        font-size: 20px;
    }
}

/* >= 481px hasta ~600px: centrado vertical, padding intermedio */
@media (min-width: 481px) and (max-width: 600px) {
    .crm-login-card {
        padding: 40px 32px 36px;
    }
}


/* ============================================================
   15. ACCESIBILIDAD — HIGH CONTRAST MODE (Windows)
   En forced-colors usamos currentColor para que el sistema
   operativo pueda sustituir colores adecuadamente.
   ============================================================ */

@media (forced-colors: active) {
    .crm-login-card {
        border: 2px solid ButtonText;
    }

    .crm-login-btn {
        background-color: ButtonText;
        color: ButtonFace;
        border: 2px solid ButtonText;
        forced-color-adjust: none;
    }

    .crm-input-icon .form-control {
        border: 2px solid ButtonText;
        forced-color-adjust: none;
    }

    .crm-login-error.is-visible {
        border: 2px solid LinkText;
        forced-color-adjust: none;
    }
}