/* NexxoWin 2.0 · Marco general (Winsermant)
   Se carga DESPUÉS de los estilos compilados de la v1 y los sobrescribe.
   Diseño aprobado en el prototipo: barra lateral azul marino a todo lo alto, área de trabajo blanca,
   letra Inter, íconos Google Material Symbols y color de acento por sucursal (--brand-primary). */

:root{
  --v2-side:#0a1929;
  --v2-side-2:#13263b;
  --v2-side-fg:#cbd5e1;
  --v2-side-link:#94a3b8;
  --v2-side-muted:#8b97a8;
  --v2-ink:#0a1929;
  --v2-muted:#5f6b7d;
  --v2-line:#e4e6ea;
  --v2-surface:#ffffff;
  --v2-font:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}

/* Tipografía y fondo */
html,body{background:var(--v2-surface)}
body,.app-shell-v2{font-family:var(--v2-font);-webkit-font-smoothing:antialiased;color:var(--v2-ink)}
.app-shell-v2 .app-workspace{background:var(--v2-surface)}

/* Íconos Google Material Symbols (reemplazan los SVG de app_nav_icon) */
.ms{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;display:inline-block;overflow:hidden;width:1em;height:1em;text-align:center;font-variation-settings:"FILL" 0,"wght" 400,"opsz" 20}
.nav-icon.ms{font-size:20px;width:20px;height:20px}
.app-shell-v2 .app-sidebar .nav-icon.ms,.app-shell-v2 .app-topbar .nav-icon.ms{color:inherit;width:20px;height:20px;min-width:20px}

/* Escritorio: la barra lateral ocupa todo el alto y la barra superior solo el área de trabajo */
@media (min-width:1101px){
  .app-shell-v2{--app-sidebar-width:240px}
}
@media (min-width:761px){
  .app-shell-v2 .app-topbar{grid-column:2/-1}
  .app-shell-v2 .app-sidebar{grid-row:1/-1;grid-column:1;top:0;height:100vh}
}

/* Barra superior blanca y limpia */
.app-shell-v2 .app-topbar{background:var(--v2-surface);border-color:var(--v2-line)}
.app-shell-v2 .app-topbar-brand-copy strong{color:var(--v2-ink);font-weight:700}

