/* ========================================================================== VENDRIX POS — LOGIN INSTITUCIONAL MUNICIPAL · v2 ANIMADO IMPORTANTE: agregar en el de tu layout, antes de este CSS: (Boxicons ya lo tenías incluido, se sigue usando igual) Y antes de , incluir auth-municipal.js (spotlight + partículas + toggle de tema) ========================================================================== */ :root { --bg-main: #faf9f6; --bg-secondary: #f1efe6; --text-primary: #1c2620; --text-secondary: #63715f; --border-color: #dcd8c9; --input-bg: transparent; --accent: #0b4d2c; --accent-hover: #0d5f36; --accent-glow: rgba(11, 77, 44, 0.14); --gold: #a97d3f; --gold-bright: #c99a52; --gold-soft: rgba(169, 125, 63, 0.35); --visual-bg-1: #071a10; --visual-bg-2: #0b3d24; --visual-bg-3: #0e4c2c; --panel-text: #eef3ec; --panel-text-soft: rgba(238, 243, 236, 0.68); --panel-line: rgba(238, 243, 236, 0.14); --danger: #a3271e; --danger-bg: rgba(163, 39, 30, 0.08); } [data-theme="dark"] { --bg-main: #0d1310; --bg-secondary: #131a15; --text-primary: #eef1ec; --text-secondary: #8fa091; --border-color: #263029; --input-bg: transparent; --accent: #2f9160; --accent-hover: #3aa96f; --accent-glow: rgba(47, 145, 96, 0.2); --gold: #c79a53; --gold-bright: #e0b06a; --gold-soft: rgba(199, 154, 83, 0.4); --visual-bg-1: #04100a; --visual-bg-2: #082818; --visual-bg-3: #0a3420; --panel-text: #eef3ec; --panel-text-soft: rgba(238, 243, 236, 0.62); --panel-line: rgba(238, 243, 236, 0.1); --danger: #e0574a; --danger-bg: rgba(224, 87, 74, 0.12); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', 'Segoe UI', sans-serif; background-color: var(--bg-main); color: var(--text-primary); transition: background-color .35s ease, color .35s ease; overflow-x: hidden; } .auth-layout { display: flex; min-height: 100vh; } /* ========================================================================== PANEL INSTITUCIONAL (IZQUIERDA) ========================================================================== */ .auth-visual { flex: 1.05; position: relative; overflow: hidden; background: linear-gradient(160deg, var(--visual-bg-1) 0%, var(--visual-bg-2) 55%, var(--visual-bg-3) 100%); background-size: 200% 200%; animation: gradientShift 16s ease-in-out infinite; display: flex; align-items: center; justify-content: center; padding: 56px; color: var(--panel-text); } @keyframes gradientShift { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } } /* spotlight que sigue el cursor */ .cursor-spotlight { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 40%), rgba(201, 154, 82, 0.10), transparent 65%); transition: background .1s ease; } /* patrón guilloché — trazo fino tipo documento oficial, muy sutil, rota lentísimo */ .guilloche { position: absolute; inset: -20%; opacity: 0.14; background-image: repeating-radial-gradient(circle at 15% 20%, transparent 0, transparent 26px, var(--gold-soft) 27px, transparent 28px, transparent 54px), repeating-radial-gradient(circle at 85% 80%, transparent 0, transparent 34px, var(--gold-soft) 35px, transparent 36px, transparent 68px); animation: guillocheDrift 90s linear infinite; pointer-events: none; } @keyframes guillocheDrift { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* partículas doradas ambientales */ .particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .particle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--gold-bright); opacity: 0; animation: particleRise linear infinite; box-shadow: 0 0 6px 1px var(--gold-soft); } @keyframes particleRise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: .7; } 90% { opacity: .5; } 100% { transform: translateY(-420px) translateX(var(--drift, 20px)); opacity: 0; } } .hairline-frame { position: absolute; inset: 28px; border: 1px solid var(--panel-line); pointer-events: none; z-index: 1; animation: frameFadeIn 1.2s ease-out both; } @keyframes frameFadeIn { from { opacity: 0; } to { opacity: 1; } } .visual-content { position: relative; z-index: 2; width: 100%; max-width: 420px; } /* Sello institucional — respira y gira */ .seal { width: 100px; height: 100px; margin: 0 auto 28px; position: relative; display: flex; align-items: center; justify-content: center; animation: sealIn .8s cubic-bezier(.2,.8,.2,1) both; } @keyframes sealIn { from { opacity: 0; transform: scale(.6) rotate(-20deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } } .seal-glow { position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, var(--gold-soft), transparent 70%); animation: sealBreathe 3.2s ease-in-out infinite; } @keyframes sealBreathe { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: .75; transform: scale(1.15); } } .seal-ring-outer, .seal-ring-inner { position: absolute; border-radius: 50%; border: 1px solid var(--gold-soft); } .seal-ring-outer { inset: 0; } .seal-ring-inner { inset: 11px; border-style: dashed; opacity: .8; animation: sealSpin 40s linear infinite; } @keyframes sealSpin { to { transform: rotate(360deg); } } .seal-icon { font-size: 36px; color: var(--gold); position: relative; z-index: 1; filter: drop-shadow(0 0 8px var(--gold-soft)); } .eyebrow { text-align: center; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--panel-text-soft); margin-bottom: 10px; font-weight: 600; animation: fadeUp .7s ease-out .15s both; } .visual-title { text-align: center; font-family: 'Spectral', serif; font-weight: 600; font-size: 28px; letter-spacing: 0.3px; line-height: 1.3; margin-bottom: 6px; animation: fadeUp .7s ease-out .25s both; } .visual-tagline { text-align: center; font-size: 13.5px; color: var(--panel-text-soft); margin-bottom: 34px; animation: fadeUp .7s ease-out .35s both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .gold-rule { height: 1px; background: var(--gold); margin: 0 auto 34px; opacity: 0.75; animation: ruleGrow 1s ease-out .45s both; } @keyframes ruleGrow { from { width: 0; } to { width: 56px; } } /* Lista de servicios */ .service-list { display: flex; flex-direction: column; border-top: 1px solid var(--panel-line); } .service-row { display: flex; align-items: flex-start; gap: 16px; padding: 18px 4px; border-bottom: 1px solid var(--panel-line); opacity: 0; transform: translateX(-16px); animation: rowSlideIn .6s ease-out forwards; transition: padding-left .3s ease, background .3s ease; border-radius: 4px; } .service-row:nth-child(1) { animation-delay: .55s; } .service-row:nth-child(2) { animation-delay: .65s; } .service-row:nth-child(3) { animation-delay: .75s; } @keyframes rowSlideIn { to { opacity: 1; transform: translateX(0); } } .service-row:hover { padding-left: 10px; background: rgba(238,243,236,0.03); } .service-icon-wrap { width: 36px; height: 36px; border-radius: 8px; background: rgba(169,125,63,0.12); border: 1px solid var(--panel-line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), background .3s ease; } .service-row:hover .service-icon-wrap { transform: scale(1.1) rotate(-6deg); background: rgba(169,125,63,0.22); } .service-icon-wrap i { font-size: 17px; color: var(--gold); } .service-title { font-size: 14px; font-weight: 600; margin-bottom: 3px; color: var(--panel-text); } .service-desc { font-size: 12.5px; color: var(--panel-text-soft); line-height: 1.5; } .visual-footer { margin-top: 34px; text-align: center; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--panel-text-soft); display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; animation: fadeUp .7s ease-out .95s forwards; } .visual-footer .dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px 1px rgba(74,222,128,.6); animation: dotPulse 2s ease-in-out infinite; } @keyframes dotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.3); } } /* ========================================================================== PANEL DE FORMULARIO (DERECHA) ========================================================================== */ .auth-form-container { flex: 1; background: var(--bg-main); display: flex; align-items: center; justify-content: center; padding: 40px; position: relative; } .form-wrapper { width: 100%; max-width: 380px; } .theme-toggle-wrapper { position: absolute; top: 28px; right: 32px; } .theme-btn { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); width: 42px; height: 42px; border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .3s cubic-bezier(.2,.8,.2,1); } .theme-btn:hover { border-color: var(--accent); color: var(--accent); transform: rotate(20deg) scale(1.08); } .theme-btn i { transition: transform .4s ease; } .theme-btn.spin i { animation: iconFlip .4s ease; } @keyframes iconFlip { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(.5); } 100% { transform: rotate(360deg) scale(1); } } .form-brand-header { display: flex; justify-content: center; margin-bottom: 22px; animation: fadeUp .6s ease-out .1s both; } .brand-avatar { width: 74px; height: 74px; border: 1px solid var(--border-color); border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 10px; background: var(--bg-secondary); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; } .brand-avatar:hover { transform: translateY(-4px); box-shadow: 0 12px 24px var(--accent-glow); } .avatar-img { max-width: 100%; max-height: 100%; object-fit: contain; } .avatar-icon { font-size: 34px; color: var(--accent); } .form-header { text-align: center; margin-bottom: 38px; animation: fadeUp .6s ease-out .2s both; } .form-eyebrow { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 10px; } .form-header h1 { font-family: 'Spectral', serif; font-weight: 600; font-size: 25px; color: var(--text-primary); margin-bottom: 8px; } .form-header p { font-size: 13.5px; color: var(--text-secondary); max-width: 320px; margin: 0 auto; line-height: 1.5; } .alert { padding: 13px 15px; border-radius: 6px; margin-bottom: 24px; font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(163,39,30,0.25); animation: shake .5s ease; } .alert-danger { background-color: var(--danger-bg); color: var(--danger); } @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } /* Campos con línea animada desde el centro */ .input-group { margin-bottom: 26px; animation: fadeUp .6s ease-out both; } .input-group:nth-of-type(1) { animation-delay: .3s; } .input-group:nth-of-type(2) { animation-delay: .38s; } .input-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px; transition: color .25s ease; } .input-icon-wrapper { position: relative; } .input-icon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 17px; color: var(--text-secondary); transition: color .25s ease, transform .25s ease; } .input-control { width: 100%; background: var(--input-bg); border: none; border-bottom: 1.5px solid var(--border-color); color: var(--text-primary); padding: 8px 4px 10px 26px; font-size: 15px; font-family: 'Inter', sans-serif; outline: none; border-radius: 0; position: relative; } .input-icon-wrapper::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px; background: var(--accent); transition: width .3s cubic-bezier(.2,.8,.2,1), left .3s cubic-bezier(.2,.8,.2,1); } .input-control:focus ~ .input-icon-wrapper::after, .input-control:focus + .input-icon { color: var(--accent); transform: translateY(-50%) scale(1.1); } .input-icon-wrapper:has(.input-control:focus)::after { width: 100%; left: 0; } .input-control::placeholder { color: var(--text-secondary); opacity: .5; } .input-control:focus { border-bottom-color: transparent; } .input-control:not(:placeholder-shown) + .input-icon { color: var(--accent); } .form-options { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; font-size: 13px; animation: fadeUp .6s ease-out .46s both; } .remember-me { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); } .remember-me input { accent-color: var(--accent); } .forgot-link { color: var(--accent); text-decoration: none; font-weight: 600; position: relative; } .forgot-link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--accent); transition: width .25s ease; } .forgot-link:hover::after { width: 100%; } .btn { display: flex; justify-content: center; align-items: center; gap: 8px; font-weight: 600; border: none; padding: 15px 24px; font-size: 14.5px; letter-spacing: 0.5px; border-radius: 6px; cursor: pointer; transition: all .3s cubic-bezier(.2,.8,.2,1); font-family: 'Inter', sans-serif; position: relative; overflow: hidden; animation: fadeUp .6s ease-out .54s both; } .btn-block { width: 100%; } .btn-primary { background-color: var(--accent); color: #fff; text-transform: uppercase; font-size: 13px; } .btn-primary::before { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.28), transparent); transform: skewX(-20deg); transition: left .6s ease; } .btn-primary:hover::before { left: 140%; } .btn-primary:hover { background-color: var(--accent-hover); box-shadow: 0 8px 22px var(--accent-glow); transform: translateY(-2px); } .btn-primary:active { transform: translateY(0) scale(.98); } .btn-primary i { transition: transform .3s ease; } .btn-primary:hover i { transform: translateX(4px); } .form-footer { margin-top: 32px; text-align: center; font-size: 12px; color: var(--text-secondary); letter-spacing: 0.3px; padding-top: 22px; border-top: 1px solid var(--border-color); animation: fadeUp .6s ease-out .62s both; } .form-footer i { margin-right: 5px; color: var(--gold); } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 900px) { .auth-layout { flex-direction: column; } .auth-visual { display: none; } .auth-form-container { padding: 32px 20px; min-height: 100vh; } .theme-toggle-wrapper { top: 20px; right: 20px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }