@import url("fuente.css");
:root{
  --header-bg:#2c3e50; --header-bg2:#22303d;
  --accent:#00d1b2; --accent-dark:#00b89c;
  --salir:#ff6b6b; --body-bg:#eef2f5;
  --side-w:264px; --text:#2c3e50; --muted:#8a98a5;
  /* Ancho del menú plegado: el riel de iconos. Fijo y no un %, porque lo que
     tiene que entrar es un icono con aire, y eso no cambia con la pantalla. */
  --rail-w:58px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;font-family:var(--fuente,'Segoe UI',sans-serif);font-size:13px;color:var(--text)}

/* ===== LOGIN ===== */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:linear-gradient(135deg,#2c3e50,#1a2733)}
.login-card{background:#fff;width:340px;max-width:90vw;padding:34px 30px;border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);display:flex;flex-direction:column}
.login-logo{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:var(--header-bg);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px}
.login-card h1{font-size:18px;text-align:center;margin:0 0 18px;font-weight:600}
.login-card label{font-size:12px;color:var(--muted);margin:10px 0 4px;font-weight:600}
.login-card input{padding:11px 12px;border:1px solid #d8e0e6;border-radius:9px;font-size:14px;outline:none}
.login-card input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,209,178,.15)}
.login-card button{margin-top:20px;padding:12px;border:none;border-radius:9px;background:var(--accent);
  color:#fff;font-weight:700;font-size:14px;cursor:pointer;display:flex;gap:8px;justify-content:center;align-items:center}
.login-card button:hover{background:var(--accent-dark)}
.login-error{background:#ffe8e8;color:#c0392b;padding:9px 12px;border-radius:8px;font-size:12.5px;margin-bottom:6px}

/* ===== SHELL ===== */
.shell-body{display:flex;height:100vh;overflow:hidden;background:var(--body-bg)}
.sidebar{width:var(--side-w);min-width:var(--side-w);background:var(--header-bg);color:#cfd8e0;
  display:flex;flex-direction:column;height:100vh;
  transition:width .22s ease, min-width .22s ease}
/* Las dos acciones de la cabecera, una en cada punta: pantalla completa a la
   izquierda y el chevron que pliega a la derecha. */
.sidebar-head{padding:12px 10px;color:#fff;display:flex;gap:8px;
  align-items:center;justify-content:space-between;background:var(--header-bg2)}
.head-btn{background:none;border:none;color:#cfd8e0;cursor:pointer;font-size:15px;padding:6px 8px;border-radius:6px}
.head-btn:hover{background:rgba(255,255,255,.12);color:#fff}
/* El chevron va más chico que el de pantalla completa: es un control
   secundario y con el mismo cuerpo competía con el otro. */
#toggleSidebar{font-size:11px}

/* ===== MENÚ PLEGADO A RIEL =====
   No se esconde: queda un riel angosto con los iconos a la vista.
   Se muestran las SECCIONES, no las hojas sueltas: aplanarlas hacía perder de
   qué sección cuelga cada cosa. Al pasar el mouse por el icono de una sección
   sale su submenú flotante, encabezado con el nombre de la sección. */
.shell-body.rail .sidebar{width:var(--rail-w);min-width:var(--rail-w)}
/* Los dos botones siguen uno al lado del otro, nunca apilados. */
.shell-body.rail .sidebar-head{justify-content:center;gap:2px;padding:10px 2px}
.shell-body.rail .head-btn{padding:6px 5px}
.shell-body.rail .sidebar-search,
.shell-body.rail .sidebar-system-filter{display:none}

/* Son 6 iconos: no hace falta scroll, y sin scroll el submenú flotante puede
   salirse del riel sin que nada lo recorte. Ese `overflow:visible` es lo que
   antes faltaba y por eso el tooltip no aparecía nunca. */
.shell-body.rail .sidebar-nav{overflow:visible}
.shell-body.rail .menu-section{position:relative}
.shell-body.rail .menu-item{justify-content:center;padding:12px 0;gap:0;border-left-width:0;overflow:visible}
.shell-body.rail .menu-item > span{display:none}
.shell-body.rail .menu-item i:first-child{width:auto;font-size:16px}
.shell-body.rail .menu-item .caret,
.shell-body.rail .fase2-tag{display:none}

/* ===== EL PANEL DEL RIEL =====
   UN SOLO panel por sección, de ancho fijo, con el subárbol ENTERO adentro.
   No hay cascada: el panel de una sección de tercer nivel se dibuja dentro de
   este mismo, con el mismo tono que en el menú desplegado. Así el menú no
   crece hacia la derecha por más niveles que tenga — antes cada nivel sumaba
   212px y al quinto se salía de una pantalla de 1024, recortado y sin scroll,
   porque .shell-body tiene overflow:hidden. */
/* Ancla en .level-1 y no en el recorrido de hijos: SOLO el primer submenú
   flota. Los de más adentro caen en la regla de abajo (:not(.level-1)) y se
   quedan quietos. Sin esto los dos selectores empatan en especificidad y el
   último gana, que le pondría position:static al panel y no flotaría nunca. */
.shell-body.rail .menu-list.level-1{
  /* El panel no lleva ni el margen ni la línea: es una caja aparte, no un
     bloque anidado dentro del menú. Los de ADENTRO sí las llevan. */
  margin-left:0;border-left:0;
  position:absolute;left:100%;top:0;width:224px;max-height:none;
  background:var(--header-bg2);border-radius:0 8px 8px 0;
  box-shadow:0 10px 30px rgba(0,0,0,.45);padding:0 0 6px;overflow:visible;
  opacity:0;visibility:hidden;transform:translateX(-6px);
  transition:opacity .12s ease, transform .12s ease;z-index:400}
.shell-body.rail .menu-section:hover > .menu-list.level-1{
  opacity:1;visibility:visible;transform:none}
/* El encabezado dice de qué sección son los ítems de abajo. */
.shell-body.rail .menu-list.level-1::before{
  content:attr(data-seccion);display:block;padding:10px 16px 8px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:4px}

/* Adentro del panel los ítems vuelven a ser normales: icono + texto. */
.shell-body.rail .menu-list .menu-item{justify-content:flex-start;padding:8px 16px;gap:10px}
.shell-body.rail .menu-list .menu-item > span{display:block}
.shell-body.rail .menu-list .menu-item i:first-child{width:16px;font-size:13px}

/* Los sub-niveles DENTRO del panel van SIEMPRE abiertos: el panel aparece al
   pasar el mouse y se va al salir, así que pedir un click para desplegar sería
   pelearle al gesto. Se muestra el subárbol completo, oscurecido por nivel
   igual que en el menú desplegado. Nada se va al costado. */
.shell-body.rail .menu-list:not(.level-0):not(.level-1){
  position:static;width:auto;background:rgba(0,0,0,.12);box-shadow:none;border-radius:0;
  opacity:1;visibility:visible;transform:none;padding:0;
  max-height:none;overflow:visible;transition:none}
/* El encabezado del sub-nivel se marca como tapa de su bloque. */
.shell-body.rail .menu-list.level-1 .menu-item.is-section{background:rgba(0,0,0,.22);color:#fff}
/* Sin caret: no hay nada que plegar acá, ya está todo a la vista. */
.shell-body.rail .menu-list .menu-item .caret{display:none}

/* Plegado a riel se ven SOLO los iconos de las secciones, y el borde izquierdo
   está en 0 (regla de arriba): la marca de "acá estás parado" tiene que ser el
   icono. En el riel se pinta el de la sección; dentro del panel flotante manda
   la barra, como en el menú desplegado. */
.shell-body.rail .sidebar-nav > .menu-list > .menu-section > .menu-item.is-section.tiene-activo{
  background:rgba(0,209,178,.14)}
.shell-body.rail .sidebar-nav > .menu-list > .menu-section > .menu-item.is-section.tiene-activo i:first-child{
  color:var(--accent)}
.shell-body.rail .menu-list.level-1 .menu-item.is-section.tiene-activo{border-left:3px solid var(--accent)}
/* Adentro del panel la sangría la hace el margen del <ul> anidado, igual que
   en el menú desplegado. Acá había un padding-left extra que ahora sumaría
   dos veces. */

/* Tooltip para los iconos que NO son sección (hoy solo "Salir", en el pie).
   Las secciones no lo necesitan: su submenú ya se encabeza con el nombre. */
.shell-body.rail .sidebar-foot{overflow:visible}
.shell-body.rail .sidebar-foot .menu-item[data-tip]{position:relative}
.shell-body.rail .sidebar-foot .menu-item[data-tip]::after{
  content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);
  background:#0f1a24;color:#fff;font-size:12px;font-weight:500;white-space:nowrap;
  padding:6px 10px;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transition:opacity .12s ease;z-index:400;pointer-events:none}
.shell-body.rail .sidebar-foot .menu-item[data-tip]:hover::after{opacity:1;visibility:visible}
.sidebar-search{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--header-bg2)}
.sidebar-search i{color:var(--muted)}
.sidebar-search input{flex:1;background:#1a2733;border:1px solid #36485a;border-radius:7px;color:#fff;
  padding:7px 9px;font-size:12.5px;outline:none}

/* ===== MULTI-SISTEMA (MENÚ Y BADGES) ===== */
.sidebar-system-filter{display:flex;gap:4px;padding:8px 10px;background:#15202b;border-bottom:1px solid #283747;overflow-x:auto}
.sidebar-system-filter::-webkit-scrollbar{height:4px}
.sidebar-system-filter::-webkit-scrollbar-thumb{background:#36485a;border-radius:2px}
.sys-filter-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:12px;font-size:11px;
  font-weight:600;color:#a0b0bf;background:rgba(255,255,255,.05);border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:all .15s ease}
.sys-filter-btn:hover{color:#fff;background:rgba(255,255,255,.12)}
.sys-filter-btn.active{color:#fff;background:var(--accent);border-color:var(--accent)}

.menu-system-group{margin-bottom:8px}
.menu-system-header{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;color:#fff;background:rgba(0,0,0,.3);border-left:4px solid var(--accent);
  border-bottom:1px solid rgba(255,255,255,.06)}
.menu-system-header.sys-badge-cemcia{border-left-color:#00d1b2;background:#1a2733}
.menu-system-header.sys-badge-qenqo{border-left-color:#2ecc71;background:#143e2e}
.menu-system-header.sys-badge-contable{border-left-color:#9b59b6;background:#2d143e}
.sys-header-tag{margin-left:auto;font-size:9.5px;padding:2px 6px;border-radius:10px;background:rgba(255,255,255,.15);font-weight:600}

.sys-badge-cemcia{background:#1f2d3a;color:#00d1b2;border:1px solid #00d1b2}
.sys-badge-qenqo{background:#144d34;color:#2ecc71;border:1px solid #2ecc71}
.sys-badge-contable{background:#3c184e;color:#b57edc;border:1px solid #9b59b6}

.sidebar-nav{flex:1;overflow-y:auto;padding:6px 0}
.sidebar-nav::-webkit-scrollbar{width:7px}
.sidebar-nav::-webkit-scrollbar-thumb{background:#46586a;border-radius:4px}
.menu-list{list-style:none;margin:0;padding:0}

/* ===== PROFUNDIDAD POR TONO =====
   Cada submenú lleva el MISMO negro translúcido, y como los <ul> están
   anidados en el DOM los fondos se apilan solos: nivel 1 al 12%, nivel 2 a
   ~23%, nivel 3 a ~32%. Una sola regla y sin límite de profundidad — que es
   justo lo que la sangría no podía dar, porque necesitaba una regla por nivel
   y se comía el ancho de la sidebar.
   La sangría queda, pero chica (8px por nivel) y como refuerzo del tono, no
   como la única pista. */
.menu-list:not(.level-0){max-height:0;overflow:hidden;background:rgba(0,0,0,.12);
  transition:max-height .28s ease;
  /* LA LÍNEA GUÍA. El tono decía "esto está más adentro" pero no decía
     "adentro DE QUÉ": no había nada que atara los hijos al padre. La línea
     baja pegada al grupo y lo dibuja.
     El margen es lo que la corre hacia adentro, y como los <ul> están
     anidados se acumula solo — 16px, 32px, 48px — igual que el tono. Por eso
     se fueron las reglas .level-1 .. .level-4: la sangría ya no tiene tope. */
  margin-left:16px;border-left:2px solid rgba(255,255,255,.13)}
.menu-section.open>.menu-list{max-height:1500px}
/* Con el margen haciendo la sangría, el ítem anidado no necesita la suya. */
.menu-list:not(.level-0) .menu-item{padding-left:12px}

.menu-item{display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;font-size:13px;
  color:#cfd8e0;text-decoration:none;border-left:3px solid transparent;white-space:nowrap;overflow:hidden}
.menu-item i:first-child{width:16px;text-align:center;font-size:13px}
.menu-item span{flex:1;overflow:hidden;text-overflow:ellipsis}
.menu-item:hover{background:rgba(255,255,255,.07);color:#fff}
.menu-item.is-leaf.active{background:var(--accent);color:#fff;border-left-color:#fff}

/* La sección ABIERTA se marca: es el encabezado del bloque oscuro de abajo y
   tiene que leerse como su tapa, no como un ítem más de la lista. */
.menu-section.open>.menu-item.is-section{background:rgba(0,0,0,.22);color:#fff}

/* La sección que CONTIENE la pantalla activa. Es una marca distinta de la de
   arriba: "abierta" es cómo está el menú, "tiene-activo" es dónde estás parado,
   y con la sección cerrada —o con el menú plegado a riel— es lo único que lo
   dice. Se marca con la barra y el icono en el color de acento, no con el fondo
   lleno de la hoja activa: es el camino hasta donde estás, no el lugar. */
.menu-item.is-section.tiene-activo{border-left-color:var(--accent);color:#fff}
.menu-item.is-section.tiene-activo > i:first-child{color:var(--accent)}

.level-1 .menu-item{font-size:12.5px}
.menu-item .caret{font-size:10px;transition:transform .15s;color:var(--muted)}
.menu-section.open>.menu-item .caret{transform:rotate(90deg)}

/* Pie del sidebar: Salir (texto idéntico a los ítems del menú; ícono rojo) */
.sidebar-foot{border-top:1px solid #1a2733;background:var(--header-bg)}
.logout-item i:first-child{color:var(--salir)}

.main{flex:1;display:flex;flex-direction:column;height:100vh;min-width:0}
.topbar{height:50px;background:#fff;border-bottom:1px solid #e2e8ee;display:flex;align-items:center;
  gap:14px;padding:0 16px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.icon-btn{background:none;border:none;font-size:16px;color:var(--text);cursor:pointer;padding:6px}
.topbar-title{font-weight:600;font-size:14px;flex:1}
.topbar-actions{display:flex;align-items:center;gap:6px}
.topbar-user{display:flex;align-items:center;gap:8px;color:var(--text);font-size:13px;
  padding-left:10px;margin-left:4px;border-left:1px solid #e2e8ee}
.topbar-user .fa-circle-user{font-size:20px;color:var(--header-bg)}

/* Zoom de la app */
.zoom-control{display:flex;align-items:center;gap:2px;background:#f3f6f9;border:1px solid #e2e8ee;
  border-radius:8px;padding:1px}
.zoom-label{border:none;background:none;font-size:11.5px;font-weight:600;color:var(--text);
  width:42px;cursor:pointer;padding:4px 0}
.zoom-label:hover{color:var(--accent-dark)}

/* Notificaciones */
.notif-wrap{position:relative}
.notif-panel{position:absolute;top:calc(100% + 8px);right:0;width:260px;background:#fff;
  border:1px solid #e2e8ee;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12);
  z-index:50;display:none;overflow:hidden}
.notif-panel.open{display:block}
.notif-head{padding:10px 14px;font-weight:600;font-size:13px;border-bottom:1px solid #eef2f5;
  background:#f8fafb}
.notif-empty{padding:26px 14px;text-align:center;color:var(--muted);display:flex;flex-direction:column;
  align-items:center;gap:8px;font-size:12.5px}
.notif-empty i{font-size:26px;color:#cdd6de}

/* ===== TABS de apps abiertas ===== */
.tabbar-container{background:#e4e9ee;border-bottom:1px solid #d2dae1;display:flex;flex-direction:column}
.tabbar-sys-filter{display:flex;align-items:center;gap:6px;padding:5px 12px;background:#dadfe4;border-bottom:1px solid #ccd3da;font-size:11.5px}
.tab-filter-label{color:#606f7b;font-weight:600;display:flex;align-items:center;gap:4px}
.tab-sys-btn{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;font-size:11px;
  font-weight:600;color:#4a5568;background:#fff;border:1px solid #cbd5e0;cursor:pointer;transition:all .12s ease}
.tab-sys-btn:hover{background:#edf2f7;color:#1a202c}
.tab-sys-btn.active{background:#2c3e50;color:#fff;border-color:#2c3e50}
.sys-tab-count{background:rgba(0,0,0,.12);padding:1px 5px;border-radius:8px;font-size:9.5px;margin-left:2px}

.tabbar{display:flex;align-items:flex-end;gap:2px;background:#e4e9ee;padding:6px 8px 0;overflow-x:auto;flex-wrap:nowrap}
.tabbar:empty{display:none}
.tabbar::-webkit-scrollbar{height:6px}
.tabbar::-webkit-scrollbar-thumb{background:#b9c4cd;border-radius:4px}
.tab{display:flex;align-items:center;gap:6px;background:#f0f3f6;border:1px solid #d2dae1;border-bottom:none;
  border-radius:8px 8px 0 0;padding:7px 9px 7px 11px;font-size:12.5px;color:#54606b;cursor:pointer;
  max-width:230px;white-space:nowrap;user-select:none;transition:background .15s ease}
.tab:hover{background:#f7f9fb}
.tab.active{background:#fff;color:var(--text);font-weight:600;border-color:#cdd6de;position:relative;z-index:2}
.tab-sys-badge{font-size:9.5px;font-weight:700;padding:1px 5px;border-radius:4px;text-transform:uppercase;letter-spacing:.3px;flex-shrink:0}
.tab-label{overflow:hidden;text-overflow:ellipsis}
.tab-close{display:flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;
  color:#9aa6b1;font-size:11px;flex-shrink:0}
.tab-close:hover{background:#dfe5ea;color:#e74c3c}

.content{flex:1;min-height:0;position:relative;background:var(--body-bg)}
.tabpanes{position:absolute;inset:0}
.tabpane{position:absolute;inset:0;display:none}
.tabpane.active{display:block}
.tabpane iframe{width:100%;height:100%;border:0;display:block;background:var(--body-bg)}
.empty-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted)}
.empty-inner i{font-size:42px;color:#cdd6de;margin-bottom:12px}

/* Menú contextual de pestañas */
.ctx-menu{position:fixed;display:none;background:#fff;border:1px solid #dfe5ea;border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.16);padding:5px;min-width:180px;z-index:9999;font-size:13px}
.ctx-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;color:var(--text);cursor:pointer}
.ctx-item i{width:15px;text-align:center;color:var(--muted);font-size:12px}
.ctx-item:hover{background:#f0f3f6}
.ctx-sep{height:1px;background:#eaeef2;margin:5px 4px}

/* ===== HOME / PLACEHOLDER ===== */
.home-body,.placeholder-body{display:flex;align-items:center;justify-content:center;height:100vh;
  margin:0;background:var(--body-bg);text-align:center}
.home-logo{font-size:54px;color:var(--header-bg);opacity:.85;margin-bottom:14px}
.home h1{font-size:22px;margin:0 0 6px}
.home p{color:var(--muted)}
.placeholder{color:var(--muted)}
.placeholder i{font-size:46px;color:#b9c4cd;margin-bottom:12px}
.placeholder h2{margin:0 0 6px;color:var(--text)}

/* ===== FASE 2 (declarado en el diseno funcional, fuera del alcance de fase 1) ===== */
.menu-section.es-fase2 > .menu-item.is-section,
.menu-leaf.es-fase2 > .menu-item.is-leaf{opacity:.55}
.fase2-tag{margin-left:auto;margin-right:6px;font-size:9px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:2px 6px;border-radius:9px;background:#6b4bab;color:#fff}