/* Estilo de referencia (aprobado 20/10/2026): menú azul oscuro en árbol, fondo claro, barra superior blanca con usuario, tarjetas redondeadas.
   Es una capa que va DESPUÉS de tokens/app/components: para volver al diseño anterior basta quitar esta hoja de index.html. */
:root {
  --ref-nav: #082a52;
  --ref-nav-activo: #1565d8;
  --ref-nav-sub: rgba(255, 255, 255, 0.1);
  --ref-papel: #f3f6fb;
  --ref-borde: #e4eaf2;
  --ref-radio: 14px;
  --ref-sombra: 0 1px 2px rgba(10, 35, 66, 0.04), 0 6px 18px rgba(10, 35, 66, 0.04);
}
body { background: var(--ref-papel); }

/* ---------- Menú lateral ---------- */
.sidebar { background: var(--ref-nav); padding: var(--s-5) var(--s-3) var(--s-4); gap: var(--s-4); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.brand-plate { border-radius: 12px; margin: 0 var(--s-1); }
.brand__sub--block { margin-top: calc(var(--s-2) * -1); padding: 0 var(--s-3); }
.nav { gap: 2px; flex: 1; }
.nav__link { border-radius: 10px; padding: 9px var(--s-3); font-size: var(--fs-sm); font-weight: 500; color: #e9f1fb; box-shadow: none; }
.nav__link:hover { background: rgba(255, 255, 255, 0.08); }
.nav__link .icon { width: 19px; height: 19px; opacity: 0.95; }
.nav__link--top[aria-current="page"] { background: var(--ref-nav-activo); color: #fff; box-shadow: none; }
.nav__grupo { margin-top: 2px; }
.nav__summary { list-style: none; cursor: pointer; user-select: none; }
.nav__summary::-webkit-details-marker { display: none; }
.nav__summary span { flex: 1; }
.nav__summary[aria-current="true"] { color: #fff; }
.nav__chevron { width: 16px; height: 16px; opacity: 0.7; transition: transform 0.18s ease; transform: rotate(90deg); } /* cerrado: ⌄ */
.nav__grupo[open] > .nav__summary .nav__chevron { transform: rotate(-90deg); } /* abierto: ⌃ */
.nav__sub { padding: 2px 0 6px; display: grid; gap: 2px; }
.nav__link--sub { padding: 7px var(--s-3) 7px 40px; font-weight: 400; color: #b9cde4; }
.nav__link--sub:hover { color: #fff; }
.nav__link--sub[aria-current="page"] { background: var(--ref-nav-sub); color: #fff; box-shadow: none; font-weight: 600; }
.nav__subtitle { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8fb0d3; padding: 10px var(--s-3) 3px 40px; }
.sidebar__foot { padding: var(--s-3); border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 0; }

/* ---------- Barra superior ---------- */
.topbar { background: #fff; border-bottom: 1px solid var(--ref-borde); backdrop-filter: none; height: 64px; }
.topbar__crumb { font-size: var(--fs-sm); color: var(--text-muted); }
.topbar__crumb span { margin: 0 4px; color: var(--ink-300); }
.usuario-chip { display: inline-flex; align-items: center; gap: var(--s-3); padding: 4px var(--s-3) 4px 4px; border: 0; background: transparent; border-radius: 999px; cursor: pointer; }
.usuario-chip:hover { background: #f1f5fa; }
.usuario-chip .avatar { width: 36px; height: 36px; font-size: var(--fs-sm); background: var(--ref-nav-activo); color: #fff; }
.usuario-chip__txt { display: grid; text-align: left; line-height: 1.2; }
.usuario-chip__txt strong { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-900); }
.usuario-chip__txt small { font-size: var(--fs-xs); color: var(--text-muted); }
.usuario-chip__flecha { width: 16px; height: 16px; transform: rotate(90deg); color: var(--text-muted); }
@media (max-width: 880px) { .usuario-chip__txt, .usuario-chip__flecha { display: none; } .usuario-chip { padding: 0; } }

/* ---------- Contenido y tarjetas ---------- */
.page-head__title { font-size: 2rem; letter-spacing: -0.02em; }
.page-head__lede { font-size: var(--fs-sm); }
.panel, .kpi-strip, .table-wrap, .module-note, .state { border-radius: var(--ref-radio); border-color: var(--ref-borde); }
.panel, .kpi-strip { box-shadow: var(--ref-sombra); }
.module-grid { gap: var(--s-4); }
.module-card { border: 1px solid var(--ref-borde); border-radius: var(--ref-radio); background: #fff; box-shadow: var(--ref-sombra); padding: var(--s-5); position: relative; }
.module-card:hover { border-color: #b8cce6; box-shadow: 0 10px 26px rgba(10, 35, 66, 0.1); transform: translateY(-1px); }
.module-card__icon { width: 46px; height: 46px; border-radius: 12px; background: #e5f0f9; color: var(--brand); }
.module-card__icon .icon { width: 24px; height: 24px; }
.module-card[data-modulo="gerencia"] .module-card__icon { background: #e6efff; color: #1565d8; }
.module-card[data-modulo="ventas"] .module-card__icon { background: #e6efff; color: #1565d8; }
.module-card[data-modulo="cartera"] .module-card__icon { background: #fdeede; color: #d9730d; }
.module-card[data-modulo="logistica"] .module-card__icon { background: #e1f4f2; color: #0f8f86; }
.module-card[data-modulo="administracion-sistema"] .module-card__icon { background: #efe9fb; color: #6a42c2; }
.module-card__title { font-size: 1.2rem; }

/* ---------- Estructura de pantalla: aviso arriba, y debajo menú + contenido; solo el contenido se desplaza ---------- */
html, body { height: 100%; }
body { overflow: hidden; }
#app { height: 100dvh; display: flex; flex-direction: column; }
.demo-banner { flex: none; }
.shell { flex: 1; min-height: 0; }
.sidebar { position: static; height: auto; min-height: 0; }
.main { min-height: 0; overflow-y: auto; scroll-behavior: auto; }
.shell:has(.tablero) .sidebar, .shell:has(.tablero) .main { height: auto; }
.shell:has(.tablero) .main { overflow: hidden; }

/* ---------- Logo integrado (versión blanca del logo oficial sobre el azul; mismas proporciones, sin recuadro) ---------- */
.sidebar .brand-plate, .login__art .brand-plate { background: none; border-radius: 0; padding: 0 var(--s-3); margin: 0; }
.sidebar .brand-plate img { width: 100%; max-width: 168px; margin: 0; }
.login__art .brand-plate--login { padding: 0; }
.login__art .brand-plate--login img { max-width: 250px; margin: 0; }
.brand__sub--block { margin-top: calc(var(--s-3) * -1); padding: 0 var(--s-3); opacity: 0.8; }

/* ---------- OPA-IA: icono y nombre alineados al centro del botón ---------- */
.opaia-launcher { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px 0 4px; line-height: 1; }
.opaia-launcher img { width: 32px; height: 32px; flex: none; border-radius: 50%; object-fit: cover; }
.opaia-launcher span { display: block; line-height: 1; padding-top: 1px; }
.opaia-burbuja { align-items: center; line-height: 1; gap: 8px; }
.opaia-burbuja span { line-height: 1; }
@media (max-width: 880px) { .opaia-launcher { padding: 0 4px; width: 40px; justify-content: center; } }

/* ---------- Icono de información con burbuja (reemplaza notas largas) ---------- */
.info { position: relative; display: inline-flex; vertical-align: middle; margin-left: 8px; }
.info__btn { width: 24px; height: 24px; border-radius: 50%; border: 0; padding: 0; background: transparent; color: var(--text-muted); display: grid; place-items: center; cursor: pointer; }
.info__btn:hover, .info__btn[aria-expanded="true"] { background: var(--brand-soft); color: var(--brand); }
.info__btn .icon { width: 18px; height: 18px; }
.info__pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: -8px; width: min(380px, 80vw); padding: 12px 14px; background: #fff; color: var(--text); border: 1px solid var(--ref-borde); border-radius: 12px; box-shadow: var(--shadow-pop); font: 400 var(--fs-sm)/1.5 var(--font-ui); letter-spacing: 0; text-align: left; }
.info__pop[hidden] { display: none; }
.page-head__title { display: flex; align-items: center; flex-wrap: wrap; }

/* En tablet y celular el botón OPA-IA muestra solo el icono, centrado (el nombre queda como etiqueta accesible) */
@media (max-width: 880px) {
  .opaia-launcher span { display: none; }
  .opaia-launcher { width: 40px; padding: 0; justify-content: center; }
  .opaia-launcher img { width: 34px; height: 34px; }
}