/* =========================================================
   SHELL — Header + Sidebar con estilo Glassmorphism (SOC 360)
   Se activa con la clase .soc-shell--glass en .soc-layout (MainLayout).
   Carga AL FINAL (después de ui-soc.css y soc-views-soft.css): cada regla
   lleva el prefijo .soc-shell--glass para ganar en especificidad a los
   !important de esas capas sin modificarlas.

   Misma familia que el login (soc-login-glass.css):
   - Fondo de app: degradado verde de marca + auroras menta / azul acento.
   - Sidebar tema oscuro: vidrio verde profundo (55%) + blur 18px.
   - Sidebar tema claro (html.soc-menu-theme-light): vidrio blanco (70%).
   - Header: vidrio blanco (70%) + blur 18px, acciones en pastillas de vidrio.
   - El área de contenido se mantiene opaca (#f5f7f6) para no tocar las vistas.
========================================================= */

.soc-shell--glass {
  --shell-blur: 22px;
  /* Tinte 0.56: mantiene el texto blanco ≥ 4.5:1 incluso sobre las manchas de luz */
  --shell-dark-tint: rgba(0, 61, 44, 0.56);
  --shell-dark-top: rgba(255, 255, 255, 0.1);
  --shell-dark-bottom: rgba(255, 255, 255, 0.02);
  --shell-text-shadow: 0 1px 2px rgba(0, 30, 20, 0.45);
  --shell-dark-border: rgba(255, 255, 255, 0.2);
  --shell-dark-surface: rgba(255, 255, 255, 0.1);
  --shell-dark-surface-hover: rgba(255, 255, 255, 0.14);
  --shell-dark-surface-active: rgba(255, 255, 255, 0.18);
  --shell-light-top: rgba(255, 255, 255, 0.8);
  --shell-light-bottom: rgba(255, 255, 255, 0.64);
  --shell-light-border: rgba(255, 255, 255, 0.7);
  --shell-light-surface: rgba(255, 255, 255, 0.55);
  --shell-light-surface-hover: rgba(255, 255, 255, 0.85);
  --shell-brand: #006d4e;
  --shell-brand-soft: rgba(0, 109, 78, 0.1);
  --shell-brand-line: rgba(0, 109, 78, 0.14);
  --shell-accent: #4ed176;
  --shell-ease: 0.25s ease;
}

/* ---------- Fondo de la app: lo que el vidrio difumina ----------
   Va en html (lienzo) y body queda transparente: así los discos de body::before
   (z-index -1) quedan ENTRE el degradado y el contenido. Si el degradado
   estuviera en body, se pintaría encima de los discos y el vidrio no tendría
   nada que difuminar. */
