* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Deja que los controles nativos (selector de fecha/hora, scrollbar de Firefox) usen su
render oscuro — sin esto el navegador asume esquema claro por default y el ícono del
calendario/reloj sale casi negro sobre nuestro fondo oscuro, invisible. */
html { color-scheme: dark; }
/* renderShell() vacía #page-content, espera la respuesta de permisos, y lo vuelve a
montar — en ese instante la altura del documento (y por tanto la barra de scroll)
aparece y desaparece. Sin esto, ese hueco cambia el ancho útil de la ventana y
cualquier elemento fixed centrado por porcentaje (el anillo/emblema de la cortina
de carga) brinca unos pixeles de lado — el "glitch" al cambiar de sección. Reservar
el espacio siempre, se use o no, mantiene ese ancho constante de principio a fin. */
html { scrollbar-gutter: stable; }
/* Las luces/viñetas decorativas se salen del borde a propósito (ej. .shell-content::before
vive en right: -8%). Sin esto, ese sobrante genera scroll horizontal hacia un vacío.
`clip` y no `hidden`: hidden convertiría al body en contenedor de scroll y rompería el
`position: sticky` del sidebar. */
html, body { overflow-x: clip; }
/* El fondo oscuro va también en y con el color literal ANTES del token: si
tokens.css no llegara a cargar (o el navegador descarta la hoja), `var(--color-bg)` no
resuelve y la página se quedaba en blanco con los textos oscuros. Con el respaldo, el
tema se ve igual aunque falte la hoja de variables. */
html {
background-color: #050505;
}
body {
background-color: #050505;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
position: relative;
min-height: 100vh;
}
/* Grano de tinta sobre todo el lienzo */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: var(--texture-grain);
opacity: .11;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 999;
}
/* Viñeta: los bordes de la pantalla se hunden en negro puro */
body::after {
content: '';
position: fixed;
inset: 0;
background: radial-gradient(ellipse at 50% 10%, transparent 55%, rgba(0, 0, 0, .4) 100%);
pointer-events: none;
z-index: 998;
}
#app-shell, .login-box, main.pos, .sitio-main { position: relative; z-index: 1; }
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 700;
color: var(--color-text);
line-height: 1.15;
margin: 0 0 var(--space-4);
}
h1 { font-size: var(--text-3xl); letter-spacing: -.015em; }
h2 { font-size: var(--text-xl); margin-top: 0; letter-spacing: -.01em; }
h3 { font-size: var(--text-lg); }
/* Regla dorada bajo los títulos de sección — la firma gráfica del sistema */
h2.ruled {
position: relative;
padding-bottom: var(--space-3);
margin-bottom: var(--space-5);
}
h2.ruled::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 64px;
height: 2px;
background: var(--rule-gold);
transform-origin: left;
animation: rule-draw var(--duration-slow) var(--ease-out) both;
}
/* Micro-etiqueta versalita — lenguaje de rotulación de estudio */
.eyebrow {
display: block;
font-family: var(--font-body);
font-size: var(--text-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--color-gold);
margin-bottom: var(--space-2);
}
/* Cifras de dinero: siempre alineadas y con cuerpo de display */
.money {
font-family: var(--font-display);
font-variant-numeric: tabular-nums;
letter-spacing: .01em;
}
p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }
a { color: var(--color-gold); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
a:hover { color: var(--color-gold-bright); }
::selection { background: var(--color-gold-deep); color: var(--color-text); }
/* El atributo hidden gana siempre — ningún display: flex debe anularlo */
[hidden] { display: none !important; }
/* Scrollbars a tono. Se listan los contenedores reales de scroll a propósito: con un
selector `*` también se pintan los divs de medición que crea FullCalendar, y quedan
pulgares fantasma flotando sobre la interfaz. */
html, body, .table-scroll, .modal-panel, .shell-sidebar, textarea,
.fc-scroller, .fc-coincidencias, .pos-lineas, #lista-historial {
scrollbar-width: thin;
scrollbar-color: rgba(201, 168, 76, .3) transparent;
}
html::-webkit-scrollbar, body::-webkit-scrollbar, .table-scroll::-webkit-scrollbar,
.modal-panel::-webkit-scrollbar, .shell-sidebar::-webkit-scrollbar, textarea::-webkit-scrollbar,
.fc-scroller::-webkit-scrollbar, .fc-coincidencias::-webkit-scrollbar,
.pos-lineas::-webkit-scrollbar, #lista-historial::-webkit-scrollbar { width: 10px; height: 10px; }
/* Canal casi invisible: una hairline hundida, no una barra gris de sistema */
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, .table-scroll::-webkit-scrollbar-track,
.modal-panel::-webkit-scrollbar-track, .shell-sidebar::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track,
.fc-scroller::-webkit-scrollbar-track, .fc-coincidencias::-webkit-scrollbar-track,
.pos-lineas::-webkit-scrollbar-track, #lista-historial::-webkit-scrollbar-track {
background: transparent;
border-radius: var(--radius-full);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .028);
}
/* Pulgar como un filamento dorado, con degradado a lo largo en vez de un bloque plano */
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb,
.modal-panel::-webkit-scrollbar-thumb, .shell-sidebar::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb,
.fc-scroller::-webkit-scrollbar-thumb, .fc-coincidencias::-webkit-scrollbar-thumb,
.pos-lineas::-webkit-scrollbar-thumb, #lista-historial::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(232, 201, 109, .42), rgba(139, 105, 20, .3));
border-radius: var(--radius-full);
border: 3px solid transparent;
background-clip: content-box;
transition: background-color var(--duration-fast) var(--ease-out);
}
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, .table-scroll::-webkit-scrollbar-thumb:hover,
.modal-panel::-webkit-scrollbar-thumb:hover, .shell-sidebar::-webkit-scrollbar-thumb:hover, textarea::-webkit-scrollbar-thumb:hover,
.fc-scroller::-webkit-scrollbar-thumb:hover, .fc-coincidencias::-webkit-scrollbar-thumb:hover,
.pos-lineas::-webkit-scrollbar-thumb:hover, #lista-historial::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--color-gold-bright), var(--color-gold));
background-clip: content-box;
}
/* La esquina donde se cruzan las dos barras sale gris de sistema si no se pinta */
html::-webkit-scrollbar-corner, body::-webkit-scrollbar-corner, .table-scroll::-webkit-scrollbar-corner,
.modal-panel::-webkit-scrollbar-corner, .fc-scroller::-webkit-scrollbar-corner { background: transparent; }