/* ======================================================================
 * GPC-ENCABEZADO
 * ARCHIVO:         recursos/css/auth/login.kinetic.css (antes gpc/assets/css/auth/login.kinetic.css)
 * FUNCIÓN:         Estilos de la pantalla de ingreso (public/login.php).
 * CÓMO FUNCIONA:   - sección: fondo animado con blobs
 *                  - sección: tarjeta de login, campos y botón
 *                  - sección: alertas de error/bloqueo
 *                  - sección: celular
 * LENGUAJE:        CSS.
 * QUIÉN LO USA:    Recursos compartidos. Lo mencionan: despacho/login.php.
 * SE CONECTA CON:  Nada externo.
 * CUIDADO:         Probar en la copia antes de cambiar.
 * ÚLTIMO CAMBIO:   2026-10-11 06:44:00 (hora Colombia) — sin cambios de código en la mudanza (fecha del último cambio
 *                  en producción)
 * /GPC-ENCABEZADO
 * ====================================================================== */
/* =====================================================================
   login.kinetic.css — GPC KINETIC v14.0
   Animated blob background · Glass card · Fully responsive
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@600;700;800&family=Space+Mono:wght@700&display=swap');

:root {
    --accent:   #6366f1;
    --accent-2: #8b5cf6;
    --text:     #0f172a;
    --muted:    #64748b;
    --subtle:   #94a3b8;
    --radius:   26px;
    --ri:       13px;
    --shadow:   0 24px 60px -8px rgba(99,102,241,0.2),
                0 8px 20px -4px rgba(15,23,42,0.1),
                0 0 0 1px rgba(255,255,255,0.8);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── FONDO DINÁMICO ────────────────────────────────────────────────── */
html { height: 100%; }

body {
    font-family: 'Inter', sans-serif;
    min-height: 100svh;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    overflow-x: hidden;
    background: #f2f5f0;
    position: relative;
}

/* Blobs — posición fija detrás de todo */
.blob {
    position: fixed;
    border-radius: 50%;
    filter: blur(72px);
    will-change: transform, translate;
    translate: 0px 0px;   /* propiedad CSS independiente — JS la actualiza para parallax */
    z-index: 0;
    pointer-events: none;
}

/* Blob 1 — Verde lima brillante — top-left */
.b1 {
    width: 560px; height: 560px;
    background: rgba(132, 204, 22, 0.50);
    top: -140px; left: -120px;
    animation: move1 7s ease-in-out infinite alternate;
}
@keyframes move1 {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(260px, 130px) scale(1.15); }
}

/* Blob 2 — Negro carbón profundo — top-right */
.b2 {
    width: 500px; height: 500px;
    background: rgba(15, 23, 42, 0.65);
    top: -90px; right: -110px;
    animation: move2 9s ease-in-out infinite alternate;
}
@keyframes move2 {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-220px, 210px) scale(1.2); }
}

/* Blob 3 — Lima suave medio — centro */
.b3 {
    width: 420px; height: 420px;
    background: rgba(163, 230, 53, 0.42);
    top: 28%; left: 32%;
    animation: move3 6s ease-in-out infinite alternate;
}
@keyframes move3 {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-130px, 90px) scale(1.3); }
}

/* Blob 4 — Negro verdoso oscuro — bottom-left */
.b4 {
    width: 460px; height: 460px;
    background: rgba(20, 30, 10, 0.60);
    bottom: -110px; left: -90px;
    animation: move4 8s ease-in-out infinite alternate;
}
@keyframes move4 {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(210px, -160px) scale(1.1); }
}

/* Blob 5 — Lima oscuro/oliva — bottom-right */
.b5 {
    width: 520px; height: 520px;
    background: rgba(101, 163, 13, 0.52);
    bottom: -130px; right: -90px;
    animation: move5 10s ease-in-out infinite alternate;
}
@keyframes move5 {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-190px, -140px) scale(1.15); }
}

/* Blob 6 — Carbón puro — centro-arriba */
.b6 {
    width: 380px; height: 380px;
    background: rgba(10, 10, 10, 0.55);
    top: 12%; left: 52%;
    animation: move6 5s ease-in-out infinite alternate;
}
@keyframes move6 {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(110px, 150px) scale(1.2); }
}

