/* ========================================================= native.css — Base nativa y responsiva de Digital Nomade Se enlaza DESPUÉS de global.css en todas las pantallas. ========================================================= */ :root { --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); /* Solo vale algo cuando la PWA de escritorio usa la barra de título integrada */ --titlebar-h: env(titlebar-area-height, 0px); } *, *::before, *::after { -webkit-tap-highlight-color: transparent; } html { height: 100%; background: #05070a; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior-y: none; } body { overscroll-behavior-y: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Sin zoom por doble toque, pero con scroll y pellizco disponibles */ touch-action: manipulation; /* Comportamiento de app: el texto no se selecciona al tocar */ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* Campos de texto y contenido marcado como copiable sí se seleccionan */ input, textarea, [contenteditable="true"], .selectable { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } img { -webkit-user-drag: none; } /* Alto real de pantalla en móviles (barra del navegador que aparece y desaparece) */ #app-body { min-height: 100vh; min-height: 100dvh; } /* Áreas seguras: notch, barra inferior, esquinas redondeadas y barra de título del escritorio */ #app-body, #pantallaPrevia { padding-top: calc(max(1rem, var(--safe-top)) + var(--titlebar-h)); padding-right: max(1rem, var(--safe-right)); padding-bottom: max(1rem, var(--safe-bottom)); padding-left: max(1rem, var(--safe-left)); } /* Zona arrastrable de la ventana (solo existe con barra de título integrada) */ #titlebar-drag { position: fixed; top: 0; left: env(titlebar-area-x, 0px); width: env(titlebar-area-width, 100%); height: env(titlebar-area-height, 0px); -webkit-app-region: drag; app-region: drag; z-index: 10001; } /* Pantallas táctiles: campos a 16px (iOS no hace zoom al enfocar) y áreas de toque de 44px */ @media (hover: none) and (pointer: coarse) { input, select, textarea { font-size: 16px !important; min-height: 44px; } button:not(.btn-toggle-pwd), [role="button"] { min-height: 44px; } } /* Barras de desplazamiento discretas en notebook y PC */ * { scrollbar-width: thin; scrollbar-color: rgba(0, 240, 118, 0.35) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: rgba(0, 240, 118, 0.3); border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; } /* Teléfono en horizontal: compacta el espacio vertical */ @media (orientation: landscape) and (max-height: 500px) { #app-body, #pantallaPrevia { padding-top: calc(max(0.5rem, var(--safe-top)) + var(--titlebar-h)); padding-bottom: max(0.5rem, var(--safe-bottom)); } } /* ========================================================= MODO POR DISPOSITIVO (lo marca js/native.js en ) data-dispositivo = smartphone | tablet | notebook data-modo = app | navegador ========================================================= */ /* Alto real de pantalla calculado por native.js (respaldo para navegadores sin dvh) */ html { --alto-app: 100dvh; } /* Celular y tablet: sin barras de desplazamiento visibles, como una app */ html[data-dispositivo="smartphone"] *, html[data-dispositivo="tablet"] * { scrollbar-width: none; } html[data-dispositivo="smartphone"] ::-webkit-scrollbar, html[data-dispositivo="tablet"] ::-webkit-scrollbar { display: none; width: 0; height: 0; } /* Desplazamiento con inercia dentro de los paneles y modales */ html[data-dispositivo="smartphone"] .overflow-y-auto, html[data-dispositivo="tablet"] .overflow-y-auto { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Espacio para el teclado en pantalla mientras se escribe */ html.teclado-activo body { padding-bottom: 40vh; } /* Respuesta táctil inmediata en botones (en táctil no existe hover) */ html[data-dispositivo="smartphone"] button:active, html[data-dispositivo="tablet"] button:active, html[data-dispositivo="smartphone"] [role="button"]:active, html[data-dispositivo="tablet"] [role="button"]:active { transform: scale(0.97); transition: transform 80ms ease-out; } /* Tablet: tarjetas algo más amplias */ html[data-dispositivo="tablet"] #app-content { max-width: 34rem; } /* App instalada: no hay barra del navegador, el contenido usa toda la pantalla */ html[data-modo="app"] body { min-height: var(--alto-app); } /* ========================================================= INSTALADOR (celular y tablet abiertos desde el navegador) ========================================================= */ #paw-instalador { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; padding: max(1rem, var(--safe-top)) max(1rem, var(--safe-right)) max(1rem, var(--safe-bottom)) max(1rem, var(--safe-left)); background: rgba(2, 4, 8, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: 'Plus Jakarta Sans', sans-serif; animation: paw-entrar 0.3s ease-out; transition: opacity 0.3s ease; } #paw-instalador.paw-oculto { opacity: 0; pointer-events: none; } html[data-dispositivo="tablet"] #paw-instalador { align-items: center; } #paw-instalador .paw-tarjeta { width: 100%; max-width: 420px; background: #0a101a; border: 1px solid rgba(0, 240, 118, 0.3); border-radius: 1.25rem; padding: 1.5rem; color: #e2e8f0; text-align: center; box-shadow: 0 0 40px rgba(0, 240, 118, 0.15); } #paw-instalador .paw-logo { width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 0.75rem; display: block; } #paw-instalador h2 { margin: 0 0 0.35rem; font: 700 1rem 'JetBrains Mono', monospace; letter-spacing: 0.05em; color: #fff; text-align: center; } #paw-instalador p { margin: 0 0 1rem; font-size: 0.8rem; color: #94a3b8; text-align: center; line-height: 1.45; } #paw-instalador .paw-pasos { text-align: left; margin: 0 0 1rem; padding-left: 1.2rem; font-size: 0.8rem; line-height: 1.7; color: #cbd5e1; } #paw-instalador .paw-pasos b { color: #00f076; } #paw-instalador .paw-ico { display: inline-flex; width: 1.1em; height: 1.1em; vertical-align: -0.15em; color: #00f0ff; } #paw-instalador .paw-ico svg { width: 100%; height: 100%; } #paw-instalador .paw-btn-principal { width: 100%; min-height: 48px; margin-bottom: 0.6rem; border: 0; border-radius: 0.75rem; background: #00f076; color: #000; font: 700 0.75rem 'JetBrains Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 0 25px -5px rgba(0, 240, 118, 0.5); cursor: pointer; } #paw-instalador button { text-align: center !important; } #paw-instalador .paw-btn-secundario { width: 100%; min-height: 44px; border: 1px solid #1e293b; border-radius: 0.75rem; background: transparent; color: #64748b; font: 500 0.7rem 'JetBrains Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; } #paw-instalador .hidden { display: none; } @keyframes paw-entrar { from { opacity: 0; } to { opacity: 1; } } #paw-instalador a.paw-btn-principal { display: flex; align-items: center; justify-content: center; text-decoration: none; } #paw-instalador a.paw-btn-principal.hidden { display: none; } /* ========================================================= Ventanas del panel sin recuadro: el contenido queda directo sobre el fondo oscuro. La X de cerrar se mantiene. ========================================================= */ [id^="modal-"]:not(#modal-recuperar) > div:first-of-type { border: 0 !important; box-shadow: none !important; background: transparent !important; animation: none !important; } /* ========================================================= X de cerrar de todas las ventanas: blanca, brillante y parpadeando suave para que se encuentre de inmediato. ========================================================= */ @keyframes paw-x-brillo { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 3px rgba(0, 240, 255, 0.95)) drop-shadow(0 0 8px rgba(0, 240, 255, 0.7)); } 50% { opacity: 0.55; filter: drop-shadow(0 0 1px rgba(0, 240, 255, 0.4)); } } [id^="modal-"] button[onclick*="cerrar" i]:not([onclick*="cerrarMenus"]), #btn-cerrar-recup { color: #ffffff !important; animation: paw-x-brillo 1.3s ease-in-out infinite; } [id^="modal-"] button[onclick*="cerrar" i]:not([onclick*="cerrarMenus"]) svg path { stroke-width: 2.5; } @media (prefers-reduced-motion: reduce) { [id^="modal-"] button[onclick*="cerrar" i] { animation: none; } } /* ========================================================= Splash de inicio (5 s) — sobrio Fondo oscuro liso. Una línea de luz se dibuja al centro, se abre como una ranura y revela LogoInicial.png nítido; luego un destello lo recorre cada cierto tiempo. ========================================================= */ html.paw-con-splash body { visibility: hidden; } #paw-splash { visibility: visible; position: fixed; inset: 0; z-index: 2147483647; overflow: hidden; background: radial-gradient(ellipse at 50% 48%, #120a1c 0%, #06040a 60%, #000 100%); display: flex; align-items: center; justify-content: center; padding: calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left)); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.8,.2,1); animation: sp-aparece 0.6s ease-out both; } #paw-splash.paw-splash-salida { opacity: 0; transform: scale(1.03); animation: none; } #paw-splash .sp-centro { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; } /* Logo: grande y nítido según la pantalla */ #paw-splash .sp-hero { position: relative; display: grid; place-items: center; } #paw-splash .sp-img { display: block; width: auto; height: auto; max-width: min(94vw, 680px); max-height: 44vh; max-height: 44dvh; object-fit: contain; opacity: 0; clip-path: inset(50% 0 50% 0); } html[data-dispositivo="tablet"] #paw-splash .sp-img { max-width: min(84vw, 860px); } html[data-dispositivo="notebook"] #paw-splash .sp-img { max-width: min(62vw, 940px); max-height: 46vh; } @media (orientation: landscape) and (max-height: 500px) { #paw-splash .sp-img { max-height: 60vh; max-width: 80vw; } } #paw-splash .sp-hero.sp-cargado .sp-img { animation: sp-abre 1.1s cubic-bezier(.7,0,.2,1) 1.3s forwards; } /* Si la imagen trae fondo de color, sus bordes se funden con la pantalla */ #paw-splash .sp-hero.sp-hero-opaco .sp-img { -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%); } #paw-splash .sp-hero.sp-hero-opaco .sp-brillo { display: none; } /* Las dos líneas de luz: nacen juntas al centro y se separan abriendo la ranura */ #paw-splash .sp-linea { position: absolute; left: -6%; right: -6%; top: 50%; height: 1.5px; margin-top: -0.75px; background: linear-gradient(90deg, transparent, #7a24c7 18%, #9b4de0 50%, #7a24c7 82%, transparent); box-shadow: 0 0 10px rgba(122,36,199,0.9), 0 0 24px rgba(122,36,199,0.55); transform: scaleX(0); opacity: 0; } #paw-splash .sp-hero.sp-cargado .sp-linea-a { animation: sp-linea-nace 0.9s cubic-bezier(.65,0,.35,1) 0.35s forwards, sp-linea-sube 1.1s cubic-bezier(.7,0,.2,1) 1.3s forwards, sp-linea-va 0.6s ease 2.4s forwards; } #paw-splash .sp-hero.sp-cargado .sp-linea-b { animation: sp-linea-nace 0.9s cubic-bezier(.65,0,.35,1) 0.35s forwards, sp-linea-baja 1.1s cubic-bezier(.7,0,.2,1) 1.3s forwards, sp-linea-va 0.6s ease 2.4s forwards; } /* Destello que recorre solo la forma del logo */ #paw-splash .sp-brillo { position: absolute; inset: 0; pointer-events: none; opacity: 0; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.85) 50%, transparent 62%); background-size: 300% 100%; background-position: 130% 0; mix-blend-mode: screen; } #paw-splash .sp-hero.sp-cargado .sp-brillo { animation: sp-destello2 1.4s ease-in-out 2.9s forwards; } @keyframes sp-aparece { from { opacity: 0; } to { opacity: 1; } } @keyframes sp-fade { to { opacity: 1; } } @keyframes sp-gira { to { transform: rotate(360deg); } } @keyframes sp-abre { 0% { opacity: 1; clip-path: inset(50% 0 50% 0); filter: blur(4px) brightness(1.8); } 100% { opacity: 1; clip-path: inset(0 0 0 0); filter: blur(0) brightness(1); } } @keyframes sp-linea-nace { to { transform: scaleX(1); opacity: 1; } } @keyframes sp-linea-sube { from { top: 50%; transform: scaleX(1); opacity: 1; } to { top: 0%; transform: scaleX(1); opacity: 1; } } @keyframes sp-linea-baja { from { top: 50%; transform: scaleX(1); opacity: 1; } to { top: 100%; transform: scaleX(1); opacity: 1; } } @keyframes sp-linea-va { to { transform: scaleX(0); opacity: 0; } } @keyframes sp-destello2 { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 1; background-position: -30% 0; } } /* ---------- MENÚ DE A DOS EN CELULAR ---------- En pantallas angostas cada opción muestra el icono arriba y el nombre abajo, así el texto completo cabe en media pantalla sin cortarse. */ @media (max-width: 639px) { #panel-acciones > button:not(.col-span-2) { flex-direction: column; justify-content: center; gap: 0.5rem; padding: 0.85rem 0.5rem; min-height: 6.5rem; } #panel-acciones > button:not(.col-span-2) > div.text-left { flex: 0 0 auto; text-align: center; } #panel-acciones > button:not(.col-span-2) span { font-size: 0.8125rem; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; } } /* ========================================================= LOGIN SIN RECUADROS + ANIMACIONES (2026-10-26) ========================================================= */ /* Fondo: partículas + dos auroras que se desplazan */ .login-fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .login-fondo canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .login-aurora { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; } .login-aurora.a1 { width: min(90vw, 520px); height: min(90vw, 520px); top: -12%; left: -20%; background: rgba(0,240,118,0.22); animation: login-deriva 14s ease-in-out infinite alternate; } .login-aurora.a2 { width: min(80vw, 460px); height: min(80vw, 460px); bottom: -14%; right: -18%; background: rgba(0,240,255,0.2); animation: login-deriva 17s ease-in-out infinite alternate-reverse; } @keyframes login-deriva { from { transform: translate(0, 0) scale(1); } to { transform: translate(14vw, 10vh) scale(1.2); } } /* Entrada en cascada: cada elemento sube y aparece con un pequeño retraso (--d) */ .pantalla-login .fx-entrada { opacity: 0; } html.paw-listo #pantallaPrevia .fx-entrada, .pantalla-login.login-visible #app-content .fx-entrada { animation: fx-sube 0.75s cubic-bezier(.2,.9,.25,1) both; animation-delay: calc(var(--d, 0) * 110ms + 80ms); } @keyframes fx-sube { from { opacity: 0; transform: translateY(26px) scale(0.98); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } } .fx-cascada > * { animation: fx-sube 0.55s cubic-bezier(.2,.9,.25,1) both; } .fx-cascada > *:nth-child(2) { animation-delay: 70ms; } .fx-cascada > *:nth-child(3) { animation-delay: 140ms; } .fx-cascada > *:nth-child(4) { animation-delay: 210ms; } .fx-cascada > *:nth-child(5) { animation-delay: 280ms; } /* Emblema: logo flotando con un anillo de luz que gira */ .login-emblema { position: relative; width: 104px; height: 104px; margin: 0 auto 14px; display: grid; place-items: center; } .login-emblema img { position: relative; width: 72px; height: 72px; object-fit: contain; animation: login-flota 4s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(0,240,118,0.45)); } .login-emblema-anillo { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 50%, #7a24c7 72%, #d8b4fe 92%, transparent 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: sp-gira 2.8s linear infinite; filter: drop-shadow(0 0 7px rgba(168,85,247,0.9)); } @keyframes login-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* Título con un brillo que lo recorre */ .login-titulo { margin: 0; text-align: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: 0.08em; font-size: clamp(22px, 6.6vw, 30px); color: #fff; background: linear-gradient(100deg, #fff 0%, #fff 40%, #00f076 50%, #fff 60%, #fff 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: login-brillo 4.5s ease-in-out infinite; } html.paw-listo #pantallaPrevia .login-titulo.fx-entrada, .pantalla-login.login-visible #app-content .login-titulo.fx-entrada { animation: fx-sube 0.75s cubic-bezier(.2,.9,.25,1) both, login-brillo 4.5s ease-in-out 1s infinite; animation-delay: calc(var(--d, 0) * 110ms + 80ms), 1s; } @keyframes login-brillo { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0% 0; } } /* Pantalla previa: puntos con viñeta de luz en vez de recuadro */ .previa-punto { position: relative; padding-left: 1.1rem; } .previa-punto::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: #00f076; box-shadow: 0 0 10px #00f076; } .login-firma { position: relative; } .login-firma::before { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,240,118,0.45), transparent); } /* Pestañas: solo texto y una línea de luz que se desliza */ .tabs-login { position: relative; display: flex; margin-bottom: 1.6rem; border-bottom: 1px solid rgba(148,163,184,0.18); } .tabs-login .tab { flex: 1; padding: 0.8rem 0.25rem; background: transparent; border: 0; font-family: 'JetBrains Mono', monospace; font-size: clamp(12px, 3.7vw, 15px); font-weight: 600; text-align: center; white-space: nowrap; color: #94a3b8; transition: color 0.3s ease; } .tabs-login .tab.activo { color: #00f076; text-shadow: 0 0 12px rgba(0,240,118,0.5); } .tabs-login[data-tab="registro"] .tab.activo { color: #00f0ff; text-shadow: 0 0 12px rgba(0,240,255,0.5); } .tab-indicador { position: absolute; left: 0; bottom: -1px; width: 50%; height: 2px; border-radius: 2px; background: #00f076; box-shadow: 0 0 10px #00f076, 0 0 20px rgba(0,240,118,0.6); transition: transform 0.45s cubic-bezier(.65,0,.35,1), background 0.3s ease, box-shadow 0.3s ease; } .tabs-login[data-tab="registro"] .tab-indicador { transform: translateX(100%); background: #00f0ff; box-shadow: 0 0 10px #00f0ff, 0 0 20px rgba(0,240,255,0.6); } /* Campos: sin caja, solo una línea inferior que se enciende desde el centro al escribir */ .campo label { display: block; margin-bottom: 0.15rem; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; text-align: left; transition: color 0.3s ease; } .campo-linea { --acento: #00f076; --acento-glow: rgba(0,240,118,0.55); position: relative; display: flex; align-items: center; gap: 0.65rem; border-bottom: 1px solid rgba(148,163,184,0.35); } .campo-cyan .campo-linea { --acento: #00f0ff; --acento-glow: rgba(0,240,255,0.55); } .campo-linea::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--acento); box-shadow: 0 0 10px var(--acento-glow); transform: scaleX(0); transition: transform 0.45s cubic-bezier(.65,0,.35,1); } .campo:focus-within .campo-linea::after { transform: scaleX(1); } .campo:focus-within label { color: var(--acento, #00f076); } .campo-cyan:focus-within label { color: #00f0ff; } .campo:not(.campo-cyan):focus-within label { color: #00f076; } .campo-icono { width: 20px; height: 20px; flex-shrink: 0; color: #64748b; transition: color 0.3s ease, transform 0.3s ease; } .campo:focus-within .campo-icono { color: var(--acento); transform: scale(1.12); } .campo-linea input { flex: 1; min-width: 0; width: 100%; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0.75rem 0 !important; color: #fff; font-family: 'JetBrains Mono', monospace; font-weight: 500; outline: none; } .campo-linea input::placeholder { color: #475569; } .campo-prefijo { display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; color: #00f0ff; font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 0.95rem; } .campo-ojo { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #64748b; background: transparent; border: 0; transition: color 0.3s ease; } .campo-ojo:hover, .campo:focus-within .campo-ojo { color: var(--acento); } /* Botones principales: destello que los cruza cada pocos segundos */ .btn-brillo { position: relative; overflow: hidden; isolation: isolate; } .btn-brillo::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.65), transparent); transform: skewX(-20deg); animation: btn-destello 3.2s ease-in-out 1.5s infinite; } .btn-brillo:active { transform: scale(0.97); } @keyframes btn-destello { 0% { left: -60%; } 45%, 100% { left: 130%; } } /* Campos de otras ventanas del login (recuperar clave) y de la validación: también sin caja */ .pantalla-login #modal-recuperar input:not(.otp-box):not([type="checkbox"]):not([type="radio"]):not([type="file"]), .pantalla-validacion input:not(.otp-box):not([type="checkbox"]):not([type="radio"]):not([type="file"]) { background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(148,163,184,0.4) !important; border-radius: 0 !important; box-shadow: none !important; } .pantalla-login #modal-recuperar input:not(.otp-box):focus, .pantalla-validacion input:not(.otp-box):focus { border-bottom-color: #00f0ff !important; box-shadow: 0 1px 0 #00f0ff, 0 6px 12px -8px rgba(0,240,255,0.7) !important; } /* Validación OTP: cada dígito es una línea que se enciende */ .pantalla-validacion .otp-box { background: transparent !important; border: 0 !important; border-bottom: 2px solid rgba(148,163,184,0.4) !important; border-radius: 0 !important; box-shadow: none !important; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; } .pantalla-validacion .otp-box:focus { border-bottom-color: #00f076 !important; box-shadow: 0 2px 0 #00f076, 0 8px 14px -8px rgba(0,240,118,0.8) !important; transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { #paw-splash *, #paw-splash, .login-aurora, .login-emblema img, .login-emblema-anillo, .login-titulo, .btn-brillo::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } .pantalla-login .fx-entrada { opacity: 1; animation: none !important; } } /* ========================================================= MENÚ SIN RECUADROS (2026-10-26) Las opciones son icono con halo de luz + nombre; al tocarlas el halo se enciende. ========================================================= */ .pantalla-menu #panel-acciones > button { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 1rem; transition: transform 0.2s ease; } .pantalla-menu #panel-acciones > button:active { transform: scale(0.95); } /* Halo del icono: toma el color de cada opción */ .pantalla-menu #panel-acciones > button .w-10.h-10 { width: 3.25rem; height: 3.25rem; border-radius: 9999px; border: 0 !important; background: rgba(255,255,255,0.04) !important; background: radial-gradient(circle, color-mix(in srgb, currentColor 22%, transparent) 0%, color-mix(in srgb, currentColor 6%, transparent) 70%) !important; box-shadow: 0 0 18px -2px color-mix(in srgb, currentColor 45%, transparent) !important; transition: box-shadow 0.3s ease, transform 0.3s ease; } .pantalla-menu #panel-acciones > button .w-10.h-10 svg { width: 1.6rem; height: 1.6rem; filter: drop-shadow(0 0 6px currentColor); } .pantalla-menu #panel-acciones > button:hover .w-10.h-10, .pantalla-menu #panel-acciones > button:active .w-10.h-10 { box-shadow: 0 0 28px 2px color-mix(in srgb, currentColor 70%, transparent) !important; } .pantalla-menu #panel-acciones > button span { font-size: 0.875rem; } /* ¿Cómo va Mi Proceso?: destacado con una línea de luz debajo, sin caja */ .pantalla-menu #panel-acciones > button.col-span-2 { position: relative; overflow: visible; } .pantalla-menu #panel-acciones > button.col-span-2::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,240,255,0.7), transparent); } .pantalla-menu #panel-acciones > button.col-span-2:last-child::after { background: linear-gradient(90deg, transparent, rgba(148,163,184,0.35), transparent); top: 0; bottom: auto; } .pantalla-menu #panel-acciones > button.col-span-2 > div.absolute { display: none; } .pantalla-menu #panel-acciones > button.col-span-2 { justify-content: center; } .pantalla-menu #panel-acciones > button.col-span-2 > div.flex-1 { flex: 0 1 auto; } /* Entrada en cascada de las opciones */ .pantalla-menu.menu-visible #panel-acciones > button { animation: fx-sube 0.6s cubic-bezier(.2,.9,.25,1) both; animation-delay: calc(var(--i, 0) * 55ms + 100ms); } /* Botones de la cabecera sin recuadro */ .pantalla-menu #btn-trigger-foto, .pantalla-menu #btn-salir { background: transparent !important; border: 0 !important; box-shadow: none !important; animation: none !important; font-size: 11px; padding-top: 0.45rem; padding-bottom: 0.45rem; } .pantalla-menu #btn-salir { color: #f1f5f9; text-shadow: 0 0 10px rgba(255,255,255,0.6); } @media (prefers-reduced-motion: reduce) { .pantalla-menu.menu-visible #panel-acciones > button { animation: none; } } /* Botones del login y la validación: rectangulares (esquinas suaves) y de tamaño moderado (2026-10-27) */ .pantalla-login .btn-brillo, .pantalla-validacion .btn-brillo { display: flex; align-items: center; justify-content: center; width: min(100%, 300px) !important; margin-left: auto; margin-right: auto; border-radius: 8px !important; padding-top: 0.8rem !important; padding-bottom: 0.8rem !important; font-size: 13px !important; letter-spacing: 0.08em; } /* ========================================================= Ajustes 2026-10-30: botón corporativo, icono sin brillo, sin palabras cortadas ========================================================= */ /* Nunca cortar palabras con guion (se veía "re-clutamiento" en PC) */ p, span, label, li, h1, h2, h3, div, button { -webkit-hyphens: manual !important; hyphens: manual !important; } /* Textos de la bienvenida alineados a la izquierda: sin huecos grandes entre palabras */ #pantallaPrevia .previa-punto { text-align: left; } #pantallaPrevia .login-firma, #pantallaPrevia h2, #pantallaPrevia p.text-center { text-align: center; } /* Botones principales del login, bienvenida y validación: morado corporativo, discretos */ .pantalla-login .btn-brillo, .pantalla-validacion .btn-brillo { width: auto !important; min-width: 200px; max-width: 100%; padding: 0.7rem 1.6rem !important; border-radius: 6px !important; background: #7a24c7 !important; color: #fff !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 0.12em; box-shadow: 0 6px 18px -8px rgba(122,36,199,0.8) !important; border: 0 !important; transition: background 0.2s ease, transform 0.15s ease; } .pantalla-login .btn-brillo:hover, .pantalla-validacion .btn-brillo:hover { background: #8b35d8 !important; } .pantalla-login .btn-brillo::after, .pantalla-validacion .btn-brillo::after { display: none; } /* Icono del login sin brillo ni flotación */ .login-emblema img { filter: none !important; animation: none !important; } .login-emblema-anillo { filter: none !important; } /* ========================================================= Bienvenida compacta y corporativa (2026-10-30) ========================================================= */ #pantallaPrevia .previa-contenido { width: 100%; max-width: 400px; } .previa-cabecera { display: flex; align-items: center; justify-content: center; gap: 12px; } .previa-icono { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; } .previa-titulo { margin: 0; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 20px; letter-spacing: 0.06em; color: #fff; text-align: left; line-height: 1.1; } .previa-sub { margin: 2px 0 0; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #c084fc; text-align: left; } .previa-portal { margin: 14px 0 20px; padding-bottom: 14px; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #94a3b8; border-bottom: 1px solid rgba(122,36,199,0.35); } .previa-lista { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .previa-lista li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: #cbd5e1; text-align: left; } .previa-lista li::before { content: ''; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: #7a24c7; } .previa-lista li strong { color: #fff; font-weight: 600; } .previa-lista li.previa-ley { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0 0 0; margin-top: 2px; border-top: 1px solid rgba(148,163,184,0.15); font-size: 12px; color: #94a3b8; } .previa-lista li.previa-ley::before { display: none; } .previa-lista li.previa-ley svg { width: 18px; height: 18px; flex-shrink: 0; color: #a855f7; margin-top: 1px; } .previa-lista li.previa-ley strong { color: #e2e8f0; } #pantallaPrevia #btnEntrarSistema { display: flex; margin: 0 auto; } .previa-firma { margin: 18px 0 0; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; line-height: 1.6; color: #64748b; } .previa-firma strong { color: #94a3b8; font-weight: 600; } @media (max-width: 360px) { .previa-titulo { font-size: 18px; } .previa-lista li { font-size: 13px; } } /* ---- Bienvenida: textos justificados y firma con brillo leve (2026-10-30) ---- */ .previa-lista li { text-align: justify !important; text-justify: inter-word; } .previa-lista li.previa-ley > span, .previa-lista li.previa-ley > div, .previa-lista li.previa-ley > p { text-align: justify; flex: 1; } .previa-firma strong { color: #ffffff !important; animation: firma-brillo 3.2s ease-in-out infinite; } @keyframes firma-brillo { 0%, 100% { opacity: 1; } 50% { opacity: .72; } } @media (prefers-reduced-motion: reduce) { .previa-firma strong { animation: none; } } /* ========================================================= Login compacto (2026-10-30): más chico y sobrio, sobre todo en PC ========================================================= */ .pantalla-login #app-content { max-width: 360px !important; } .pantalla-login #card-main { padding-top: .5rem !important; padding-bottom: .5rem !important; } .pantalla-login #card-main > .text-center { margin-bottom: 1rem !important; } .login-emblema { width: 78px !important; height: 78px !important; margin-bottom: 10px !important; } .login-emblema img { width: 52px !important; height: 52px !important; } .login-titulo { font-size: clamp(18px, 5.2vw, 21px) !important; letter-spacing: .06em !important; } .pantalla-login #card-main > .text-center p { font-size: 9.5px !important; } .tabs-login { margin-bottom: 1.1rem !important; } .tabs-login .tab { font-size: 13px !important; padding: .6rem .25rem !important; } .pantalla-login .campo label { font-size: 10.5px !important; } .pantalla-login .campo-linea input { font-size: 14px !important; padding: .55rem 0 !important; } .pantalla-login .campo-icono { width: 17px !important; height: 17px !important; } .pantalla-login .campo-ojo { width: 34px !important; height: 34px !important; } .pantalla-login .campo-prefijo { font-size: 13px !important; } .pantalla-login #form-login.space-y-5 > * + * { margin-top: 1rem !important; } .pantalla-login #btnGrabarLogin, .pantalla-login #btnGrabarRegistro { margin-top: 1.4rem !important; } .pantalla-login #btn-olvide-clave { font-size: 12px !important; min-height: 36px !important; } .pantalla-login .login-firma { margin-top: 1.4rem !important; } .pantalla-login .login-firma span { font-size: 10px !important; } .pantalla-login #btnSalir { padding: .4rem !important; } .pantalla-login #btnSalir svg { width: 20px !important; height: 20px !important; } /* Casilla de consentimiento (Ley 21.719): círculo que se llena de morado, sin recuadro */ .consent-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 1rem; cursor: pointer; text-align: justify; } .consent-check input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .consent-marca { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 1.5px solid #7a24c7; display: grid; place-items: center; color: transparent; transition: background .2s ease, color .2s ease; } .consent-marca svg { width: 12px; height: 12px; } .consent-check input:checked + .consent-marca { background: #7a24c7; color: #fff; } .consent-check input:focus-visible + .consent-marca { outline: 2px solid #d8b4fe; outline-offset: 2px; } .consent-leyenda { font-size: 11.5px; line-height: 1.5; color: #94a3b8; } .consent-link { background: none; border: 0; padding: 0; color: #c084fc; text-decoration: underline; text-underline-offset: 3px; font-size: inherit; cursor: pointer; } /* Ventana de consentimiento: sin recuadro, pantalla completa en celular y centrada en PC */ #modal-consentimiento { position: fixed; inset: 0; z-index: 10001; background: rgba(0,0,0,.94); backdrop-filter: blur(4px); display: flex; overflow-y: auto; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); } #modal-consentimiento .consent-caja { position: relative; width: 100%; max-width: 460px; margin: auto; padding: 2.4rem .25rem 1rem; color: #cbd5e1; animation: fx-sube .45s cubic-bezier(.2,.9,.25,1) both; } #modal-consentimiento .consent-x { position: absolute; top: 0; right: 0; width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; color: #fff; animation: paw-x-brillo 1.3s ease-in-out infinite; } #modal-consentimiento .consent-x svg { width: 22px; height: 22px; } .consent-titulo { margin: 0 0 .9rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(122,36,199,.45); font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; color: #fff; text-align: center; } .consent-texto { font-size: 12.5px; line-height: 1.6; text-align: justify; } .consent-texto p { margin: 0 0 .6rem; } .consent-texto ul { margin: 0 0 .6rem; padding-left: 1.1rem; list-style: disc; } .consent-texto li { margin-bottom: .3rem; } .consent-texto li::marker { color: #7a24c7; } .consent-texto strong { color: #fff; font-weight: 600; } .consent-ley { color: #a855f7; font-size: 11.5px; text-align: center !important; } .consent-acciones { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin-top: 1rem; } .consent-aceptar { min-width: 200px; text-align: center; display: inline-flex; justify-content: center; padding: .7rem 1.6rem; border: 0; border-radius: 6px; background: #7a24c7; color: #fff; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12.5px; letter-spacing: .06em; cursor: pointer; } .consent-aceptar:hover { background: #8b34d8; } .consent-rechazar { background: none; border: 0; color: #94a3b8; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: .4rem; } /* ========================================================= Fondo corporativo morado (2026-10-30): splash y login comparten la misma red de partículas y auroras, en los morados del logo ========================================================= */ #paw-splash, body.pantalla-login, html:has(body.pantalla-login) { background: radial-gradient(ellipse at 50% 40%, #1a0b2e 0%, #0d0618 55%, #050208 100%) !important; } body.pantalla-login { background-attachment: fixed !important; } #paw-splash .sp-fondo { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } #paw-splash .sp-fondo canvas { position: absolute; inset: 0; width: 100%; height: 100%; } #paw-splash .sp-centro { z-index: 1; } .login-aurora.a1 { background: rgba(122,36,199,0.30) !important; } .login-aurora.a2 { background: rgba(168,85,247,0.20) !important; } #paw-splash .login-aurora { opacity: .45; } /* Casilla de autorización: cuadrado blanco con check morado */ .consent-marca { border-radius: 3px !important; border: 2px solid #fff !important; background: transparent; width: 18px !important; height: 18px !important; } .consent-check input:checked + .consent-marca { background: #fff !important; color: #7a24c7 !important; } #pantallaPrevia { background: rgba(13,6,24,0.55) !important; backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px) !important; } .login-firma::before { background: linear-gradient(90deg, transparent, rgba(168,85,247,0.5), transparent) !important; } /* ========================================================= Violeta más oscuro en los botones (2026-10-30) ========================================================= */ :root { --violeta-boton: #5b1a99; --violeta-boton-hover: #6b21a8; } .pantalla-login .btn-brillo, .pantalla-validacion .btn-brillo, .consent-aceptar { background: var(--violeta-boton) !important; box-shadow: 0 6px 18px -8px rgba(91,26,153,.8) !important; } .pantalla-login .btn-brillo:hover, .pantalla-validacion .btn-brillo:hover, .consent-aceptar:hover { background: var(--violeta-boton-hover) !important; } /* Botón "Instalar aplicación" + recuadro de beneficios al pasar el mouse */ .instalar-zona { position: relative; display: flex; justify-content: center; margin-top: 12px; } .btn-instalar { display: inline-flex; align-items: center; gap: 8px; min-width: 200px; justify-content: center; padding: .6rem 1.4rem; border-radius: 6px; background: transparent; border: 1px solid rgba(168,85,247,.55); color: #e9d5ff; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; letter-spacing: .05em; cursor: pointer; transition: background .2s ease, border-color .2s ease; } .btn-instalar svg { width: 16px; height: 16px; } .btn-instalar:hover, .btn-instalar:focus-visible { background: rgba(91,26,153,.35); border-color: #a855f7; } .instalar-beneficios { position: absolute; bottom: calc(100% + 10px); left: 50%; width: min(300px, 86vw); z-index: 30; padding: 12px 14px; border-radius: 8px; background: #1a0b2e; border: 1px solid rgba(168,85,247,.5); box-shadow: 0 14px 34px -10px rgba(0,0,0,.8); text-align: left; opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; pointer-events: none; } .instalar-beneficios::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #1a0b2e; } .instalar-zona:hover .instalar-beneficios, .btn-instalar:focus-visible + .instalar-beneficios, .instalar-zona.ver-beneficios .instalar-beneficios { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .ib-titulo { margin: 0 0 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #c084fc; text-align: left !important; } .instalar-beneficios ul { margin: 0; padding: 0; list-style: none; } .instalar-beneficios li { position: relative; padding-left: 16px; margin: 4px 0; font-size: 12px; line-height: 1.45; color: #e2e8f0; } .instalar-beneficios li::before { content: '✓'; position: absolute; left: 0; color: #a855f7; font-weight: 700; } /* Ventana de ayuda para instalar en PC: sin recuadro, X blanca que parpadea */ #modal-instalar-pc { position: fixed; inset: 0; z-index: 10001; display: flex; overflow-y: auto; padding: 1rem; background: rgba(5,2,8,.94); backdrop-filter: blur(4px); } #modal-instalar-pc .ipc-caja { position: relative; width: 100%; max-width: 420px; margin: auto; padding: 2.2rem .25rem 1rem; color: #cbd5e1; text-align: center; animation: fx-sube .45s cubic-bezier(.2,.9,.25,1) both; } #modal-instalar-pc .ipc-x { position: absolute; top: 0; right: 0; width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; color: #fff; animation: paw-x-brillo 1.3s ease-in-out infinite; } #modal-instalar-pc .ipc-x svg { width: 22px; height: 22px; } #modal-instalar-pc .ipc-logo { width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 10px; display: block; } #modal-instalar-pc h3 { margin: 0 0 12px; font: 700 15px 'JetBrains Mono', monospace; color: #fff; } #modal-instalar-pc ol { margin: 0 0 12px; padding-left: 1.2rem; text-align: left; font-size: 13px; line-height: 1.6; } #modal-instalar-pc li { margin-bottom: 6px; } #modal-instalar-pc b { color: #d8b4fe; } #modal-instalar-pc p { font-size: 12.5px; color: #94a3b8; } #modal-instalar-pc .ipc-ico { display: inline-flex; width: 1.1em; height: 1.1em; vertical-align: -0.2em; color: #d8b4fe; } /* Instalador del celular con el mismo violeta corporativo */ #paw-instalador .paw-tarjeta { border-color: rgba(168,85,247,.45) !important; box-shadow: 0 0 30px -10px rgba(122,36,199,.6) !important; } #paw-instalador .paw-btn-principal { background: var(--violeta-boton) !important; color: #fff !important; box-shadow: none !important; border-radius: 6px !important; } #paw-instalador .paw-pasos b { color: #d8b4fe !important; } /* ========================================================= Botones unificados (2026-10-30): mismo tamaño, violeta más oscuro y texto con mayúscula inicial (no todo en mayúsculas) ========================================================= */ :root { --violeta-boton: #46127f; --violeta-boton-hover: #561a99; } .pantalla-login .btn-brillo, .pantalla-validacion .btn-brillo, .btn-instalar, .btn-corp, .consent-aceptar, #paw-instalador .paw-btn-principal, #paw-instalador .paw-btn-secundario { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px; width: 240px !important; max-width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 0 !important; margin-left: auto !important; margin-right: auto !important; padding: 0 1.2rem !important; border-radius: 6px !important; font-family: 'JetBrains Mono', monospace !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .03em !important; text-transform: none !important; white-space: nowrap; line-height: 1 !important; } /* Principal: violeta oscuro relleno */ .pantalla-login .btn-brillo, .pantalla-validacion .btn-brillo, .btn-corp, .consent-aceptar, #paw-instalador .paw-btn-principal { background: var(--violeta-boton) !important; color: #fff !important; border: 1px solid var(--violeta-boton) !important; box-shadow: 0 6px 18px -8px rgba(70,18,127,.9) !important; } .pantalla-login .btn-brillo:hover, .pantalla-validacion .btn-brillo:hover, .btn-corp:hover, .consent-aceptar:hover, #paw-instalador .paw-btn-principal:hover { background: var(--violeta-boton-hover) !important; border-color: var(--violeta-boton-hover) !important; } /* Secundario: mismo tamaño, solo contorno violeta */ .btn-instalar, #paw-instalador .paw-btn-secundario { background: transparent !important; color: #e9d5ff !important; border: 1px solid rgba(168,85,247,.6) !important; box-shadow: none !important; } .btn-instalar:hover, #paw-instalador .paw-btn-secundario:hover { background: rgba(70,18,127,.35) !important; border-color: #a855f7 !important; } #paw-instalador .paw-btn-principal { margin-bottom: .6rem !important; } /* Beneficios dentro del instalador del celular (allí no existe "pasar el mouse") */ #paw-instalador .paw-tarjeta { background: #12081f !important; } #paw-instalador .paw-ben-titulo { margin: .2rem 0 .5rem !important; font-family: 'JetBrains Mono', monospace; font-size: 11px !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #c084fc !important; } #paw-instalador .paw-beneficios { list-style: none; margin: 0 auto 1rem; padding: 12px 14px; max-width: 320px; text-align: left; border-radius: 8px; background: #1a0b2e; border: 1px solid rgba(168,85,247,.45); } #paw-instalador .paw-beneficios li { position: relative; padding-left: 18px; margin: 4px 0; font-size: 13px; line-height: 1.45; color: #e2e8f0; } #paw-instalador .paw-beneficios li::before { content: '✓'; position: absolute; left: 0; color: #a855f7; font-weight: 700; } #paw-instalador .hidden, #paw-instalador .paw-btn-principal.hidden { display: none !important; } #paw-instalador .paw-encabezado { margin: -.3rem -1.5rem 1rem !important; padding: 0 1.5rem .8rem; border-bottom: 1px solid rgba(168,85,247,.35); font-family: 'JetBrains Mono', monospace; font-size: 14px !important; font-weight: 700; letter-spacing: .04em; color: #fff !important; text-align: center; } /* ========================================================= Login 100% morado (2026-10-30): sin verde ni celeste ========================================================= */ :root { --violeta-boton: #380e66; --violeta-boton-hover: #46127f; } .pantalla-login { --acento-morado: #a855f7; --acento-morado-glow: rgba(168,85,247,.55); } .pantalla-login input { caret-color: #a855f7 !important; } .pantalla-login .tabs-login .tab.activo, .pantalla-login .tabs-login[data-tab="registro"] .tab.activo { color: #c084fc !important; text-shadow: 0 0 12px rgba(168,85,247,.45) !important; } .pantalla-login .tab-indicador, .pantalla-login .tabs-login[data-tab="registro"] .tab-indicador { background: #a855f7 !important; box-shadow: 0 0 10px #a855f7, 0 0 20px rgba(168,85,247,.5) !important; } .pantalla-login .campo-linea, .pantalla-login .campo-cyan .campo-linea { --acento: #a855f7 !important; --acento-glow: rgba(168,85,247,.55) !important; } .pantalla-login .campo:focus-within label, .pantalla-login .campo-cyan:focus-within label, .pantalla-login .campo:not(.campo-cyan):focus-within label { color: #c084fc !important; } .pantalla-login .campo-prefijo { color: #c084fc !important; } .pantalla-login .login-titulo { background-image: linear-gradient(100deg, #fff 0%, #fff 40%, #c084fc 50%, #fff 60%, #fff 100%) !important; } .pantalla-login .login-firma::before { background: linear-gradient(90deg, transparent, rgba(168,85,247,.5), transparent) !important; } #btn-olvide-clave { color: #c084fc !important; text-decoration-color: rgba(192,132,252,.5) !important; } #btn-olvide-clave:hover { color: #fff !important; } .pantalla-login ::selection { background: #a855f7; color: #fff; } /* Casilla: sin marcar = cuadrado con borde blanco; marcada = morado con check blanco */ .consent-check input:checked + .consent-marca { background: #7a24c7 !important; border-color: #7a24c7 !important; color: #fff !important; } .pantalla-login .text-brand-emerald, .pantalla-login .text-brand-cyan { color: #c084fc !important; } .pantalla-login .border-t-brand-emerald { border-top-color: #a855f7 !important; } .pantalla-login .border-b-brand-emerald { border-bottom-color: #a855f7 !important; } /* ========================================================= Ajustes finos del login (2026-10-30) ========================================================= */ .pantalla-login input { caret-color: #d8b4fe !important; } /* Textos no seleccionados más claros (antes plomo oscuro) */ .pantalla-login .tabs-login .tab:not(.activo) { color: #d4d4e8 !important; } .pantalla-login .campo label { color: #c4c4dc !important; } .pantalla-login .campo-linea input::placeholder { color: #8e8aa8 !important; } .pantalla-login .campo-icono, .pantalla-login .campo-ojo { color: #a9a3c7 !important; } .pantalla-login .campo:focus-within .campo-icono, .pantalla-login .campo-ojo:hover { color: #d8b4fe !important; } .pantalla-login .campo-linea { border-bottom-color: rgba(196,196,220,.35) !important; } .consent-leyenda { color: #c4c4dc !important; } /* X de cerrar: más chica, gira sobre sí misma cada 3 s y se pone roja al pasar el mouse */ .pantalla-login #btnSalir { padding: .35rem !important; filter: drop-shadow(0 0 6px rgba(255,255,255,.7)) !important; transition: color .2s ease; } .pantalla-login #btnSalir svg { width: 16px !important; height: 16px !important; animation: x-gira 3s ease-in-out infinite; } .pantalla-login #btnSalir:hover { color: #ef4444 !important; filter: drop-shadow(0 0 6px rgba(239,68,68,.8)) !important; transform: none !important; } @keyframes x-gira { 0%, 75% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Fondo con más movimiento: auroras más visibles y rápidas */ .login-aurora { opacity: .8 !important; filter: blur(70px) !important; } .login-aurora.a1 { background: rgba(122,36,199,.45) !important; animation-duration: 8s !important; } .login-aurora.a2 { background: rgba(168,85,247,.32) !important; animation-duration: 10s !important; } #paw-splash .login-aurora { opacity: .6 !important; } @media (prefers-reduced-motion: reduce) { .pantalla-login #btnSalir svg { animation: none; } } /* ========================================================= 2026-10-30 (tarde): fondo visible en bienvenida, X iguales, registro al alto de la pantalla, sin selección de texto ========================================================= */ /* Bienvenida: deja ver las partículas y luces del fondo */ #pantallaPrevia { background: rgba(13,6,24,.15) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Todas las X del mismo tamaño: 16px, giran cada 3 s y se ponen rojas al pasar el mouse */ .btn-x-salir { position: absolute; top: calc(max(1rem, var(--safe-top)) + var(--titlebar-h, 0px)); right: max(1rem, var(--safe-right)); z-index: 5; width: 36px; height: 36px; display: grid; place-items: center; background: none; border: 0; color: #fff; cursor: pointer; filter: drop-shadow(0 0 6px rgba(255,255,255,.7)); transition: color .2s ease; } .pantalla-login #btnSalir svg, .btn-x-salir svg, #modal-consentimiento .consent-x svg, #modal-instalar-pc .ipc-x svg, #btn-cerrar-recup svg, [id^="modal-"] button[onclick*="cerrar" i]:not([onclick*="cerrarMenus"]) svg { width: 16px !important; height: 16px !important; animation: x-gira 3s ease-in-out infinite; } .btn-x-salir:hover, #modal-consentimiento .consent-x:hover, #modal-instalar-pc .ipc-x:hover, #btn-cerrar-recup:hover, [id^="modal-"] button[onclick*="cerrar" i]:not([onclick*="cerrarMenus"]):hover { color: #ef4444 !important; filter: drop-shadow(0 0 6px rgba(239,68,68,.8)) !important; } /* Sin selección de texto (solo se puede seleccionar dentro de los campos) */ body.pantalla-login, body.pantalla-validacion, #paw-instalador, #modal-consentimiento, #modal-instalar-pc { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } body.pantalla-login input, body.pantalla-validacion input { -webkit-user-select: text; user-select: text; } /* Mientras se ve la bienvenida, el login queda oculto (no se transparenta su X ni sus enlaces) */ body.pantalla-login:not(.login-visible) #app-content { visibility: hidden; } /* ========================================================= Fondo común y parejo (2026-10-30): mismo morado en toda la pantalla (sin manchas a un lado), con brillo que se desplaza lento y partículas moradas en movimiento (#paw-fondo, native.js) ========================================================= */ @keyframes paw-fondo-mueve { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } html, html:has(body.pantalla-login), #paw-splash { background: linear-gradient(120deg, #170a29 0%, #1f0d38 25%, #150926 50%, #1f0d38 75%, #170a29 100%) !important; background-size: 300% 300% !important; animation: paw-fondo-mueve 18s ease-in-out infinite; } #paw-splash { animation: sp-aparece 0.6s ease-out both, paw-fondo-mueve 18s ease-in-out infinite; } html { min-height: 100%; background-attachment: fixed !important; } body.pantalla-login, body.pantalla-validacion, body.pantalla-menu { background: transparent !important; } #paw-fondo { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; } /* Las luces de un solo lado quedaban más moradas a la izquierda: fuera */ .login-fondo, .login-aurora, #paw-splash .login-aurora { display: none !important; } @media (prefers-reduced-motion: reduce) { html, #paw-splash { animation: none !important; } } /* ========================================================= Registro según dispositivo: con su regleta de firma y sin apretarse de más. Solo se compacta si la pantalla es baja. ========================================================= */ /* Celular: un poco más compacto que el login, con firma visible */ html[data-dispositivo="smartphone"] body.modo-registro .login-emblema { width: 64px !important; height: 64px !important; margin-bottom: 6px !important; } html[data-dispositivo="smartphone"] body.modo-registro .login-emblema img { width: 44px !important; height: 44px !important; } html[data-dispositivo="smartphone"] body.modo-registro #card-main > .text-center { margin-bottom: .6rem !important; } html[data-dispositivo="smartphone"] body.modo-registro .tabs-login { margin-bottom: .7rem !important; } html[data-dispositivo="smartphone"] body.modo-registro #form-registro > * + * { margin-top: .7rem !important; } html[data-dispositivo="smartphone"] body.modo-registro #form-registro .campo-linea input { padding: .45rem 0 !important; } html[data-dispositivo="smartphone"] body.modo-registro .login-firma { margin-top: .9rem !important; } /* Celular bajo: espacios más cortos (el logo solo se oculta si de verdad no cabe: clase reg-sin-logo) */ @media (max-height: 700px) { html[data-dispositivo="smartphone"] body.modo-registro #form-registro > * + * { margin-top: .5rem !important; } html[data-dispositivo="smartphone"] body.modo-registro #form-registro .campo-linea input { padding: .3rem 0 !important; } } /* PC: tamaño normal; si la ventana es baja se acortan solo los espacios */ @media (max-height: 820px) { html[data-dispositivo="notebook"] body.modo-registro .login-emblema { width: 64px !important; height: 64px !important; margin-bottom: 6px !important; } html[data-dispositivo="notebook"] body.modo-registro .login-emblema img { width: 44px !important; height: 44px !important; } html[data-dispositivo="notebook"] body.modo-registro #card-main > .text-center { margin-bottom: .6rem !important; } html[data-dispositivo="notebook"] body.modo-registro .tabs-login { margin-bottom: .7rem !important; } html[data-dispositivo="notebook"] body.modo-registro #form-registro > * + * { margin-top: .6rem !important; } html[data-dispositivo="notebook"] body.modo-registro #form-registro .campo-linea input { padding: .4rem 0 !important; } html[data-dispositivo="notebook"] body.modo-registro .login-firma { margin-top: .9rem !important; } } /* Tablet: espacio de sobra, se ve igual que el login */ /* Celular: las dos claves lado a lado para ahorrar alto */ html[data-dispositivo="smartphone"] body.modo-registro #form-registro .grid { grid-template-columns: 1fr 1fr !important; column-gap: .8rem !important; } html[data-dispositivo="smartphone"] body.modo-registro #form-registro .grid .campo label { font-size: 9.5px !important; letter-spacing: .05em !important; white-space: nowrap; } html[data-dispositivo="smartphone"] body.modo-registro #form-registro .grid .campo-linea { gap: .4rem !important; } html[data-dispositivo="smartphone"] body.modo-registro #form-registro .grid .campo-ojo { width: 28px !important; } /* Registro: logo visible siempre que quepa; app-login.js mide y solo lo oculta si falta alto */ body.modo-registro.reg-sin-logo .login-emblema { display: none !important; } body.modo-registro.reg-sin-portal #card-main > .text-center p:last-child { display: none !important; } /* Bandera de Chile con brillo: un destello que la recorre y un leve resplandor */ .pantalla-login .campo-prefijo img { position: relative; animation: bandera-brillo 3.2s ease-in-out infinite; } @keyframes bandera-brillo { 0%, 70%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0)); } 80% { filter: brightness(1.45) saturate(1.2) drop-shadow(0 0 5px rgba(255,255,255,.85)); } 90% { filter: brightness(1.15) drop-shadow(0 0 3px rgba(255,255,255,.5)); } } .pantalla-login .campo-prefijo { position: relative; } .pantalla-login .campo-prefijo::after { content: ''; position: absolute; left: 0; top: 50%; width: 18px; height: 13px; transform: translateY(-50%); border-radius: 2px; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.9) 50%, transparent 70%); background-size: 250% 100%; animation: bandera-destello 3.2s ease-in-out infinite; mix-blend-mode: screen; } @keyframes bandera-destello { 0%, 65% { background-position: 150% 0; } 90%, 100% { background-position: -60% 0; } } @media (prefers-reduced-motion: reduce) { .pantalla-login .campo-prefijo img, .pantalla-login .campo-prefijo::after { animation: none; } } /* Cursor morado más oscuro (2026-10-30) */ .pantalla-login input, .pantalla-validacion input, [id^="modal-"] input { caret-color: #9333ea !important; } /* Ventanas sobre el fondo corporativo: velo morado translúcido que deja ver las partículas */ #modal-consentimiento, #modal-instalar-pc, #modal-recuperar, #paw-instalador { background: rgba(23,10,41,.78) !important; backdrop-filter: blur(1.5px) !important; -webkit-backdrop-filter: blur(1.5px) !important; } /* Con una ventana abierta se oculta lo de atrás: solo queda el fondo corporativo en movimiento */ #modal-consentimiento, #modal-instalar-pc, #modal-recuperar:not(.hidden), #paw-instalador { background: rgba(23,10,41,.35) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body:has(#modal-consentimiento) #app-content, body:has(#modal-consentimiento) #pantallaPrevia, body:has(#modal-instalar-pc) #app-content, body:has(#modal-instalar-pc) #pantallaPrevia, body:has(#modal-recuperar:not(.hidden)) #app-content, body:has(#paw-instalador) #pantallaPrevia, body:has(#paw-instalador) #app-content { visibility: hidden !important; } /* ========================================================= CÓDIGO OTP (verificación y recuperar clave) · 2026-10-30 Seis casillas moradas como el código del correo: se encienden al escribir, rebotan con cada número y brillan al completarse. ========================================================= */ .paw-otp { display: flex !important; justify-content: center !important; gap: 8px !important; padding: 4px 0 !important; position: relative; } .paw-otp .otp-box { width: 44px !important; height: 54px !important; flex: 0 0 auto !important; padding: 0 !important; margin: 0 !important; font: 700 24px/1 'JetBrains Mono', monospace !important; color: #fff !important; text-align: center !important; caret-color: #c084fc; background: rgba(56,14,102,.45) !important; border: 1px solid rgba(168,85,247,.4) !important; border-radius: 10px !important; box-shadow: inset 0 2px 8px rgba(0,0,0,.35) !important; outline: none !important; -webkit-user-select: text; user-select: text; transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .2s ease !important; } .paw-otp .otp-box::placeholder { color: rgba(216,180,254,.35); } .paw-otp .otp-box:focus { border-color: #c084fc !important; background: rgba(70,18,127,.6) !important; transform: translateY(-3px); box-shadow: 0 0 0 3px rgba(168,85,247,.25), 0 10px 22px -10px rgba(168,85,247,.9) !important; } .paw-otp .otp-box.lleno { background: #380e66 !important; border-color: #a855f7 !important; animation: paw-otp-pop .32s cubic-bezier(.3,1.6,.5,1); } .paw-otp.completo .otp-box { border-color: #d8b4fe !important; animation: paw-otp-ola 1.1s ease-in-out both; } .paw-otp.completo .otp-box:nth-child(2) { animation-delay: .06s; } .paw-otp.completo .otp-box:nth-child(3) { animation-delay: .12s; } .paw-otp.completo .otp-box:nth-child(4) { animation-delay: .18s; } .paw-otp.completo .otp-box:nth-child(5) { animation-delay: .24s; } .paw-otp.completo .otp-box:nth-child(6) { animation-delay: .30s; } .paw-otp.error .otp-box { border-color: #ef4444 !important; animation: paw-otp-sacude .45s ease; } @keyframes paw-otp-pop { 0% { transform: scale(.82); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes paw-otp-ola { 0%, 100% { transform: translateY(0); box-shadow: none; } 35% { transform: translateY(-6px); box-shadow: 0 0 18px rgba(168,85,247,.85); } } @keyframes paw-otp-sacude { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } @media (max-width: 360px) { .paw-otp { gap: 6px !important; } .paw-otp .otp-box { width: 40px !important; height: 50px !important; font-size: 22px !important; } } .paw-otp-etiqueta { display: block; text-align: center; font: 600 11px 'JetBrains Mono', monospace; letter-spacing: .14em; color: #c4b5fd; margin-bottom: 10px; } /* Validación: acentos verdes del diseño antiguo pasan al morado corporativo */ .pantalla-validacion #card-validar .w-12.h-12 { background: rgba(168,85,247,.14) !important; box-shadow: 0 0 25px rgba(168,85,247,.4) !important; } .pantalla-validacion #overlay-procesando div { border-color: rgba(168,85,247,.2) !important; border-top-color: #a855f7 !important; box-shadow: 0 0 20px rgba(168,85,247,.6) !important; } .pantalla-validacion #btnReenviarOTP:hover { color: #d8b4fe !important; } .pantalla-validacion .text-brand-emerald, .pantalla-validacion .text-brand-cyan { color: #c084fc !important; } .pantalla-validacion #btnVerificarOTP:focus-visible { outline: 2px solid #c084fc !important; outline-offset: 3px; box-shadow: none !important; } /* ========================================================= FONDO CORPORATIVO MÁS VISIBLE (2026-10-30) Degradado morado con más contraste + dos halos que recorren toda la pantalla de forma pareja + ventanas más transparentes. ========================================================= */ html, html:has(body.pantalla-login), #paw-splash { background: linear-gradient(125deg, #12071f 0%, #2a0f4d 22%, #160928 45%, #331260 68%, #12071f 100%) !important; background-size: 320% 320% !important; animation: paw-fondo-mueve 14s ease-in-out infinite; } #paw-splash { animation: sp-aparece 0.6s ease-out both, paw-fondo-mueve 14s ease-in-out infinite; } body.pantalla-login::before, body.pantalla-validacion::before, body.pantalla-menu::before { content: ""; position: fixed; inset: -20%; z-index: -2; pointer-events: none; background: radial-gradient(circle at 30% 35%, rgba(122,36,199,.30) 0, rgba(122,36,199,0) 32%), radial-gradient(circle at 70% 65%, rgba(168,85,247,.22) 0, rgba(168,85,247,0) 30%); animation: paw-halos 22s ease-in-out infinite alternate; } @keyframes paw-halos { 0% { transform: translate(-8%, -6%) rotate(0deg); } 50% { transform: translate(8%, 6%) rotate(180deg); } 100% { transform: translate(-6%, 8%) rotate(360deg); } } #modal-consentimiento, #modal-instalar-pc, #modal-recuperar:not(.hidden), #paw-instalador { background: rgba(18,7,31,.12) !important; } @media (prefers-reduced-motion: reduce) { body::before { animation: none !important; } } /* ========================================================= BOTONES MORADOS: contorno lila suave, brillo corporativo discreto (2026-10-31, v58) ========================================================= */ .pantalla-login .btn-brillo, .pantalla-validacion .btn-brillo, .pantalla-menu .btn-brillo, .btn-corp, .consent-aceptar, #paw-instalador .paw-btn-principal { border: 1px solid rgba(216,180,254,.38) !important; box-shadow: 0 4px 14px -4px rgba(88,28,135,.55), 0 0 10px -3px rgba(168,85,247,.35), inset 0 1px 0 rgba(255,255,255,.10) !important; animation: paw-neon 4s ease-in-out infinite; } .pantalla-login .btn-brillo:hover, .pantalla-validacion .btn-brillo:hover, .pantalla-menu .btn-brillo:hover, .btn-corp:hover, .consent-aceptar:hover, #paw-instalador .paw-btn-principal:hover { border-color: rgba(216,180,254,.6) !important; box-shadow: 0 6px 18px -4px rgba(88,28,135,.6), 0 0 14px -3px rgba(168,85,247,.5), inset 0 1px 0 rgba(255,255,255,.14) !important; } @keyframes paw-neon { 0%, 100% { filter: drop-shadow(0 0 0 rgba(168,85,247,0)); } 50% { filter: drop-shadow(0 0 4px rgba(168,85,247,.28)); } } @media (prefers-reduced-motion: reduce) { .btn-brillo, .btn-corp, .consent-aceptar, #paw-instalador .paw-btn-principal { animation: none !important; } } /* Abrir mi correo (celular): bajo el código */ .abrir-correo { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; } .abrir-correo.hidden { display: none !important; } .abrir-correo-ayuda { font-size: 11.5px; color: #c4b5fd; text-align: center; margin: 0; } /* Botones con entrada en cascada: conservan la entrada y suman el neón */ html.paw-listo #pantallaPrevia .btn-brillo.fx-entrada, .pantalla-login.login-visible #app-content .btn-brillo.fx-entrada { animation: fx-sube 0.75s cubic-bezier(.2,.9,.25,1) both, paw-neon 3s ease-in-out 1s infinite; animation-delay: calc(var(--d, 0) * 110ms + 80ms), 1s; } /* Pegar código copiado: enlace discreto */ .btn-pegar-codigo { background: none !important; border: 0 !important; box-shadow: none !important; color: #d8b4fe; font-size: 13px; font-weight: 500; padding: 6px 10px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(216,180,254,.45); } .btn-pegar-codigo:hover, .btn-pegar-codigo:focus-visible { color: #f3e8ff; outline: none; } /* Guía del código: 1 Abre tu correo · 2 Copia el código · 3 Pégalo aquí (validación y recuperar clave) */ .guia-codigo { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; font-size: 12px; color: #e9d5ff; text-align: center; } .guia-codigo span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .guia-codigo b { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; background: #380e66; border: 1px solid rgba(216,180,254,.45); color: #fff; font-size: 11px; font-weight: 700; } .guia-spam { margin: -4px 0 12px; font-size: 11.5px; color: #c4b5fd; text-align: center; line-height: 1.4; } .guia-spam strong { color: #fff; font-weight: 600; } .aviso-verificacion { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: #d8b4fe; text-align: center; } .aviso-verificacion strong { color: #fff; font-weight: 600; } /* Protección de pantalla: sin seleccionar texto ni menú de mantener presionado (los campos sí se pueden usar) */ body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } img { -webkit-user-drag: none; } /* Al salir a la multitarea la pantalla se difumina */ html.paw-oculta body > *:not(#paw-otra-ventana) { filter: blur(18px) !important; } /* Aviso: la app ya está abierta en otra ventana */ #paw-otra-ventana { position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(18,7,31,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } #paw-otra-ventana .pov-caja { max-width: 340px; text-align: center; color: #e9d5ff; animation: fx-sube .5s ease both; } #paw-otra-ventana .pov-ico { width: 54px; height: 54px; color: #c084fc; margin: 0 auto 14px; } #paw-otra-ventana h3 { margin: 0 0 8px; font: 700 17px/1.3 ui-monospace, monospace; color: #fff; } #paw-otra-ventana p { margin: 0 0 20px; font-size: 14px; line-height: 1.5; } #paw-otra-ventana .pov-usar { width: 240px; height: 46px; border-radius: 6px; background: #380e66; color: #fff; font-weight: 700; cursor: pointer; } /* Claves: campo de texto que dibuja puntitos (Chrome no lo reconoce como contraseña: no ofrece guardar ni rellenar) */ input.native-pwd-hack { -webkit-text-security: disc !important; } input.native-pwd-hack.show-text { -webkit-text-security: none !important; } /* Ventana "Revisa tu correo" (tras enviar un código) */ #paw-aviso-correo { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(18,7,31,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow-y: auto; } #paw-aviso-correo .pac-caja { width: 100%; max-width: 360px; text-align: center; color: #e9d5ff; animation: fx-sube .5s ease both; } #paw-aviso-correo .pac-ico { width: 54px; height: 54px; color: #c084fc; margin: 0 auto 12px; } #paw-aviso-correo h3 { margin: 0 0 6px; font: 700 18px/1.3 ui-monospace, monospace; color: #fff; } #paw-aviso-correo p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; word-break: break-word; } #paw-aviso-correo strong { color: #fff; } #paw-aviso-correo ol { list-style: none; margin: 0 0 14px; padding: 0; text-align: left; } #paw-aviso-correo li { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; font-size: 14px; line-height: 1.45; } #paw-aviso-correo li b { flex: 0 0 22px; height: 22px; border-radius: 50%; background: #380e66; border: 1px solid rgba(216,180,254,.45); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; } #paw-aviso-correo .pac-spam { font-size: 12.5px; color: #c4b5fd; } #paw-aviso-correo .pac-ok { width: 240px; height: 46px; border-radius: 6px; background: #380e66; color: #fff; font-weight: 700; cursor: pointer; } /* Splash v62: brillo corporativo. Una franja fina y suave recorre SOLO las letras del logo (máscara = la misma imagen), de izquierda a derecha, lento (3 s) y cada 4,5 s, sin resplandor alrededor. OJO: usar background-image y no el atajo "background: ... !important" (fija background-position y la franja no se mueve). */ #paw-splash .sp-brillo { background-image: linear-gradient(110deg, transparent 43%, rgba(255,255,255,.18) 47%, rgba(255,255,255,.75) 50%, rgba(255,255,255,.18) 53%, transparent 57%) !important; background-size: 300% 100% !important; background-repeat: no-repeat; background-position: 150% 0; filter: none; mix-blend-mode: screen; opacity: 0; } #paw-splash .sp-hero.sp-cargado .sp-brillo { opacity: 1; animation: sp-brillo-corp 4.5s ease-in-out 2.4s infinite !important; } /* Recorrido lento: 3 s cruzando el logo y 1,5 s de pausa (Ingemar lo encontró muy rápido) */ @keyframes sp-brillo-corp { 0% { background-position: 150% 0; } 67%, 100% { background-position: -60% 0; } } #paw-splash .sp-hero.sp-cargado .sp-img { animation: sp-abre 1.1s cubic-bezier(.7,0,.2,1) 1.3s forwards; } #paw-splash .sp-hero:not(.sp-hero-opaco) .sp-brillo { -webkit-mask-size: contain !important; mask-size: contain !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; } #paw-splash .sp-hero.sp-hero-opaco .sp-brillo { display: block !important; -webkit-mask-image: radial-gradient(ellipse 60% 75% at 50% 50%, #000 55%, transparent 100%) !important; mask-image: radial-gradient(ellipse 60% 75% at 50% 50%, #000 55%, transparent 100%) !important; -webkit-mask-size: 100% 100% !important; mask-size: 100% 100% !important; } /* ========================================================= MENÚ PRINCIPAL CORPORATIVO (2026-11-01) Cabecera con la foto en forma de "D" del logo, anillo de avance, pasos del proceso y opciones por grupo con entrada animada. ========================================================= */ .pantalla-menu { --m-lila: #c084fc; --m-lila2: #e9d5ff; --m-violeta: #7a24c7; --m-oscuro: #1a0b2e; } .pantalla-menu #app-body, body.pantalla-menu { padding: 0 !important; } .m-contenedor { width: 100%; max-width: 1100px; margin: 0 auto; padding: calc(max(14px, env(safe-area-inset-top)) + env(titlebar-area-height, 0px)) 18px 40px; position: relative; z-index: 10; color: #f5f3ff; } /* Barra superior: marca + reloj digital */ .m-barra-sup { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; opacity: 0; } .menu-visible .m-barra-sup { animation: m-baja .6s cubic-bezier(.2,.9,.25,1) both; } .m-marca { display: flex; align-items: center; gap: 10px; font: 700 15px/1 'JetBrains Mono', monospace; letter-spacing: 2px; text-transform: uppercase; } .m-marca img { width: 30px; height: 30px; filter: drop-shadow(0 0 8px rgba(168,85,247,.6)); } .m-reloj { font: 700 17px/1 'JetBrains Mono', monospace; color: var(--m-lila2); letter-spacing: 1px; text-shadow: 0 0 12px rgba(168,85,247,.7); } .m-reloj small { font-size: 11px; color: var(--m-lila); margin-left: 3px; } /* Cabecera */ .m-cabecera { display: flex; align-items: center; gap: 18px; opacity: 0; } .menu-visible .m-cabecera { animation: m-sube .7s cubic-bezier(.2,.9,.25,1) .1s both; } .m-avatar { position: relative; width: 132px; height: 120px; flex-shrink: 0; padding-left: 12px; } .m-d-barras { position: absolute; left: 0; top: 30px; display: flex; flex-direction: column; gap: 9px; } .m-d-barras i { display: block; height: 4px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--m-lila)); animation: m-barra 2.6s ease-in-out infinite; } .m-d-barras i:nth-child(1) { width: 10px; } .m-d-barras i:nth-child(2) { width: 16px; animation-delay: .2s; } .m-d-barras i:nth-child(3) { width: 8px; animation-delay: .4s; } .m-d-barras i:nth-child(4) { width: 14px; animation-delay: .6s; } .m-d-barras i:nth-child(5) { width: 6px; animation-delay: .8s; } .m-anillo { position: absolute; left: 12px; top: 0; width: 120px; height: 120px; overflow: visible; } .m-anillo path { fill: none; stroke-width: 4; stroke-linejoin: round; } .m-anillo-fondo { stroke: rgba(192,132,252,.18); } .m-anillo-avance { stroke: url(#m-grad); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s cubic-bezier(.3,.9,.3,1); filter: drop-shadow(0 0 6px rgba(168,85,247,.85)); } /* Foto con la forma de la "D": izquierda recta, derecha redonda */ .m-foto { position: absolute; left: 22px; top: 10px; width: 100px; height: 100px; border-radius: 12px 50px 50px 12px; overflow: hidden; cursor: pointer; background: var(--m-oscuro); box-shadow: 0 0 0 1px rgba(233,213,255,.25), 0 10px 30px -8px rgba(122,36,199,.8); } .m-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .m-foto:hover img { transform: scale(1.06); } .m-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); background-size: 260% 100%; background-position: 130% 0; animation: m-brillo-foto 5s ease-in-out 1.5s infinite; pointer-events: none; } .m-foto-cam { position: absolute; right: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(26,11,46,.85); color: var(--m-lila2); display: grid; place-items: center; } .m-foto-cam svg { width: 15px; height: 15px; } .m-foto-carga { position: absolute; inset: 0; background: rgba(18,7,31,.8); display: none; align-items: center; justify-content: center; } .m-foto-carga.flex { display: flex; } .m-foto-carga i { width: 26px; height: 26px; border: 3px solid var(--m-lila); border-top-color: transparent; border-radius: 50%; animation: m-girar 1s linear infinite; } @keyframes m-girar { to { transform: rotate(360deg); } } .m-porcentaje { position: absolute; right: -8px; bottom: -4px; min-width: 46px; padding: 3px 8px; border-radius: 999px; background: linear-gradient(135deg, #7a24c7, #a855f7); color: #fff; font: 700 12px/1.2 'JetBrains Mono', monospace; text-align: center; box-shadow: 0 4px 14px rgba(122,36,199,.7); } .m-saludo { min-width: 0; flex: 1; } .m-hola { margin: 0; font: 600 12px/1 'JetBrains Mono', monospace; letter-spacing: 3px; text-transform: uppercase; color: var(--m-lila); } .m-nombre { margin: 6px 0 4px; font: 700 clamp(18px, 5vw, 24px)/1.2 'Plus Jakarta Sans', sans-serif; color: #fff; word-break: break-word; min-height: 1.2em; } .m-cedula { margin: 0; font: 500 12px/1.4 'JetBrains Mono', monospace; color: #a596c0; } .m-cedula span { color: var(--m-lila2); font-weight: 700; letter-spacing: 1px; } .m-cab-botones { display: flex; gap: 16px; margin-top: 10px; } .m-cab-botones button { background: none !important; border: 0 !important; padding: 4px 0; color: var(--m-lila2); font: 600 12px/1 'Plus Jakarta Sans', sans-serif; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border-bottom: 1px solid rgba(216,180,254,.35) !important; } .m-cab-botones button:hover { color: #fff; border-bottom-color: #fff !important; } .m-cab-botones svg { width: 15px; height: 15px; } /* Avance del proceso */ .m-progreso { margin: 22px 0 6px; opacity: 0; } .menu-visible .m-progreso { animation: m-sube .7s cubic-bezier(.2,.9,.25,1) .25s both; } .m-pasos { display: flex; gap: 5px; margin-bottom: 14px; } .m-pasos i { flex: 1; height: 5px; border-radius: 3px; background: rgba(192,132,252,.15); transition: background .4s ease, box-shadow .4s ease; position: relative; overflow: hidden; } .m-pasos i.hecho { background: linear-gradient(90deg, #7a24c7, #a855f7); } .m-pasos i.actual { background: #e9d5ff; box-shadow: 0 0 10px #c084fc; animation: m-late 1.6s ease-in-out infinite; } .m-pasos i.hecho::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); transform: translateX(-100%); animation: m-recorre 3.5s ease-in-out infinite; } .m-etapas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .m-etapas small { display: block; font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: 2px; text-transform: uppercase; color: #8b7aa8; margin-bottom: 5px; } .m-etapas b { font: 700 14px/1.3 'Plus Jakarta Sans', sans-serif; color: #fff; } .m-etapa-sig b { color: var(--m-lila2); text-shadow: 0 0 12px rgba(168,85,247,.6); } .m-visita { margin: 12px 0 0; font-size: 11.5px; color: #8b7aa8; } .m-visita span:not(:first-child) { color: #c4b5fd; } .m-punto { margin: 0 4px; } /* Grupos y opciones */ #menu-opciones { margin-top: 20px; } .m-grupo { display: flex; align-items: center; gap: 12px; margin: 26px 0 12px; font: 700 11px/1 'JetBrains Mono', monospace; letter-spacing: 3px; text-transform: uppercase; color: var(--m-lila); opacity: 0; } .m-grupo::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(192,132,252,.45), transparent); } .m-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 8px; } @media (min-width: 640px) { .m-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1024px) { .m-rejilla { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .op { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 8px 4px 10px; background: none; border: 0; border-radius: 14px; color: #f5f3ff; cursor: pointer; opacity: 0; transition: transform .25s ease; -webkit-tap-highlight-color: transparent; } .menu-visible .op, .menu-visible .m-grupo { animation: m-aparece .55s cubic-bezier(.2,.9,.25,1) both; animation-delay: calc(var(--i, 0) * 45ms + 350ms); } .op:active { transform: scale(.94); } .op-ico { position: relative; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; color: var(--m-lila2); background: radial-gradient(circle at 30% 25%, rgba(168,85,247,.45), rgba(58,14,102,.55) 60%, rgba(26,11,46,.7)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 20px -10px rgba(122,36,199,.9); transition: transform .3s ease, box-shadow .3s ease; } /* Contorno de luz que gira alrededor del icono */ .op-ico::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--m-giro, 0deg), transparent 0 70%, #e9d5ff 82%, transparent 92%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: m-gira 4.5s linear infinite; animation-delay: calc(var(--i, 0) * -300ms); opacity: .7; } /* Ola de brillo que recorre las opciones una tras otra */ .op-ico::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); background-size: 250% 100%; background-position: 140% 0; animation: m-ola 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 120ms + 2s); } .op-ico svg { width: 26px; height: 26px; position: relative; z-index: 1; filter: drop-shadow(0 0 5px rgba(216,180,254,.55)); } .op:hover .op-ico { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 26px -8px rgba(168,85,247,1); } .op-nombre { font: 600 12.5px/1.25 'Plus Jakarta Sans', sans-serif; text-align: center; color: #ede9fe; overflow-wrap: break-word; hyphens: manual; } .op-onda { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: rgba(216,180,254,.45); pointer-events: none; animation: m-onda .65s ease-out forwards; } .op.inclinada { transition: transform .08s linear; } /* Etapa cumplida: ✓ ; siguiente paso: anillo que late + etiqueta */ .op-hecha .op-ico { position: relative; } .op-hecha::after { content: '✓'; position: absolute; top: 4px; right: calc(50% - 36px); width: 18px; height: 18px; border-radius: 50%; background: #7a24c7; color: #fff; font: 700 11px/18px sans-serif; text-align: center; box-shadow: 0 0 0 2px #12071f; z-index: 2; } .op-siguiente .op-ico { box-shadow: 0 0 0 2px #e9d5ff, 0 0 22px 2px rgba(168,85,247,.9); animation: m-late-ico 1.6s ease-in-out infinite; } .op-siguiente::before { content: 'Siguiente'; position: absolute; top: 0; left: 50%; transform: translate(-50%, -2px); padding: 2px 7px; border-radius: 999px; background: #e9d5ff; color: #380e66; font: 700 9px/1.3 'JetBrains Mono', monospace; letter-spacing: .5px; text-transform: uppercase; z-index: 3; } /* Opción destacada: ¿Cómo va Mi Proceso? */ .op-destacada { flex-direction: row; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 16px; text-align: left; background: linear-gradient(120deg, rgba(122,36,199,.55), rgba(56,14,102,.35) 55%, rgba(168,85,247,.25)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 34px -14px rgba(122,36,199,.95); } .op-destacada::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%); background-size: 250% 100%; animation: m-ola 5s ease-in-out 1.5s infinite; pointer-events: none; } .op-destacada .op-ico { width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; } .op-texto { flex: 1; min-width: 0; } .op-destacada .op-nombre { display: block; text-align: left; font-size: 15px; color: #fff; } .op-destacada small { display: block; margin-top: 3px; font-size: 12px; color: var(--m-lila2); opacity: .85; } .op-flecha { width: 20px; height: 20px; color: var(--m-lila2); animation: m-flecha 1.8s ease-in-out infinite; } /* Eliminar mi cuenta: tono rojo suave */ .op-peligro .op-ico { color: #fecaca; background: radial-gradient(circle at 30% 25%, rgba(248,113,113,.4), rgba(127,29,29,.45) 60%, rgba(26,11,46,.7)); } .op-peligro .op-ico::before { background: conic-gradient(from var(--m-giro, 0deg), transparent 0 70%, #fecaca 82%, transparent 92%); } .op-peligro .op-nombre { color: #fecaca; } .m-pie { margin: 34px 0 0; text-align: center; font-size: 11px; color: #7c6a99; } /* Notebook: cabecera a la izquierda, opciones a la derecha */ @media (min-width: 1024px) { .m-contenedor { display: grid; grid-template-columns: 340px 1fr; column-gap: 40px; align-items: start; } .m-barra-sup { grid-column: 1 / -1; } .m-cabecera { grid-column: 1; flex-direction: column; align-items: flex-start; } .m-progreso { grid-column: 1; } #menu-opciones { grid-column: 2; grid-row: 2 / span 3; margin-top: 0; } #menu-opciones > .m-grupo:first-of-type { margin-top: 22px; } } @property --m-giro { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes m-gira { to { --m-giro: 360deg; } } @keyframes m-ola { 0%, 70% { background-position: 140% 0; } 100% { background-position: -40% 0; } } @keyframes m-aparece { from { opacity: 0; transform: translateY(18px) scale(.9); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } } @keyframes m-sube { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes m-baja { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } } @keyframes m-onda { to { transform: scale(18); opacity: 0; } } @keyframes m-late { 50% { opacity: .55; } } @keyframes m-late-ico { 50% { box-shadow: 0 0 0 2px #e9d5ff, 0 0 34px 6px rgba(168,85,247,1); } } @keyframes m-recorre { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes m-barra { 50% { opacity: .35; transform: translateX(3px); } } @keyframes m-brillo-foto { 0%, 75% { background-position: 130% 0; } 100% { background-position: -30% 0; } } @keyframes m-flecha { 50% { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { .op, .m-grupo, .m-cabecera, .m-progreso, .m-barra-sup { animation: none !important; opacity: 1 !important; } .op-ico::before, .op-ico::after, .m-foto::after, .m-pasos i::after { animation: none !important; } } /* Ventana "Eliminar mi cuenta" */ #modal-eliminar { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(18,7,31,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow-y: auto; } #modal-eliminar .me-caja { position: relative; width: 100%; max-width: 380px; margin: auto; color: #e9d5ff; text-align: center; animation: fx-sube .45s ease both; } #modal-eliminar .me-x { position: absolute; top: -6px; right: -6px; width: 40px; height: 40px; background: none; border: 0; color: #fff; cursor: pointer; } #modal-eliminar .me-x svg { width: 26px; height: 26px; } #modal-eliminar .me-ico { width: 52px; height: 52px; margin: 0 auto 10px; color: #fca5a5; } #modal-eliminar .me-ok { color: #c084fc; } #modal-eliminar h3 { margin: 0 0 8px; font: 700 18px/1.3 'JetBrains Mono', monospace; color: #fff; } #modal-eliminar p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; } #modal-eliminar strong { color: #fff; } #modal-eliminar ul { list-style: disc; margin: 0 0 10px; padding: 0 0 0 18px; text-align: left; font-size: 13.5px; line-height: 1.5; } #modal-eliminar .me-ley { font-size: 12px; color: #c4b5fd; } #modal-eliminar .me-campo { text-align: left; margin: 14px 0 0; } #modal-eliminar .me-campo label { display: block; font: 600 10.5px/1 'JetBrains Mono', monospace; letter-spacing: 1.5px; text-transform: uppercase; color: #a596c0; margin-bottom: 6px; } #modal-eliminar .me-campo input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(192,132,252,.45); color: #fff; padding: 8px 2px; font: 600 15px 'JetBrains Mono', monospace; outline: none; } #modal-eliminar .me-campo input:focus { border-bottom-color: #e9d5ff; } #modal-eliminar .me-borrar { display: block; width: 240px; height: 46px; margin: 22px auto 0; border-radius: 6px; border: 1px solid rgba(254,202,202,.45); background: #7f1d1d; color: #fff; font-weight: 700; cursor: pointer; } #modal-eliminar .me-borrar:disabled { opacity: .4; cursor: not-allowed; } #modal-eliminar .me-cancelar { display: block; margin: 12px auto 0; background: none; border: 0; color: #d8b4fe; text-decoration: underline; cursor: pointer; font-size: 13px; } .pantalla-menu .m-cab-botones #btn-salir, .pantalla-menu .m-cab-botones #btn-trigger-foto { text-shadow: none; font-size: 12px; padding: 4px 0; color: #e9d5ff; } /* ========================================================= MENÚ v2 (2026-11-01): fecha larga, botones corporativos y fondo con movimiento que se nota ========================================================= */ /* Reloj + fecha "Martes, 23 de Octubre de 2027" */ .m-tiempo { text-align: right; line-height: 1.2; } .m-fecha { display: block; margin-top: 4px; font: 600 11px/1.25 'Plus Jakarta Sans', sans-serif; color: #c4b5fd; letter-spacing: .2px; } @media (max-width: 380px) { .m-marca span { font-size: 12px; letter-spacing: 1px; } .m-fecha { font-size: 10px; } } /* Fondo del menú: halos más fuertes y rápidos + malla que avanza + barrido de luz */ body.pantalla-menu::before { background: radial-gradient(circle at 25% 30%, rgba(122,36,199,.55) 0, rgba(122,36,199,0) 34%), radial-gradient(circle at 75% 70%, rgba(168,85,247,.42) 0, rgba(168,85,247,0) 32%), radial-gradient(circle at 70% 20%, rgba(216,180,254,.18) 0, rgba(216,180,254,0) 24%), radial-gradient(circle at 30% 80%, rgba(216,180,254,.14) 0, rgba(216,180,254,0) 24%) !important; animation: paw-halos 11s ease-in-out infinite alternate !important; } body.pantalla-menu::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent 0%, rgba(216,180,254,.10) 48%, rgba(233,213,255,.22) 50%, rgba(216,180,254,.10) 52%, transparent 100%), linear-gradient(rgba(192,132,252,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(192,132,252,.09) 1px, transparent 1px); background-size: 100% 260%, 44px 44px, 44px 44px; background-repeat: no-repeat, repeat, repeat; -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, #000 40%, transparent 100%); animation: m-malla 9s linear infinite; } @keyframes m-malla { 0% { background-position: 0 130%, 0 0, 0 0; } 100% { background-position: 0 -130%, 44px 44px, 44px 44px; } } /* Botones de opción: placa corporativa (degradado sobrio, borde fino, sin brillo en el icono) */ .op-ico { width: 60px; height: 60px; border-radius: 14px; color: #fff; background: linear-gradient(160deg, #4a1784 0%, #380e66 55%, #24093f 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.35), 0 0 0 1px rgba(216,180,254,.22), 0 10px 22px -12px rgba(0,0,0,.9) !important; } .op-ico svg { width: 25px; height: 25px; filter: none !important; stroke-width: 1.7; } .op-ico::before { opacity: .55; } .op-nombre { font-weight: 600; font-size: 12.5px; color: #f5f3ff; position: relative; padding-bottom: 5px; } .op-nombre::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px; border-radius: 1px; background: #c084fc; transform: translateX(-50%); transition: width .3s ease; } .op:hover .op-nombre::after, .op:focus-visible .op-nombre::after { width: 60%; } .op:hover .op-ico { transform: translateY(-3px); background: linear-gradient(160deg, #5a1d9e 0%, #46127f 55%, #2a0b49 100%) !important; } .op:focus-visible { outline: 2px solid #c084fc; outline-offset: 2px; } .op-peligro .op-ico { background: linear-gradient(160deg, #7f1d1d 0%, #5b1414 55%, #3a0b0b 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(254,202,202,.25), 0 10px 22px -12px rgba(0,0,0,.9) !important; } .op-siguiente .op-ico { box-shadow: 0 0 0 2px #e9d5ff, 0 0 20px 1px rgba(168,85,247,.85) !important; } .op-destacada { border-radius: 12px; background: linear-gradient(120deg, #4a1784, #380e66 55%, #2a0b49) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(216,180,254,.25), 0 14px 30px -14px rgba(0,0,0,.9) !important; } .op-destacada .op-ico { background: rgba(255,255,255,.08) !important; box-shadow: 0 0 0 1px rgba(216,180,254,.3) !important; } @media (prefers-reduced-motion: reduce) { body.pantalla-menu::after { animation: none !important; } } /* ========================================================= MENÚ v4 (2026-11-01): corporativo NEGRO, BLANCO y VERDE NEÓN (reemplaza al dorado). Cambiar foto y Salir del mismo tamaño; Salir sobrio (contorno) con un brillo que lo cruza. ========================================================= */ html:has(body.pantalla-menu) { background: linear-gradient(125deg, #000 0%, #0a0a0a 30%, #050505 55%, #0d0f0e 80%, #000 100%) !important; background-size: 320% 320% !important; } body.pantalla-menu::before { background: radial-gradient(circle at 25% 28%, rgba(0,255,136,.13) 0, rgba(0,255,136,0) 34%), radial-gradient(circle at 78% 72%, rgba(0,255,136,.09) 0, rgba(0,255,136,0) 30%), radial-gradient(circle at 70% 18%, rgba(255,255,255,.06) 0, rgba(255,255,255,0) 26%) !important; } body.pantalla-menu::after { background: linear-gradient(180deg, transparent 0%, rgba(0,255,136,.05) 48%, rgba(0,255,136,.16) 50%, rgba(0,255,136,.05) 52%, transparent 100%), linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) !important; background-size: 100% 260%, 44px 44px, 44px 44px !important; background-repeat: no-repeat, repeat, repeat !important; } .pantalla-menu { --neon: #00ff88; --neon-suave: #7dffc0; --m-lila: #00ff88; --m-lila2: #ffffff; } .pantalla-menu .m-contenedor { color: #fff; } .pantalla-menu .m-reloj { color: #fff; text-shadow: none; } .pantalla-menu .m-reloj small { color: var(--neon); } .pantalla-menu .m-fecha { color: #a3a3a3; } .pantalla-menu .m-hola, .pantalla-menu .m-grupo { color: var(--neon); } .pantalla-menu .m-grupo::after { background: linear-gradient(90deg, rgba(0,255,136,.45), transparent); } .pantalla-menu .m-cedula { color: #8a8a8a; } .pantalla-menu .m-cedula span { color: #fff; } .pantalla-menu .m-d-barras i { background: linear-gradient(90deg, transparent, var(--neon)); } .pantalla-menu .m-anillo-fondo { stroke: rgba(255,255,255,.12); } .pantalla-menu .m-anillo-avance { filter: drop-shadow(0 0 5px rgba(0,255,136,.75)); } .pantalla-menu .m-porcentaje { background: var(--neon); color: #000; box-shadow: 0 0 14px rgba(0,255,136,.55); } .pantalla-menu .m-foto { background: #111; box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 10px 30px -8px rgba(0,0,0,.9); } .pantalla-menu .m-foto-cam { background: rgba(0,0,0,.8); color: #fff; } .pantalla-menu .m-pasos i { background: rgba(255,255,255,.10); } .pantalla-menu .m-pasos i.hecho { background: var(--neon); } .pantalla-menu .m-pasos i.actual { background: #fff; box-shadow: 0 0 10px rgba(0,255,136,.8); } .pantalla-menu .m-etapas small { color: #737373; } .pantalla-menu .m-etapa-sig b { color: var(--neon); text-shadow: none; } .pantalla-menu .m-visita { color: #737373; } .pantalla-menu .m-visita span:not(:first-child) { color: #d4d4d4; } /* Placas: negro mate con filo blanco fino e ícono blanco; el verde aparece al tocar */ .pantalla-menu .op-ico { color: #fff; background: linear-gradient(160deg, #1a1a1a 0%, #0e0e0e 60%, #050505 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.16), 0 10px 22px -12px rgba(0,0,0,1) !important; } .pantalla-menu .op-ico::before { background: conic-gradient(from var(--m-giro, 0deg), transparent 0 72%, #00ff88 84%, transparent 94%); opacity: .6; } .pantalla-menu .op-ico::after { background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%); background-size: 250% 100%; } .pantalla-menu .op:hover .op-ico { color: var(--neon); background: linear-gradient(160deg, #202020 0%, #121212 60%, #070707 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(0,255,136,.55), 0 10px 22px -12px rgba(0,0,0,1) !important; } .pantalla-menu .op-nombre { color: #f5f5f5; } .pantalla-menu .op-nombre::after { background: var(--neon); } .pantalla-menu .op-hecha::after { background: var(--neon); color: #000; box-shadow: 0 0 0 2px #000; } .pantalla-menu .op-siguiente .op-ico { color: var(--neon); box-shadow: 0 0 0 1.5px var(--neon), 0 0 18px rgba(0,255,136,.45) !important; animation: m-late-neon 1.8s ease-in-out infinite; } .pantalla-menu .op-siguiente::before { background: var(--neon); color: #000; } @keyframes m-late-neon { 50% { box-shadow: 0 0 0 1.5px var(--neon), 0 0 30px 4px rgba(0,255,136,.75) !important; } } .pantalla-menu .op-destacada { background: linear-gradient(120deg, #141414, #0a0a0a 60%, #121212) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px rgba(0,255,136,.45), 0 14px 30px -14px rgba(0,0,0,1) !important; } .pantalla-menu .op-destacada .op-ico { color: var(--neon); background: rgba(0,255,136,.08) !important; box-shadow: 0 0 0 1px rgba(0,255,136,.4) !important; } .pantalla-menu .op-destacada small { color: #a3a3a3; } .pantalla-menu .op-flecha { color: var(--neon); } .pantalla-menu .op-peligro .op-ico { color: #f87171; background: linear-gradient(160deg, #1a1a1a 0%, #0e0e0e 60%, #050505 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(248,113,113,.45), 0 10px 22px -12px rgba(0,0,0,1) !important; } .pantalla-menu .op-peligro .op-ico::before { background: conic-gradient(from var(--m-giro, 0deg), transparent 0 72%, #f87171 84%, transparent 94%); } .pantalla-menu .op-peligro .op-nombre { color: #fca5a5; } .pantalla-menu .m-pie { color: #525252; } .pantalla-menu .op-onda { background: rgba(0,255,136,.35); } #modal-eliminar { background: rgba(0,0,0,.92); } /* Cambiar foto y Salir: mismo tamaño, sobrios */ .pantalla-menu .m-cab-botones { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; max-width: 300px; margin-top: 12px; } .pantalla-menu .m-cab-botones #btn-trigger-foto, .pantalla-menu .m-cab-botones #btn-salir { position: relative; overflow: hidden; width: 100%; height: 36px; padding: 0 12px !important; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: 600 12.5px/1 'Plus Jakarta Sans', sans-serif !important; color: #fff !important; cursor: pointer; background: transparent !important; border: 1px solid rgba(255,255,255,.35) !important; transition: border-color .2s ease, color .2s ease; } .pantalla-menu .m-cab-botones svg { width: 15px; height: 15px; flex-shrink: 0; } .pantalla-menu .m-cab-botones #btn-trigger-foto:hover, .pantalla-menu .m-cab-botones #btn-salir:hover { border-color: var(--neon) !important; color: var(--neon) !important; } /* Brillo que cruza Salir cada pocos segundos */ .pantalla-menu .m-cab-botones #btn-salir::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none; background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); animation: m-salir-brillo 3.2s ease-in-out 1.2s infinite; } @keyframes m-salir-brillo { 0% { left: -60%; } 45%, 100% { left: 130%; } } @media (prefers-reduced-motion: reduce) { .pantalla-menu .m-cab-botones #btn-salir::after { animation: none; } } /* ==== TEMA NEON (generado) ==== */ /* Login, validación, ventanas y avisos en negro, blanco y verde neón como el menú (2026-11-01). Se genera solo a partir de las reglas moradas de arriba; html.paw-neon lo pone js/native.js. */ html.paw-neon * { scrollbar-color: rgba(0,240,118, 0.35) transparent !important; } html.paw-neon ::-webkit-scrollbar-thumb { background: rgba(0,240,118, 0.3) !important; } html.paw-neon #paw-instalador { background: rgba(2,4,8, 0.82) !important; } html.paw-neon #paw-instalador .paw-tarjeta { border: 1px solid rgba(0,240,118, 0.3) !important; box-shadow: 0 0 40px rgba(0,240,118, 0.15) !important; } html.paw-neon #paw-instalador .paw-btn-principal { box-shadow: 0 0 25px -5px rgba(0,240,118, 0.5) !important; } html.paw-neon .login-emblema-anillo { background: conic-gradient(from 0deg, transparent 0 50%, #00c96b 72%, #7dffc0 92%, transparent 100%) !important; filter: drop-shadow(0 0 7px rgba(0,255,136,0.9)) !important; } html.paw-neon .pantalla-login .btn-brillo, html.paw-neon .pantalla-validacion .btn-brillo { background: #00c96b !important; box-shadow: 0 6px 18px -8px rgba(0,201,107,0.8) !important; } html.paw-neon .pantalla-login .btn-brillo:hover, html.paw-neon .pantalla-validacion .btn-brillo:hover { background: #161616 !important; } html.paw-neon .previa-sub { color: #00ff88 !important; } html.paw-neon .previa-portal { border-bottom: 1px solid rgba(0,201,107,0.35) !important; } html.paw-neon .previa-lista li::before { background: #00c96b !important; } html.paw-neon .previa-lista li.previa-ley svg { color: #00ff88 !important; } html.paw-neon .consent-marca { border: 1.5px solid #00c96b !important; } html.paw-neon .consent-check input:checked + .consent-marca { background: #00c96b !important; } html.paw-neon .consent-check input:focus-visible + .consent-marca { outline: 2px solid #7dffc0 !important; } html.paw-neon .consent-link { color: #00ff88 !important; } html.paw-neon .consent-titulo { border-bottom: 1px solid rgba(0,201,107,.45) !important; } html.paw-neon .consent-texto li::marker { color: #00c96b !important; } html.paw-neon .consent-ley { color: #00ff88 !important; } html.paw-neon .consent-aceptar { background: #00c96b !important; } html.paw-neon .consent-aceptar:hover { background: #1a1a1a !important; } html.paw-neon body.pantalla-login, html.paw-neon:has(body.pantalla-login) { background: radial-gradient(ellipse at 50% 40%, #0a0a0a 0%, #0d0618 55%, #050208 100%) !important; } html.paw-neon .login-aurora.a1 { background: rgba(0,201,107,0.30) !important; } html.paw-neon .login-aurora.a2 { background: rgba(0,255,136,0.20) !important; } html.paw-neon .consent-check input:checked + .consent-marca { color: #00c96b !important; } html.paw-neon .login-firma::before { background: linear-gradient(90deg, transparent, rgba(0,255,136,0.5), transparent) !important; } html.paw-neon { --violeta-boton: #0e0e0e !important; --violeta-boton-hover: #161616 !important; } html.paw-neon .pantalla-login .btn-brillo, html.paw-neon .pantalla-validacion .btn-brillo, html.paw-neon .consent-aceptar { box-shadow: 0 6px 18px -8px rgba(0,0,0,.8) !important; } html.paw-neon .btn-instalar { border: 1px solid rgba(0,255,136,.55) !important; color: #ffffff !important; } html.paw-neon .btn-instalar:hover, html.paw-neon .btn-instalar:focus-visible { background: rgba(0,0,0,.35) !important; border-color: #00ff88 !important; } html.paw-neon .instalar-beneficios { background: #0a0a0a !important; border: 1px solid rgba(0,255,136,.5) !important; } html.paw-neon .instalar-beneficios::after { border-top-color: #0a0a0a !important; } html.paw-neon .ib-titulo { color: #00ff88 !important; } html.paw-neon .instalar-beneficios li::before { color: #00ff88 !important; } html.paw-neon #modal-instalar-pc b { color: #7dffc0 !important; } html.paw-neon #modal-instalar-pc .ipc-ico { color: #7dffc0 !important; } html.paw-neon #paw-instalador .paw-tarjeta { border-color: rgba(0,255,136,.45) !important; box-shadow: 0 0 30px -10px rgba(0,201,107,.6) !important; } html.paw-neon #paw-instalador .paw-pasos b { color: #7dffc0 !important; } html.paw-neon { --violeta-boton: #161616 !important; --violeta-boton-hover: #161616 !important; } html.paw-neon .pantalla-login .btn-brillo, html.paw-neon .pantalla-validacion .btn-brillo, html.paw-neon .btn-corp, html.paw-neon .consent-aceptar, html.paw-neon #paw-instalador .paw-btn-principal { box-shadow: 0 6px 18px -8px rgba(22,22,22,.9) !important; } html.paw-neon .btn-instalar, html.paw-neon #paw-instalador .paw-btn-secundario { color: #ffffff !important; border: 1px solid rgba(0,255,136,.6) !important; } html.paw-neon .btn-instalar:hover, html.paw-neon #paw-instalador .paw-btn-secundario:hover { background: rgba(22,22,22,.35) !important; border-color: #00ff88 !important; } html.paw-neon #paw-instalador .paw-ben-titulo { color: #00ff88 !important; } html.paw-neon #paw-instalador .paw-beneficios { background: #0a0a0a !important; border: 1px solid rgba(0,255,136,.45) !important; } html.paw-neon #paw-instalador .paw-beneficios li::before { color: #00ff88 !important; } html.paw-neon #paw-instalador .paw-encabezado { border-bottom: 1px solid rgba(0,255,136,.35) !important; } html.paw-neon { --violeta-boton: #0e0e0e !important; --violeta-boton-hover: #161616 !important; } html.paw-neon .pantalla-login { --acento-morado: #00ff88 !important; --acento-morado-glow: rgba(0,255,136,.55) !important; } html.paw-neon .pantalla-login input { caret-color: #00ff88 !important; } html.paw-neon .pantalla-login .tabs-login .tab.activo, html.paw-neon .pantalla-login .tabs-login[data-tab="registro"] .tab.activo { color: #00ff88 !important; text-shadow: 0 0 12px rgba(0,255,136,.45) !important; } html.paw-neon .pantalla-login .tab-indicador, html.paw-neon .pantalla-login .tabs-login[data-tab="registro"] .tab-indicador { background: #00ff88 !important; box-shadow: 0 0 10px #00ff88, 0 0 20px rgba(0,255,136,.5) !important; } html.paw-neon .pantalla-login .campo-linea, html.paw-neon .pantalla-login .campo-cyan .campo-linea { --acento: #00ff88 !important; --acento-glow: rgba(0,255,136,.55) !important; } html.paw-neon .pantalla-login .campo:focus-within label, html.paw-neon .pantalla-login .campo-cyan:focus-within label, html.paw-neon .pantalla-login .campo:not(.campo-cyan):focus-within label { color: #00ff88 !important; } html.paw-neon .pantalla-login .campo-prefijo { color: #00ff88 !important; } html.paw-neon .pantalla-login .login-titulo { background-image: linear-gradient(100deg, #fff 0%, #fff 40%, #00ff88 50%, #fff 60%, #fff 100%) !important; } html.paw-neon .pantalla-login .login-firma::before { background: linear-gradient(90deg, transparent, rgba(0,255,136,.5), transparent) !important; } html.paw-neon #btn-olvide-clave { color: #00ff88 !important; text-decoration-color: rgba(0,255,136,.5) !important; } html.paw-neon .pantalla-login ::selection { background: #00ff88 !important; } html.paw-neon .consent-check input:checked + .consent-marca { background: #00c96b !important; border-color: #00c96b !important; } html.paw-neon .pantalla-login .text-brand-emerald, html.paw-neon .pantalla-login .text-brand-cyan { color: #00ff88 !important; } html.paw-neon .pantalla-login .border-t-brand-emerald { border-top-color: #00ff88 !important; } html.paw-neon .pantalla-login .border-b-brand-emerald { border-bottom-color: #00ff88 !important; } html.paw-neon .pantalla-login input { caret-color: #7dffc0 !important; } html.paw-neon .pantalla-login .campo:focus-within .campo-icono, html.paw-neon .pantalla-login .campo-ojo:hover { color: #7dffc0 !important; } html.paw-neon .login-aurora.a1 { background: rgba(0,201,107,.45) !important; } html.paw-neon .login-aurora.a2 { background: rgba(0,255,136,.32) !important; } html.paw-neon, html.paw-neon:has(body.pantalla-login) { background: linear-gradient(120deg, #050505 0%, #0b0b0b 25%, #060606 50%, #0b0b0b 75%, #050505 100%) !important; } html.paw-neon .pantalla-login input, html.paw-neon .pantalla-validacion input, html.paw-neon [id^="modal-"] input { caret-color: #00ff88 !important; } html.paw-neon #modal-consentimiento, html.paw-neon #modal-instalar-pc, html.paw-neon #modal-recuperar, html.paw-neon #paw-instalador { background: rgba(8,8,8,.78) !important; } html.paw-neon #modal-consentimiento, html.paw-neon #modal-instalar-pc, html.paw-neon #modal-recuperar:not(.hidden), html.paw-neon #paw-instalador { background: rgba(8,8,8,.35) !important; } html.paw-neon .paw-otp .otp-box { caret-color: #00ff88 !important; background: rgba(14,14,14,.45) !important; border: 1px solid rgba(0,255,136,.4) !important; } html.paw-neon .paw-otp .otp-box::placeholder { color: rgba(125,255,192,.35) !important; } html.paw-neon .paw-otp .otp-box:focus { border-color: #00ff88 !important; background: rgba(22,22,22,.6) !important; box-shadow: 0 0 0 3px rgba(0,255,136,.25), 0 10px 22px -10px rgba(0,255,136,.9) !important; } html.paw-neon .paw-otp .otp-box.lleno { background: #0e0e0e !important; border-color: #00ff88 !important; } html.paw-neon .paw-otp.completo .otp-box { border-color: #7dffc0 !important; } html.paw-neon .paw-otp-etiqueta { color: #a3a3a3 !important; } html.paw-neon .pantalla-validacion #card-validar .w-12.h-12 { background: rgba(0,255,136,.14) !important; box-shadow: 0 0 25px rgba(0,255,136,.4) !important; } html.paw-neon .pantalla-validacion #overlay-procesando div { border-color: rgba(0,255,136,.2) !important; border-top-color: #00ff88 !important; box-shadow: 0 0 20px rgba(0,255,136,.6) !important; } html.paw-neon .pantalla-validacion #btnReenviarOTP:hover { color: #7dffc0 !important; } html.paw-neon .pantalla-validacion .text-brand-emerald, html.paw-neon .pantalla-validacion .text-brand-cyan { color: #00ff88 !important; } html.paw-neon .pantalla-validacion #btnVerificarOTP:focus-visible { outline: 2px solid #00ff88 !important; } html.paw-neon, html.paw-neon:has(body.pantalla-login) { background: linear-gradient(125deg, #050505 0%, #0d0d0d 22%, #070707 45%, #111111 68%, #050505 100%) !important; } html.paw-neon body.pantalla-login::before, html.paw-neon body.pantalla-validacion::before { background: radial-gradient(circle at 30% 35%, rgba(0,201,107,.30) 0, rgba(0,201,107,0) 32%), radial-gradient(circle at 70% 65%, rgba(0,255,136,.22) 0, rgba(0,255,136,0) 30%) !important; } html.paw-neon #modal-consentimiento, html.paw-neon #modal-instalar-pc, html.paw-neon #modal-recuperar:not(.hidden), html.paw-neon #paw-instalador { background: rgba(5,5,5,.12) !important; } html.paw-neon .pantalla-login .btn-brillo, html.paw-neon .pantalla-validacion .btn-brillo, html.paw-neon .btn-corp, html.paw-neon .consent-aceptar, html.paw-neon #paw-instalador .paw-btn-principal { border: 1px solid rgba(125,255,192,.38) !important; box-shadow: 0 4px 14px -4px rgba(0,0,0,.55), 0 0 10px -3px rgba(0,255,136,.35), inset 0 1px 0 rgba(255,255,255,.10) !important; } html.paw-neon .pantalla-login .btn-brillo:hover, html.paw-neon .pantalla-validacion .btn-brillo:hover, html.paw-neon .btn-corp:hover, html.paw-neon .consent-aceptar:hover, html.paw-neon #paw-instalador .paw-btn-principal:hover { border-color: rgba(125,255,192,.6) !important; box-shadow: 0 6px 18px -4px rgba(0,0,0,.6), 0 0 14px -3px rgba(0,255,136,.5), inset 0 1px 0 rgba(255,255,255,.14) !important; } html.paw-neon .abrir-correo-ayuda { color: #a3a3a3 !important; } html.paw-neon .btn-pegar-codigo { color: #7dffc0 !important; text-decoration-color: rgba(125,255,192,.45) !important; } html.paw-neon .guia-codigo { color: #ffffff !important; } html.paw-neon .guia-codigo b { background: #0e0e0e !important; border: 1px solid rgba(125,255,192,.45) !important; } html.paw-neon .guia-spam { color: #a3a3a3 !important; } html.paw-neon .aviso-verificacion { color: #7dffc0 !important; } html.paw-neon #paw-otra-ventana { background: rgba(5,5,5,.92) !important; } html.paw-neon #paw-otra-ventana .pov-caja { color: #ffffff !important; } html.paw-neon #paw-otra-ventana .pov-ico { color: #00ff88 !important; } html.paw-neon #paw-otra-ventana .pov-usar { background: #0e0e0e !important; } html.paw-neon #paw-aviso-correo { background: rgba(5,5,5,.9) !important; } html.paw-neon #paw-aviso-correo .pac-caja { color: #ffffff !important; } html.paw-neon #paw-aviso-correo .pac-ico { color: #00ff88 !important; } html.paw-neon #paw-aviso-correo li b { background: #0e0e0e !important; border: 1px solid rgba(125,255,192,.45) !important; } html.paw-neon #paw-aviso-correo .pac-spam { color: #a3a3a3 !important; } html.paw-neon #paw-aviso-correo .pac-ok { background: #0e0e0e !important; } /* ==== FIN TEMA NEON ==== */ /* ========================================================= v5 (2026-11-01): splash con fondo que se mueve, fecha completa, ventana de privacidad ordenada y login en negro + verde neón ========================================================= */ /* Splash: sin cuadrícula ni franja que baja (Ingemar pidió quitarlas 2026-11-01) */ #paw-splash::before { content: none !important; display: none !important; } #paw-splash .sp-centro { z-index: 1; } /* Menú: la fecha va en su propia línea y nunca se corta */ .m-barra-sup { flex-wrap: wrap; row-gap: 4px; } .m-tiempo { display: contents; } .m-fecha { order: 3; flex: 1 0 100%; margin-top: 0; text-align: right; white-space: nowrap; font-size: 11.5px; } .m-marca span { white-space: nowrap; } /* Ventana de privacidad: fondo negro sólido, lo de atrás se oculta */ #modal-consentimiento { background: rgba(0,0,0,.97) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; } body:has(#modal-consentimiento) #menu-principal, body:has(#modal-eliminar) #menu-principal { visibility: hidden !important; } #modal-consentimiento .consent-caja { max-width: 560px; color: #d4d4d4; } #modal-consentimiento .consent-titulo { font-size: 17px; letter-spacing: .5px; border-bottom: 1px solid rgba(0,255,136,.45); padding-bottom: .8rem; margin-bottom: .3rem; } .consent-sub { margin: .5rem 0 1rem; text-align: center; font: 600 10.5px/1.4 'JetBrains Mono', monospace; letter-spacing: 1.5px; text-transform: uppercase; color: #8a8a8a; } .consent-texto { font-size: 13.5px; line-height: 1.65; text-align: justify; hyphens: manual; } .consent-sec { display: grid; grid-template-columns: 30px 1fr; gap: 0 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); } .consent-sec:last-of-type { border-bottom: 0; } .consent-sec > i { grid-row: span 2; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font: 700 11px/1 'JetBrains Mono', monospace; font-style: normal; color: #00ff88; box-shadow: inset 0 0 0 1px rgba(0,255,136,.45); } .consent-sec h4 { margin: 4px 0; font: 700 11.5px/1.3 'JetBrains Mono', monospace; letter-spacing: 1.2px; text-transform: uppercase; color: #00ff88; text-align: left; } .consent-sec p, .consent-sec ul { margin: 0; } .consent-sec ul { padding-left: 1.05rem; list-style: disc; } .consent-sec li { margin-bottom: .25rem; } .consent-sec li::marker { color: #00ff88; } .consent-texto strong { color: #fff; } .consent-ley { margin-top: 1rem !important; color: #00ff88 !important; font-size: 11.5px; text-align: center !important; } /* Login y validación: fondo negro y botón principal negro con filo neón; al tocarlo se llena de verde */ html.paw-neon:has(body.pantalla-login), html.paw-neon:has(body.pantalla-validacion) { background: linear-gradient(125deg, #000 0%, #0a0a0a 30%, #050505 55%, #0d0f0e 80%, #000 100%) !important; background-size: 320% 320% !important; } html.paw-neon body.pantalla-login::before, html.paw-neon body.pantalla-validacion::before { background: radial-gradient(circle at 25% 28%, rgba(0,255,136,.12) 0, rgba(0,255,136,0) 34%), radial-gradient(circle at 78% 72%, rgba(0,255,136,.08) 0, rgba(0,255,136,0) 30%), radial-gradient(circle at 70% 18%, rgba(255,255,255,.05) 0, rgba(255,255,255,0) 26%) !important; } html.paw-neon body.pantalla-login::after, html.paw-neon body.pantalla-validacion::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 44px 44px; animation: m-malla-login 12s linear infinite; -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, #000 40%, transparent 100%); } @keyframes m-malla-login { to { background-position: 44px 44px, 44px 44px; } } html.paw-neon .pantalla-login .btn-brillo, html.paw-neon .pantalla-validacion .btn-brillo, html.paw-neon .consent-aceptar, html.paw-neon #paw-instalador .paw-btn-principal, html.paw-neon .btn-corp { background: #0b0b0b !important; color: #fff !important; border: 1px solid #00ff88 !important; box-shadow: 0 0 18px -6px rgba(0,255,136,.55) !important; } html.paw-neon .pantalla-login .btn-brillo:hover, html.paw-neon .pantalla-validacion .btn-brillo:hover, html.paw-neon .consent-aceptar:hover, html.paw-neon #paw-instalador .paw-btn-principal:hover, html.paw-neon .btn-corp:hover { background: #00ff88 !important; color: #000 !important; } /* ========================================================= MENÚ v6 (2026-11-02): fondo LEVE para que se lean las opciones. Se mueve, pero suave: halos tenues, malla casi invisible que avanza lento y sin la franja de luz que barría la pantalla. ========================================================= */ body.pantalla-menu::before { background: radial-gradient(circle at 25% 28%, rgba(0,255,136,.06) 0, rgba(0,255,136,0) 34%), radial-gradient(circle at 78% 72%, rgba(0,255,136,.04) 0, rgba(0,255,136,0) 30%) !important; animation: paw-halos 22s ease-in-out infinite alternate !important; } body.pantalla-menu::after { background: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) !important; background-size: 44px 44px, 44px 44px !important; background-repeat: repeat, repeat !important; animation: m-malla-leve 30s linear infinite !important; } @keyframes m-malla-leve { to { background-position: 44px 44px, 44px 44px; } } /* v66 (2026-11-03): el cuerpo de login, validación y menú queda transparente. Una regla del tema neón le ponía fondo sólido al body y tapaba las partículas y la malla en movimiento (en el computador no se veía nada moverse). */ html.paw-neon body.pantalla-login, html.paw-neon body.pantalla-validacion, html.paw-neon body.pantalla-menu { background: transparent !important; }