/* =========================================================
   SHELL — Estilo "Noche" (SOC 360): header + sidebar oscuros, descanso visual
   Se activa con la clase .soc-shell--night en .soc-layout (MainLayout,
   estilo del tenant = Noche). Carga al final; el prefijo .soc-layout.soc-shell--night
   gana en especificidad a ui-soc.css, incluido su tema claro (html.soc-menu-theme-light),
   así que el aspecto no depende de la clase de <html> ni de JS.

   Paleta (sin negros ni blancos puros, verdes desaturados):
   - fondo app     #0f1a16   superficie #16241f   elevada #1c2d27
   - texto         #e3e9e6   secundario #a9b8b1   apagado #7f8f88
   - acento menta  #6fd597 (≥ 4.5:1 sobre superficie) · activo rgba(111,213,151,.14)
   - líneas        rgba(255,255,255,.08)
   Sin backdrop-filter: superficies mate, menos brillo y menos trabajo de GPU.
========================================================= */

.soc-layout.soc-shell--night {
  --night-bg: #0f1a16;
  --night-surface: #16241f;
  --night-surface-2: #1c2d27;
  --night-surface-3: #22362f;
  --night-line: rgba(255, 255, 255, 0.08);
  --night-line-strong: rgba(255, 255, 255, 0.14);
  --night-text: #e3e9e6;
  --night-text-2: #a9b8b1;
  --night-text-3: #7f8f88;
  --night-accent: #6fd597;
  --night-accent-soft: rgba(111, 213, 151, 0.14);
  --night-accent-line: rgba(111, 213, 151, 0.4);
  --night-ease: 0.25s ease;
}

/* ---------- Fondo de la app ---------- */
html:has(.soc-shell--night) {
  background: var(--night-bg, #0f1a16) !important;
}

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

/* El contenido de las páginas no cambia (fondo neutro claro) */
.soc-layout.soc-shell--night .soc-main-content {
  background: #f5f7f6;
}

/* =========================================================
   SIDEBAR
========================================================= */

.soc-layout.soc-shell--night .soc-sidebar-wrapper,
.soc-layout.soc-shell--night .soc-sidebar,
.soc-layout.soc-shell--night .soc-sidebar-column .soc-sf-sidebar,
.soc-layout.soc-shell--night .soc-sf-sidebar,
.soc-layout.soc-shell--night .soc-sf-sidebar.e-sidebar,
.soc-layout.soc-shell--night .soc-sf-sidebar .e-sidebar-content,
.soc-layout.soc-shell--night .soc-sf-sidebar.e-sidebar .e-sidebar-content,
.soc-layout.soc-shell--night .soc-sidebar-wrapper .e-sidebar,
.soc-layout.soc-shell--night .soc-sidebar-header,
.soc-layout.soc-shell--night .soc-menu-container,
.soc-layout.soc-shell--night .soc-nav-html,
.soc-layout.soc-shell--night .soc-sf-sidebar .e-menu,
.soc-layout.soc-shell--night .soc-sf-sidebar .e-menu-wrapper,
.soc-layout.soc-shell--night .soc-sf-sidebar .e-menu-parent,
.soc-layout.soc-shell--night .soc-sf-sidebar .e-menu-parent.e-vertical {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--night-text) !important;
}

.soc-layout.soc-shell--night .soc-sidebar-column {
  background: var(--night-surface) !important;
  background-color: var(--night-surface) !important;
  border-right: 1px solid var(--night-line) !important;
  box-shadow: none !important;
}

.soc-layout.soc-shell--night .soc-sidebar::-webkit-scrollbar-track,
.soc-layout.soc-shell--night .soc-sf-sidebar .e-sidebar-content::-webkit-scrollbar-track,
.soc-layout.soc-shell--night .soc-menu-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.soc-layout.soc-shell--night .soc-menu-container {
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent !important;
}

.soc-layout.soc-shell--night .soc-menu-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18) !important;
}

/* Card de usuario */
.soc-layout.soc-shell--night .soc-sidebar-header .soc-user {
  background: var(--night-surface-2) !important;
  border: 1px solid var(--night-line) !important;
  box-shadow: none !important;
}

.soc-layout.soc-shell--night .soc-user-avatar {
  border-color: var(--night-surface-3) !important;
  background: var(--night-surface-3) !important;
  box-shadow: 0 0 0 2px var(--night-accent-line) !important;
}

