/* ── VARIABLES DE TEMA ─────────────────────────────────── */
:root {
--bg: #eef0f3; /* antes #f4f5f7 — muy cerca de --card-bg (#fafbfc), las tarjetas se veían "sin fondo" */
--bg-rgb: 238,240,243; /* mismo color que --bg, en componentes r,g,b — para poder usarlo con alpha (rgba) */
--sidebar-bg: #1a1f36;
--sidebar-text: #aab6c6; /* antes #a0aec0 (7.20:1) — +10% de contraste real (7.92:1), mismo matiz */
--sidebar-active:#2d3561;
--accent: #00aeff;
--accent-text: #075985; /* accent usado como texto — AAA en modo claro (var(--accent) solo pasa 2.47:1) */
--card-bg: #fafbfc;
--card-shadow: 0 2px 8px rgba(0,0,0,0.07);
--text: #1a1f36;
--text-soft: #475569; /* antes #718096 (3.58:1/4.02:1, reprobaba AA) */
--text-label: #4a5568;
--border: #9aa5b7; /* antes #d5dbe3 (1.28:1) — tarjetas/inputs no se distinguían del fondo (ej. Gastos Operativos, Router) */
--table-head: #1a1f36;
--table-even: rgba(181,204,236,0.35); /* B5CCEB — más notorio que CBD5E1 */
--table-hover: #edf2f7;
--input-bg: white;
--modal-bg: white;
--code-bg: #edf2f7;
}
[data-theme="dark"] {
--bg: #0f1117;
--bg-rgb: 15,17,23; /* mismo color que --bg, en componentes r,g,b — para poder usarlo con alpha (rgba) */
--sidebar-bg: #0a0d1a;
--sidebar-text: #79879c; /* antes #718096 (4.82:1, raspando el mínimo AA) — +10% de contraste real (5.30:1), mismo matiz */
--sidebar-active:#1a1f36;
--accent: #00aeff;
--accent-text: var(--accent); /* en oscuro el acento ya pasa AAA (7.64:1/6.57:1), no necesita variante */
--card-bg: #1a1f36;
--card-shadow: 0 2px 16px rgba(0,0,0,0.4);
--text: #e2e8f0;
--text-soft: #9aa8bd; /* antes #718096 (4.04:1 vs tarjeta, reprobaba AA) */
--text-label: #a0aec0;
--border: rgba(255,255,255,0.08);
--table-head: #0a0d1a;
--table-even: #151929;
--table-hover: #1e2338;
--input-bg: rgba(255,255,255,0.05);
--modal-bg: #1a1f36;
--code-bg: rgba(0,0,0,0.3);
}
/* ── RESET ─────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Red de seguridad: cualquier ![]()
sin tamaño explícito (foto subida,
miniatura, contenido embebido a futuro) nunca debe poder ser más
ancha que su contenedor — sin esto, una sola imagen sin restricción
puede forzar scroll horizontal en toda la página. Los ![]()
que ya
fijan su propio ancho/alto (logo, QR, íconos del editor de topología)
no se ven afectados: max-width no reduce nada que ya sea más chico. */
img { max-width: 100%; height: auto; }
/* Cambio de tema instantáneo: mientras lleva esta clase (ver
toggleTheme() en base.html), se anulan TODAS las transiciones para
que el fondo/tarjetas/tabla/botones cambien al mismo tiempo, sin el
desfase de 0.2-0.3s que arrastraban por sus propias reglas de hover. */
.theme-switching,
.theme-switching * {
transition: none !important;
}
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background: var(--bg);
color: var(--text);
font-weight: 400;
letter-spacing: 0.1px;
line-height: 1.6;
transition: background 0.3s, color 0.3s;
}
/* ── LAYOUT ────────────────────────────────────────────── */
.layout { display: flex; min-height: 100vh; }
/* ── SIDEBAR ───────────────────────────────────────────── */
.sidebar {
width: 230px;
background: var(--sidebar-bg);
padding: 18px 0;
position: fixed;
height: 100vh;
display: flex;
flex-direction: column;
z-index: 100;
transition: transform 0.3s ease;
border-right: 1px solid rgba(0,174,255,0.1);
box-shadow: 4px 0 24px rgba(0,0,0,0.18);
}
.sidebar-logo {
padding: 0 24px 22px;
display: flex;
align-items: center;
gap: 10px;
}
.logo-circle-sm {
width: 36px;
height: 36px;
background: linear-gradient(135deg, #00aeff, #0082cc);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
box-shadow: 0 4px 12px rgba(0,174,255,0.3);
}
.logo-text {
font-size: 1.1rem;
font-weight: 700;
color: white;
letter-spacing: 0.5px;
}
.sidebar-logo-img {
max-height: 40px;
max-width: 190px;
object-fit: contain;
}
nav {
flex: 1; min-height: 0; overflow-y: auto;
padding: 0 12px;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.15) transparent;
}
nav::-webkit-scrollbar { width: 6px; }
nav::-webkit-scrollbar-track { background: transparent; }
nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 10px; }
nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
/* Padding vertical comprimido a propósito (antes 11px) — ver nota en
.nav-subitem: este es el ítem "siempre visible" (Dashboard, Soporte, la
cabecera de cada módulo), el que más pesa en el alto total del menú
incluso con todo colapsado. En un 13" real (13"≈620-780px de viewport
útil) el menú de antes ya necesitaba scroll interno con todo cerrado
(~855px); comprimiendo justo estos renglones fijos entra sin scroll en
la mayoría de pantallas chicas sin tocar la comodidad de los sub-ítems,
que son los que de verdad se clickean seguido. */
.nav-item {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 7px 14px;
color: var(--sidebar-text);
text-decoration: none;
border-radius: 10px;
margin-bottom: 2px;
font-size: 0.88rem;
font-weight: 400;
letter-spacing: 0.3px;
transition: all 0.2s;
}
.nav-item:hover {
background: rgba(0,174,255,0.12);
color: #e2e8f0;
}
/* Riel de acento en el ítem activo (también aplica a .nav-subitem) —
inset más chico (antes 8px) para que el riel siga viéndose proporcional
ahora que el ítem mide menos de alto. */
.nav-item.active::before,
.nav-subitem.active::before {
content: "";
position: absolute;
left: -12px; top: 6px; bottom: 6px; width: 3px;
border-radius: 0 3px 3px 0;
background: var(--accent);
box-shadow: 0 0 8px rgba(0,174,255,0.7);
}
.nav-item.active {
background: linear-gradient(135deg, rgba(0,174,255,0.2), rgba(0,130,204,0.15));
color: white;
border: 1px solid rgba(0,174,255,0.25);
}
/* ── TOGGLE MODO OSCURO ────────────────────────────────── */
.theme-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 24px;
margin-bottom: 6px;
color: var(--sidebar-text);
font-size: 0.82rem;
font-weight: 300;
}
.switch { position: relative; width: 40px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
position: absolute;
inset: 0;
background: #2d3748;
border-radius: 22px;
cursor: pointer;
transition: 0.3s;
}
.slider:before {
content: "";
position: absolute;
width: 16px; height: 16px;
left: 3px; bottom: 3px;
background: white;
border-radius: 50%;
transition: 0.3s;
}
input:checked + .slider { background: var(--accent); }
input:checked + .slider:before { transform: translateX(18px); }
/* ── SIDEBAR FOOTER ────────────────────────────────────── */
.sidebar-footer {
padding: 10px 24px;
border-top: 1px solid rgba(255,255,255,0.06);
}
/* Usuario clickeable — abre un menú con "Cambiar contraseña" y "Cerrar
sesión" en vez de tener el logout como botón siempre visible. */
.user-menu { position: relative; margin-bottom: 10px; }
.usuario-activo {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
font-size: 0.8rem;
font-weight: 300;
color: var(--sidebar-text);
letter-spacing: 0.3px;
background: none;
border: none;
padding: 4px 2px;
border-radius: 8px;
cursor: pointer;
font-family: inherit;
transition: background 0.15s, color 0.15s;
}
.usuario-activo:hover,
.usuario-activo[aria-expanded="true"] {
background: rgba(255,255,255,0.06);
color: #e2e8f0;
}
.usuario-activo-nombre {
flex: 1;
min-width: 0;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-menu-caret {
width: 13px;
height: 13px;
flex-shrink: 0;
opacity: 0.6;
transition: transform 0.15s;
}
.usuario-activo[aria-expanded="true"] .user-menu-caret { transform: rotate(180deg); }
.user-menu-pop {
display: none;
position: absolute;
left: 0;
right: 0;
bottom: calc(100% + 6px);
background: #1a1f36;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
padding: 6px;
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
z-index: 30;
}
.user-menu-pop.open { display: block; }
.user-menu-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 9px;
background: none;
border: none;
border-radius: 7px;
color: var(--sidebar-text);
font-size: 0.78rem;
font-weight: 400;
font-family: inherit;
text-align: left;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.user-menu-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.85; }
.user-menu-item:hover { background: rgba(0,174,255,0.12); color: #e2e8f0; }
.user-menu-item-danger { color: #fc8181; }
.user-menu-item-danger:hover { background: rgba(229,62,62,0.15); color: #feb2b2; }
.sidebar-clock {
margin-top: 6px;
text-align: center;
border-top: 1px solid rgba(255,255,255,0.05);
padding-top: 6px;
}
#clock-time {
font-size: 1rem;
font-weight: 500;
color: #e2e8f0;
letter-spacing: 1px;
font-variant-numeric: tabular-nums;
}
#clock-date {
font-size: 0.68rem;
color: rgba(255,255,255,0.4);
font-weight: 300;
margin-top: 2px;
letter-spacing: 0.3px;
}
/* Celular en horizontal (alto de pantalla ~360-430px): el logo + pie de
página (toggle, usuario, cerrar sesión, reloj) son alto fijo y le
dejaban a