/* Sistema de Folios — Salón Cisne
Estilo "panel administrativo premium" (referencia: paneles tipo Secure
Cloud/NetBIT): un lienzo oscuro con degradado y brillo dorado de marca
sirve de fondo continuo para TODO el layout (sidebar/header incluidos,
sin cajas ni bordes que los separen del fondo), y encima flota un único
panel claro por pantalla con esquinas muy redondeadas y sombra — en vez
de varias tarjetas sueltas con huecos entre ellas. Herramienta de uso
administrativo interno (no de cara al cliente del salón): una sola
familia tipográfica sans-serif en todos lados, con jerarquía marcada por
tamaño/peso, no por cambiar de fuente. */
* { box-sizing: border-box; }
:root {
/* --- Chrome (header / sidebar / nav): vive directamente sobre el fondo
oscuro del , sin caja ni borde propios — por eso son overlays
translúcidos en vez de colores sólidos. --- */
--chrome-texto: #e9e4d9;
--chrome-texto-fuerte: #ffffff;
--chrome-texto-suave: #a89e88;
--chrome-borde: rgba(255, 255, 255, 0.22);
--chrome-hover: rgba(255, 255, 255, 0.07);
--chrome-activo-bg: rgba(212, 175, 55, 0.18);
/* --- Contenido: claro (blancos/grises fríos, casi sin tinte cálido) para
que contraste con fuerza contra el chrome oscuro — el dorado queda como
acento puntual (botones, activos, logo), no como tono de fondo. --- */
--bg-app: #eef0f2;
--bg-panel: #ffffff;
--bg-panel-alt: #f3f4f6;
--bg-input: #fbfbfc;
--borde: #e2e4e8;
--borde-fuerte: #cbcfd6;
--texto: #262a30;
--texto-fuerte: #12141a;
--texto-suave: #6b7280;
--color-primario: #d4af37;
--color-primario-oscuro: #a3841f;
--color-primario-texto: #171106;
/* Color de los "normales" (fuera de nav/botones): dorado oscuro sobre
los paneles claros, para que un enlace nunca se vea con el azul default
del navegador, que desentona con toda la paleta de marca. En el login
(fondo oscuro, ver body.pagina-login más abajo) se sobreescribe por el
dorado brillante, que sí contrasta bien ahí. */
--enlace: var(--color-primario-oscuro);
--color-peligro: #dc2626;
--color-peligro-hover: #b91c1c;
--color-secundario-bg: #eceef1;
--color-secundario-bg-hover: #e2e5ea;
--exito-bg: #dcf3e1;
--exito-texto: #1e7a34;
--peligro-bg: #fbdcdc;
--peligro-texto: #a3231b;
--alerta-bg: #fbe7cf;
--alerta-texto: #8a4b0f;
--info-bg: #dbe9fb;
--info-texto: #1d4f8a;
--radio: 12px;
--radio-chico: 10px;
--radio-panel: 22px;
--radio-pill: 999px;
--sombra: 0 4px 16px rgba(10, 8, 4, 0.08);
--sombra-panel: 0 30px 60px -20px rgba(0, 0, 0, 0.5), 0 10px 25px rgba(0, 0, 0, 0.22);
--transicion: 150ms ease;
--sidebar-ancho: 280px;
--sidebar-ancho-colapsado: 76px;
--topbar-alto: 76px;
}
html, body { height: 100%; }
a { color: var(--enlace); text-decoration: underline; }
a:hover, a:focus { color: var(--color-primario); }
body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
margin: 0;
/* Lienzo de marca: negro/carbón NEUTRO (sin tinte café) como base. En vez
de solo dos brillos dorados arriba, ahora hay una capa de grano muy
sutil (le quita el look "plano de pantalla" y le da textura, como un
panel premium) más varios resplandores a distintas alturas y tamaños
(dorado arriba, un brillo neutro tenue abajo) para que se sienta con
profundidad en vez de un degradado de dos puntos nada más. Este mismo
fondo cubre TODO el layout — sidebar/header incluidos — para que se
sientan una sola superficie continua, no cajas separadas. */
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat,
radial-gradient(1300px 700px at 10% -12%, rgba(212, 175, 55, 0.30) 0%, rgba(212, 175, 55, 0) 55%),
radial-gradient(950px 560px at 92% -8%, rgba(212, 175, 55, 0.17) 0%, rgba(212, 175, 55, 0) 50%),
radial-gradient(1500px 800px at 50% 118%, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 60%),
linear-gradient(180deg, #17171c 0%, #0b0b0d 45%, #030304 100%);
background-attachment: fixed;
color: var(--texto);
-webkit-text-size-adjust: 100%;
}
body.modal-abierto { overflow: hidden; }
img, svg { max-width: 100%; }
/* --- Encabezado: dos piezas, como en la referencia ---
1) .topbar: barra superior de ANCHO COMPLETO (logo a la izquierda, avatar
del usuario a la derecha) — siempre visible arriba de todo.
2) header: en celular es la fila de navegación justo debajo de la topbar;
en pantallas grandes (≥960px) se convierte en la barra lateral fija
(sidebar) con la etiqueta "Sistema de Folios" + los botones de módulo.
Ninguna de las dos tiene un color de fondo "de caja" sólido — son overlays
translúcidos con desenfoque sobre el mismo lienzo oscuro del , para
que todo se sienta una sola superficie continua. */
.topbar {
position: sticky;
top: 0;
z-index: 25;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.7rem 1.25rem;
background: rgba(10, 8, 5, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.header-marca {
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 0;
}
.header-marca img {
height: 70px;
width: 70px;
object-fit: contain;
flex-shrink: 0;
}
.header-marca strong {
font-size: 1.2rem;
font-weight: 800;
letter-spacing: 0.015em;
color: var(--color-primario);
white-space: nowrap;
}
header {
color: var(--chrome-texto-fuerte);
padding: 0.85rem 1.25rem 1.1rem;
}
.nav-etiqueta-fila {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
/* Etiqueta de sección sobre la navegación (equivalente a "MÓDULOS" en Secure
Cloud): letra grande y con peso para que la navegación destaque como
sección propia, no solo texto suelto. Solo aplica en modo sidebar
(pantallas grandes) — en celular el nav ya es autoexplicativo y el
espacio es limitado. */
.nav-etiqueta { display: none; }
@media (min-width: 960px) {
.nav-etiqueta { display: block; }
.nav-etiqueta span {
display: inline-block;
font-size: 1.6rem;
line-height: 1.15;
font-weight: 800;
letter-spacing: 0.005em;
color: var(--chrome-texto-fuerte);
padding-bottom: 0.4rem;
border-bottom: 3px solid var(--color-primario);
}
body.sidebar-colapsado .nav-etiqueta { display: none; }
body.sidebar-colapsado .nav-etiqueta-fila { justify-content: center; }
}
nav {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
align-items: center;
margin-top: 1rem;
}
/* Los enlaces de navegación se ven como botones reales (con contorno sutil
propio, no solo en :hover) — el mismo criterio que los módulos de Secure
Cloud: letra más grande y con peso para que "hagan sentido de su función",
con bastante espacio interno, y un contorno tenue que da separación sin
sentirse como piezas sueltas. */
nav a {
display: inline-flex;
align-items: center;
gap: 0.65rem;
color: var(--chrome-texto);
text-decoration: none;
font-size: 0.98rem;
font-weight: 700;
white-space: nowrap;
padding: 0.85rem 1.05rem;
border-radius: var(--radio-chico);
background: rgba(255, 255, 255, 0.065);
border: 1px solid var(--chrome-borde);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
/* Mismo caso que form.grid-2[hidden] más abajo: "nav a" (display: inline-flex)
tiene más especificidad que el [hidden] { display: none } nativo del
navegador, así que sin esto, un (Usuarios,
Confirmaciones, Auditoría) se queda visible para cualquier rol aunque JS
sí le haya puesto correctamente el atributo hidden — se detectó al
verificar que Auditoría (Paso 37) apareciera SOLO para superadmin. */
nav a[hidden] { display: none; }
nav a svg { width: 21px; height: 21px; flex-shrink: 0; }
nav a:hover, nav a:focus {
background: var(--chrome-hover);
color: var(--color-primario);
}
/* Página actual dentro de la navegación: pastilla con tinte dorado, para que
se note claramente cuál sección está activa (igual que en Secure Cloud). */
nav a.nav-activo {
background: var(--chrome-activo-bg);
border-color: rgba(212, 175, 55, 0.4);
color: var(--color-primario);
}
/* Chevron al final de cada botón de navegación (solo en modo sidebar, como
en Secure Cloud) — un detalle pequeño pero que refuerza que son botones
de módulo, no simples enlaces de texto. */
@media (min-width: 960px) {
nav a::after {
content: "\203A";
margin-left: auto;
font-size: 1.2rem;
line-height: 1;
opacity: 0.55;
}
body.sidebar-colapsado nav a::after { display: none; }
}
.sidebar-toggle {
display: none; /* solo visible en modo sidebar (pantallas grandes) */
background: transparent;
border: 1px solid var(--chrome-borde);
color: var(--chrome-texto-suave);
border-radius: var(--radio-chico);
width: 2.1rem;
height: 2.1rem;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background var(--transicion), color var(--transicion);
}
.sidebar-toggle:hover {
background: var(--chrome-hover);
color: var(--color-primario);
}
.sidebar-toggle svg {
transition: transform var(--transicion);
}
/* --- Menú del usuario (avatar), en la barra superior ---
No es decorativo: es un botón real que abre un menú con acciones de la
cuenta (cambiar mi contraseña, salir) — se inyecta por JS (ver
inicializarMenuUsuario en app-shell.js) para no repetir el mismo bloque en
las 4 páginas autenticadas. Vive en .topbar, arriba a la derecha, igual
que en Secure Cloud — no escondido al fondo de la navegación. */
/* Agrupa avatar + campana como un solo hijo de .topbar (ver
obtenerTopbarDerecha en app-shell.js) — evita que la campana quede
"flotando" centrada cuando .topbar tiene 3 hijos en vez de 2. */
.topbar-derecha { display: flex; align-items: center; gap: 0.65rem; flex-shrink: 0; }
.usuario-menu-envoltura { position: relative; flex-shrink: 0; }
.usuario-actual {
display: flex;
align-items: center;
gap: 0.65rem;
background: transparent;
border: none;
padding: 0.3rem 0.4rem;
border-radius: var(--radio-chico);
cursor: pointer;
color: var(--chrome-texto-fuerte);
font-family: inherit;
text-align: left;
transition: background var(--transicion);
}
.usuario-actual:hover { background: var(--chrome-hover); }
.avatar-iniciales {
flex-shrink: 0;
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primario), var(--color-primario-oscuro));
color: var(--color-primario-texto);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.85rem;
border: 2px solid rgba(255, 255, 255, 0.45);
}
.usuario-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.usuario-nombre {
font-size: 0.92rem;
font-weight: 700;
color: var(--chrome-texto-fuerte);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 11rem;
}
.usuario-rol {
font-size: 0.7rem;
font-weight: 700;
color: var(--color-primario);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.usuario-dropdown {
position: absolute;
top: calc(100% + 0.6rem);
right: 0;
min-width: 220px;
background: var(--bg-panel);
border-radius: var(--radio-chico);
box-shadow: var(--sombra-panel);
overflow: hidden;
z-index: 30;
}
.usuario-dropdown[hidden] { display: none; }
.usuario-dropdown button {
display: flex;
align-items: center;
gap: 0.6rem;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.75rem 0.9rem;
font-size: 0.88rem;
font-weight: 600;
font-family: inherit;
color: var(--texto-fuerte);
cursor: pointer;
white-space: nowrap;
}
.usuario-dropdown button:hover { background: var(--bg-panel-alt); }
.usuario-dropdown button + button { border-top: 1px solid var(--borde); }
/* --- Campana de notificaciones (Paso 34) ---
Mismo patrón que el menú de usuario: se inyecta por JS en .topbar (ver
inicializarCampanaNotificaciones en app-shell.js), a la izquierda del
avatar, con una insignia roja con el número de no leídas. */
.notificaciones-envoltura { position: relative; flex-shrink: 0; }
.btn-campana {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 2.4rem;
height: 2.4rem;
background: transparent;
border: none;
border-radius: 50%;
cursor: pointer;
color: var(--chrome-texto-fuerte);
transition: background var(--transicion);
}
.btn-campana:hover { background: var(--chrome-hover); }
.badge-campana {
position: absolute;
top: 0.1rem;
right: 0.1rem;
min-width: 1.1rem;
height: 1.1rem;
padding: 0 0.25rem;
border-radius: 999px;
background: var(--peligro-texto, #c0392b);
color: #fff;
font-size: 0.65rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.badge-campana[hidden] { display: none; }
.notificaciones-dropdown {
position: absolute;
top: calc(100% + 0.6rem);
right: 0;
min-width: 300px;
max-width: 360px;
max-height: 400px;
overflow-y: auto;
background: var(--bg-panel);
border-radius: var(--radio-chico);
box-shadow: var(--sombra-panel);
z-index: 30;
}
.notificaciones-dropdown[hidden] { display: none; }
.notificacion-item {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.7rem 0.9rem;
text-decoration: none;
border-bottom: 1px solid var(--borde);
color: var(--texto-fuerte);
}
.notificacion-item:hover { background: var(--bg-panel-alt); }
.notificacion-item--no-leida { background: var(--info-bg); }
.notificacion-mensaje { font-size: 0.85rem; font-weight: 600; }
.notificacion-fecha { font-size: 0.72rem; color: var(--chrome-texto-fuerte); opacity: 0.7; }
.notificaciones-vacio {
padding: 1rem;
font-size: 0.85rem;
text-align: center;
color: var(--texto-tenue, #8a7f6a);
}
@media (max-width: 480px) {
/* En celular muy angosto solo se muestra el avatar (sin nombre/rol), para
no saturar la barra superior junto con el logo. */
.usuario-info { display: none; }
}
/* --- Layout --- */
main {
margin: 0;
padding: 1.5rem 1.75rem 2.5rem;
width: 100%;
}
/* El login trae su propio
inline. Ese inline solo pisa margin-top (no es el shorthand "margin"), así
que sin esta regla se queda con margin-left/right en 0 (heredado de la
regla genérica de arriba) y la tarjeta se ve pegada a la izquierda en vez
de centrada. Esto centra horizontalmente solo en el login, sin tocar el
layout de las páginas con sidebar. */
body.pagina-login main {
margin-left: auto;
margin-right: auto;
}
@media (min-width: 960px) {
body {
padding-left: var(--sidebar-ancho);
padding-top: var(--topbar-alto);
transition: padding-left 180ms ease;
}
body.sidebar-colapsado { padding-left: var(--sidebar-ancho-colapsado); }
/* El login (.pagina-login) no tiene topbar/sidebar — es solo la tarjeta
centrada. Sin este reset, heredaba el padding del resto de las páginas
y la tarjeta terminaba centrada dentro del espacio "restante" en vez del
viewport completo: se veía descentrada en vez de centrada de verdad. */
body.pagina-login { padding-left: 0; padding-top: 0; }
.topbar {
position: fixed;
inset: 0 0 auto 0;
height: var(--topbar-alto);
padding: 0 1.75rem;
/* Antes esto era "background: none", pensado para que se viera
exactamente igual que el lienzo oscuro del detrás, sin costura
con el sidebar. El problema: al ser realmente transparente, en cuanto
el contenido tenía más de una pantalla de alto, el panel BLANCO se
"asomaba" detrás de la topbar fija al hacer scroll — ahí es donde el
avatar se veía mezclado con el panel. La solución es pintar aquí el
MISMO fondo del (mismo grano + resplandores + degradado) pero
de forma opaca y propia, para que nunca se vea nada de lo que hay
scrolleado debajo, sin perder la sensación de "misma superficie" con
el sidebar. Si el fondo del cambia, hay que replicar el cambio
aquí también (son las dos únicas copias). */
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat,
radial-gradient(1300px 700px at 10% -12%, rgba(212, 175, 55, 0.30) 0%, rgba(212, 175, 55, 0) 55%),
radial-gradient(950px 560px at 92% -8%, rgba(212, 175, 55, 0.17) 0%, rgba(212, 175, 55, 0) 50%),
radial-gradient(1500px 800px at 50% 118%, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 60%),
linear-gradient(180deg, #17171c 0%, #0b0b0d 45%, #030304 100%);
background-attachment: fixed;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
header {
position: fixed;
inset: var(--topbar-alto) auto 0 0;
width: var(--sidebar-ancho);
height: calc(100vh - var(--topbar-alto));
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
padding: 1.5rem 1.1rem;
overflow-y: auto;
transition: width 180ms ease;
}
body.sidebar-colapsado header { width: var(--sidebar-ancho-colapsado); }
.sidebar-toggle {
display: inline-flex;
}
nav {
flex-direction: column;
align-items: stretch;
gap: 0.6rem;
/* Marco general que envuelve TODO el bloque de módulos, además del
contorno individual de cada botón — igual que se pidió: una tarjeta
que agrupa Folios/Nuevo folio/Usuarios/Exportar Excel y los separa
visualmente del resto del sidebar, sin dejar de sentirse una sola
superficie (el fondo del marco es apenas un tono más claro que el
lienzo de atrás, no una caja sólida distinta). */
padding: 0.6rem;
border: 1px solid var(--chrome-borde);
border-radius: var(--radio);
background: rgba(255, 255, 255, 0.02);
}
body.sidebar-colapsado nav {
padding: 0.6rem 0.4rem;
}
nav a, nav .btn {
width: 100%;
justify-content: flex-start;
}
body.sidebar-colapsado .nav-label {
display: none;
}
body.sidebar-colapsado nav a,
body.sidebar-colapsado nav .btn {
justify-content: center;
padding-left: 0;
padding-right: 0;
}
body.sidebar-colapsado .sidebar-toggle svg { transform: rotate(180deg); }
}
/* --- Panel único de contenido ---
.card: panel independiente de una sola pieza (lo usa únicamente el login).
.panel + .panel-seccion: el patrón que usan folios/folio-nuevo/folio-
detalle/usuarios — TODO el contenido de una pantalla vive dentro de un
solo panel flotante; las distintas secciones (p. ej. "Filtros" y "Listado
de folios") ya no son cajas independientes con su propio borde y sombra,
solo se separan entre sí con una línea divisoria sutil. Así se lee como
un sistema único, no como piezas sueltas. */
.card, .panel {
background: var(--bg-panel);
border-radius: var(--radio-panel);
box-shadow: var(--sombra-panel);
}
.card { padding: 1.75rem; margin-bottom: 1.5rem; }
/* Antes .panel tenía overflow:hidden para redondear las esquinas de sus
.panel-seccion hijas — pero eso también recorta el popup nativo de
cualquier