/* GlobalCatalog SOC theme layer.
   Loaded after Tabler and project styles so the UI uses one coherent shell. */

:root {
  --soc-radius: 8px;

  /* ── Global UI scale ─────────────────────────────────────────────────────
     1 = tamaño nativo de Tabler (raíz 16px). .9 reproduce el aspecto de un
     zoom de navegador al 90%: toda la tipografía y el espaciado de Tabler es
     rem, así que se reduce con la raíz; los pocos valores estructurales en px
     (sidebar, alto de navbar, ancho de contenedor, logos) se multiplican por
     esta misma variable más abajo. Cambiar SOLO este número reescala la UI.  */
  --soc-ui-scale: .9;

  /* Alturas de logo derivadas de la escala (nativas: 48px / 90px). */
  --soc-logo-h: calc(48px * var(--soc-ui-scale));
  --soc-logo-h-lg: calc(90px * var(--soc-ui-scale));
}

/* La raíz manda: todo el sistema rem de Tabler (fuentes, paddings, gaps, cards,
   botones, tablas) se reduce proporcionalmente. Los media queries siguen en px, así
   que los breakpoints responsive no cambian.

   OJO con el selector: Tabler declara `:root { font-size: 16px }`. `:root` es una
   pseudo-clase (especificidad 0,1,0) y `html` un selector de tipo (0,0,1), así que
   una regla `html { font-size }` NUNCA le gana, cargue después o no. Hay que usar
   `:root` para empatar especificidad y ganar por orden de carga. */
:root {
  font-size: calc(100% * var(--soc-ui-scale));
}

html[data-bs-theme="light"],
body[data-bs-theme="light"] {
  color-scheme: light;
  --dark-bg: #ffffff;
  --darker-bg: #f4f7fb;
  --card-bg: #ffffff;
  --text-primary: #182433;
  --text-secondary: #66768a;
  --border-color: #dce4ef;
  --soc-bg: #f4f7fb;
  --soc-surface: #ffffff;
  --soc-surface-subtle: #f8fafc;
  --soc-surface-elevated: #ffffff;
  --soc-border: #dce4ef;
  --soc-border-muted: #e7edf5;
  --soc-text: #182433;
  --soc-muted: #66768a;
  --soc-primary: #1668c7;
  --soc-primary-soft: rgba(22, 104, 199, .10);
  --soc-success-soft: rgba(47, 179, 68, .12);
  --soc-warning-soft: rgba(245, 159, 0, .13);
  --soc-danger-soft: rgba(214, 57, 57, .12);
  --soc-hover: #edf4fd;
  --soc-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --soc-shadow-md: 0 10px 30px rgba(15, 23, 42, .07);
  --tblr-body-bg: var(--soc-bg);
  --tblr-body-color: var(--soc-text);
  --tblr-border-color: var(--soc-border);
}

html[data-bs-theme="dark"],
body[data-bs-theme="dark"] {
  color-scheme: dark;
  --dark-bg: #171b22;
  --darker-bg: #0f1218;
  --card-bg: #171b22;
  --text-primary: #e7edf6;
  --text-secondary: #a8b3c3;
  --border-color: #2a3240;
  --soc-bg: #0f1218;
  --soc-surface: #171b22;
  --soc-surface-subtle: #1d232d;
  --soc-surface-elevated: #202733;
  --soc-border: #2a3240;
  --soc-border-muted: #222a36;
  --soc-text: #e7edf6;
  --soc-muted: #a8b3c3;
  --soc-primary: #62a8ff;
  --soc-primary-soft: rgba(98, 168, 255, .15);
  --soc-success-soft: rgba(47, 179, 68, .16);
  --soc-warning-soft: rgba(245, 159, 0, .17);
  --soc-danger-soft: rgba(214, 57, 57, .17);
  --soc-hover: #222a36;
  --soc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --soc-shadow-md: 0 14px 38px rgba(0, 0, 0, .34);
  --tblr-body-bg: var(--soc-bg);
  --tblr-body-color: var(--soc-text);
  --tblr-border-color: var(--soc-border);
}

html[data-bs-theme] body,
body[data-bs-theme] {
  background: var(--soc-bg) !important;
  color: var(--soc-text) !important;
  font-size: .875rem;
}

html[data-bs-theme] .page,
html[data-bs-theme] .page-wrapper,
html[data-bs-theme] .page-body,
body[data-bs-theme] .page,
body[data-bs-theme] .page-wrapper,
body[data-bs-theme] .page-body {
  background: var(--soc-bg) !important;
}

.page-wrapper {
  margin-left: 0 !important;
  width: 100% !important;
}

.page-body {
  padding-top: 1.25rem;
}

.page-body .container-xl,
header.navbar > .container-xl {
  max-width: calc(1480px * var(--soc-ui-scale));
}

header.navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  width: 100%;
  min-height: calc(64px * var(--soc-ui-scale));
  background: color-mix(in srgb, var(--soc-surface) 94%, transparent) !important;
  border-bottom: 1px solid var(--soc-border) !important;
  box-shadow: var(--soc-shadow-sm);
  backdrop-filter: blur(14px);
  overflow: visible !important;
}

header.navbar > .container-xl {
  align-items: center;
  display: flex;
  gap: .75rem;
  max-width: 100%;
  overflow: visible !important;
}

.soc-brand {
  align-items: center;
  display: inline-flex;
  min-width: 0;
}

.soc-version-tag {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  border-radius: 20px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid rgba(22, 104, 199, .35);
  color: #1668c7;
  background: rgba(22, 104, 199, .08);
  vertical-align: middle;
  white-space: nowrap;
}

html[data-bs-theme="dark"] .soc-version-tag,
body[data-bs-theme="dark"] .soc-version-tag {
  border-color: rgba(99, 160, 255, .30);
  color: #7eb8ff;
  background: rgba(99, 160, 255, .08);
}

.soc-brand-logo {
  display: block;
  height: var(--soc-logo-h);
  max-width: 300px;
  object-fit: contain;
  width: auto;
  /* prevent collapse during theme-JS load */
  min-width: 120px;
}

.soc-brand-logo-md {
  height: var(--soc-logo-h);   /* was 36px — too small */
  max-width: 260px;
  min-width: 120px;
}

.soc-brand-logo-lg {
  height: var(--soc-logo-h-lg);   /* was 160px — oversized; 90px suits the login card */
  max-width: 420px;
  min-width: 200px;
}

.soc-brand-logo-dark {
  display: none;
}

/* ── Theme switching — light/dark logo swap ── */
html[data-bs-theme="dark"]  .soc-brand-logo-light,
body[data-bs-theme="dark"]  .soc-brand-logo-light { display: none !important; }

html[data-bs-theme="dark"]  .soc-brand-logo-dark,
body[data-bs-theme="dark"]  .soc-brand-logo-dark {
  display: block !important;
  height: var(--soc-logo-h);
  max-width: 300px;
  width: auto;
  min-width: 120px;
}

/* Navbar dark overrides — explicit sizes so Tabler's .navbar-brand doesn't shrink */
html[data-bs-theme="dark"]  header.navbar .soc-brand-logo-dark,
body[data-bs-theme="dark"]  header.navbar .soc-brand-logo-dark {
  height: var(--soc-logo-h) !important;
  max-width: 300px !important;
  min-width: 120px !important;
  width: auto !important;
}

html[data-bs-theme="dark"]  header.navbar .soc-brand-logo-md,
body[data-bs-theme="dark"]  header.navbar .soc-brand-logo-md {
  height: var(--soc-logo-h) !important;
  max-width: 260px !important;
  min-width: 120px !important;
}

html[data-bs-theme="light"] .soc-brand-logo-light,
body[data-bs-theme="light"] .soc-brand-logo-light { display: block !important; }

html[data-bs-theme="light"] .soc-brand-logo-dark,
body[data-bs-theme="light"] .soc-brand-logo-dark  { display: none !important; }

/* Client logo — theme switching */
.client-logo-light { display: block; }
.client-logo-dark  { display: none; }

html[data-bs-theme="dark"]  .client-logo-light,
body[data-bs-theme="dark"]  .client-logo-light { display: none !important; }
html[data-bs-theme="dark"]  .client-logo-dark,
body[data-bs-theme="dark"]  .client-logo-dark  { display: block !important; }
html[data-bs-theme="light"] .client-logo-light,
body[data-bs-theme="light"] .client-logo-light { display: block !important; }
html[data-bs-theme="light"] .client-logo-dark,
body[data-bs-theme="light"] .client-logo-dark  { display: none !important; }

/* Navbar general — keep logo from being squished by Tabler's own rules */
header.navbar .navbar-brand img,
header.navbar .soc-brand-logo {
  height: var(--soc-logo-h);
  max-height: var(--soc-logo-h);
  max-width: 300px;
  min-width: 120px;
}

/* Login page logo — override Tabler's navbar-brand restrictions */
.page-center .navbar-brand img,
.page-center .soc-brand-logo-lg {
  height: var(--soc-logo-h-lg) !important;
  max-height: var(--soc-logo-h-lg) !important;
  max-width: 420px !important;
  min-width: 200px !important;
  width: auto !important;
}

/* Page loader logo — same size as login to avoid flash */
#page-loader .soc-brand-logo,
#page-loader .soc-brand-logo-md {
  height: var(--soc-logo-h) !important;
  max-width: 260px !important;
  min-width: 120px !important;
  width: auto !important;
}

.soc-client-logo {
  flex: 0 0 auto;
}

#soc-navbar-menu {
  flex: 1 1 auto;
  min-width: 0;
  order: 0;
  overflow: visible !important;
}

#soc-navbar-menu,
#soc-navbar-menu.navbar-collapse,
#soc-navbar-menu .navbar-nav,
#soc-navbar-menu .nav-item {
  overflow: visible !important;
}

#soc-navbar-menu .navbar-nav {
  align-items: center;
  flex-wrap: nowrap;
  gap: .25rem;
  min-width: 0;
  overflow: visible !important;
}

#soc-navbar-menu .nav-item {
  position: relative;
}

#soc-navbar-menu .nav-link {
  align-items: center;
  background: transparent !important;
  border: 1px solid transparent;
  border-radius: 6px;
  box-shadow: none !important;
  color: var(--soc-muted) !important;
  display: inline-flex;
  font-weight: 600;
  height: 38px;
  line-height: 1;
  padding: .45rem .7rem;
  transform: none !important;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

button.nav-link.soc-nav-button,
#soc-navbar-menu button.nav-link {
  appearance: none;
  font-family: inherit;
}

#soc-navbar-menu .nav-link-icon {
  align-items: center;
  display: inline-flex;
  margin-right: .4rem;
  opacity: .82;
  width: 1.05rem;
}

