/* Sistema de diseño "cyberdeck" — Alto Rendimiento Cognitivo.
Tema único (sin fork claro/oscuro): esta app se piensa siempre oscura,
como un terminal de control, no una web de marketing con preferencia de
sistema. Si en algún momento se quiere reintroducir un modo claro,
agregar un fork acá, no asumir que hace falta. */
:root {
--bg: #0a0a12;
--surface: #12121d;
--surface-2: #1a1a29;
--ink: #f2f2f7;
--ink-2: #a6a6bf;
--ink-3: #6c6c85;
--border: rgba(255,255,255,0.08);
--border-strong: rgba(255,255,255,0.16);
--accent: #8b7ff5;
--accent-soft: #8b7ff524;
--accent-ink: #ffffff;
--danger: #f0576b;
--danger-soft: #f0576b1f;
--ok: #4ade80;
--ok-soft: #4ade801f;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.3);
--shadow-md: 0 8px 28px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4);
--glow-accent: 0 0 0 3px var(--accent-soft), 0 0 18px rgba(139,127,245,0.18);
--radius: 14px;
--radius-sm: 8px;
--font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
--font-display: 'Space Grotesk', var(--font-sans);
}
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
margin: 0;
font-family: var(--font-sans);
background: var(--bg);
color: var(--ink);
line-height: 1.45;
position: relative;
}
/* Escena de fondo "cyberdeck" — líneas tipo gráfico de bolsa + dos blobs de
luz, ambos a la deriva muy lentamente (animación por transform, liviana:
no repinta las tablas de datos que van encima). Marcado en vía
bgScene() en src/layout.php, fijo detrás de todo (z-index:-1). Casi
invisible a propósito — es atmósfera, no debe competir con datos densos
(KPIs, calendario). Se apaga con prefers-reduced-motion. */
.bg-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-lines { position: absolute; inset: -15% -8%; width: 130%; height: 130%; opacity: .6; animation: bg-lines-drift 23s ease-in-out infinite alternate; }
.bg-blob { position: absolute; border-radius: 50%; filter: blur(90px); }
.bg-blob-a {
width: 620px; height: 620px; left: -160px; top: -180px;
background: radial-gradient(circle, var(--accent), transparent 70%); opacity: .28;
animation: bg-blob-a 16s ease-in-out infinite;
}
.bg-blob-b {
width: 520px; height: 520px; right: -160px; bottom: -140px;
background: radial-gradient(circle, var(--ok), transparent 70%); opacity: .14;
animation: bg-blob-b 20s ease-in-out infinite;
}
/* Punto violeta que sigue al cursor (ver bg-scene.js) — arranca centrado
arriba (misma posición que tenía el glow estático viejo) hasta el primer
mousemove, así no hay salto visual en la carga. Desactivado en touch. */
.bg-cursor-glow {
position: absolute; left: 0; top: 0; width: 520px; height: 520px;
border-radius: 50%; background: radial-gradient(circle, rgba(139,127,245,0.22), transparent 70%);
filter: blur(60px); opacity: 0; transition: opacity .5s ease; will-change: transform;
}
.bg-cursor-glow.bg-cursor-active { opacity: 1; }
@keyframes bg-lines-drift { from { transform: translate(0,0); } to { transform: translate(-140px,-70px); } }
@keyframes bg-blob-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(70px,50px) scale(1.1); } }
@keyframes bg-blob-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-60px,-40px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
.bg-lines, .bg-blob-a, .bg-blob-b { animation: none !important; }
}
::selection { background: var(--accent-soft); }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; box-shadow: var(--glow-accent); }
/* Scrollbar discreto, en tema (solo navegadores webkit/blink) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
/* Lockup ícono + wordmark real (ver brandMark() en layout.php) — logos
procesados a PNG transparente a partir del paquete de identidad visual. */
.brand-mark { display: inline-flex; align-items: center; gap: .5rem; vertical-align: middle; }
.brand-mark-icon { height: 20px; width: auto; display: block; }
.brand-mark-logo { height: 13px; width: auto; display: block; }
.brand-mark-admin { font-family: var(--font-mono); font-size: .68rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; margin-left: .1rem; }
.wrap { max-width: 420px; margin: 8vh auto; padding: 0 1.2rem; }
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.8rem;
box-shadow: var(--shadow-md);
}
h1 {
font-size: 1.35rem; margin: 0 0 .3rem; font-weight: 700;
font-family: var(--font-display); text-transform: uppercase; letter-spacing: .01em;
text-shadow: 0 0 26px rgba(139,127,245,.35);
}
p.sub { color: var(--ink-2); margin: 0 0 1.4rem; font-size: .92rem; }
label {
display:block; font-size:.68rem; font-weight: 600; color:var(--ink-3); margin-bottom:.4rem;
font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .07em;
}
input[type=email], input[type=password], input[type=text], input[type=date], input[type=time], input[type=number],
select, textarea {
width: 100%; padding: .62rem .75rem; border-radius: var(--radius-sm);
border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--ink);
font-size: .92rem; font-family: inherit; margin-bottom: 1rem;
transition: border-color .12s ease, box-shadow .12s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right .65rem center;
background-size: 18px;
padding-right: 2.2rem;
cursor: pointer;
}
/* Reemplazo de (ver assets/timeinput.js) — dos