html:has(.soc-shell--glass) {
  background:
    radial-gradient(900px 620px at 0% 0%, rgba(78, 209, 118, 0.38) 0%, rgba(78, 209, 118, 0) 60%),
    radial-gradient(820px 620px at 100% 100%, rgba(0, 100, 166, 0.3) 0%, rgba(0, 100, 166, 0) 60%),
    linear-gradient(135deg, #003d2c 0%, #006d4e 45%, #0b8a6a 100%) !important;
}

body:has(.soc-shell--glass) {
  background: transparent !important;
}

/* Orbes de luz detrás del sidebar: el vidrio necesita contraste que difuminar.
   Viven en body::before (fijo, z-index -1) para no convertirse en celdas del grid. */
body:has(.soc-shell--glass)::before {
  content: '';
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 420px;
  height: 100vh;
  pointer-events: none;
  background:
    /* discos de borde nítido: el blur del vidrio los convierte en manchas de luz */
    /* posiciones en % de la altura: cubren todo el menú en cualquier pantalla */
    radial-gradient(circle at 40px 8%,   rgba(255, 255, 255, 0.14) 0 95px,  rgba(255, 255, 255, 0) 96px),
    radial-gradient(circle at 250px 22%, rgba(78, 209, 118, 0.42)  0 120px, rgba(78, 209, 118, 0) 121px),
    radial-gradient(circle at 70px 38%,  rgba(0, 160, 210, 0.45)   0 105px, rgba(0, 160, 210, 0) 106px),
    radial-gradient(circle at 260px 52%, rgba(255, 255, 255, 0.12) 0 85px,  rgba(255, 255, 255, 0) 86px),
    radial-gradient(circle at 110px 66%, rgba(78, 209, 118, 0.38)  0 130px, rgba(78, 209, 118, 0) 131px),
    radial-gradient(circle at 300px 80%, rgba(0, 160, 210, 0.4)    0 100px, rgba(0, 160, 210, 0) 101px),
    radial-gradient(circle at 60px 94%,  rgba(255, 255, 255, 0.14) 0 110px, rgba(255, 255, 255, 0) 111px),
    radial-gradient(circle at 240px 104%, rgba(78, 209, 118, 0.38) 0 120px, rgba(78, 209, 118, 0) 121px),
    /* resplandores suaves de fondo */
    radial-gradient(320px 320px at 150px 6%,  rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(360px 360px at 60px 58%,  rgba(78, 209, 118, 0.25)  0%, rgba(78, 209, 118, 0) 70%),
    radial-gradient(340px 340px at 200px 92%, rgba(0, 160, 210, 0.25)   0%, rgba(0, 160, 210, 0) 70%);
  animation: soc-shell-orbs 26s ease-in-out infinite;
  will-change: transform;
}

@keyframes soc-shell-orbs {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(30px, -60px, 0) scale(1.08); }
}

/* El contenido de las páginas no cambia: fondo neutro opaco */
.soc-shell--glass .soc-main-content {
  background: #f5f7f6;
}

/* =========================================================
   SIDEBAR — tema oscuro (verde)
========================================================= */

/* Las capas internas dejan de pintar verde sólido; el vidrio vive en la columna.
   app.css y site.css pintan #006d4e en varias de ellas (header del sidebar,
   e-sidebar-content, e-menu, e-menu-parent): todas quedan transparentes. */
.soc-shell--glass .soc-sidebar-wrapper,
.soc-shell--glass .soc-sidebar,
.soc-shell--glass .soc-sidebar-column .soc-sf-sidebar,
.soc-shell--glass .soc-sf-sidebar,
.soc-shell--glass .soc-sf-sidebar.e-sidebar,
.soc-shell--glass .soc-sf-sidebar .e-sidebar-content,
.soc-shell--glass .soc-sf-sidebar.e-sidebar .e-sidebar-content,
.soc-shell--glass .soc-sidebar-wrapper .e-sidebar,
.soc-shell--glass .soc-sidebar-header,
.soc-shell--glass .soc-menu-container,
.soc-shell--glass .soc-nav-html,
.soc-shell--glass .soc-sf-sidebar .e-menu,
.soc-shell--glass .soc-sf-sidebar .e-menu-wrapper,
.soc-shell--glass .soc-sf-sidebar .e-menu-parent,
.soc-shell--glass .soc-sf-sidebar .e-menu-parent.e-vertical {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Pistas de scroll sobre vidrio (app.css las pinta verde sólido) */
.soc-shell--glass .soc-sidebar::-webkit-scrollbar-track,
.soc-shell--glass .soc-sf-sidebar .e-sidebar-content::-webkit-scrollbar-track,
.soc-shell--glass .soc-menu-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.soc-shell--glass .soc-sidebar-column {
  background:
    /* reflejo diagonal (light source) */
    linear-gradient(115deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 58%),
    /* brillo superior */
    linear-gradient(180deg, var(--shell-dark-top) 0%, var(--shell-dark-bottom) 100%),
    var(--shell-dark-tint) !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: blur(var(--shell-blur)) saturate(170%);
  backdrop-filter: blur(var(--shell-blur)) saturate(170%);
  border-right: 1px solid var(--shell-dark-border) !important;
  box-shadow:
    inset -1px 0 0 rgba(0, 0, 0, 0.12),
    inset 1px 0 0 rgba(255, 255, 255, 0.12),
    8px 0 32px -16px rgba(0, 30, 20, 0.5);
}

/* Card de usuario: vidrio sobre vidrio */
.soc-shell--glass .soc-sidebar-header .soc-user {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 20px -12px rgba(0, 0, 0, 0.5) !important;
}

.soc-shell--glass .soc-user-avatar {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Badge de rol: vidrio con borde menta */
.soc-shell--glass .soc-sidebar-header .soc-header-user {
  background: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(78, 209, 118, 0.55) !important;
}

/* Texto blanco con sombra sutil: legible aunque pase una mancha de luz por detrás */
.soc-shell--glass .soc-nav-html .soc-nav-text,
.soc-shell--glass .soc-nav-html .soc-nav-label,
.soc-shell--glass .soc-nav-html .soc-nav-chevron,
.soc-shell--glass .soc-sidebar-header .soc-user-label,
.soc-shell--glass .soc-sidebar-header .soc-user-name,
.soc-shell--glass .soc-sidebar-header .soc-user-broker,
.soc-shell--glass .soc-sidebar-header .soc-header-user,
.soc-shell--glass .soc-sidebar-header .soc-header-zone,
.soc-shell--glass .soc-menu-empty,
.soc-shell--glass .soc-menu-loading {
  text-shadow: var(--shell-text-shadow);
}

/* Ítems del menú: transparentes, sólo el activo/hover tiene superficie */
.soc-shell--glass .soc-nav-html .soc-nav-item {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.soc-shell--glass .soc-nav-html .soc-nav-link {
  background: transparent !important;
  filter: none !important;
  transition: background-color var(--shell-ease), box-shadow var(--shell-ease) !important;
}

.soc-shell--glass .soc-nav-html .soc-nav-link:hover {
  background: var(--shell-dark-surface-hover) !important;
}

.soc-shell--glass .soc-nav-html .soc-nav-label-open {
  background: var(--shell-dark-surface) !important;
}

.soc-shell--glass .soc-nav-html .soc-nav-link-active,
.soc-shell--glass .soc-nav-html .soc-nav-link-active:hover {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.1)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* Submenú: superficie ligeramente más oscura que el vidrio */
.soc-shell--glass .soc-nav-html .soc-nav-sub {
  border-left-color: rgba(255, 255, 255, 0.2) !important;
}

.soc-shell--glass .soc-nav-html .soc-nav-sub .soc-nav-link {
  background: rgba(0, 0, 0, 0.12) !important;
  filter: none !important;
}

.soc-shell--glass .soc-nav-html .soc-nav-sub .soc-nav-link:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.soc-shell--glass .soc-nav-html .soc-nav-sub .soc-nav-link-active,
.soc-shell--glass .soc-nav-html .soc-nav-sub .soc-nav-link-active:hover {
  background: var(--shell-dark-surface-active) !important;
}

/* Chip de icono: cuadrado de vidrio; el activo se tiñe de menta */
.soc-shell--glass .soc-nav-html .soc-nav-icon-chip,
.soc-shell--glass .soc-nav-html .soc-nav-sub .soc-nav-icon-chip {
  background: rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

.soc-shell--glass .soc-nav-html .soc-nav-link-active .soc-nav-icon-chip {
  background: rgba(78, 209, 118, 0.3) !important;
  box-shadow: inset 0 0 0 1px rgba(78, 209, 118, 0.45) !important;
}

/* Scroll del menú sobre vidrio */
.soc-shell--glass .soc-menu-container {
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent !important;
}

/* =========================================================
   SIDEBAR — tema claro (html.soc-menu-theme-light)
   Glass2 (.soc-shell--glass-light) fija este tema vía JS y oculta el switch.
========================================================= */

.soc-shell--glass-light .soc-header .soc-header-theme-btn {
  display: none !important;
}

:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-sidebar-wrapper,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-sidebar-column .soc-sf-sidebar,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-sf-sidebar,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-sf-sidebar.e-sidebar,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-sf-sidebar.e-sidebar .e-sidebar-content,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-sf-sidebar .e-sidebar,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-sf-sidebar .e-sidebar-content,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-sidebar-wrapper .e-sidebar,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-sidebar-header,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-menu-container,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-sf-sidebar .e-menu {
  background: transparent !important;
  background-color: transparent !important;
}

:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-sidebar-column {
  background:
    linear-gradient(180deg, var(--shell-light-top) 0%, var(--shell-light-bottom) 100%) !important;
  background-color: transparent !important;
  border-right: 1px solid var(--shell-light-border) !important;
  box-shadow: inset -1px 0 0 rgba(0, 61, 44, 0.08);
}

/* En tema claro el texto es verde oscuro sobre blanco: sin sombra */
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-nav-html .soc-nav-text,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-nav-html .soc-nav-label,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-nav-html .soc-nav-chevron,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-sidebar-header .soc-user-label,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-sidebar-header .soc-user-name,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-sidebar-header .soc-user-broker,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-sidebar-header .soc-header-user,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-sidebar-header .soc-header-zone,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-menu-empty,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-menu-loading {
  text-shadow: none;
}

:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-sidebar-header .soc-user {
  background: var(--shell-light-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-nav-html .soc-nav-item {
  border-bottom-color: var(--shell-brand-line) !important;
}

:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-nav-html .soc-nav-link,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-nav-html .soc-nav-sub .soc-nav-link {
  background: transparent !important;
}

:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-nav-html .soc-nav-link:hover,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-nav-html .soc-nav-sub .soc-nav-link:hover,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-nav-html .soc-nav-label-open {
  background: var(--shell-light-surface) !important;
}

:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-nav-html .soc-nav-link-active,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-nav-html .soc-nav-link-active:hover,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-nav-html .soc-nav-sub .soc-nav-link-active,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-nav-html .soc-nav-sub .soc-nav-link-active:hover {
  background: var(--shell-light-surface-hover) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 109, 78, 0.12) !important;
}

:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-nav-html .soc-nav-icon-chip,
:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-nav-html .soc-nav-sub .soc-nav-icon-chip {
  background: rgba(255, 255, 255, 0.7) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 109, 78, 0.12) !important;
}

:is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-nav-html .soc-nav-link-active .soc-nav-icon-chip {
  background: rgba(78, 209, 118, 0.22) !important;
  box-shadow: inset 0 0 0 1px rgba(78, 209, 118, 0.5) !important;
}

/* =========================================================
   HEADER
========================================================= */

.soc-shell--glass .soc-header {
  background: linear-gradient(180deg, var(--shell-light-top) 0%, var(--shell-light-bottom) 100%) !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: blur(var(--shell-blur)) saturate(140%);
  backdrop-filter: blur(var(--shell-blur)) saturate(140%);
  border-bottom: 1px solid var(--shell-light-border) !important;
  box-shadow: 0 10px 28px -18px rgba(0, 40, 28, 0.45) !important;
}

/* Acciones: pastillas de vidrio con borde verde tenue (el "?" sigue sólido) */
.soc-shell--glass .soc-header .soc-header-hamburger,
.soc-shell--glass .soc-header .soc-header-theme-btn,
.soc-shell--glass .soc-header .soc-header-alert-btn,
.soc-shell--glass .soc-header .soc-header-logout-btn {
  background: var(--shell-light-surface) !important;
  background-color: var(--shell-light-surface) !important;
  border: 1px solid var(--shell-brand-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  transition: background-color var(--shell-ease), border-color var(--shell-ease) !important;
}

.soc-shell--glass .soc-header .soc-header-hamburger:hover,
.soc-shell--glass .soc-header .soc-header-theme-btn:hover,
.soc-shell--glass .soc-header .soc-header-alert-btn:hover,
.soc-shell--glass .soc-header .soc-header-logout-btn:hover {
  background: var(--shell-light-surface-hover) !important;
  background-color: var(--shell-light-surface-hover) !important;
  border-color: rgba(0, 109, 78, 0.3) !important;
}

.soc-shell--glass .soc-header .soc-header-hamburger:active,
.soc-shell--glass .soc-header .soc-header-theme-btn:active,
.soc-shell--glass .soc-header .soc-header-alert-btn:active,
.soc-shell--glass .soc-header .soc-header-logout-btn:active {
  background: var(--shell-brand-soft) !important;
  background-color: var(--shell-brand-soft) !important;
}

.soc-shell--glass .soc-header .soc-header-help-btn {
  box-shadow: 0 6px 16px -8px rgba(0, 109, 78, 0.6) !important;
}

/* Foco visible por teclado */
.soc-shell--glass .soc-header .soc-header-hamburger:focus-visible,
.soc-shell--glass .soc-header .soc-header-theme-btn:focus-visible,
.soc-shell--glass .soc-header .soc-header-alert-btn:focus-visible,
.soc-shell--glass .soc-header .soc-header-help-btn:focus-visible,
.soc-shell--glass .soc-header .soc-header-logout-btn:focus-visible,
.soc-shell--glass .soc-nav-html .soc-nav-link:focus-visible {
  outline: 3px solid rgba(78, 209, 118, 0.6) !important;
  outline-offset: 2px;
}

/* Popover de alertas: vidrio blanco más opaco (lista legible) */
.soc-shell--glass .soc-header-alert-popover {
  background: rgba(255, 255, 255, 0.92) !important;
  background-color: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 18px 44px -14px rgba(0, 40, 28, 0.4) !important;
}

/* =========================================================
   Sin backdrop-filter (navegadores viejos): superficies casi opacas
========================================================= */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .soc-shell--glass .soc-sidebar-column {
    background: #0a5a44 !important;
  }

  :is(html.soc-menu-theme-light .soc-shell--glass, .soc-shell--glass.soc-shell--glass-light) .soc-sidebar-column,
  .soc-shell--glass .soc-header {
    background: rgba(255, 255, 255, 0.97) !important;
  }

  .soc-shell--glass .soc-header-alert-popover {
    background: #ffffff !important;
  }
}

/* ---------- Accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  body:has(.soc-shell--glass)::before {
    animation: none !important;
  }

  .soc-shell--glass .soc-nav-html .soc-nav-link,
  .soc-shell--glass .soc-header .soc-header-hamburger,
  .soc-shell--glass .soc-header .soc-header-theme-btn,
  .soc-shell--glass .soc-header .soc-header-alert-btn,
  .soc-shell--glass .soc-header .soc-header-logout-btn {
    transition: none !important;
  }
}


/* =========================================================
   GLASS2 — colores del tema claro sin depender de la clase de <html>.
   Bloque generado a partir de la sección "Tema CLARO" de ui-soc.css con el
   prefijo .soc-shell--glass-light. Va al final para ganar a las reglas del
   vidrio verde de este mismo archivo (misma especificidad, orden posterior).
   Las reglas de vidrio claro de arriba (:is(...), mayor especificidad) siguen
   mandando sobre fondos y superficies.
========================================================= */
/* =========================================================
   SIDEBAR — Glass2: tema CLARO fijado por CSS (copia de la sección de ui-soc.css)
   Activar: .soc-shell--glass-light
   Oscuro = verde Soft Soft actual
========================================================= */.soc-shell--glass-light .soc-sidebar-wrapper,
.soc-shell--glass-light .soc-sidebar-column,
.soc-shell--glass-light .soc-sidebar-column .soc-sf-sidebar,
.soc-shell--glass-light .soc-sf-sidebar,
.soc-shell--glass-light .soc-sf-sidebar.e-sidebar,
.soc-shell--glass-light .soc-sf-sidebar.e-sidebar .e-sidebar-content,
.soc-shell--glass-light .soc-sf-sidebar .e-sidebar,
.soc-shell--glass-light .soc-sf-sidebar .e-sidebar-content,
.soc-shell--glass-light .soc-sidebar-wrapper .e-sidebar,
.soc-shell--glass-light .soc-sidebar-header,
.soc-shell--glass-light .soc-menu-container,
.soc-shell--glass-light .soc-sf-sidebar .e-menu {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #0a7d5a !important;
  border-right-color: #e8ecef !important;
  scrollbar-color: #b7d6ce #ffffff !important;
}.soc-shell--glass-light .soc-sidebar-column {
  border-right: 1px solid #e8ecef !important;
}.soc-shell--glass-light .soc-sidebar-header {
  border-bottom: none !important;
  color: #0a7d5a !important;
}.soc-shell--glass-light .soc-sf-sidebar .e-sidebar-content::-webkit-scrollbar-track,
.soc-shell--glass-light .soc-menu-container::-webkit-scrollbar-track {
  background: #ffffff !important;
}.soc-shell--glass-light .soc-sf-sidebar .e-sidebar-content::-webkit-scrollbar-thumb,
.soc-shell--glass-light .soc-menu-container::-webkit-scrollbar-thumb {
  background: #b7d6ce !important;
}

/* Card usuario — #F3F4F6 como referencia */.soc-shell--glass-light .soc-sidebar-header .soc-user {
  background: #f9f9f9 !important;
  box-shadow: none !important;
  border: none !important;
}

/* Avatar mint + anillo blanco + línea verde secundario #4ED176 */.soc-shell--glass-light .soc-user-avatar {
  border: 2px solid #ffffff !important;
  background: #9ec5bb !important;
  box-shadow:
    0 0 0 3px #4ed176,
    0 0 0px 1px rgba(78, 209, 118, 0.35) !important;
}.soc-shell--glass-light .soc-user-avatar-fallback {
  background: #9ec5bb !important;
  color: #0a7d5a !important;
}.soc-shell--glass-light .soc-user-avatar-fallback .bi-person {
  color: #0a7d5a !important;
  opacity: 0.55 !important;
}.soc-shell--glass-light .soc-sidebar-header .soc-user-label {
  color: #4ed176 !important;
}.soc-shell--glass-light .soc-sidebar-header .soc-user-name {
  color: #0a7d5a !important;
}.soc-shell--glass-light .soc-sidebar-header .soc-user-broker {
  color: #6b7280 !important;
  opacity: 1 !important;
}

/* Badge rol relleno #0A7D5A */.soc-shell--glass-light .soc-sidebar-header .soc-header-user {
  background: #0a7d5a !important;
  background-color: #0a7d5a !important;
  border: 1px solid #0a7d5a !important;
  color: #ffffff !important;
  border-radius: 9px !important;
}.soc-shell--glass-light .soc-sidebar-header .soc-header-user::before {
  color: #ffffff !important;
}.soc-shell--glass-light .soc-sidebar-header .soc-header-user-label,
.soc-shell--glass-light .soc-sidebar-header .soc-header-user-value {
  color: #ffffff !important;
}.soc-shell--glass-light .soc-sidebar-header .soc-header-zone {
  border-color: rgba(10, 125, 90, 0.3) !important;
  color: #0a7d5a !important;
  background: transparent !important;
}.soc-shell--glass-light .soc-menu-empty,
.soc-shell--glass-light .soc-menu-loading {
  color: #6b7280 !important;
}.soc-shell--glass-light .soc-nav-html .soc-nav-item {
  border-bottom: 1px solid #f9f9f9 !important;
}

/* Ítems: fondo blanco continuo (como referencia) */.soc-shell--glass-light .soc-nav-html .soc-nav-link {
  background: #fdfdfd !important;
  color: #0a7d5a !important;
}.soc-shell--glass-light .soc-nav-html .soc-nav-link:hover {
  background: #ffffff !important;
  color: #0a7d5a !important;
  filter: none;
}

/* Barra activa #96E0AE (referencia) */.soc-shell--glass-light .soc-nav-html .soc-nav-link::before {
  background: #96e0ae !important;
  box-shadow: none !important;
}

/* Activo: gris muy tenue (#F5F7F8) como la captura */.soc-shell--glass-light .soc-nav-html .soc-nav-link-active,
.soc-shell--glass-light .soc-nav-html .soc-nav-link-active:hover {
  background: #f9f9f9 !important;
  color: #0a7d5a !important;
}.soc-shell--glass-light .soc-nav-html .soc-nav-label-open {
  background: #f5f7f8 !important;
}

/* Iconos Soft Soft en tema claro — chip mint */.soc-shell--glass-light .soc-nav-html .soc-nav-icon-chip,
.soc-shell--glass-light .soc-nav-html .soc-nav-link-active .soc-nav-icon-chip,
.soc-shell--glass-light .soc-nav-html .soc-nav-sub .soc-nav-icon-chip {
  background: #eaf7f1 !important;
  box-shadow: none !important;
}.soc-shell--glass-light .soc-nav-html .soc-nav-icon-chip .e-icons,
.soc-shell--glass-light .soc-nav-html .soc-nav-icon-chip .bi,
.soc-shell--glass-light .soc-nav-html .soc-nav-icon-chip .soc-icon,
.soc-shell--glass-light .soc-nav-html .soc-nav-icon-chip > span,
.soc-shell--glass-light .soc-nav-html .soc-nav-icon-chip > i,
.soc-shell--glass-light .soc-nav-html .soc-nav-icon-chip .e-icons::before,
.soc-shell--glass-light .soc-nav-html .soc-nav-icon-chip .bi::before {
  color: #006d4e !important;
}.soc-shell--glass-light .soc-nav-html .soc-nav-text,
.soc-shell--glass-light .soc-nav-html .soc-nav-label,
.soc-shell--glass-light .soc-nav-html .soc-nav-link-active .soc-nav-text,
.soc-shell--glass-light .soc-nav-html .soc-nav-link:hover .soc-nav-text {
  color: #0a7d5a !important;
}.soc-shell--glass-light .soc-nav-html .soc-nav-chevron {
  color: #0a7d5a !important;
  opacity: 0.7 !important;
}.soc-shell--glass-light .soc-nav-badge {
  background: #0a7d5a !important;
  color: #ffffff !important;
}.soc-shell--glass-light .soc-nav-html .soc-nav-sub {
  border-left-color: rgba(10, 125, 90, 0.22) !important;
}.soc-shell--glass-light .soc-nav-html .soc-nav-sub .soc-nav-link {
  background: #ffffff !important;
  filter: none;
  color: #0a7d5a !important;
}.soc-shell--glass-light .soc-nav-html .soc-nav-sub .soc-nav-link:hover {
  background: #f5f7f8 !important;
}.soc-shell--glass-light .soc-nav-html .soc-nav-sub .soc-nav-link-active,
.soc-shell--glass-light .soc-nav-html .soc-nav-sub .soc-nav-link-active:hover {
  background: #f5f7f8 !important;
}.soc-shell--glass-light .soc-sidebar-close {
  color: #0a7d5a !important;
}

/* app.css fuerza blanco en header — reafirmar colores claros */.soc-shell--glass-light .soc-user-label,
.soc-shell--glass-light .soc-sidebar-header .soc-user-label {
  color: #4ed176 !important;
}.soc-shell--glass-light .soc-user-name,
.soc-shell--glass-light .soc-sidebar-header .soc-user-name {
  color: #0a7d5a !important;
}.soc-shell--glass-light .soc-user-broker,
.soc-shell--glass-light .soc-sidebar-header .soc-user-broker {
  color: #6b7280 !important;
}.soc-shell--glass-light .soc-sidebar-role {
  border-top-color: transparent !important;
}@media (min-width: 769px) {.soc-shell--glass-light .soc-sidebar-column-closed .soc-user-avatar {
    border-color: #ffffff !important;
    background: #9ec5bb !important;
    box-shadow:
      0 0 0 2px #4ed176,
      0 0 8px 1px rgba(78, 209, 118, 0.3) !important;
  }
}@media (max-width: 768px) {.soc-shell--glass-light .soc-sidebar-close:hover {
    background-color: rgba(10, 125, 90, 0.1) !important;
  }
}