#soc-navbar-menu .dropdown-toggle {
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  gap: .4rem;
  padding-right: .75rem;
  transform: none !important;
}

#soc-navbar-menu .dropdown-toggle::after {
  border-top-color: currentColor;
  margin-left: .15rem;
  opacity: .55;
  transition: transform .16s ease, opacity .16s ease;
}

#soc-navbar-menu .dropdown-toggle[aria-expanded="true"]::after {
  opacity: .8;
  transform: rotate(180deg);
}

#soc-navbar-menu .nav-link:hover,
#soc-navbar-menu .nav-link:focus,
#soc-navbar-menu .dropdown.show > .nav-link,
#soc-navbar-menu .dropdown-toggle[aria-expanded="true"] {
  background: var(--soc-hover) !important;
  border-color: var(--soc-border-muted);
  box-shadow: none !important;
  color: var(--soc-text) !important;
  outline: none;
  transform: none !important;
}

#soc-navbar-menu .nav-link:focus-visible,
header.navbar .nav-link:focus-visible,
header.navbar .btn:focus-visible,
header.navbar .dropdown-toggle:focus-visible {
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--soc-primary) 22%, transparent) !important;
  outline: none;
}

#soc-navbar-menu .nav-link.active,
#soc-navbar-menu .nav-item.active > .nav-link,
#soc-navbar-menu .dropdown.active > .nav-link {
  background: var(--soc-primary-soft) !important;
  border-color: color-mix(in srgb, var(--soc-primary) 26%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-primary) 8%, transparent) !important;
  color: var(--soc-primary) !important;
}

#soc-navbar-menu .nav-link.disabled,
#soc-navbar-menu .nav-link[aria-disabled="true"],
#soc-navbar-menu .dropdown-item.disabled,
#soc-navbar-menu .dropdown-item[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .48;
  pointer-events: none;
}

#soc-navbar-menu .dropdown-menu.soc-nav-dropdown {
  display: none;
  inset: auto auto auto 0 !important;
  left: 0 !important;
  margin: 0 !important;
  max-height: min(72vh, 560px);
  max-width: min(36rem, calc(100vw - 2rem));
  min-width: 220px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: absolute !important;
  right: auto !important;
  top: calc(100% + 10px) !important;
  transform: none !important;
  width: max-content;
  z-index: 9999;
}

#soc-navbar-menu .dropdown-menu.soc-nav-dropdown.show {
  display: block !important;
}

#soc-navbar-menu .nav-item.dropdown {
  position: relative;
  overflow: visible !important;
}

.soc-navbar-status {
  flex: 0 1 auto;
  margin-left: auto !important;
  min-width: 0;
  white-space: nowrap;
}

.soc-navbar-status .system-status-badge {
  background: var(--soc-surface-subtle) !important;
  border: 1px solid var(--soc-border) !important;
  box-shadow: none !important;
  color: var(--soc-muted) !important;
  padding: .45rem .7rem;
}

header.navbar .navbar-nav.flex-row.order-md-last {
  flex: 0 0 auto;
}

header.navbar .btn-primary,
header.navbar .btn-ghost-secondary {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: var(--soc-muted) !important;
  font-weight: 600;
  min-height: 34px;
  transform: none !important;
}

header.navbar .btn-primary,
header.navbar .btn-ghost-secondary:hover {
  background: var(--soc-primary-soft) !important;
  border-color: color-mix(in srgb, var(--soc-primary) 24%, transparent) !important;
  box-shadow: none !important;
  color: var(--soc-primary) !important;
  transform: none !important;
}

#soc-navbar-toggler {
  display: none !important;
}

@media (min-width: 768px) {
  header.navbar > .container-xl {
    flex-wrap: nowrap;
  }

  #soc-navbar-menu {
    display: flex !important;
    flex-basis: auto;
    order: 0;
  }

  #soc-navbar-menu .navbar-nav {
    align-items: center;
    flex-direction: row;
  }
}

.dropdown-menu {
  background: var(--soc-surface-elevated) !important;
  border: 1px solid var(--soc-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--soc-shadow-md) !important;
  color: var(--soc-text) !important;
  padding: .45rem !important;
}

#soc-navbar-menu .dropdown-menu.soc-nav-dropdown {
  margin-top: 0 !important;
}

.dropdown-item {
  align-items: center;
  border-radius: 6px;
  color: var(--soc-text) !important;
  display: flex;
  font-weight: 500;
  gap: .5rem;
  min-height: 34px;
}

#soc-navbar-menu .dropdown-item {
  font-size: .84rem;
  line-height: 1.2;
  padding: .55rem .65rem;
  white-space: normal;
}

#soc-navbar-menu .soc-nav-client-group {
  min-width: 240px;
}

#soc-navbar-menu .soc-nav-client-trigger {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--soc-muted);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 800;
  gap: .75rem;
  justify-content: space-between;
  letter-spacing: .06em;
  min-height: 36px;
  padding: .55rem .65rem;
  text-align: left;
  text-transform: uppercase;
  width: 100%;
}

#soc-navbar-menu .soc-nav-client-trigger:hover,
#soc-navbar-menu .soc-nav-client-trigger:focus,
#soc-navbar-menu .soc-nav-client-group.is-open .soc-nav-client-trigger {
  background: var(--soc-hover);
  color: var(--soc-primary);
  outline: 0;
}

#soc-navbar-menu .soc-nav-client-trigger i {
  font-size: .72rem;
  transition: transform .16s ease;
}

#soc-navbar-menu .soc-nav-client-panel {
  border-left: 1px solid var(--soc-border);
  display: none;
  margin: .05rem 0 .25rem .7rem;
  padding-left: .35rem;
}

#soc-navbar-menu .soc-nav-client-group:hover .soc-nav-client-panel,
#soc-navbar-menu .soc-nav-client-group:focus-within .soc-nav-client-panel,
#soc-navbar-menu .soc-nav-client-group.is-open .soc-nav-client-panel {
  display: block;
}

#soc-navbar-menu .soc-nav-client-group:hover .soc-nav-client-trigger i,
#soc-navbar-menu .soc-nav-client-group:focus-within .soc-nav-client-trigger i,
#soc-navbar-menu .soc-nav-client-group.is-open .soc-nav-client-trigger i {
  transform: rotate(180deg);
}

#soc-navbar-menu .soc-nav-sub-trigger {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
}

#soc-navbar-menu .soc-nav-sub-caret {
  flex: 0 0 auto;
  font-size: .72rem;
  margin-left: auto;
  transition: transform .16s ease;
}

#soc-navbar-menu .soc-nav-sub-panel {
  border-left: 1px solid var(--soc-border);
  display: none;
  margin: .05rem 0 .15rem .85rem;
  padding-left: .35rem;
}

#soc-navbar-menu .soc-nav-sub-group:hover .soc-nav-sub-panel,
#soc-navbar-menu .soc-nav-sub-group:focus-within .soc-nav-sub-panel,
#soc-navbar-menu .soc-nav-sub-group.is-open .soc-nav-sub-panel {
  display: block;
}

#soc-navbar-menu .soc-nav-sub-group:hover .soc-nav-sub-caret,
#soc-navbar-menu .soc-nav-sub-group:focus-within .soc-nav-sub-caret,
#soc-navbar-menu .soc-nav-sub-group.is-open .soc-nav-sub-caret {
  transform: rotate(180deg);
}

#soc-navbar-menu .dropdown-item-icon {
  align-items: center;
  color: var(--soc-muted);
  display: inline-flex;
  flex: 0 0 1.05rem;
  width: 1.05rem;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
  background: var(--soc-hover) !important;
  color: var(--soc-primary) !important;
}

#soc-navbar-menu .dropdown-item:hover .dropdown-item-icon,
#soc-navbar-menu .dropdown-item:focus .dropdown-item-icon,
#soc-navbar-menu .dropdown-item.active .dropdown-item-icon {
  color: var(--soc-primary);
}

.dropdown-divider {
  border-top-color: var(--soc-border) !important;
}

.dropdown-header {
  color: var(--soc-muted) !important;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: .45rem .65rem .3rem;
  text-transform: uppercase;
}

.card,
.blocks-toolbar-card,
.blocks-list-card,
.blocks-modal-card,
.support-modal-card,
.stat-card,
.severity-card,
.alert-card,
.health-card,
.affected-agent-card,
.ip-reputation-card,
.map-card {
  background: var(--soc-surface) !important;
  border: 1px solid var(--soc-border) !important;
  border-radius: var(--soc-radius) !important;
  box-shadow: var(--soc-shadow-sm) !important;
  color: var(--soc-text) !important;
}

.card:hover,
.stat-card:hover,
.severity-card:hover,
.alert-card:hover,
.health-card:hover {
  box-shadow: var(--soc-shadow-md) !important;
}

.card-header,
.side-panel-header,
.support-modal-header,
.blocks-list-header,
.blocks-modal-header,
.ai-header,
.ai-result-header,
.system-summary-header,
.content-header,
.alert-header,
.ticker-header {
  background: var(--soc-surface-subtle) !important;
  border-bottom: 1px solid var(--soc-border) !important;
  color: var(--soc-text) !important;
}

.card-body {
  color: var(--soc-text);
  padding: 1rem;
}

.card-title,
.page-title,
.fw-medium,
.health-value,
.stat-card h3,
.severity-card h3 {
  color: var(--soc-text) !important;
}

.page-pretitle,
.subheader,
.text-secondary,
.header-subtitle,
.support-modal-header p {
  color: var(--soc-muted) !important;
}

.avatar {
  border-radius: var(--soc-radius) !important;
}

.bg-blue-lt,
.bg-azure-lt,
.bg-purple-lt {
  background: var(--soc-primary-soft) !important;
  color: var(--soc-primary) !important;
}

.bg-green-lt {
  background: var(--soc-success-soft) !important;
}

.bg-yellow-lt,
.bg-orange-lt {
  background: var(--soc-warning-soft) !important;
}

.bg-red-lt {
  background: var(--soc-danger-soft) !important;
}

.table,
.table td,
.table th,
.list-group-item {
  background: transparent !important;
  border-color: var(--soc-border-muted) !important;
  color: var(--soc-text) !important;
}

.table thead th {
  background: var(--soc-surface-subtle) !important;
  color: var(--soc-muted) !important;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.table-hover tbody tr:hover,
.table tbody tr:hover {
  background: var(--soc-hover) !important;
}

.form-control,
.form-select,
.input-group-text,
.support-field input,
.support-field select,
.support-field textarea {
  background: var(--soc-surface-elevated) !important;
  border-color: var(--soc-border) !important;
  color: var(--soc-text) !important;
}

.form-control:focus,
.form-select:focus,
.support-field input:focus,
.support-field select:focus,
.support-field textarea:focus {
  border-color: var(--soc-primary) !important;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--soc-primary) 18%, transparent) !important;
}