/* Overlay unificador — tono lima muy suave */
body::after {
    content: '';
    position: fixed; inset: 0; z-index: 1;
    background: rgba(240, 245, 230, 0.38);
    pointer-events: none;
}

/* ── TARJETA ───────────────────────────────────────────────────────── */
.login-card {
    position: relative; z-index: 10;
    width: 100%; max-width: 400px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--radius);
    padding: clamp(32px, 5vw, 48px) clamp(24px, 5vw, 40px) clamp(28px, 4vw, 40px);
    backdrop-filter: blur(50px) saturate(180%);
    -webkit-backdrop-filter: blur(50px) saturate(180%);
    box-shadow: var(--shadow);
    animation: cardIn 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.login-card::before {
    content: '';
    position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,1), transparent);
}
@keyframes cardIn {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── HEADER ────────────────────────────────────────────────────────── */
.card-header-k { text-align: center; margin-bottom: 30px; }

/* Logo — contenedor transparente, tamaño amplio para el SVG con cables */
.logo-wrap {
    display: inline-flex; align-items: center; justify-content: center;
    width: 160px; height: 80px;
    background: transparent;
    border-radius: 0;
    margin-bottom: 14px;
    position: relative;
    /* Leve flotación */
    animation: floatLogo 3.5s ease-in-out infinite;
}
@keyframes floatLogo {
    0%,100% { transform: translateY(0px); filter: drop-shadow(0 8px 16px rgba(99,102,241,0.25)); }
    50%      { transform: translateY(-6px); filter: drop-shadow(0 16px 24px rgba(99,102,241,0.35)); }
}
/* Cursor parpadeante del logo */
@keyframes blinkCursor { 0%,100% { opacity:1; } 49% { opacity:1; } 50%,99% { opacity:0; } }
.cursor-blink { animation: blinkCursor 1s infinite; }

.app-name {
    font-family: 'Space Grotesk'; font-weight: 800;
    font-size: clamp(1.3rem, 4vw, 1.5rem);
    color: var(--text); letter-spacing: -0.4px; margin-bottom: 8px;
}
.app-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 20px;
    background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.2);
    color: var(--accent); font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.8px; text-transform: uppercase;
}
.dot-live {
    width: 6px; height: 6px; border-radius: 50%;
    background: #10b981; box-shadow: 0 0 7px rgba(16,185,129,0.9);
    animation: blink 2s infinite; flex-shrink: 0;
}
@keyframes blink { 0%,100%{ opacity:1; } 50%{ opacity:0.25; } }

.form-label-k {
    display: block; font-size: 0.74rem; font-weight: 600;
    color: var(--muted); text-transform: uppercase;
    letter-spacing: 0.7px; margin-bottom: 24px; text-align: center;
}

/* ── INPUTS ────────────────────────────────────────────────────────── */
.field-wrap { position: relative; margin-bottom: 12px; }

.field-icon {
    position: absolute; left: 15px; top: 50%;
    transform: translateY(-50%);
    color: var(--subtle); font-size: 0.85rem;
    z-index: 2; pointer-events: none; transition: color 0.2s;
}
.input-k {
    width: 100%; padding: 14px 44px 14px 40px;
    border: 1.5px solid rgba(148,163,184,0.3);
    border-radius: var(--ri);
    background: rgba(255,255,255,0.75);
    color: var(--text); font-family: 'Inter';
    font-size: 16px; font-weight: 500;
    outline: none; transition: 0.2s; -webkit-appearance: none; appearance: none;
}
.input-k::placeholder { color: var(--subtle); font-weight: 400; }
.input-k:focus {
    border-color: var(--accent); background: rgba(255,255,255,0.97);
    box-shadow: 0 0 0 4px rgba(99,102,241,0.12);
}
.field-wrap:focus-within .field-icon { color: var(--accent); }
.input-k:-webkit-autofill,
.input-k:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 60px rgba(255,255,255,0.97) inset;
    -webkit-text-fill-color: var(--text); caret-color: var(--text);
    transition: background-color 9999s;
}
.toggle-pass {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    color: var(--subtle); cursor: pointer; z-index: 5;
    font-size: 0.87rem; padding: 5px; transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.toggle-pass:hover { color: var(--accent); }

/* ── HELPER LINKS ──────────────────────────────────────────────────── */
.helper-links {
    display: flex; justify-content: space-between; align-items: center;
    margin: 8px 0 22px; gap: 8px;
}
.check-wrap {
    display: flex; align-items: center; gap: 7px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.check-wrap input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); }