.soc-layout.soc-shell--night .soc-user-avatar-fallback {
  background: transparent !important;
  color: var(--night-text-2) !important;
}

.soc-layout.soc-shell--night .soc-user-avatar-fallback .bi-person {
  color: var(--night-text-2) !important;
  opacity: 1 !important;
}

.soc-layout.soc-shell--night .soc-sidebar-header .soc-user-label {
  color: var(--night-accent) !important;
}

.soc-layout.soc-shell--night .soc-sidebar-header .soc-user-name {
  color: var(--night-text) !important;
}

.soc-layout.soc-shell--night .soc-sidebar-header .soc-user-broker {
  color: var(--night-text-2) !important;
}

/* Badge de rol y zona */
.soc-layout.soc-shell--night .soc-sidebar-header .soc-header-user {
  background: var(--night-surface-3) !important;
  background-color: var(--night-surface-3) !important;
  border: 1px solid var(--night-accent-line) !important;
  color: var(--night-text) !important;
}

.soc-layout.soc-shell--night .soc-sidebar-header .soc-header-user::before {
  color: var(--night-accent) !important;
}

.soc-layout.soc-shell--night .soc-sidebar-header .soc-header-user-label,
.soc-layout.soc-shell--night .soc-sidebar-header .soc-header-user-value {
  color: var(--night-text) !important;
}

.soc-layout.soc-shell--night .soc-sidebar-header .soc-header-zone {
  border-color: var(--night-line-strong) !important;
  color: var(--night-text-2) !important;
  background: transparent !important;
}

.soc-layout.soc-shell--night .soc-sidebar-close {
  color: var(--night-text-2) !important;
}

.soc-layout.soc-shell--night .soc-menu-empty,
.soc-layout.soc-shell--night .soc-menu-loading {
  color: var(--night-text-2) !important;
}

/* Ítems del menú */
.soc-layout.soc-shell--night .soc-nav-html .soc-nav-item {
  border-bottom: 1px solid var(--night-line) !important;
}

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

.soc-layout.soc-shell--night .soc-nav-html .soc-nav-link:hover {
  background: var(--night-surface-2) !important;
  color: var(--night-text) !important;
}

.soc-layout.soc-shell--night .soc-nav-html .soc-nav-label-open {
  background: var(--night-surface-2) !important;
}

.soc-layout.soc-shell--night .soc-nav-html .soc-nav-link::before {
  background: var(--night-accent) !important;
  box-shadow: none !important;
}

.soc-layout.soc-shell--night .soc-nav-html .soc-nav-link-active,
.soc-layout.soc-shell--night .soc-nav-html .soc-nav-link-active:hover {
  background: var(--night-accent-soft) !important;
  color: var(--night-text) !important;
  box-shadow: none !important;
}

.soc-layout.soc-shell--night .soc-nav-html .soc-nav-text,
.soc-layout.soc-shell--night .soc-nav-html .soc-nav-label {
  color: inherit !important;
  text-shadow: none !important;
}

.soc-layout.soc-shell--night .soc-nav-html .soc-nav-link-active .soc-nav-text,
.soc-layout.soc-shell--night .soc-nav-html .soc-nav-link:hover .soc-nav-text {
  color: var(--night-text) !important;
}