.btn {
  border-radius: 6px;
  font-weight: 600;
}

.btn-primary {
  background: var(--soc-primary) !important;
  border-color: var(--soc-primary) !important;
  color: #fff !important;          /* lock readable text on the solid bg (both themes); icons inherit via currentColor */
}

.progress {
  background: var(--soc-surface-subtle) !important;
}

.chart-canvas-wrap,
.card canvas,
#trendChart,
#categoryChart,
#severityChart,
#timelineChart {
  color-scheme: inherit;
}

.apexcharts-text,
.apexcharts-legend-text {
  fill: var(--soc-muted) !important;
  color: var(--soc-muted) !important;
}

.card-gradient {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--soc-primary) 12%, transparent), transparent 70%),
    var(--soc-surface) !important;
}

html[data-bs-theme="dark"] img.navbar-brand-image,
html[data-bs-theme="dark"] .navbar-brand img {
  filter: none;
}

@media (max-width: 767.98px) {
  header.navbar > .container-xl {
    flex-wrap: wrap;
  }

  #soc-navbar-toggler {
    display: inline-flex !important;
  }

  #soc-navbar-menu {
    flex: 0 0 100%;
    order: 10;
  }

  #soc-navbar-menu:not(.show) {
    display: none !important;
  }

  #soc-navbar-menu.show {
    display: block !important;
  }

  #soc-navbar-menu .navbar-nav {
    align-items: stretch;
    flex-direction: column;
    overflow-x: visible;
  }

  .soc-navbar-status {
    margin-left: 0 !important;
  }
}

/* ===================================================================
   SweetAlert2 — dark theme support
   SweetAlert ships only light styles and mounts its popup on <body>.
   The app toggles dark mode via [data-bs-theme="dark"] on <html>, so we
   re-skin the popup with Tabler surface variables when dark is active.
   =================================================================== */
