/* ============================================================ Cursor personalizado — EESTP-PNP (version sobria) Piezas: punto (pegado al mouse), aro (lo persigue con un leve retraso, sin deformarse ni imantarse) y etiqueta dentro del aro. El puntero del sistema solo se oculta cuando el script marca .cursor-activo en . Si el script no corre -por fallo, tactil o movimiento reducido- el puntero normal sigue disponible. ============================================================ */ .cursor-activo, .cursor-activo * { cursor: none !important; } .cursor-punto, .cursor-aro { position: fixed; top: 0; left: 0; z-index: 99999; pointer-events: none; border-radius: 50%; will-change: transform; /* El transform lo escribe el script en cada fotograma: sin transicion, o el movimiento se arrastraria. */ opacity: 0; transition: opacity .25s ease; } /* Solo se ven cuando el mouse ya se movio dentro de la ventana */ .cursor-visible .cursor-punto, .cursor-visible .cursor-aro { opacity: 1; } /* ---------- punto ---------- */ .cursor-punto { width: 7px; height: 7px; background: #d4a820; box-shadow: 0 0 0 1.5px rgba(255,255,255,.85), 0 1px 4px rgba(6,18,9,.45); transition: opacity .25s ease, width .18s ease, height .18s ease; } .cursor-punto.pulsando { width: 5px; height: 5px; } /* ---------- aro ---------- */ .cursor-aro { width: 34px; height: 34px; border: 1.8px solid rgba(30,107,46,.65); background: rgba(30,107,46,.06); display: grid; place-items: center; /* se anima la FORMA, no la posicion */ transition: opacity .25s ease, width .28s cubic-bezier(.22,.61,.36,1), height .28s cubic-bezier(.22,.61,.36,1), border-radius .28s cubic-bezier(.22,.61,.36,1), border-color .22s ease, background-color .22s ease; } /* Sobre algo pulsable */ .cursor-aro.sobre-accion { border-color: rgba(212,168,32,.85); background: rgba(212,168,32,.12); } /* Sobre un campo de texto: se estrecha como una barra de escritura */ .cursor-aro.sobre-texto { width: 3px; height: 26px; border-radius: 2px; border-color: transparent; background: rgba(20,68,30,.55); } .cursor-aro.pulsando { border-color: rgba(212,168,32,.95); } /* ---------- etiqueta dentro del aro ---------- */ .cursor-texto { font-family: 'Inter', sans-serif; font-size: .58rem; font-weight: 800; letter-spacing: 1.2px; color: var(--pnp-green, #14441e); white-space: nowrap; opacity: 0; transform: scale(.8); transition: opacity .2s ease, transform .2s ease; } .cursor-aro.con-texto .cursor-texto { opacity: 1; transform: scale(1); } /* Sin etiqueta el aro debe quedar hueco */ .cursor-aro:not(.con-texto) .cursor-texto { display: none; } /* ============================================================ VARIANTE OSCURA (login) ============================================================ */ .cursor-oscuro .cursor-aro { border-color: rgba(245,208,64,.55); background: rgba(245,208,64,.05); } .cursor-oscuro .cursor-punto { background: #f7e04a; box-shadow: 0 0 0 1.5px rgba(0,0,0,.35), 0 1px 5px rgba(0,0,0,.6); } .cursor-oscuro .cursor-texto { color: #f7e04a; } .cursor-oscuro .cursor-aro.sobre-texto { background: rgba(245,208,64,.65); } /* ============================================================ BARRA DE ESCRITURA (caret) ============================================================ */ input, textarea, [contenteditable] { caret-color: var(--pnp-gold, #c9a020); } .buscador-pill .dni-input { caret-color: #d4a820; } .login-card input { caret-color: #f5d040; }