/* Barra lateral azul marino */
.app-shell-v2 .app-sidebar{background:var(--v2-side);border-right:0;grid-template-rows:auto minmax(0,1fr) auto;color:var(--v2-side-fg)}
.app-shell-v2 .app-sidebar-nav{scrollbar-color:#2a3b50 transparent}
.app-shell-v2 .app-sidebar-section h2{color:var(--v2-side-muted);letter-spacing:2px;font-size:10px;font-weight:600}
.app-shell-v2 .app-sidebar-link{color:var(--v2-side-link);font-weight:400;border-color:transparent;background:transparent;border-radius:0;box-shadow:none}
.app-shell-v2 .app-sidebar-link:hover{color:#fff;background:rgba(255,255,255,.04);border-color:transparent}
.app-shell-v2 .app-sidebar-link.is-active{color:#fff;font-weight:600;border-color:transparent;background:color-mix(in srgb,var(--brand-primary) 18%,transparent);box-shadow:none}
.app-shell-v2 .app-sidebar-link.is-active:before{background:var(--brand-primary)}
.app-shell-v2 .app-sidebar-link-icon{background:transparent;color:inherit}
.app-shell-v2 .app-sidebar-link.is-active .app-sidebar-link-icon{background:transparent;color:color-mix(in srgb,var(--brand-primary) 70%,#ffffff)}
.app-shell-v2 .app-sidebar-link.is-active .nav-icon.ms{font-variation-settings:"FILL" 1,"wght" 500,"opsz" 20}
.app-shell-v2 .app-sidebar-collapse{background:var(--v2-side-2);border-color:#22364d;color:var(--v2-side-fg)}
.app-shell-v2 .app-sidebar-collapse:hover{background:#1b3149;color:#fff;border-color:#2a4561}
.app-shell-v2 .app-sidebar-product{display:none}
html.app-sidebar-is-collapsed .app-shell-v2 .app-sidebar-section{border-color:#1c2e44}

/* Marca NexxoWin arriba de la barra lateral (logo oficial, versión para fondo oscuro) */
.v2-side-brand{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 10px 14px;border-bottom:1px solid rgba(255,255,255,.06);text-decoration:none}
.v2-side-brand:hover{text-decoration:none}
/* Proporciones del logo oficial (NexxoWin-Logo.html: ícono 96px, separación 26px, nombre 64px, bajada 14px), a escala 0.5 */
.v2-brand-row{display:flex;align-items:center;gap:12px}
.v2-brand-ico{width:48px;height:auto;flex:none}
.v2-wm{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1}
.v2-side-brand b{font-family:var(--v2-font);font-weight:800;font-size:32px;letter-spacing:-.7px;color:#fff;line-height:1}
.v2-side-brand b span{color:#1f8fe0}
.v2-side-brand small{display:inline-block;margin-top:2px;font-family:var(--v2-font);font-size:7px;font-weight:600;text-transform:uppercase;color:var(--v2-side-muted);white-space:nowrap;line-height:1.2}
.v2-side-brand .v2-branch-chip{margin-top:4px;max-width:100%;font-size:11px;font-weight:600;color:var(--brand-on-primary);background:var(--brand-primary);border-radius:99px;padding:2px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Barra contraída (manual o automática en tableta): solo el ícono */
html.app-sidebar-is-collapsed .v2-side-brand .v2-wm,html.app-sidebar-is-collapsed .v2-side-brand .v2-branch-chip{display:none}
@media (max-width:1100px) and (min-width:761px){
  .v2-side-brand .v2-wm,.v2-side-brand .v2-branch-chip{display:none}
}

/* Accesos rápidos a Google Workspace o Microsoft 365 según la sucursal */
.v2-apps{display:flex;align-items:center;gap:2px;padding-right:10px;margin-right:8px;border-right:1px solid var(--v2-line)}
.v2-app{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;transition:background .15s,border-color .15s,transform .15s}
.v2-app:hover{background:#fff;border-color:var(--v2-line);transform:translateY(-1px);box-shadow:0 2px 6px rgba(10,25,41,.06)}
.v2-app:focus-visible{outline:2px solid var(--brand-primary);outline-offset:1px}
.v2-app img{display:block;width:20px;height:20px;object-fit:contain}
.v2-app .ms{font-size:24px;width:21px;height:21px;color:#0f6cbd}
@media (max-width:1100px){.v2-apps{display:none}}

/* Logo de la sucursal en la barra superior: más espacio para que el texto del logo se lea */
@media (min-width:761px){
  .app-shell-v2 .app-topbar-logo{flex-basis:auto;width:auto;height:54px}
  .app-shell-v2 .app-topbar-logo img{max-height:54px;max-width:130px;width:auto;height:54px}
}

/* Campanita de Alertas en la barra superior (menú v2) */
.v2-bell-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-right:8px;border:1px solid var(--v2-line);border-radius:99px;background:#fff;color:var(--v2-ink);cursor:pointer;box-shadow:none}
.v2-bell-button:hover{border-color:var(--brand-primary);color:var(--brand-primary)}
.v2-bell-button .ms{font-size:20px}
.v2-bell-count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:#d93636;color:#fff;font:700 11px/18px var(--v2-font);text-align:center;box-shadow:0 0 0 2px #fff}
.v2-bell-button .ms{width:20px!important;height:20px!important;overflow:visible!important;line-height:1}

/* ---- Barra superior ordenada (26/10/2026) ----
   Izquierda: logo + sucursal (es el selector de sucursal). Derecha: Aplicaciones · Ayuda · Alertas · Usuario. */
.v2-branch-brand{position:relative}
.v2-branch-brand > summary{display:flex;align-items:center;gap:10px;padding:4px 10px 4px 4px;border-radius:12px;cursor:pointer;list-style:none}
.v2-branch-brand > summary::-webkit-details-marker{display:none}
.v2-branch-brand > summary:hover,.v2-branch-brand[open] > summary{background:#f3f6fa}
.v2-branch-brand-copy{display:flex;flex-direction:column;line-height:1.15}
.v2-branch-brand-copy small{font-size:11px;font-weight:600;color:var(--v2-muted);text-transform:uppercase;letter-spacing:.06em}
.v2-branch-brand-copy strong{font-size:15px;font-weight:700;color:var(--v2-ink)}
.v2-branch-brand-chevron{font-size:20px;color:var(--v2-muted)}
.v2-branch-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:260px;padding:6px;border:1px solid var(--v2-line);border-radius:12px;background:#fff;box-shadow:0 12px 32px rgba(10,25,41,.16)}
.v2-branch-menu header{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:8px 10px 6px;font-size:12px;color:var(--v2-muted)}
.v2-branch-menu header strong{font-size:13px;color:var(--v2-ink)}
.v2-branch-menu form{margin:0}
.v2-branch-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--v2-ink);font:500 14px var(--v2-font);text-align:left;cursor:pointer}
.v2-branch-menu button:hover{background:#f3f6fa}
.v2-branch-menu button .ms{font-size:18px;color:var(--v2-muted)}
.v2-branch-menu button.is-active{font-weight:700}
.v2-branch-menu button.is-active .ms{color:var(--brand-primary)}
.v2-icon-button{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--v2-line);border-radius:99px;background:#fff;color:var(--v2-ink);cursor:pointer;list-style:none}
.v2-icon-button::-webkit-details-marker{display:none}
.v2-icon-button:hover{border-color:var(--brand-primary);color:var(--brand-primary)}
.v2-icon-button .ms{font-size:20px;width:20px;height:20px;overflow:visible}
.v2-apps-menu{position:relative;margin-right:8px}
.v2-apps-menu[open] > summary{border-color:var(--brand-primary);color:var(--brand-primary)}
.v2-apps-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:60;width:280px;padding:10px;border:1px solid var(--v2-line);border-radius:14px;background:#fff;box-shadow:0 12px 32px rgba(10,25,41,.16)}
.v2-apps-panel header{padding:2px 4px 8px;font-size:12px;font-weight:700;color:var(--v2-muted);text-transform:uppercase;letter-spacing:.06em}
.v2-apps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.v2-app-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border-radius:10px;color:var(--v2-ink);font-size:11px;text-decoration:none;text-align:center}
.v2-app-tile:hover{background:#f3f6fa}
.v2-app-tile img{width:28px;height:28px;object-fit:contain}
.v2-app-tile .ms{font-size:26px;color:var(--brand-primary)}
.app-shell-v2 .app-topbar-actions{gap:0}
@media (max-width:700px){
  .v2-branch-brand-copy small{display:none}
  .v2-branch-brand-copy strong{font-size:13px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .v2-branch-brand > summary{gap:6px;padding-right:4px}
  .v2-branch-brand .app-topbar-logo img{max-height:34px!important;height:34px!important}
  .v2-apps-menu{margin-right:4px}
  .v2-apps-panel{right:-90px}
}
@media (max-width:700px){
  .v2-branch-brand-copy{display:none}
  .app-shell-v2 .app-topbar-user-menu .app-user-text,.app-shell-v2 .app-topbar-user-menu .app-user-chevron{display:none!important}
  .v2-help-button{width:36px;padding:0!important;justify-content:center;margin-right:6px}
  .v2-help-button span:not(.ms){display:none}
  .v2-bell-button{margin-right:6px}
  .app-shell-v2 .app-topbar{gap:6px}
}