[data-bs-theme="dark"] .swal2-popup {
  background: var(--tblr-bg-surface, #1d273b) !important;
  color: var(--tblr-body-color, #e6e9ef) !important;
  border: 1px solid var(--tblr-border-color, #2b3a55);
}
[data-bs-theme="dark"] .swal2-title,
[data-bs-theme="dark"] .swal2-html-container,
[data-bs-theme="dark"] .swal2-content {
  color: var(--tblr-body-color, #e6e9ef) !important;
}
[data-bs-theme="dark"] .swal2-input,
[data-bs-theme="dark"] .swal2-textarea,
[data-bs-theme="dark"] .swal2-select,
[data-bs-theme="dark"] .swal2-file {
  background: var(--tblr-bg-surface-secondary, #151c2c) !important;
  color: var(--tblr-body-color, #e6e9ef) !important;
  border: 1px solid var(--tblr-border-color, #2b3a55) !important;
  box-shadow: none !important;
}
[data-bs-theme="dark"] .swal2-input:focus,
[data-bs-theme="dark"] .swal2-textarea:focus,
[data-bs-theme="dark"] .swal2-select:focus {
  border-color: var(--tblr-primary, #4299e1) !important;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, .18) !important;
}
[data-bs-theme="dark"] .swal2-input::placeholder,
[data-bs-theme="dark"] .swal2-textarea::placeholder {
  color: var(--tblr-secondary, #8a97ad) !important;
}
[data-bs-theme="dark"] .swal2-close {
  color: var(--tblr-secondary, #8a97ad) !important;
}
[data-bs-theme="dark"] .swal2-close:hover {
  color: var(--tblr-body-color, #fff) !important;
}
[data-bs-theme="dark"] .swal2-footer {
  color: var(--tblr-secondary, #8a97ad) !important;
  border-top-color: var(--tblr-border-color, #2b3a55) !important;
}
[data-bs-theme="dark"] .swal2-validation-message {
  background: var(--tblr-bg-surface-secondary, #151c2c) !important;
  color: var(--tblr-body-color, #e6e9ef) !important;
}
[data-bs-theme="dark"] .swal2-timer-progress-bar {
  background: rgba(255, 255, 255, .25) !important;
}

/* ===========================================================================
   SOC left sidebar — Herramientas (admin / operadorsoc only). Theme-aware via
   --soc-* tokens (no hardcoded colors). Mounted in base_tabler.html (#soc-sidebar).
   =========================================================================== */
:root {
  --soc-sidebar-w: calc(264px * var(--soc-ui-scale));
  --soc-sidebar-w-collapsed: calc(64px * var(--soc-ui-scale));
}

/* Layout: sidebar + page-wrapper side by side; content reflows automatically. */
.page.soc-has-sidebar { display: flex; flex-direction: row; align-items: stretch; }
.soc-has-sidebar .page-wrapper { flex: 1 1 auto; width: auto !important; min-width: 0; }

#soc-sidebar {
  flex: 0 0 var(--soc-sidebar-w); width: var(--soc-sidebar-w);
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  background: var(--soc-surface); border-right: 1px solid var(--soc-border);
  box-shadow: var(--soc-shadow-sm); z-index: 1035;
  transition: flex-basis .2s ease, width .2s ease;
}
.soc-sidebar-head {
  display: flex; align-items: center; gap: .6rem;
  min-height: calc(64px * var(--soc-ui-scale)); padding: .5rem 1rem;
  border-bottom: 1px solid var(--soc-border);
  position: sticky; top: 0; background: var(--soc-surface); z-index: 1;
}
.soc-sidebar-title { display: flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--soc-text); font-size: .95rem; white-space: nowrap; }
.soc-sidebar-title i { color: var(--soc-primary); font-size: 1.05rem; }
.soc-sidebar-body { flex: 1 1 auto; padding: .5rem .5rem 3.25rem; }
.soc-sidebar-empty { color: var(--soc-muted); font-size: .82rem; padding: .75rem 1rem; }

/* Accordion groups */
.soc-tool-group { margin-bottom: .15rem; }
.soc-tool-group-head {
  width: 100%; display: flex; align-items: center; gap: .55rem;
  padding: .5rem .6rem; border: 0; background: transparent; cursor: pointer;
  color: var(--soc-muted); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; border-radius: var(--soc-radius);
}
.soc-tool-group-head:hover { background: var(--soc-hover); color: var(--soc-text); }
.soc-tool-group-head .soc-group-ico { color: var(--soc-primary); font-size: .9rem; }
.soc-tool-group-head .soc-group-chevron { margin-left: auto; transition: transform .2s; font-size: .8rem; }
.soc-tool-group-head[aria-expanded="false"] .soc-group-chevron { transform: rotate(-90deg); }
.soc-tool-group-items.soc-collapsed { display: none; }

.soc-tool-item {
  display: flex; align-items: center; gap: .6rem; text-decoration: none;
  padding: .45rem .6rem; border-radius: var(--soc-radius);
  color: var(--soc-text); font-size: .86rem;
}
.soc-tool-item:hover { background: var(--soc-hover); color: var(--soc-text); }
.soc-tool-item .soc-tool-ico {
  width: 1.7rem; height: 1.7rem; flex: 0 0 1.7rem; display: flex; align-items: center;
  justify-content: center; border-radius: 6px; background: var(--soc-primary-soft);
  color: var(--accent, var(--soc-primary)); font-size: .9rem;
}
.soc-tool-item .soc-tool-name { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-tool-unpin {
  flex: 0 0 auto; border: 0; background: transparent; color: var(--soc-muted);
  opacity: 0; transition: opacity .15s; cursor: pointer; padding: .1rem .3rem; border-radius: 4px; font-size: .85rem;
}
.soc-tool-item:hover .soc-tool-unpin { opacity: 1; }
.soc-tool-unpin:hover { color: var(--soc-primary); background: var(--soc-primary-soft); }

/* Footer actions */
.soc-sidebar-foot {
  border-top: 1px solid var(--soc-border-muted); padding: .5rem;
  display: flex; flex-direction: column; gap: .2rem;
  position: sticky; bottom: 0; background: var(--soc-surface);
}
.soc-sidebar-act {
  display: flex; align-items: center; gap: .6rem; width: 100%; border: 0; background: transparent;
  color: var(--soc-muted); font-size: .82rem; padding: .5rem .6rem; border-radius: var(--soc-radius); cursor: pointer; white-space: nowrap;
}
.soc-sidebar-act:hover { background: var(--soc-hover); color: var(--soc-text); }
.soc-sidebar-act i { font-size: 1rem; width: 1.2rem; text-align: center; flex: 0 0 auto; }

/* Per-tool accent (icon color) */
#soc-sidebar .acc-cyan   { --accent: var(--tblr-cyan,   #17a2b8); }
#soc-sidebar .acc-blue   { --accent: var(--tblr-blue,   #4299e1); }
#soc-sidebar .acc-green  { --accent: var(--tblr-green,  #2fb344); }
#soc-sidebar .acc-purple { --accent: var(--tblr-purple, #ae3ec9); }
#soc-sidebar .acc-orange { --accent: var(--tblr-orange, #f76707); }
#soc-sidebar .acc-red    { --accent: var(--tblr-red,    #d63939); }

/* Collapsed icon rail (desktop) */
.soc-sidebar-collapsed #soc-sidebar { flex-basis: var(--soc-sidebar-w-collapsed); width: var(--soc-sidebar-w-collapsed); }
.soc-sidebar-collapsed #soc-sidebar .soc-sidebar-label,
.soc-sidebar-collapsed #soc-sidebar .soc-tool-name,
.soc-sidebar-collapsed #soc-sidebar .soc-tool-unpin,
.soc-sidebar-collapsed #soc-sidebar .soc-tool-group-head { display: none; }
.soc-sidebar-collapsed #soc-sidebar .soc-tool-item,
.soc-sidebar-collapsed #soc-sidebar .soc-sidebar-act,
.soc-sidebar-collapsed #soc-sidebar .soc-sidebar-title { justify-content: center; }
.soc-sidebar-collapsed #soc-sidebar .soc-collapse-ico { transform: rotate(180deg); }
/* In the rail, always show the tool icons regardless of group collapse state */
.soc-sidebar-collapsed #soc-sidebar .soc-tool-group-items { display: block !important; }

/* Mobile: off-canvas sidebar + hamburger + backdrop */
.soc-sidebar-toggle { display: none; }
.soc-sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1044; }
.soc-sidebar-backdrop[hidden] { display: none; }

@media (max-width: 992px) {
  .page.soc-has-sidebar { display: block; }                 /* stop the flex row */
  #soc-sidebar {
    position: fixed; left: 0; top: 0; height: 100vh;
    flex-basis: var(--soc-sidebar-w) !important; width: var(--soc-sidebar-w) !important;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .25s ease, visibility .25s ease; z-index: 1045;
  }
  #soc-sidebar.soc-open { transform: translateX(0); visibility: visible; }
  .soc-sidebar-toggle { display: inline-flex; }
  /* On mobile the off-canvas panel is always full (the rail/collapse is a desktop concept) */
  .soc-sidebar-collapsed #soc-sidebar { flex-basis: var(--soc-sidebar-w) !important; width: var(--soc-sidebar-w) !important; }
  .soc-sidebar-collapsed #soc-sidebar .soc-sidebar-label,
  .soc-sidebar-collapsed #soc-sidebar .soc-tool-name { display: inline; }
  .soc-sidebar-collapsed #soc-sidebar .soc-tool-group-head { display: flex; }
  .soc-sidebar-collapsed #soc-sidebar .soc-tool-item,
  .soc-sidebar-collapsed #soc-sidebar .soc-sidebar-act { justify-content: flex-start; }
}

/* ===========================================================================
   Sidebar BRAND (GlobalCatalog) — the wordmark that used to live in the navbar.
   Shown expanded in the head; swapped for a compact square mark in the rail.
   =========================================================================== */
.soc-sidebar-brand { display: inline-flex; align-items: center; min-width: 0; text-decoration: none; }
#soc-sidebar .soc-brand-logo { height: var(--soc-logo-h); max-width: 216px; min-width: 0; width: auto; }
html[data-bs-theme="dark"] #soc-sidebar .soc-brand-logo-dark,
body[data-bs-theme="dark"] #soc-sidebar .soc-brand-logo-dark {
  height: var(--soc-logo-h) !important; max-width: 216px !important; min-width: 0 !important; width: auto !important;
}
.soc-sidebar-mark { display: none; width: 30px; height: 30px; border-radius: 8px; object-fit: contain; }

/* ===========================================================================
   Sidebar NAVIGATION — vertical accordion built from native <details>/<summary>.
   Migrated from the top navbar (Dashboard / SIEM / Inteligencia). Theme-aware.
   =========================================================================== */
.soc-snav { display: flex; flex-direction: column; gap: .1rem; }
.soc-snav-divider { height: 1px; background: var(--soc-border-muted); margin: .55rem .35rem; }

/* Group overline labels (General / Monitoreo / Inteligencia) */
.soc-snav-label {
  padding: .6rem .65rem .3rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--soc-muted); line-height: 1.2;
}
.soc-snav > .soc-snav-label:first-child { padding-top: .3rem; }

/* Tenant selector (staff) — custom dropdown with each client's logo + name */
.soc-tenant-wrap { padding: .15rem .15rem .55rem; }
.soc-tenant-label { display: block; padding: .35rem .5rem .3rem; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--soc-muted); }
.soc-tenant { position: relative; }
.soc-tenant-trigger {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .45rem .6rem; border-radius: 8px; cursor: pointer; list-style: none;
  border: 1px solid var(--soc-border); background: var(--soc-hover); color: var(--soc-text);
  font-size: .86rem; font-weight: 600;
}
.soc-tenant-trigger::-webkit-details-marker { display: none; }
.soc-tenant-trigger::marker { content: ""; }
.soc-tenant-trigger:hover { border-color: color-mix(in srgb, var(--soc-primary) 45%, var(--soc-border)); }
.soc-tenant[open] .soc-tenant-trigger { border-color: var(--soc-primary); }
.soc-tenant-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-tenant-caret { flex: 0 0 auto; color: var(--soc-muted); font-size: .85rem; transition: transform .18s ease; }
.soc-tenant[open] .soc-tenant-caret { transform: rotate(180deg); }

/* Client logo (small) — height-constrained so wordmarks stay compact */
.soc-tenant-logo { flex: 0 0 auto; height: 18px; max-width: 52px; width: auto; object-fit: contain; }
.soc-tenant-logo-fallback { flex: 0 0 auto; width: 20px; text-align: center; color: var(--soc-muted); font-size: 1rem; }

/* Dropdown panel */
.soc-tenant-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  max-height: 60vh; overflow-y: auto; padding: .3rem;
  background: var(--soc-surface-elevated, var(--soc-surface)); border: 1px solid var(--soc-border);
  border-radius: 10px; box-shadow: var(--soc-shadow-md);
}
.soc-tenant:not([open]) .soc-tenant-menu { display: none; }
.soc-tenant-opt {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .45rem .5rem; border-radius: 7px; text-decoration: none;
  color: var(--soc-text); font-size: .85rem; white-space: nowrap;
}
.soc-tenant-opt:hover { background: var(--soc-hover); }
.soc-tenant-opt.is-current { background: var(--soc-primary-soft); color: var(--soc-primary); font-weight: 600; }
.soc-tenant-check { flex: 0 0 auto; margin-left: auto; color: var(--soc-primary); font-size: .9rem; }

/* Last-ticket counter, relocated to the sidebar foot with an eye toggle */
.soc-ticket-side { display: flex; align-items: center; gap: .35rem; padding: .15rem .1rem .45rem; }
.soc-ticket-side #soc-ticket-counter-wrap { flex: 1 1 auto; min-width: 0; }
.soc-ticket-side #soc-ticket-counter { width: 100%; justify-content: flex-start; font-size: .75rem; font-weight: 600; padding: .35rem .5rem; }
.soc-ticket-side #soc-ticket-counter .soc-sidebar-label { overflow: hidden; text-overflow: ellipsis; }
.soc-ticket-side.is-hidden #soc-ticket-counter-wrap { display: none !important; }
.soc-ticket-ph { display: none; flex: 1 1 auto; min-width: 0; align-items: center; gap: .4rem; padding: .3rem .5rem; border: 1px dashed var(--soc-border); border-radius: 8px; background: var(--soc-surface-subtle); color: var(--soc-muted); font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; text-align: left; }
.soc-ticket-ph:hover { color: var(--soc-text); border-color: var(--soc-primary); }
.soc-ticket-ph .soc-ticket-ph-hint { margin-left: auto; font-weight: 500; opacity: .8; }
.soc-ticket-side.is-hidden .soc-ticket-ph { display: inline-flex; }
.soc-ticket-eye { flex: 0 0 auto; border: 0; background: transparent; color: var(--soc-muted); cursor: pointer; padding: .3rem; border-radius: 6px; display: inline-flex; line-height: 1; }
.soc-ticket-eye:hover { background: var(--soc-hover); color: var(--soc-text); }
.soc-ticket-side.is-hidden .soc-ticket-eye { color: var(--soc-muted); opacity: .7; }

/* On-duty N1/N2 card, under the last-ticket counter, with its own eye toggle */
.soc-guard-side { margin: 0 .1rem .5rem; border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-surface-subtle); overflow: hidden; }
.soc-guard-side[hidden] { display: none !important; }
.soc-guard-head { display: flex; align-items: center; justify-content: space-between; padding: .2rem .2rem .2rem .55rem; }
.soc-guard-title { display: inline-flex; align-items: center; gap: .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--soc-muted); }
.soc-guard-live { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: socGuardLive 2s ease-out infinite; }
.soc-guard-side.is-stale .soc-guard-live { background: var(--soc-muted); animation: none; }
@keyframes socGuardLive { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.45); } 70%,100% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } }
.soc-guard-body { display: grid; gap: .15rem; padding: 0 .35rem .4rem; max-height: 22rem; transition: max-height .2s ease, opacity .2s ease, padding .2s ease; }
.soc-guard-side.is-hidden .soc-guard-body { max-height: 0; opacity: 0; padding-bottom: 0; }
.soc-guard-actions { display: inline-flex; align-items: center; }
.soc-guard-row { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .3rem .25rem; border: 0; background: transparent; border-radius: 8px; min-width: 0; text-align: left; color: inherit; cursor: pointer; font: inherit; }
.soc-guard-row:hover, .soc-guard-row[aria-expanded="true"] { background: var(--soc-hover); }
.soc-guard-row:focus-visible { outline: 2px solid var(--soc-primary); outline-offset: 1px; }
.soc-guard-caret { flex: 0 0 auto; margin-left: auto; font-size: .7rem; color: var(--soc-muted); transition: transform .15s ease; }
.soc-guard-row[aria-expanded="true"] .soc-guard-caret { transform: rotate(180deg); }
.soc-guard-next { display: flex; flex-direction: column; gap: .05rem; margin: .15rem .25rem .3rem 2.3rem; padding: .35rem .5rem; border-left: 2px solid var(--soc-primary); border-radius: 0 6px 6px 0; background: var(--soc-surface); line-height: 1.25; }
.soc-guard-next[hidden] { display: none !important; }
#soc-guard-n2-next { border-left-color: #d97706; }
.soc-guard-next-lbl { font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--soc-muted); }
.soc-guard-next-name { font-size: .8rem; font-weight: 600; color: var(--soc-text); }
.soc-guard-next-meta { font-size: .7rem; color: var(--soc-muted); }

/* Calendar modal — month grid, same look as certsoc /turnos */
.soc-gcal-header { gap: .5rem; }
.soc-gcal-nav { display: inline-flex; align-items: center; gap: .25rem; margin-left: auto; }
.soc-gcal-month { min-width: 9.5rem; text-align: center; font-weight: 700; font-size: .92rem; color: var(--soc-text); }
.soc-gcal-legend { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .85rem; }
.soc-gcal-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; padding: .15rem .5rem; border-radius: 6px; border: 1px solid var(--soc-border); color: var(--soc-muted); }
.soc-gcal-chip.is-dia { background: rgba(251,191,36,.12); border-color: rgba(217,119,6,.35); color: #92400e; }
.soc-gcal-chip.is-noc { background: rgba(139,92,246,.10); border-color: rgba(124,58,237,.35); color: #5b21b6; }
.soc-gcal-wk { display: flex; align-items: center; gap: .6rem; margin: .1rem 0 .4rem; }
.soc-gcal-wk-lbl { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--soc-muted); white-space: nowrap; }
.soc-gcal-wk.is-current .soc-gcal-wk-lbl { color: var(--soc-primary); }
.soc-gcal-wk-line { flex: 1; height: 1px; background: var(--soc-border); }
.soc-gcal-wk-n2 { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 600; color: #b45309; white-space: nowrap; }
.soc-gcal-wk-badge { font-size: .64rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: var(--soc-primary-soft); color: var(--soc-primary); }
.soc-gcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-bottom: 1rem; }
.soc-gcal-dow { text-align: center; font-size: .68rem; font-weight: 600; color: var(--soc-muted); padding-bottom: 2px; }
.soc-gcal-day { border: 2px solid var(--soc-border); border-radius: 8px; overflow: hidden; min-height: 78px; background: var(--soc-surface); }
.soc-gcal-day.is-weekend { background: var(--soc-surface-subtle); }
.soc-gcal-day.is-past { opacity: .5; }
.soc-gcal-day.is-today { border-color: var(--soc-primary); }
.soc-gcal-day.is-out { background: var(--soc-surface-subtle); border-color: transparent; }
.soc-gcal-num { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px; border-bottom: 1px solid var(--soc-border); font-size: .76rem; font-weight: 500; color: var(--soc-text); }
.soc-gcal-day.is-today .soc-gcal-num { background: var(--soc-primary-soft); color: var(--soc-primary); font-weight: 700; }
.soc-gcal-today { font-size: .56rem; font-weight: 700; padding: 1px 5px; border-radius: 999px; background: var(--soc-primary); color: #fff; }
.soc-gcal-slot { position: relative; padding: 2px 5px; font-size: .68rem; line-height: 1.3; }
.soc-gcal-slot .soc-gcal-h { font-size: .6rem; font-weight: 600; display: flex; align-items: center; gap: .2rem; }
.soc-gcal-slot .soc-gcal-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.soc-gcal-slot.is-dia { background: rgba(251,191,36,.12); border-bottom: 1px solid rgba(217,119,6,.25); color: #78350f; }
.soc-gcal-slot.is-dia .soc-gcal-h { color: #92400e; }
.soc-gcal-slot.is-noc { background: rgba(139,92,246,.10); color: #4c1d95; }
.soc-gcal-slot.is-noc .soc-gcal-h { color: #5b21b6; }
.soc-gcal-slot.is-now { box-shadow: inset 3px 0 0 #22c55e; }
.soc-gcal-slot.is-now .soc-gcal-who { font-weight: 700; }
[data-bs-theme="dark"] .soc-gcal-slot.is-dia, [data-bs-theme="dark"] .soc-gcal-chip.is-dia { color: #fcd34d; }
[data-bs-theme="dark"] .soc-gcal-slot.is-dia .soc-gcal-h { color: #fbbf24; }
[data-bs-theme="dark"] .soc-gcal-slot.is-noc, [data-bs-theme="dark"] .soc-gcal-chip.is-noc { color: #c4b5fd; }
[data-bs-theme="dark"] .soc-gcal-slot.is-noc .soc-gcal-h { color: #a78bfa; }
[data-bs-theme="dark"] .soc-gcal-wk-n2 { color: #fbbf24; }
@media (max-width: 576px) {
  .soc-gcal-slot .soc-gcal-h span { display: none; }
  .soc-gcal-day { min-height: 64px; }
}
.soc-guard-av { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; }
.soc-guard-av-n1 { background: var(--soc-primary-soft); color: var(--soc-primary); }
.soc-guard-av-n2 { background: var(--soc-warning-soft); color: #b45309; }
.soc-guard-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.soc-guard-name { display: flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; color: var(--soc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-guard-name [data-role="name"] { overflow: hidden; text-overflow: ellipsis; }
.soc-guard-lvl { flex: 0 0 auto; font-size: .6rem; font-weight: 700; padding: .05rem .3rem; border-radius: 4px; border: 1px solid var(--soc-border); color: var(--soc-muted); }
.soc-guard-meta { font-size: .7rem; color: var(--soc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Top-level rows: leaf links (.soc-snav-link) and section headers (.soc-snav-summary) */
.soc-snav-link,
.soc-snav-summary {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .55rem .7rem; border-radius: 8px;
  border: 1px solid transparent; color: var(--soc-text);
  font-size: .875rem; font-weight: 500; text-decoration: none;
  cursor: pointer; white-space: nowrap;
}
.soc-snav-summary { list-style: none; }
.soc-snav-summary::-webkit-details-marker { display: none; }
.soc-snav-summary::marker { content: ""; }
.soc-snav-link:hover,
.soc-snav-summary:hover { background: var(--soc-hover); color: var(--soc-text); }

.soc-snav-ic {
  flex: 0 0 1.35rem; width: 1.35rem; display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--soc-muted); font-size: 1.05rem;
}
.soc-snav-link .soc-sidebar-label,
.soc-snav-summary .soc-sidebar-label,
.soc-snav-item .soc-sidebar-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }

.soc-snav-caret {
  flex: 0 0 auto; margin-left: auto; font-size: .72rem;
  color: var(--soc-muted); transition: transform .18s ease;
}
details[open] > .soc-snav-summary > .soc-snav-caret { transform: rotate(90deg); }

/* Section headers are neutral by default; only the section where the user is
   standing gets highlighted (destacado) via .is-current — set server-side. */
.soc-snav-summary.is-current { background: var(--soc-primary-soft); color: var(--soc-primary); font-weight: 600; }
.soc-snav-summary.is-current .soc-snav-ic,
.soc-snav-summary.is-current .soc-snav-caret { color: var(--soc-primary); }

/* Nested container (indented, guide rail on the left) */
.soc-snav-sub {
  display: flex; flex-direction: column; gap: .1rem;
  margin: .1rem 0 .3rem .9rem; padding-left: .55rem;
  border-left: 1px solid var(--soc-border-muted);
}

/* Leaf items inside sections */
.soc-snav-item {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .42rem .55rem; border-radius: var(--soc-radius);
  border: 1px solid transparent; color: var(--soc-text);
  font-size: .84rem; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.soc-snav-item:hover { background: var(--soc-hover); color: var(--soc-text); }
.soc-snav-item .soc-snav-ic { flex: 0 0 1.25rem; width: 1.25rem; font-size: .9rem; color: var(--soc-muted); }
.soc-snav-ext { flex: 0 0 auto; margin-left: auto; font-size: .7rem; opacity: .55; }

/* Sub-section headers (client group / Bloqueos) — slightly smaller & muted */
.soc-snav-summary-sm { font-size: .82rem; font-weight: 500; color: var(--soc-text); }
.soc-snav-summary-sm .soc-snav-ic { flex-basis: 1.25rem; width: 1.25rem; font-size: .9rem; color: var(--soc-muted); }

/* Active states */
.soc-snav-link.is-active,
.soc-snav-item.is-active {
  background: var(--soc-primary-soft);
  color: var(--soc-primary); font-weight: 600;
}
.soc-snav-link.is-active .soc-snav-ic,
.soc-snav-item.is-active .soc-snav-ic { color: var(--soc-primary); }

/* Copyright at the sidebar foot (Kaspersky-style) */
.soc-sidebar-copy {
  padding: .45rem .7rem .1rem; margin-top: .1rem;
  font-size: .68rem; color: var(--soc-muted); opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Desktop collapsed rail: icon-only. Hide submenus/labels, center the icons.
   Scoped to desktop so the mobile off-canvas drawer always stays full-width. */
@media (min-width: 993px) {
  .soc-sidebar-collapsed #soc-sidebar .soc-brand-logo { display: none !important; }
  .soc-sidebar-collapsed #soc-sidebar .soc-sidebar-head { justify-content: center; }
  .soc-sidebar-collapsed #soc-sidebar .soc-sidebar-mark { display: block; }
  .soc-sidebar-collapsed #soc-sidebar .soc-snav-sub,
  .soc-sidebar-collapsed #soc-sidebar .soc-snav-caret,
  .soc-sidebar-collapsed #soc-sidebar .soc-snav-ext,
  .soc-sidebar-collapsed #soc-sidebar .soc-tenant-wrap,
  .soc-sidebar-collapsed #soc-sidebar .soc-ticket-side,
  .soc-sidebar-collapsed #soc-sidebar .soc-guard-side,
  .soc-sidebar-collapsed #soc-sidebar .soc-snav-divider { display: none !important; }
  .soc-sidebar-collapsed #soc-sidebar .soc-snav-link,
  .soc-sidebar-collapsed #soc-sidebar .soc-snav-summary { justify-content: center; padding-left: 0; padding-right: 0; }
}

/* ===========================================================================
   Tools DIRECTORY modal — global styles (the modal moved from dashboard.html to
   base_tabler.html, so its rows must be styled on every page, not only /dashboard).
   =========================================================================== */
#tool-directory-modal .acc-cyan   { --accent: var(--tblr-cyan,   #17a2b8); }
#tool-directory-modal .acc-blue   { --accent: var(--tblr-blue,   #4299e1); }
#tool-directory-modal .acc-green  { --accent: var(--tblr-green,  #2fb344); }
#tool-directory-modal .acc-purple { --accent: var(--tblr-purple, #ae3ec9); }
#tool-directory-modal .acc-orange { --accent: var(--tblr-orange, #f76707); }
#tool-directory-modal .acc-red    { --accent: var(--tblr-red,    #d63939); }

.noc-dir-row { display: flex; align-items: center; gap: .8rem; padding: .6rem .15rem; border-bottom: 1px solid var(--soc-border-muted); }
.noc-dir-row:last-child { border-bottom: 0; }
.noc-dir-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--accent, var(--soc-primary)); background: var(--soc-primary-soft); }
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .noc-dir-ico { background: color-mix(in srgb, var(--accent, var(--soc-primary)) 15%, transparent); }
}
.noc-dir-body { min-width: 0; flex: 1; }
.noc-dir-title { font-weight: 700; font-size: .9rem; line-height: 1.2; }
.noc-dir-desc { font-size: .74rem; color: var(--soc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.noc-dir-actions { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.noc-dir-iconbtn { border: 1px solid var(--soc-border); background: var(--soc-surface); color: var(--soc-muted); width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.noc-dir-iconbtn:hover { color: var(--soc-text); background: var(--soc-hover); }
.noc-pin-btn { border: 1px solid var(--soc-border); background: var(--soc-surface); color: var(--soc-muted); border-radius: 8px; padding: .3rem .6rem; font-size: .8rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.noc-pin-btn:hover { border-color: var(--soc-primary); color: var(--soc-primary); }
.noc-pin-btn.pinned { border-color: var(--accent, var(--soc-primary)); color: var(--accent, var(--soc-primary)); background: var(--soc-primary-soft); }
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .noc-pin-btn.pinned { background: color-mix(in srgb, var(--accent, var(--soc-primary)) 14%, transparent); }
}

/* ===== Sidebar review fixes ===== */
/* El FAB de Soporte vive en la esquina inferior DERECHA en todas las vistas, asi
   que ya no necesita esquivar la sidebar izquierda. */

/* Touch devices have no :hover, so reveal the per-item unpin button there. */
@media (hover: none) {
  #soc-sidebar .soc-tool-unpin { opacity: 1; }
}

/* ===== Footer flotante de auto-actualización (NOC + dashboard) ===== */
.soc-refresh-footer {
  position: fixed; right: 18px; bottom: 18px; z-index: 1040;
  display: flex; align-items: center; gap: .55rem;
  background: var(--soc-surface); border: 1px solid var(--soc-border);
  border-radius: 999px; box-shadow: var(--soc-shadow-md);
  padding: .4rem .55rem; color: var(--soc-text);
}
.soc-refresh-footer .srf-main { min-width: 152px; }
.soc-refresh-footer .srf-label { font-size: .76rem; color: var(--soc-muted); margin-bottom: .28rem; white-space: nowrap; display: flex; align-items: center; gap: .35rem; }
.soc-refresh-footer .srf-label b { color: var(--soc-text); font-variant-numeric: tabular-nums; }
.soc-refresh-footer .srf-bar { height: 4px; border-radius: 999px; background: var(--soc-border-muted); overflow: hidden; }
.soc-refresh-footer .srf-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--soc-primary); transition: width 1s linear; }
.soc-refresh-footer.srf-paused .srf-bar > i { background: var(--soc-muted); transition: none; }
.soc-refresh-footer.srf-busy .srf-bar > i { background: var(--soc-primary); }
.soc-refresh-footer .srf-btn {
  border: 0; background: var(--soc-surface-subtle); color: var(--soc-text);
  width: 2rem; height: 2rem; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s ease, color .12s ease;
}
.soc-refresh-footer .srf-btn:hover { background: var(--soc-hover); color: var(--soc-primary); }
@media (max-width: 576px) {
  .soc-refresh-footer { right: 10px; bottom: 10px; }
  .soc-refresh-footer .srf-main { min-width: 108px; }
}

/* El indicador "Cargando…" del navbar se reemplaza por el footer flotante. */
#navbar-loading { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   NAVBAR MEJORADO — estilo enterprise/SOC (card flotante glass)
   Añadido 2026-07-01. Override sobre las variables --soc-*.
   ══════════════════════════════════════════════════════════════════ */

/* Card flotante: margen, radio, borde completo, sombra, glass */
header.navbar {
  margin: 0 !important;
  width: auto !important;
  border: 0 !important;
  border-bottom: 1px solid var(--soc-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--soc-surface) !important;
  backdrop-filter: none !important;
  min-height: 64px;
}
html[data-bs-theme="dark"] header.navbar,
body[data-bs-theme="dark"] header.navbar {
  box-shadow: none !important;
  background: var(--soc-surface) !important;
}
header.navbar > .container-xl {
  position: relative;      /* ancla del buscador centralizado */
  padding-inline: 1rem;
}

/* Separador vertical tras el logo */
.soc-brand {
  padding-right: .95rem;
  border-right: 1px solid var(--soc-border);
  margin-right: .15rem;
}

/* Subtítulo CyberSOC */
.soc-brand-sub {
  align-self: center;
  margin-left: .55rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--soc-primary);
  line-height: 1;
  opacity: .95;
}

/* Estado activo: UNA sola línea azul (la caja con fondo+borde ya existente).
   Se quitó el subrayado ::before para no duplicar la línea. */

/* Buscador centralizado tipo pill (icono izq + texto + CTRL+K der).
   Centrado con flex (auto-margins) — el nav no crece, así no hay solape. */
@media (min-width: 768px) {
  header.navbar #soc-navbar-menu.navbar-collapse { flex-grow: 0 !important; }
  header.navbar .navbar-nav.flex-row.order-md-last { flex: 1 1 auto; }
  header.navbar #cmdk-nav-center { margin-left: auto; }
  /* El margen derecho va en el item que SIGUE al buscador (siempre existe), no en
     Guard IA: los clientes sin Guard IA quedaban con el buscador pegado a la derecha. */
  header.navbar #cmdk-nav-center + .nav-item { margin-left: auto; }
}
header.navbar .cmdk-navbtn {
  min-width: 480px;
  height: 42px;
  justify-content: space-between;
  padding: 0 .5rem 0 .95rem;
  border-radius: 12px;
  border: 1px solid var(--soc-border);
  background: color-mix(in srgb, var(--soc-surface) 65%, var(--soc-hover));
  color: var(--soc-muted);
  gap: .6rem;
}
header.navbar .cmdk-navbtn:hover {
  border-color: color-mix(in srgb, var(--soc-primary) 45%, var(--soc-border));
  background: var(--soc-surface);
  color: var(--soc-text);
}
header.navbar .cmdk-navbtn-label { flex: 1 1 auto; text-align: left; font-weight: 500; }
header.navbar .cmdk-navbtn-kbd {
  background: var(--soc-surface);
  border: 1px solid var(--soc-border);
  color: var(--soc-muted);
  border-radius: 6px;
  padding: .12rem .45rem;
  font-size: .68rem;
}
@media (max-width: 1200px) { header.navbar .cmdk-navbtn { min-width: 300px; } }
@media (max-width: 992px) {
  header.navbar #cmdk-nav-center { margin-left: .5rem; }
  header.navbar .cmdk-navbtn { min-width: 0; }
}

/* Grupo de acciones (derecha) + separador antes del perfil */
header.navbar .navbar-nav.order-md-last { gap: .28rem; align-items: center; }
header.navbar .navbar-nav.order-md-last > .nav-item.dropdown {
  border-left: 1px solid var(--soc-border);
  margin-left: .35rem;
  padding-left: .5rem;
}

/* Botón Guard IA (donde iría la campana): presencia de acción rápida */
header.navbar .guard-navbtn {
  border: 1px solid var(--soc-border) !important;
  border-radius: 11px !important;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--soc-primary) !important;
}
header.navbar .guard-navbtn:hover {
  background: var(--soc-primary-soft) !important;
  border-color: color-mix(in srgb, var(--soc-primary) 40%, var(--soc-border)) !important;
}

/* Toggle de tema: mismo tratamiento de "acción rápida" */
header.navbar .hide-theme-light.nav-link,
header.navbar .hide-theme-dark.nav-link {
  border: 1px solid var(--soc-border);
  border-radius: 11px;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Perfil: avatar circular + nombre + rol */
#nav-dropdown-toggle {
  border: 1px solid var(--soc-border) !important;
  border-radius: 12px !important;
  padding: .28rem .55rem !important;
  gap: .55rem !important;
}
#nav-dropdown-toggle:hover {
  background: var(--soc-hover) !important;
  border-color: color-mix(in srgb, var(--soc-primary) 40%, var(--soc-border)) !important;
}
.soc-avatar {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--soc-primary-soft);
  color: var(--soc-primary);
  border: 1px solid color-mix(in srgb, var(--soc-primary) 30%, transparent);
}
.soc-avatar svg { width: 19px; height: 19px; }
.soc-userbox { flex-direction: column; align-items: flex-start; line-height: 1.05; gap: 2px; }
.soc-username { font-weight: 700; font-size: .86rem; color: var(--soc-text); }
.soc-userrole {
  font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--soc-primary);
  background: var(--soc-primary-soft);
  border: 1px solid color-mix(in srgb, var(--soc-primary) 22%, transparent);
  border-radius: 999px; padding: .04rem .4rem;
}

/* Badge "PROX" (próximamente) para ítems del sidebar */
.soc-soon-pill {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .09em;
  color: #fff;
  padding: .12rem .44rem;
  border-radius: 999px;
  line-height: 1.45;
  background: linear-gradient(135deg, #6366f1, #0ea5e9);
  box-shadow: 0 2px 8px rgba(14, 165, 233, .38);
  animation: soc-soon-glow 2.6s ease-in-out infinite;
}
@keyframes soc-soon-glow {
  0%, 100% { box-shadow: 0 2px 8px rgba(14, 165, 233, .32); }
  50%      { box-shadow: 0 2px 14px rgba(99, 102, 241, .55); }
}

/* ── Sidebar: badge de conteo y etiqueta del cliente seleccionado ── */
/* En el rail colapsado las etiquetas de sección desaparecen: se deja una línea guía
   para que los grupos sigan siendo distinguibles. */
.soc-sidebar-collapsed #soc-sidebar .soc-snav-label { display: block; height: 1px; padding: 0; margin: .5rem .6rem; background: var(--soc-border-muted); overflow: hidden; }
.soc-sidebar-collapsed #soc-sidebar .soc-snav-label > * { display: none; }

/* ===========================================================================
   VISTA PRELIMINAR DE CLIENTE — barra fija del admin que está "viendo como cliente"
   Vive FUERA del layout del portal (position: fixed) y empuja hacia abajo la
   página, la sidebar y la navbar: así todo lo que queda debajo de la barra es
   exactamente lo que ve el cliente, sin nada del portal de staff mezclado.
   Colores propios (no tokens del tema) a propósito: la barra debe leerse igual
   en claro y en oscuro, y distinguirse de la navbar (clara u oscura) del portal.
   =========================================================================== */
body.soc-preview-on { --soc-preview-h: 44px; }

.soc-preview-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--soc-preview-h, 44px);
  z-index: 1046;                       /* sobre la sidebar (1045), bajo los modales (1050) */
  display: flex; align-items: center; gap: .75rem;
  padding: 0 .85rem;
  /* Azul de marca (mismo tono que el FAB de Soporte), oscurecido para que el texto
     blanco cumpla contraste AA en todo el degradado. */
  background: linear-gradient(90deg, #0550ae 0%, #066fd1 100%);
  color: #fff;
  font-size: .8125rem;
  box-shadow: 0 2px 10px rgba(2, 32, 71, .35);
  overflow: hidden;
}
.soc-preview-tag {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .18rem .6rem; border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
  font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.soc-preview-tag i { font-size: .95rem; }
.soc-preview-form { display: flex; align-items: center; gap: .4rem; margin: 0; }
.soc-preview-label { margin: 0; font-weight: 600; opacity: .8; white-space: nowrap; }
.soc-preview-select {
  max-width: 220px; padding: .15rem 1.6rem .15rem .5rem;
  border-radius: 6px; border: 1px solid rgba(255, 255, 255, .3);
  background-color: rgba(255, 255, 255, .12); color: #fff;
  font-size: .8125rem; font-weight: 600; line-height: 1.6;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23ffffff' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .35rem center;
  transition: background-color .15s ease, border-color .15s ease;
}
.soc-preview-select:hover { background-color: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .45); }
.soc-preview-select:focus { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 1px; }
/* La lista desplegable la pinta el SO: texto oscuro sobre fondo claro para que se lea. */
.soc-preview-select option { color: #1e293b; background: #fff; }
.soc-preview-note { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-preview-out { margin: 0 0 0 auto; }
.soc-preview-exit {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .7rem; border-radius: 6px;
  border: 1px solid #fff; background: #fff;
  color: #0550ae; font-size: .8125rem; font-weight: 600; white-space: nowrap;
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.soc-preview-exit:hover { background: #e7f1fc; color: #043f86; }

/* Desplazamiento del portal para dejar la barra siempre visible arriba. */
body.soc-preview-on .page { margin-top: var(--soc-preview-h); }
body.soc-preview-on header.navbar { top: var(--soc-preview-h); }
body.soc-preview-on #soc-sidebar {
  top: var(--soc-preview-h);
  height: calc(100vh - var(--soc-preview-h));
}

@media (max-width: 1200px) { .soc-preview-note { display: none; } }
@media (max-width: 768px) {
  .soc-preview-label { display: none; }
  .soc-preview-tag-text { display: none; }
  .soc-preview-select { max-width: 140px; }
}
@media print {
  .soc-preview-bar { display: none; }
  body.soc-preview-on .page { margin-top: 0; }
}

/* ===========================================================================
   Support modal (#support-modal) y Contacto (#contact-modal) — same language as
   the rest of the portal: flat surfaces, brand primary, 6px controls, no
   gradients/glows. Scoped by id because .support-modal-* is shared with the T&C
   and search-syntax modals.
   =========================================================================== */
#support-modal .support-modal-backdrop,
#contact-modal .support-modal-backdrop { background: rgba(15, 23, 42, .5); backdrop-filter: blur(2px); }
#support-modal .support-modal-card,
#contact-modal .support-modal-card {
  width: min(560px, calc(100vw - 2rem));
  margin: max(1rem, 10vh) auto 1rem;
  border-radius: var(--soc-radius) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .22) !important;
  animation: supportPop .18s ease-out;
}
#support-modal .support-modal-header,
#contact-modal .support-modal-header { padding: 1rem 1.25rem; align-items: center; background: var(--soc-surface) !important; }
#support-modal .support-head-main,
#contact-modal .support-head-main { align-items: center; gap: .75rem; }
#support-modal .support-head-icon,
#contact-modal .support-head-icon {
  width: 38px; height: 38px; border-radius: 8px; font-size: 1.1rem;
  background: var(--soc-primary-soft); color: var(--soc-primary); box-shadow: none;
}
#support-modal .support-modal-header h2,
#contact-modal .support-modal-header h2 { margin: 0 0 .1rem; font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--soc-text); }
#support-modal .support-modal-header p,
#contact-modal .support-modal-header p { font-size: .82rem; line-height: 1.4; }
#support-modal .support-form,
#contact-modal .support-form { padding: 1.1rem 1.25rem 0; }
#support-modal .support-field,
#contact-modal .support-field { margin-bottom: 1rem; }
#support-modal .support-field label,
#contact-modal .support-field label { gap: .2rem; margin-bottom: .35rem; font-size: .85rem; font-weight: 600; color: var(--soc-text); }
#support-modal .support-req,
#contact-modal .support-req { background: none; border: 0; padding: 0; font-size: .85rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tblr-danger, #d63939); }
#support-modal .support-field input,
#support-modal .support-field select,
#support-modal .support-field textarea,
#contact-modal .support-field input,
#contact-modal .support-field select,
#contact-modal .support-field textarea { border-radius: 6px; padding: .5rem .75rem; font-size: .875rem; }
#support-modal .support-select-caret,
#contact-modal .support-select-caret { right: .75rem; }
#support-modal .support-field input:focus,
#support-modal .support-field select:focus,
#support-modal .support-field textarea:focus,
#contact-modal .support-field input:focus,
#contact-modal .support-field select:focus,
#contact-modal .support-field textarea:focus { outline: none; }
#support-modal .support-field textarea,
#contact-modal .support-field textarea { min-height: 128px; line-height: 1.5; }
#support-modal .support-field-foot,
#contact-modal .support-field-foot { margin-top: .35rem; }
#support-modal .support-field small,
#contact-modal .support-field small { font-size: .75rem; color: var(--soc-muted); }
#support-modal .support-char-count.is-short,
#contact-modal .support-char-count.is-short { color: #b45309; }
#support-modal .support-form-error,
#contact-modal .support-form-error {
  margin: 0 0 .75rem; padding: .6rem .8rem; border-radius: 6px; font-size: .84rem;
  border: 1px solid color-mix(in srgb, var(--tblr-danger, #d63939) 35%, transparent);
  background: var(--soc-danger-soft); color: var(--tblr-danger, #d63939);
}
#support-modal .support-actions,
#contact-modal .support-actions {
  align-items: center; gap: .5rem; margin: .25rem -1.25rem 0; padding: .75rem 1.25rem;
  border-top: 1px solid var(--soc-border); background: var(--soc-surface-subtle);
}
#support-modal .support-sender,
#contact-modal .support-sender {
  margin-right: auto; min-width: 0; display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; color: var(--soc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#support-modal .support-primary-btn,
#support-modal .support-secondary-btn,
#contact-modal .support-primary-btn,
#contact-modal .support-secondary-btn { border-radius: 6px; padding: .45rem .95rem; font-size: .875rem; font-weight: 600; box-shadow: none; transform: none; }
#support-modal .support-secondary-btn,
#contact-modal .support-secondary-btn { background: var(--soc-surface); color: var(--soc-text); border: 1px solid var(--soc-border); }
#support-modal .support-secondary-btn:hover,
#contact-modal .support-secondary-btn:hover { background: var(--soc-hover); border-color: var(--soc-border); }
#support-modal .support-primary-btn,
#contact-modal .support-primary-btn { min-width: 0; background: var(--soc-primary); border: 1px solid var(--soc-primary); color: #fff; }
#support-modal .support-primary-btn:hover,
#contact-modal .support-primary-btn:hover { background: color-mix(in srgb, var(--soc-primary) 88%, #000); box-shadow: none; transform: none; }
@media (max-width: 575.98px) {
#support-modal .support-form,
#support-modal .support-modal-header,
#contact-modal .support-form,
#contact-modal .support-modal-header { padding-left: 1rem; padding-right: 1rem; }
#support-modal .support-actions,
#contact-modal .support-actions { flex-direction: row; flex-wrap: wrap; margin-left: -1rem; margin-right: -1rem; padding: .75rem 1rem; }
#support-modal .support-sender,
#contact-modal .support-sender { flex: 0 0 100%; }
#support-modal .support-primary-btn,
#support-modal .support-secondary-btn,
#contact-modal .support-primary-btn,
#contact-modal .support-secondary-btn { width: auto; flex: 1 1 0; }
}

/* ===========================================================================
   Sidebar de DOBLE BARRA (29-09-2026) — riel de módulos (iconos) + panel con
   las páginas del módulo. Reemplaza el acordeón <details> del sidebar anterior.
   Contraído (escritorio): el riel + una columna con los íconos de las páginas del
   módulo (tooltip de texto nativo). En el riel, al pasar el mouse, una etiqueta
   con el nombre y la descripción del módulo. En móvil el cajón muestra riel + panel.
   =========================================================================== */
:root {
  --soc-hub-rail-w: calc(60px * var(--soc-ui-scale));
  --soc-hub-panel-w: calc(268px * var(--soc-ui-scale));   /* 54 + 241 px con la escala 0,9 = el ancho del mockup */
  --soc-sidebar-w: calc(var(--soc-hub-rail-w) + var(--soc-hub-panel-w));
  --soc-hub-panel-w-mini: calc(58px * var(--soc-ui-scale));
  --soc-sidebar-w-collapsed: calc(var(--soc-hub-rail-w) + var(--soc-hub-panel-w-mini));
}
#soc-sidebar.soc-hub { flex-direction: row; overflow: hidden; }

/* ── Riel ── */
.soc-hub-rail {
  flex: 0 0 var(--soc-hub-rail-w); width: var(--soc-hub-rail-w); height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  background: var(--soc-surface-subtle); border-right: 1px solid var(--soc-border-muted);
}
.soc-hub-rail::-webkit-scrollbar { display: none; }
.soc-hub-mark { width: 40px; height: 40px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 10px; margin-bottom: 8px; }
.soc-hub-mark img { width: 26px; height: 26px; object-fit: contain; }
.soc-hub-sep { width: 28px; height: 1px; flex: 0 0 auto; background: var(--soc-border); margin: 6px 0; }
.soc-hub-ri {
  position: relative; width: 40px; height: 40px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: transparent; padding: 0;
  color: var(--soc-muted); font-size: 1.12rem; text-decoration: none; cursor: pointer;
}
.soc-hub-ri:hover, .soc-hub-ri.is-hover { background: var(--soc-hover); color: var(--soc-text); }
.soc-hub-ri:focus-visible { outline: 2px solid var(--soc-primary); outline-offset: 1px; }
.soc-hub-ri.is-open {
  background: var(--soc-primary-soft); color: var(--soc-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-primary) 22%, transparent);
}
/* Barra lateral: módulo de la página actual (aunque el panel muestre otro) */
.soc-hub-ri.is-active::before {
  content: ''; position: absolute; left: -10px; top: 9px; bottom: 9px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--soc-primary);
}
.soc-hub-ri.is-active:not(.is-open) { color: var(--soc-primary); }
.soc-hub-rail-bottom { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; }

/* Etiqueta del riel (nombre + descripción del módulo); se monta en <body> */
.soc-hub-tip {
  position: fixed; z-index: 1080; pointer-events: none; max-width: 280px;
  padding: 7px 12px 8px; border-radius: 8px; background: #1f2430; color: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .24);
  opacity: 0; transform: translateX(-4px); transition: opacity .12s ease, transform .12s ease;
}
.soc-hub-tip.is-on { opacity: 1; transform: none; }
.soc-hub-tip::before {
  content: ''; position: absolute; left: -4px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px;
  background: inherit; border-radius: 2px; transform: rotate(45deg);
}
.soc-hub-tip-t { font-weight: 700; font-size: .84rem; line-height: 1.25; white-space: nowrap; }
.soc-hub-tip-s { font-size: .74rem; line-height: 1.25; color: #aab4c3; margin-top: 2px; white-space: nowrap; }
[data-bs-theme="dark"] .soc-hub-tip { background: #2b3342; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
@media (prefers-reduced-motion: reduce) { .soc-hub-tip { transition: none; } }

/* ── Panel ── */
.soc-hub-panel { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; flex-direction: column; background: var(--soc-surface); }
.soc-hub-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.soc-hub-head[hidden] { display: none; }
.soc-hub-head-ic {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--soc-primary-soft); color: var(--soc-primary); font-size: 1rem;
}
.soc-hub-head-txt { display: flex; flex-direction: column; min-width: 0; }
.soc-hub-head-t { font-weight: 700; font-size: .98rem; color: var(--soc-text); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-hub-head-s { font-size: .72rem; color: var(--soc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#soc-sidebar.soc-hub .soc-tenant-wrap { padding: 2px 12px 8px; }
#soc-sidebar.soc-hub .soc-tenant-label { display: none; }

.soc-hub-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 2px 10px 12px; }
.soc-hub-list[hidden] { display: none; }
.soc-hub-grp {
  font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--soc-muted); padding: 14px 8px 6px;
}
.soc-hub-grp:first-child { padding-top: 6px; }
.soc-hub-it {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin-bottom: 1px;
  border-radius: 8px; color: var(--soc-text); text-decoration: none; font-size: .86rem; white-space: nowrap;
}
.soc-hub-it > .bi:first-child { font-size: 1rem; color: var(--soc-muted); width: 18px; flex: 0 0 18px; text-align: center; }
.soc-hub-it > .soc-ic { width: 18px; height: 17px; flex: 0 0 18px; color: var(--soc-muted); stroke-width: 1.9; }
.soc-hub-ri > .soc-ic { width: 21px; height: 21px; }
.soc-hub-head-ic > .soc-ic { width: 19px; height: 19px; }
.soc-hub-it.is-active > .soc-ic { color: var(--soc-primary); }
.soc-hub-it-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.soc-hub-it:hover { background: var(--soc-hover); color: var(--soc-text); }
.soc-hub-it:focus-visible { outline: 2px solid var(--soc-primary); outline-offset: -2px; }
.soc-hub-it.is-active { background: var(--soc-primary-soft); color: var(--soc-primary); font-weight: 600; }
.soc-hub-it.is-active > .bi:first-child { color: var(--soc-primary); }
.soc-hub-ext { margin-left: auto; font-size: .7rem; opacity: .55; }
.soc-hub-tag {
  margin-left: auto; flex: 0 0 auto; font-size: .62rem; font-weight: 700; letter-spacing: .03em;
  padding: 1px 6px; border-radius: 999px; color: var(--soc-primary);
  border: 1px dashed color-mix(in srgb, var(--soc-primary) 55%, transparent);
}
.soc-hub-cnt {
  margin-left: auto; flex: 0 0 auto; min-width: 20px; text-align: center; font-size: .68rem; font-weight: 700;
  padding: 1px 6px; border-radius: 999px; background: var(--tblr-orange, #f76707); color: #fff;
}
/* Punto de atención en el riel (p. ej. aprobaciones esperando decisión) */
.soc-hub-ri { position: relative; }
.soc-hub-dot {
  position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--tblr-orange, #f76707); box-shadow: 0 0 0 2px var(--soc-surface-subtle);
}
#soc-sidebar.soc-hub .soc-sidebar-foot { position: static; padding: 8px 10px; gap: 6px; }
/* Soporte fijo al pie del panel (sobre el último ticket y los turnos) */
.soc-hub-supwrap { flex: 0 0 auto; padding: 0 10px 6px; }
.soc-hub-supwrap .soc-hub-list[hidden] { display: none; }
.soc-hub-supwrap .soc-hub-grp { padding-top: 10px; }

/* Contraído en escritorio: riel + columna de íconos de las páginas del módulo.
   Los rótulos de grupo pasan a ser separadores y el nombre de cada página queda
   en el title nativo (lo pone soc-sidebar.js). */
@media (min-width: 993px) {
  .soc-sidebar-collapsed #soc-sidebar.soc-hub .soc-hub-panel { flex: 0 0 var(--soc-hub-panel-w-mini); width: var(--soc-hub-panel-w-mini); }
  .soc-sidebar-collapsed #soc-sidebar.soc-hub .soc-hub-head { justify-content: center; padding: 12px 0 6px; }
  .soc-sidebar-collapsed #soc-sidebar.soc-hub .soc-hub-head-txt { display: none; }
  .soc-sidebar-collapsed #soc-sidebar.soc-hub .soc-hub-body { padding: 2px 0 12px; scrollbar-width: none; }
  .soc-sidebar-collapsed #soc-sidebar.soc-hub .soc-hub-body::-webkit-scrollbar { display: none; }
  .soc-sidebar-collapsed #soc-sidebar.soc-hub .soc-hub-grp {
    height: 1px; padding: 0; margin: 8px 10px; background: var(--soc-border); font-size: 0; overflow: hidden;
  }
  .soc-sidebar-collapsed #soc-sidebar.soc-hub .soc-hub-grp:first-child { display: none; }
  .soc-sidebar-collapsed #soc-sidebar.soc-hub .soc-hub-supwrap { padding: 0; }
  .soc-sidebar-collapsed #soc-sidebar.soc-hub .soc-hub-supwrap .soc-hub-grp:first-child { display: block; }
  .soc-sidebar-collapsed #soc-sidebar.soc-hub .soc-hub-it {
    position: relative; justify-content: center; width: 40px; height: 40px; padding: 0; margin: 0 auto 2px; gap: 0;
  }
  .soc-sidebar-collapsed #soc-sidebar.soc-hub .soc-hub-it > .bi:first-child { font-size: 1.08rem; }
  .soc-sidebar-collapsed #soc-sidebar.soc-hub .soc-hub-it > .soc-ic { width: 19px; height: 19px; }
  .soc-sidebar-collapsed #soc-sidebar.soc-hub .soc-hub-it-t,
  .soc-sidebar-collapsed #soc-sidebar.soc-hub .soc-hub-tag,
  .soc-sidebar-collapsed #soc-sidebar.soc-hub .soc-hub-ext { display: none; }
  .soc-sidebar-collapsed #soc-sidebar.soc-hub .soc-hub-cnt {
    position: absolute; top: 2px; right: 0; min-width: 16px; padding: 0 4px; font-size: .58rem; line-height: 14px;
  }
  .soc-sidebar-collapsed #soc-sidebar.soc-hub .soc-sidebar-foot { padding: 8px 0; align-items: center; }
  .soc-sidebar-collapsed #soc-sidebar.soc-hub .soc-sidebar-collapse-btn { width: 40px; justify-content: center; padding: 8px 0; }
}

/* Alertas: encabezados ordenables (los decora alerts.js → initAlertsSortHeaders). */
#alerts-table .alerts-sort-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; white-space: nowrap;
}
#alerts-table .alerts-sort-btn:hover,
#alerts-table .alerts-sort-btn.active { color: var(--tblr-primary); }
#alerts-table .alerts-sort-btn:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: 2px; border-radius: 2px; }
#alerts-table .alerts-sort-icon { font-size: .8em; opacity: .45; }
#alerts-table .alerts-sort-btn:hover .alerts-sort-icon,
#alerts-table .alerts-sort-btn.active .alerts-sort-icon { opacity: 1; }

/* Alertas: selección múltiple para marcar Falso Positivo en bloque (la columna y la barra
   las crea alerts.js → initAlertsBulkSelect, solo para admin/operadorsoc). */
#alerts-table .alerts-select-col { width: 2.25rem; padding-right: 0; user-select: none; }
#alerts-table tbody tr.is-selected > * { --tblr-table-bg-type: var(--tblr-primary-lt); }
.alerts-bulkbar {
  position: sticky; bottom: .75rem; z-index: 5;
  display: flex; align-items: center; flex-wrap: wrap; gap: .65rem;
  margin: .5rem .75rem; padding: .5rem .75rem;
  border: 1px solid var(--tblr-primary); border-radius: 8px;
  background: var(--tblr-primary-lt); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
  font-size: .82rem;
}
.alerts-bulkbar[hidden] { display: none; }
.alerts-bulk-hint { font-size: .75rem; }
@media (max-width: 767.98px) { .alerts-bulk-hint { display: none; } }

/* ===========================================================================
   Barra superior en celular (17-10-2026): una sola franja. Menú y logo del
   cliente a la izquierda; buscar, Guard IA, tema y perfil a la derecha, en
   botones de 36 px. (El flex-wrap de arriba era para #soc-navbar-menu, que ya
   no existe en base_tabler.html.)
   =========================================================================== */
@media (max-width: 767.98px) {
  header.navbar > .container-xl {
    flex-wrap: nowrap;
    gap: .3rem;
    padding-left: .6rem;
    padding-right: .6rem;
  }
  header.navbar .soc-sidebar-toggle { flex: 0 0 auto; margin-right: 0 !important; }
  header.navbar .soc-client-logo { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap !important; }
  header.navbar .soc-client-logo img { max-height: 40px !important; max-width: 100% !important; }
  header.navbar .navbar-nav.order-md-last { flex: 0 0 auto; margin-left: auto; gap: .2rem; }
  header.navbar #cmdk-nav-center { margin-left: 0; }
  header.navbar .cmdk-navbtn { min-width: 0; width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 10px; }
  header.navbar .cmdk-navbtn-label,
  header.navbar .cmdk-navbtn-kbd { display: none; }
  header.navbar .guard-navbtn,
  header.navbar .hide-theme-light.nav-link,
  header.navbar .hide-theme-dark.nav-link { width: 36px; height: 36px; border-radius: 10px !important; }
  header.navbar .navbar-nav.order-md-last > .nav-item.dropdown { border-left: 0; margin-left: 0; padding-left: 0; }
  #nav-dropdown-toggle { padding: 0 !important; gap: 0 !important; border-color: transparent !important; }
  #nav-dropdown-toggle .dropdown-arrow { display: none; }
  header.navbar .soc-avatar { width: 34px; height: 34px; }
}

/* ── Logo del cliente en los encabezados de página (templates/partials/_client_brand.html) ──
   Va en lugar del nombre en texto. Alto fijo por tamaño y ancho con tope: los logos van
   de 1:1 (CGR) a 7:1 (Transformapp). Sin logo, o si la imagen falla (.is-broken), queda
   el nombre. La versión clara/oscura la reparten .client-logo-light/.client-logo-dark. */
.soc-cbrand { display: inline-flex; align-items: center; flex: none; min-width: 0; max-width: 100%; vertical-align: middle; line-height: 1; }
.soc-cbrand img { width: auto; height: var(--cb-h, 34px); max-width: var(--cb-w, 180px); object-fit: contain; object-position: left center; }
.soc-cbrand-name { font-weight: 600; color: var(--tblr-body-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-cbrand.has-logo .soc-cbrand-name { display: none; }
.soc-cbrand.is-broken img { display: none !important; }
.soc-cbrand.is-broken .soc-cbrand-name { display: inline; }
/* Altos generosos: varios logos (GTD, IPS, Avanza) traen ~50 % de margen transparente
   arriba y abajo, y con menos alto su contenido real queda ilegible. */
.soc-cbrand-lg { --cb-h: 44px; --cb-w: 210px; font-size: .95rem; }
.soc-cbrand-md { --cb-h: 34px; --cb-w: 175px; font-size: .85rem; }
.soc-cbrand-sm { --cb-h: 30px; --cb-w: 160px; font-size: .8rem; }
/* Línea fina que lo separa del título que va a su izquierda. */
.soc-cbrand-div { margin-left: .85rem; padding-left: .85rem; border-left: 1px solid var(--tblr-border-color); }
@media (max-width: 575.98px) {
  .soc-cbrand-lg { --cb-h: 34px; --cb-w: 150px; }
  .soc-cbrand-md { --cb-h: 28px; --cb-w: 135px; }
  .soc-cbrand-sm { --cb-h: 26px; --cb-w: 125px; }
  .soc-cbrand-div { margin-left: .6rem; padding-left: .6rem; }
}