.soc-layout.soc-shell--night .soc-nav-html .soc-nav-chevron {
  color: var(--night-text-3) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Chip de icono: cuadrado mate; el activo se tiñe de menta */
.soc-layout.soc-shell--night .soc-nav-html .soc-nav-icon-chip,
.soc-layout.soc-shell--night .soc-nav-html .soc-nav-sub .soc-nav-icon-chip,
.soc-layout.soc-shell--night .soc-nav-html .soc-nav-link-active .soc-nav-icon-chip {
  background: var(--night-surface-3) !important;
  box-shadow: inset 0 0 0 1px var(--night-line) !important;
}

.soc-layout.soc-shell--night .soc-nav-html .soc-nav-link-active .soc-nav-icon-chip {
  background: rgba(111, 213, 151, 0.2) !important;
  box-shadow: inset 0 0 0 1px var(--night-accent-line) !important;
}

.soc-layout.soc-shell--night .soc-nav-html .soc-nav-icon-chip .e-icons,
.soc-layout.soc-shell--night .soc-nav-html .soc-nav-icon-chip .bi,
.soc-layout.soc-shell--night .soc-nav-html .soc-nav-icon-chip .soc-icon,
.soc-layout.soc-shell--night .soc-nav-html .soc-nav-icon-chip > span,
.soc-layout.soc-shell--night .soc-nav-html .soc-nav-icon-chip > i,
.soc-layout.soc-shell--night .soc-nav-html .soc-nav-icon-chip .e-icons::before,
.soc-layout.soc-shell--night .soc-nav-html .soc-nav-icon-chip .bi::before {
  color: var(--night-text-2) !important;
}

.soc-layout.soc-shell--night .soc-nav-html .soc-nav-link-active .soc-nav-icon-chip .bi,
.soc-layout.soc-shell--night .soc-nav-html .soc-nav-link-active .soc-nav-icon-chip .bi::before,
.soc-layout.soc-shell--night .soc-nav-html .soc-nav-link-active .soc-nav-icon-chip .e-icons,
.soc-layout.soc-shell--night .soc-nav-html .soc-nav-link-active .soc-nav-icon-chip .e-icons::before {
  color: var(--night-accent) !important;
}

.soc-layout.soc-shell--night .soc-nav-badge {
  background: var(--night-accent) !important;
  color: #0f1a16 !important;
}

/* Submenú */
.soc-layout.soc-shell--night .soc-nav-html .soc-nav-sub {
  border-left-color: var(--night-line-strong) !important;
}

.soc-layout.soc-shell--night .soc-nav-html .soc-nav-sub .soc-nav-link {
  background: rgba(0, 0, 0, 0.16) !important;
  color: var(--night-text-2) !important;
  filter: none !important;
}

.soc-layout.soc-shell--night .soc-nav-html .soc-nav-sub .soc-nav-link:hover {
  background: var(--night-surface-2) !important;
  color: var(--night-text) !important;
}

.soc-layout.soc-shell--night .soc-nav-html .soc-nav-sub .soc-nav-link-active,
.soc-layout.soc-shell--night .soc-nav-html .soc-nav-sub .soc-nav-link-active:hover {
  background: var(--night-accent-soft) !important;
  color: var(--night-text) !important;
}

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

.soc-layout.soc-shell--night .soc-header {
  background: var(--night-surface) !important;
  background-color: var(--night-surface) !important;
  border-bottom: 1px solid var(--night-line) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3) !important;
}

.soc-layout.soc-shell--night .soc-header-center .soc-page-title,
.soc-layout.soc-shell--night .soc-header-center h2 {
  color: var(--night-text) !important;
}

/* Logo SOC por defecto: se vuelve claro sobre el fondo oscuro.
   Logo del broker: placa clara para no alterar sus colores. */
.soc-layout.soc-shell--night .soc-header-logo-img:not(.soc-header-logo-broker) {
  filter: brightness(0) invert(1) opacity(0.88);
}

.soc-layout.soc-shell--night .soc-header-logo-img.soc-header-logo-broker {
  background: rgba(255, 255, 255, 0.92);
  padding: 4px 8px;
  border-radius: 9px;
}

/* Acciones: pastillas mate */
.soc-layout.soc-shell--night .soc-header .soc-header-hamburger,
.soc-layout.soc-shell--night .soc-header .soc-header-theme-btn,
.soc-layout.soc-shell--night .soc-header .soc-header-alert-btn,
.soc-layout.soc-shell--night .soc-header .soc-header-logout-btn {
  background: var(--night-surface-2) !important;
  background-color: var(--night-surface-2) !important;
  border: 1px solid var(--night-line) !important;
  color: var(--night-text-2) !important;
  box-shadow: none !important;
  transition: background-color var(--night-ease), border-color var(--night-ease) !important;
}

.soc-layout.soc-shell--night .soc-header .soc-header-hamburger:hover,
.soc-layout.soc-shell--night .soc-header .soc-header-theme-btn:hover,
.soc-layout.soc-shell--night .soc-header .soc-header-alert-btn:hover,
.soc-layout.soc-shell--night .soc-header .soc-header-logout-btn:hover {
  background: var(--night-surface-3) !important;
  background-color: var(--night-surface-3) !important;
  border-color: var(--night-line-strong) !important;
  animation: none !important;
}

