/* styles.css — Emabel Finanzas.
Shell (topbar + sidebar colapsable) tomado del mismo lenguaje visual que SuperAdmin
(workers/sadm/src/index.js, bloque "SHELL EMABEL v1"): tema oscuro, acento naranja,
sidebar de 56px que se expande al hover, breakpoint a barra inferior en móvil. */
/* Base tipográfica en 15px (en vez del 16px del navegador): todo font-size del archivo
está en rem, así que esto baja la letra ~6.25% de punta a punta sin tocar declaración
por declaración (Patricio, 10-sep-2026: "levemente más pequeñas, pero muy poco").
padding/margin/gap/border-radius y las variables de layout (--sb, --sb-open, --topbar)
se quedan en px a propósito: solo la letra baja, las cajas no se mueven. */
html { font-size: 15px; }
:root {
color-scheme: dark;
--acc: #fb923c;
--acc-soft: #fdba74;
--bg: #0c0c0e;
--bg2: #121215;
--panel: #16161a;
--panel2: #121215;
--border: #2a2a30;
--border-soft: #222226;
--text: #eef2f6;
--muted: #9a9aa2;
--muted2: #6f6f78;
--verde: #86efac;
--rojo: #f87171;
--sb: 56px;
--sb-open: 208px;
--topbar: 48px;
/* Curva propia para las transiciones de interacción (botones, chips, filas): salida
rápida y llegada suave, más sobria que el ease-out plano por defecto. */
--ease: cubic-bezier(.2, .7, .3, 1);
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
font-feature-settings: "cv11", "ss01";
-webkit-font-smoothing: antialiased;
background: var(--bg);
color: var(--text);
line-height: 1.55;
min-height: 100vh;
}
a { color: inherit; }
.hidden { display: none !important; }
button { font: inherit; }
/* ---------- topbar ---------- */
.top {
display: flex; align-items: center; gap: 10px; height: var(--topbar);
padding: 0 16px 0 0; border-bottom: 1px solid var(--border-soft);
position: fixed; top: 0; left: 0; right: 0; background: var(--bg2); z-index: 30;
}
.top .marca { display: flex; align-items: center; gap: 0; flex: 0 0 auto; }
.top .marca .cubo {
width: var(--sb); height: var(--topbar);
display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.top .marca .cubo svg { width: 22px; height: 22px; display: block; }
/* El emblema real (PNG del render 3D) sustituye al SVG dibujado: mismo símbolo que la app y el
favicon. Un poco mayor que el svg porque el hexágono lleva aire propio dentro del PNG. */
.top .marca .cubo .cubo-img { width: 26px; height: 26px; display: block; object-fit: contain; }
.top .marca .rot { display: flex; flex-direction: column; line-height: 1.15; }
.top .marca .rot b { font-size: .8438rem; font-weight: 700; letter-spacing: .2px; color: var(--text); }
.top .sub { font-size: .6563rem; color: var(--muted2); font-weight: 500; letter-spacing: .1px; }
.top .sp { flex: 1; }
.top .who { font-size: .75rem; color: var(--muted); margin-right: 12px; }
/* ---------- sidebar ---------- */
.sb {
position: fixed; top: var(--topbar); left: 0; bottom: 0; width: var(--sb);
background: var(--bg2); border-right: 1px solid var(--border-soft);
display: flex; flex-direction: column; padding: 8px 0; z-index: 40;
transition: width .16s ease; overflow: hidden;
}
.sb:hover { width: var(--sb-open); box-shadow: 14px 0 40px -14px #000c; }
.sb-item {
display: flex; align-items: center; gap: 0; height: 38px; margin: 1px 8px; padding: 0;
border-radius: 8px; cursor: pointer; color: var(--muted); border: 0; background: transparent;
width: calc(100% - 16px); text-align: left; transition: background .12s var(--ease), color .12s var(--ease);
white-space: nowrap; text-decoration: none;
}
.sb-item .ic { width: 40px; flex: 0 0 40px; display: flex; align-items: center; justify-content: center; }
.sb-item .ic svg { width: 17px; height: 17px; display: block; }
.sb-item .tx { font-size: .8125rem; font-weight: 500; opacity: 0; transition: opacity .13s; pointer-events: none; }
.sb:hover .sb-item .tx { opacity: 1; }
.sb-item:hover { background: #ffffff0a; color: var(--text); }
.sb-item.activo { background: #fb923c14; color: var(--acc-soft); }
.sb-item.activo .tx { font-weight: 600; }
.sb-item:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.sb-sep { height: 1px; background: var(--border-soft); margin: 8px 12px; }
.sb-sp { flex: 1; }
/* ---------- chevron de "Clientes" (pliega/despliega el sub-menú) ---------- */
/* margin-left:auto lo empuja al borde derecho del ítem: sin esto el clic en el CENTRO
geométrico del (donde un usuario clickearía por defecto) cae sobre el chevron en
vez de navegar, porque .tx no ocupa todo el ancho disponible (bug detectado con
Playwright: elementFromPoint en el centro del devolvía el