.check-label { color: var(--muted); font-size: 0.82rem; user-select: none; }
.forgot-pass {
    color: var(--accent); font-size: 0.82rem; font-weight: 600;
    cursor: pointer; white-space: nowrap; transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.forgot-pass:hover { color: var(--accent-2); }

/* ── BOTÓN ─────────────────────────────────────────────────────────── */
.btn-main {
    width: 100%; padding: 15px;
    border: none; border-radius: var(--ri);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color: white; font-family: 'Space Grotesk';
    font-weight: 700; font-size: 0.95rem; letter-spacing: 0.2px;
    cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 10px;
    box-shadow: 0 8px 24px -4px rgba(99,102,241,0.38);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative; overflow: hidden;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn-main::after {
    content: ''; position: absolute;
    top: 0; left: -110%; width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}
.btn-main:hover::after { left: 155%; }
.btn-main:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -6px rgba(99,102,241,0.48); }
.btn-main:active { transform: translateY(1px); box-shadow: none; }
.btn-main:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-spinner {
    width: 17px; height: 17px;
    border: 2px solid rgba(255,255,255,0.3); border-top-color: white;
    border-radius: 50%; animation: spin 0.62s linear infinite; display: none; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── ALERTAS ───────────────────────────────────────────────────────── */
.alert-k {
    display: flex; align-items: center; gap: 10px;
    background: rgba(239,68,68,0.07); border: 1px solid rgba(239,68,68,0.22);
    border-radius: 11px; padding: 11px 14px;
    color: #dc2626; font-size: 0.83rem; font-weight: 500;
    margin-bottom: 16px; animation: slideDown 0.28s ease;
}
#timeoutAlert {
    display: flex; align-items: center; gap: 10px;
    background: rgba(245,158,11,0.07); border: 1px solid rgba(245,158,11,0.28);
    border-radius: 11px; padding: 11px 14px;
    color: #b45309; font-size: 0.82rem; font-weight: 600; margin-bottom: 16px;
}
@keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

/* ── FOOTER ────────────────────────────────────────────────────────── */
.card-footer-k {
    text-align: center; margin-top: 24px;
    color: rgba(148,163,184,0.8); font-size: 0.69rem;
    font-family: 'Space Grotesk'; letter-spacing: 0.4px;
}

/* ── WHATSAPP ──────────────────────────────────────────────────────── */
.wa-float {
    position: fixed; bottom: 22px; right: 22px; z-index: 100;
    width: 48px; height: 48px; background: #25D366; color: white;
    border-radius: 50%; display: grid; place-items: center; font-size: 1.45rem;
    text-decoration: none; box-shadow: 0 6px 18px rgba(37,211,102,0.42);
    transition: 0.28s ease; -webkit-tap-highlight-color: transparent;
}
.wa-float:hover { transform: scale(1.1) rotate(8deg); color: white; }
.wa-float:active { transform: scale(0.95); }

/* ── WARPING ───────────────────────────────────────────────────────── */
body.warping .login-card {
    opacity: 0; transform: scale(0.94) translateY(-10px);
    transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width: 420px) {
    body { padding: 16px; align-items: flex-start; padding-top: clamp(24px, 8svh, 60px); }
    .login-card { padding: 30px 20px 26px; border-radius: 22px; }
    .wa-float { width: 44px; height: 44px; font-size: 1.3rem; bottom: 16px; right: 16px; }
    /* Blobs más pequeños en móvil — usa `scale` separado para no romper animations */
    .b1,.b2,.b3,.b4,.b5,.b6 { scale: 0.65; }
}
@media (max-height: 500px) and (orientation: landscape) {
    body { align-items: flex-start; padding: 10px; }
    .login-card { padding: 18px 22px; }
    .card-header-k { margin-bottom: 12px; }
    .logo-wrap { display: none; }
    .form-label-k { margin-bottom: 10px; }
    .field-wrap { margin-bottom: 8px; }
    .helper-links { margin: 6px 0 14px; }
}
@media (min-width: 1024px) {
    /* En desktop los blobs se ven a full */
    .b1 { width: 650px; height: 650px; }
    .b2 { width: 580px; height: 580px; }
    .b5 { width: 600px; height: 600px; }
}