/* =========================================================
   García Recta Design — login-premium.css
   Rediseño premium del acceso al CRM. Solo presentación y
   animación — cero cambios de lógica (ver login.js, intacto).

   Concepto: "acceso al detrás de escena". Tres zonas —
   izquierda (estructura arquitectónica), centro (formulario),
   derecha (paneles de vidrio + reflejo) — suspendidas alrededor
   del acceso, sobre fondo prácticamente negro.
   ========================================================= */

html, body.login-page {
    height: 100%;
    background: var(--black);
    font-family: var(--font-body);
    color: var(--white);
    overflow: hidden;
}

/* ---------- Fondo: grafito muy oscuro, con variación tonal, grano y
   líneas arquitectónicas casi imperceptibles ---------- */
.login-shell {
    position: relative; min-height: 100svh; width: 100%; overflow: hidden;
    background: radial-gradient(120% 100% at 50% 32%, #121212 0%, var(--black) 68%);
    display: grid; grid-template-columns: 1fr minmax(360px, 480px) 1fr; align-items: center;
}
.login-bg-lines {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        repeating-linear-gradient(90deg, rgba(245,245,243,.035) 0, rgba(245,245,243,.035) 1px, transparent 1px, transparent 64px),
        repeating-linear-gradient(0deg, rgba(245,245,243,.03) 0, rgba(245,245,243,.03) 1px, transparent 1px, transparent 64px);
}
.login-bg-grain {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Laterales ---------- */
.login-side {
    position: relative; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 1s var(--ease);
}
.login-shell.is-ready .login-side { opacity: 1; }
.login-arch-svg, .login-glass-svg { width: min(70%, 220px); height: auto; max-height: 80vh; overflow: visible; }
.login-side-tag {
    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
    opacity: 0; transition: opacity .8s var(--ease) .6s;
}
.login-shell.is-ready .login-side-tag { opacity: 1; }

@media (max-width: 1050px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-side { display: none; }
}

/* ---------- Izquierda: líneas arquitectónicas (fachada/cerramiento) ---------- */
.arch-line-v { stroke: rgba(245,245,243,.22); stroke-width: 1; }
.arch-line-h { stroke: rgba(245,245,243,.16); stroke-width: 1; }
.arch-line-angle { stroke: rgba(245,245,243,.12); stroke-width: 1; }
.arch-dot { fill: var(--red); opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; }

/* Dibujo de entrada vía stroke-dasharray/offset (controlado por JS) */
.arch-line-v, .arch-line-h { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* Micro-movimiento ambiental — 16s, con pausas, jamás constante */
@keyframes archDotBreathe {
    0%, 78%, 100% { opacity: .7; transform: scale(1); }
    88% { opacity: 1; transform: scale(1.25); }
}
.login-shell.is-ready .arch-dot { animation: archDotBreathe 16s ease-in-out infinite; animation-delay: 1.3s; }

@keyframes archLineDrift {
    0%, 70%, 100% { transform: translateX(0); }
    85% { transform: translateX(6px); }
}
.login-shell.is-ready .arch-h-2 { animation: archLineDrift 18s ease-in-out infinite; }

/* ---------- Derecha: paneles de vidrio + reflejo ---------- */
.glass-panel { stroke: var(--white); stroke-width: 1; }

/* Reflejo: una franja de luz muy sutil que recorre los paneles y
   se detiene largo rato — nunca neón, nunca láser. */
.login-glass-sweep {
    position: absolute; left: 50%; top: 8%; width: min(70%, 220px); height: 70%;
    transform: translateX(-50%); pointer-events: none; z-index: 2; mix-blend-mode: screen;
    background: linear-gradient(200deg, transparent 42%, rgba(255,247,232,.05) 48%, rgba(255,247,232,.13) 50%, rgba(255,247,232,.05) 52%, transparent 58%);
    background-size: 100% 340%;
    background-position: 0 -120%;
    opacity: 0;
}
@keyframes glassSweepMove {
    0%   { background-position: 0 -120%; opacity: 0; }
    6%   { opacity: 1; }
    22%  { background-position: 0 120%; opacity: 1; }
    30%  { opacity: 0; }
    100% { background-position: 0 120%; opacity: 0; }
}
.login-shell.is-ready .login-glass-sweep { animation: glassSweepMove 20s ease-in-out infinite; animation-delay: 2.4s; }

/* ---------- Centro: panel de acceso ---------- */
.login-container {
    position: relative; z-index: 2; width: 100%; max-width: 420px; margin: 0 auto; padding: 0 28px;
}
.login-brand {
    display: flex; align-items: center; gap: 12px; margin-bottom: 26px;
    opacity: 0; transform: translateY(14px);
}
.login-logo { width: 40px; height: 40px; object-fit: contain; }
.login-brand-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: .2px; }

.login-microtag {
    font-size: 10.5px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
    color: rgba(245,245,243,.4); margin-bottom: 34px;
    opacity: 0; transform: translateY(14px);
}
.login-microtag .dot { color: var(--red); margin: 0 6px; }

#loginTitle {
    font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 4vw, 2.4rem);
    line-height: 1.1; margin: 0 0 10px; letter-spacing: -.01em;
    opacity: 0; transform: translateY(16px);
}
.login-subtitle {
    text-align: left; margin-bottom: 40px; color: rgba(245,245,243,.5);
    font-size: 12.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
    opacity: 0; transform: translateY(16px);
}