.soc-layout.soc-shell--night .soc-header .soc-header-hamburger:active,
.soc-layout.soc-shell--night .soc-header .soc-header-alert-btn:active,
.soc-layout.soc-shell--night .soc-header .soc-header-logout-btn:active {
  background: var(--night-accent-soft) !important;
}

/* Trazos de los iconos (soc-views-soft los fuerza a verde oscuro) */
.soc-layout.soc-shell--night .soc-header .soc-header-action-svg,
.soc-layout.soc-shell--night .soc-header .soc-header-action-svg path,
.soc-layout.soc-shell--night .soc-header .soc-header-action-svg circle,
.soc-layout.soc-shell--night .soc-header .soc-header-action-svg line,
.soc-layout.soc-shell--night .soc-header .soc-header-action-svg polyline,
.soc-layout.soc-shell--night .soc-header .soc-header-action-svg rect {
  stroke: #cfe0d8 !important;
  color: #cfe0d8 !important;
}

/* Botón de tutorial: acento menta con icono oscuro (sigue siendo el que destaca) */
.soc-layout.soc-shell--night .soc-header .soc-header-help-btn {
  background: var(--night-accent) !important;
  background-color: var(--night-accent) !important;
  box-shadow: none !important;
}

.soc-layout.soc-shell--night .soc-header .soc-header-help-btn .soc-header-action-svg,
.soc-layout.soc-shell--night .soc-header .soc-header-help-btn .soc-header-action-svg path,
.soc-layout.soc-shell--night .soc-header .soc-header-help-btn .soc-header-action-svg circle {
  stroke: #0f1a16 !important;
  color: #0f1a16 !important;
}

.soc-layout.soc-shell--night .soc-header-alert-badge {
  box-shadow: 0 0 0 2px var(--night-surface) !important;
}

/* Foco visible por teclado */
.soc-layout.soc-shell--night .soc-header .soc-header-hamburger:focus-visible,
.soc-layout.soc-shell--night .soc-header .soc-header-alert-btn:focus-visible,
.soc-layout.soc-shell--night .soc-header .soc-header-help-btn:focus-visible,
.soc-layout.soc-shell--night .soc-header .soc-header-logout-btn:focus-visible,
.soc-layout.soc-shell--night .soc-nav-html .soc-nav-link:focus-visible {
  outline: 3px solid var(--night-accent-line) !important;
  outline-offset: 2px;
}

/* Popover de alertas */
.soc-layout.soc-shell--night .soc-header-alert-popover {
  background: var(--night-surface-2) !important;
  background-color: var(--night-surface-2) !important;
  border: 1px solid var(--night-line-strong);
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.7) !important;
  color: var(--night-text) !important;
}

.soc-layout.soc-shell--night .soc-header-alert-empty,
.soc-layout.soc-shell--night .soc-header-alert-item-title {
  color: var(--night-text) !important;
}

.soc-layout.soc-shell--night .soc-header-alert-item-meta {
  color: var(--night-text-3) !important;
}

.soc-layout.soc-shell--night .soc-header-alert-item {
  border-color: var(--night-line) !important;
}

.soc-layout.soc-shell--night .soc-header-alert-item-btn:hover {
  background: var(--night-surface-3) !important;
}

.soc-layout.soc-shell--night .soc-header-alert-footer {
  border-top-color: var(--night-line) !important;
}

.soc-layout.soc-shell--night .soc-header-alert-footer .soc-header-alert-viewall {
  color: var(--night-accent) !important;
}

.soc-layout.soc-shell--night .soc-header-alert-footer .soc-header-alert-viewall:hover:not(:disabled) {
  background: var(--night-accent-soft) !important;
  color: var(--night-accent) !important;
}

.soc-layout.soc-shell--night .soc-header-alert-dismiss:hover:not(:disabled),
.soc-layout.soc-shell--night .soc-header-alert-markall:hover:not(:disabled) {
  background: rgba(255, 113, 80, 0.14) !important;
}

/* ---------- Accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .soc-layout.soc-shell--night .soc-nav-html .soc-nav-link,
  .soc-layout.soc-shell--night .soc-header .soc-header-hamburger,
  .soc-layout.soc-shell--night .soc-header .soc-header-alert-btn,
  .soc-layout.soc-shell--night .soc-header .soc-header-logout-btn {
    transition: none !important;
  }
}