/* ---------- Form ---------- */
.login-form { display: flex; flex-direction: column; gap: 30px; }
.login-field { position: relative; opacity: 0; transform: translateY(18px); }
.login-field label {
    display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
    color: rgba(245,245,243,.45); margin-bottom: 12px; transition: color .25s ease;
}
.login-field:focus-within label { color: rgba(245,245,243,.8); }

.login-field input {
    width: 100%; background: none; border: none; outline: none;
    color: #fff; font-family: var(--font-body); font-size: 16px; padding: 4px 0 10px;
}
.login-field input::placeholder { color: rgba(245,245,243,.28); }

/* Autocompletado del navegador (Chrome/Edge/Safari): sin esto, el
   navegador fuerza su propio fondo claro en el input autocompletado
   y pisa el "background: none" de arriba, sea cual sea su especificidad.
   El truco es forzar una transición de fondo casi infinita en vez de
   pelear directamente contra el color que inyecta el navegador. */
.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:focus,
.login-field input:-webkit-autofill:active {
    -webkit-text-fill-color: #fff;
    caret-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px transparent inset;
    box-shadow: 0 0 0 1000px transparent inset;
    transition: background-color 600000s ease-in-out 0s, color 600000s ease-in-out 0s;
}
/* Firefox no necesita el truco anterior pero sí fuerza sus propios
   colores de autofill; se neutralizan con filter. */
.login-field input:autofill {
    filter: none;
}

.login-field-line { position: relative; display: block; width: 100%; height: 1px; background: var(--line-strong); }
.login-field-line-fill { position: absolute; left: 0; bottom: 0; height: 1px; width: 0%; background: var(--red); transition: width .35s var(--ease); }
.login-field:focus-within .login-field-line-fill { width: 100%; }
.login-field:focus-within .login-field-line::after {
    content: ''; position: absolute; right: -1px; bottom: -1.5px; width: 4px; height: 4px; border-radius: 50%;
    background: var(--red); opacity: 0; animation: fieldDotIn .35s var(--ease) forwards;
}
@keyframes fieldDotIn { to { opacity: 1; } }

.login-password-wrap { position: relative; display: flex; align-items: center; }
.login-password-wrap input { padding-right: 34px; }
.login-toggle-pass {
    position: absolute; right: 0; bottom: 8px; background: none; border: none; padding: 2px; cursor: pointer;
    color: rgba(245,245,243,.4); transition: color .2s ease;
}
.login-toggle-pass:hover { color: #fff; }
.login-toggle-pass svg { width: 17px; height: 17px; display: block; }
.icon-hidden { display: none; }

/* ---------- Botón Ingresar ---------- */
.login-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 10px; padding: 15px 26px; border: none; border-radius: var(--radius-small);
    background: var(--red); color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
    transition: background .3s var(--ease), transform .15s ease, gap .3s var(--ease);
    opacity: 0; transform: translateY(18px);
}
.login-submit:hover { background: var(--red-bright); gap: 16px; }
.login-submit:active { transform: scale(.98); }
.login-submit-arrow { transition: transform .3s var(--ease); }
.login-submit:hover .login-submit-arrow { transform: translateX(3px); }

.login-submit.is-loading { pointer-events: none; opacity: .85; }
.login-submit.is-loading .login-submit-text::after {
    content: ''; display: inline-block; width: 10px; text-align: left;
    animation: loadingDots 1.1s steps(4) infinite;
}
@keyframes loadingDots { 0% { content: ''; } }
.login-submit.is-loading .login-submit-text { position: relative; }
.login-submit.is-loading .login-submit-arrow { opacity: 0; width: 0; }

.login-footer {
    margin-top: 46px; font-size: 11px; letter-spacing: 1px; color: rgba(245,245,243,.32);
    opacity: 0; transform: translateY(10px);
}

/* ---------- Alertas (creadas por login.js: .alert.error / .alert.success) ----------
   Reemplaza cualquier estilo genérico anterior — línea roja fina,
   fade + leve desplazamiento, nunca "shake". */
.alert {
    position: relative; margin-bottom: 22px; padding: 12px 0 12px 16px;
    font-size: 12.5px; font-weight: 600; letter-spacing: .4px;
    animation: alertIn .38s var(--ease) both;
}
.alert::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; }
.alert.error { color: #f0a3aa; }
.alert.error::before { background: var(--red); }
.alert.success { color: #9fd8b4; }
.alert.success::before { background: #4caf7d; }
@keyframes alertIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Transición de salida (justo antes de la redirección) ---------- */
.login-shell.is-leaving .login-container,
.login-shell.is-leaving .login-side { transition: opacity .6s ease, transform .6s ease; opacity: 0; transform: scale(.98); }

/* ---------- Mobile ---------- */
@media (max-width: 1050px) {
    .login-shell { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 0; }
    .login-container { max-width: 400px; }
}
@media (max-width: 480px) {
    .login-container { padding: 0 22px; }
    .login-brand-name { font-size: 15px; }
    #loginTitle { font-size: 1.7rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .login-side, .login-side-tag, .login-brand, .login-microtag, #loginTitle, .login-subtitle,
    .login-field, .login-submit, .login-footer, .arch-dot {
        opacity: 1 !important; transform: none !important;
    }
    .arch-dot, .arch-h-2, .login-glass-sweep { animation: none !important; }
    .login-shell.is-leaving .login-container, .login-shell.is-leaving .login-side { transition: opacity .25s ease; transform: none; }
}