/* Layout vertical shell extracted from shared template. */

.topbar-branch-btn {
  border-radius: 20px;
  padding: 5px 12px;
}
.topbar-branch-btn.is-branch-active {
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.3);
}
.topbar-branch-btn.is-matrix-active {
  background: rgba(24,95,165,.12);
  border: 1px solid rgba(0,229,255,.2);
}
.topbar-branch-icon {
  font-size: 16px;
}
.topbar-branch-btn.is-branch-active .topbar-branch-icon,
.topbar-branch-btn.is-branch-active .topbar-branch-label {
  color: #34D399;
}
.topbar-branch-btn.is-matrix-active .topbar-branch-icon,
.topbar-branch-btn.is-matrix-active .topbar-branch-label {
  color: #00E5FF;
}
/* #34D399/#00E5FF son colores de glow pensados para fondos oscuros; el
   topbar SI sigue data-bs-theme (a diferencia del sidebar). En light miden
   1.92:1 y 1.54:1 sobre el topbar casi blanco (ORCH-EXPERIENCE-16) -- se
   corrige con variantes oscuras equivalentes, ya canonicas en otras partes
   de SGE. Dark theme queda intacto (glow colors funcionan bien ahi). */
[data-bs-theme="light"] .topbar-branch-btn.is-branch-active .topbar-branch-icon,
[data-bs-theme="light"] .topbar-branch-btn.is-branch-active .topbar-branch-label {
  /* var() seguro aqui: ya estamos dentro de [data-bs-theme="light"], asi
     que --sge-success-text resuelve siempre a su valor light (#047857). */
  color: var(--sge-success-text);
}
[data-bs-theme="light"] .topbar-branch-btn.is-matrix-active .topbar-branch-icon,
[data-bs-theme="light"] .topbar-branch-btn.is-matrix-active .topbar-branch-label {
  color: var(--sge-blue-600);
}
.topbar-branch-label {
  font-size: 12px;
  font-weight: 700;
}
.topbar-branch-option {
  padding: 9px 16px;
  font-size: 13px;
  color: #94a3b8;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background .15s;
}
.topbar-branch-option.is-active {
  color: #34D399;
}
.notif-title {
  font-size: .8rem;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-title.is-unread { font-weight: 700; }
.notif-title.is-read { font-weight: 500; }
.tenant-switcher-container { display: none !important; }
.empresa-switch-item {
  font-size: .82rem;
  color: #cbd5e1;
}
.empresa-switch-item.active {
  background: rgba(24,95,165,.15);
  color: #378ADD;
}

.lvs-30560673 { font-size:10px;color:#64748b; }
.lvs-3af65e5b { min-width:240px;background:#1a2236;border:1px solid rgba(255,255,255,.1);border-radius:14px; }
.lvs-2cda8432 { padding:10px 16px 8px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:4px; }
.lvs-495605e8 { font-size:10px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.8px; }
.lvs-54314575 { font-size:13px;font-weight:800;color:#f1f5f9;margin-top:2px; }
.lvs-c94f104c { font-size:15px;flex-shrink:0; }
.lvs-4353ef6e { flex:1;font-weight:600; }
.lvs-7cebc652 { font-size:11px;color:#fbbf24; }
.lvs-2ae462e3 { border-top:1px solid rgba(255,255,255,.06);margin-top:4px;padding-top:4px; }
.lvs-1da9facb { margin:0; }
.lvs-1ee520a4 { padding:9px 16px;font-size:12px;color:#f87171;background:none;border:none;width:100%;text-align:left;cursor:pointer; }
.lvs-ba62946b { font-size:14px; }
.lvs-ced55e2e { padding:9px 16px;font-size:12px;color:#00E5FF;text-decoration:none; }
.lvs-53e43208 { display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:99999;align-items:center;justify-content:center; }
.lvs-53e43208.is-open { display:flex; }
.lvs-ad062fae { background:#1a2236;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:28px;max-width:340px;width:95%; }
.lvs-fd2e9c56 { color:#f1f5f9;margin-bottom:8px; }
.lvs-8a20f05f { font-size:13px;color:#64748b;margin-bottom:16px; }
.lvs-960bb1eb { background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:#f87171;border-radius:10px;padding:10px 14px;font-size:12px;margin-bottom:12px;display:none; }
.lvs-b97ce1f3 { width:100%;padding:12px 14px;background:#0f172a;border:1px solid rgba(255,255,255,.12);border-radius:12px;color:#fff;font-size:16px;text-align:center;letter-spacing:4px;margin-bottom:16px; }
.lvs-6b00e753 { display:flex;gap:10px; }
.lvs-34b277de { flex:1;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:transparent;color:#94a3b8; }
.lvs-76df620b { flex:1;padding:10px;border-radius:10px;border:none;background:#185FA5;color:white;font-weight:700; }
.lvs-ff2eda33 { width:340px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(16px); }
.lvs-9de82493 { padding:14px 16px 10px;border-bottom:1px solid rgba(255,255,255,.07); }
.lvs-1543f81a { font-size:.9rem;font-weight:800; }
.lvs-9c7c9f1a { font-size:.7rem;font-weight:700;color:#378ADD;text-decoration:none; }
.lvs-d7c1f87c { font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:50px;border:1px solid rgba(24,95,165,.3);background:rgba(24,95,165,.12);color:#378ADD;cursor:pointer; }
.lvs-2158ab74 { font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:50px;border:1px solid rgba(255,255,255,.1);background:transparent;color:#94a3b8;cursor:pointer; }
.lvs-ae54af02 { display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;border-radius:50px;background:#f1416c;color:#fff;font-size:.6rem;font-weight:800;padding:0 4px;margin-left:3px; }
/* GOV-NOTIF-02: pestañas por categoría. Con seis categorías no entran en 340 px:
   se parten en renglones. Una fila desplazable escondía la mitad de las
   pestañas sin ninguna pista de que existían (medido en captura). */
.notif-tabs { display:flex;flex-wrap:wrap;gap:6px;margin-top:8px; }
.notif-tab-btn { display:inline-flex;align-items:center;gap:4px;flex-shrink:0;white-space:nowrap;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:50px;border:1px solid rgba(148,163,184,.28);background:transparent;color:#94a3b8;cursor:pointer;transition:background .15s,color .15s,border-color .15s; }
.notif-tab-btn iconify-icon { font-size:.9rem; }
.notif-tab-btn:hover { color:#378ADD; }
.notif-tab-btn:focus-visible { outline:2px solid #378ADD;outline-offset:2px; }
.notif-tab-btn.is-active { border-color:rgba(24,95,165,.3);background:rgba(24,95,165,.12);color:#378ADD; }
.notif-tab-count { display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;border-radius:50px;background:#f1416c;color:#fff;font-size:.6rem;font-weight:800;padding:0 4px; }
.notif-tab-empty { display:none;margin:0;padding:28px 16px;text-align:center;font-size:.8rem;color:#64748b; }
.notif-tab-empty.is-visible { display:block; }
.notif-item[data-notif-cat="whatsapp"] .lvs-a292fe83 { background:rgba(37,211,102,.12); }
.notif-item[data-notif-cat="whatsapp"] .lvs-5c65350f { color:#1faa59; }
.lvs-daf0bb53 { max-height:min(420px, calc(100vh - 230px));overflow-y:auto;overscroll-behavior:contain; }
.lvs-f93efd43 { padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.04);display:flex;align-items:flex-start;gap:10px;transition:background .15s; }
.lvs-a292fe83 { width:34px;height:34px;border-radius:10px;background:rgba(24,95,165,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.lvs-5c65350f { font-size:1rem;color:#378ADD; }
.lvs-a07604d3 { flex:1;min-width:0; }
.lvs-08c62b42 { font-size:.72rem;color:#64748b;margin-bottom:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; }
.lvs-ef1b7a6c { font-size:.65rem;color:#64748b; }
.lvs-56940a7b { display:flex;flex-direction:column;gap:4px;flex-shrink:0; }
.lvs-e99db2da { display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:rgba(55,138,221,.1);color:#378ADD;text-decoration:none; }
.lvs-9d56aaf2 { font-size:.85rem; }
.lvs-114991dc { display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:rgba(10,179,156,.1);color:#0ab39c;text-decoration:none; }
.lvs-8f2634cc { text-align:center;padding:36px 16px; }
.lvs-d05dfb8c { font-size:2rem;color:rgba(24,95,165,.2);display:block;margin-bottom:8px; }
.lvs-f3cb8460 { margin:0;font-size:.82rem;color:#64748b; }
.lvs-540f3546 { padding:10px 14px;border-top:1px solid rgba(255,255,255,.06);text-align:center; }
.lvs-30235736 { font-size:.75rem;font-weight:700;color:#378ADD;text-decoration:none; }
.lvs-48a12826 { border-radius:8px;font-size:.78rem;max-width:160px; }
.lvs-3e6dda34 { color:#378ADD; }
.lvs-980a64e9 { max-width:110px;color:#e2e8f0; }
.lvs-93e6231c { color:#64748b; }
.lvs-133e4736 { min-width:240px;border-radius:14px;background:rgba(15,23,42,.96);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(16px); }
.lvs-3811da47 { padding:8px 10px 6px;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:#475569; }
.lvs-4a24f93f { font-size:.6rem;background:rgba(55,138,221,.12);color:#378ADD;border-radius:50px;padding:1px 7px;flex-shrink:0; }
.lvs-7b353464 { border-color:rgba(255,255,255,.07);margin:6px 0; }
.lvs-52a7195f { font-size:.8rem;color:#0ab39c; }
.lvs-6d09221a { max-width:400px; }
.lvs-ebcc5240 { background:#0f1724;border:1px solid rgba(255,255,255,.09);border-radius:18px; }
.lvs-b952edd7 { color:#e2e8f0; }
.lvs-f9a4328d { font-size:.78rem;color:#94a3b8; }
.lvs-a01ecaf8 { background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:#e2e8f0; }
.lvs-fd43fcc5 { background:linear-gradient(135deg,#185FA5,#378ADD,#00E5FF);color:#fff;border:none; }
.lvs-2730cb43 { min-width:230px; }
.lvs-e706913e { font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:50px;background:linear-gradient(135deg,#185FA5,#378ADD,#00E5FF);color:#fff; }
.lvs-a69e415c { font-size:.7rem;color:#64748b; }

/* Chip de Creditos IA en el topbar */
.credits-topbar-chip { background:rgba(82,196,26,.12);border:1px solid rgba(82,196,26,.25);min-width:68px; }
.credits-topbar-value { font-variant-numeric:tabular-nums;letter-spacing:-.01em; }

/* ORCH-CANON-SCALE-78: pedido del usuario -- "mejorar los iconos del
   header, que se vean mejor arreglados". #light-dark-mode (toggle de tema,
   page-spacing.css) ya tenia fondo sutil + borde + elevacion en hover; el
   resto de los botones-icono "sueltos" del topbar (Command Center, ajustes
   de notificaciones, config. de tema, actividad reciente) usaban solo
   .topbar-button base (circulo transparente, SIN fondo en reposo) -- por
   eso se veian desparejos al lado del toggle de tema, que si tenia el
   tratamiento completo. Misma receta, aplicada via una clase compartida
   nueva en vez de tocar .topbar-button (que tambien usan el selector de
   sucursal, el chip de creditos, el buscador y el avatar -- cada uno con
   su propio look intencional que no hay que pisar).

   OJO especificidad: app.min.css define `.topbar .topbar-item .topbar-button`
   (3 clases). Un selector de 1 sola clase (`.topbar-icon-btn` a secas) NUNCA
   le gana, sin importar el orden de carga -- confirmado con
   document.styleSheets: background/border-radius quedaban en el valor del
   vendor pese a que mi regla "coincidia". El chip de creditos escapa a este
   problema porque su color de fondo lo pisa JS con estilo INLINE
   (chip.style.background = ...), no CSS -- mis chips nuevos no tienen ese
   JS, asi que necesitan la MISMA especificidad de 3 clases. */
.topbar .topbar-item .topbar-icon-btn {
  border-radius: 12px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
[data-bs-theme="light"] .topbar .topbar-item .topbar-icon-btn {
  background: rgba(0, 0, 0, .05);
  border: 1px solid rgba(0, 0, 0, .1);
}
[data-bs-theme="light"] .topbar .topbar-item .topbar-icon-btn:hover {
  background: rgba(0, 0, 0, .1);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, .1);
}
[data-bs-theme="dark"] .topbar .topbar-item .topbar-icon-btn {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
}
[data-bs-theme="dark"] .topbar .topbar-item .topbar-icon-btn:hover {
  background: rgba(255, 255, 255, .15);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 255, 255, .1);
}

/* Chip Dolar Blue del topbar -- mismo patron que credits-topbar-chip
   (fondo/borde tenue + valor en tabular-nums), en azul de marca en vez de
   verde para no confundirse con el chip de creditos. Misma nota de
   especificidad que arriba. */
.topbar .topbar-item .topbar-dolar-chip { background: rgba(24, 95, 165, .08); border: 1px solid rgba(24, 95, 165, .22); min-width: 58px; }
.topbar .topbar-item .topbar-dolar-chip:hover { background: rgba(24, 95, 165, .14); }
.topbar-dolar-icon,
.topbar-dolar-value { font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: #185FA5; }
/* #185FA5 sobre la tarjeta oscura del topbar mide 2.66:1 -- bajo AA 4.5:1
   (medido). Mismo aclarado ya usado en el resto de la app para este mismo
   caso (tp-val/db-mini-link en dark, ORCH-EXPERIENCE-13B). */
[data-bs-theme="dark"] .topbar-dolar-icon,
[data-bs-theme="dark"] .topbar-dolar-value {
  color: #7AA7FF;
}

/* Chip Reloj del topbar -- no es una accion (no hay hover-lift), solo
   informacion; mismo tono neutro que el resto de los botones-icono en
   reposo. Sin utilidades de Bootstrap en el HTML (es un <div>, no una
   accion clickeable), asi que layout/padding se declaran aca. Misma nota
   de especificidad que arriba. */
.topbar .topbar-item .topbar-clock-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 12px;
  cursor: default;
}
[data-bs-theme="light"] .topbar .topbar-item .topbar-clock-chip {
  background: rgba(0, 0, 0, .04);
  border: 1px solid rgba(0, 0, 0, .08);
}
[data-bs-theme="dark"] .topbar .topbar-item .topbar-clock-chip {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
}
.topbar-clock-icon { flex-shrink: 0; color: #185FA5; }
.topbar-clock-text { display: flex; flex-direction: column; line-height: 1.05; }
.topbar-clock-time { font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #1e293b; }
.topbar-clock-date { font-size: .62rem; font-weight: 600; text-transform: capitalize; color: #475569; }
/* Colores fijos pensados para tarjeta clara -- igual que el chip Dolar
   Blue, medido bajo AA sobre la tarjeta oscura del topbar (icon 2.6:1
   aprox., mismo caso que arriba). No se puede usar --bs-topbar-item-color
   aca: esa variable depende del atributo separado data-topbar-color, que
   no correlaciona 1:1 con data-bs-theme (un tenant puede tener topbar claro
   con tema oscuro, o viceversa) -- se fija explicito por data-bs-theme. */
[data-bs-theme="dark"] .topbar-clock-icon { color: #7AA7FF; }
[data-bs-theme="dark"] .topbar-clock-time { color: #e8f4fd; }
[data-bs-theme="dark"] .topbar-clock-date { color: #94a3b8; }

/* Footer pegado al fondo del viewport en paginas con poco contenido (ej.
   Dashboard): .wrapper en app.css es solo height:100%/position:relative,
   sin flex, asi que el footer con mt-auto no tenia contra que empujar y
   quedaba flotando justo debajo del contenido corto, con un hueco vacio
   hasta el borde real de la ventana. */
.wrapper { display:flex; flex-direction:column; min-height:100vh; }
.wrapper .page-content { flex:1 1 auto; }

/* ORCH-CANON-SCALE-79: picker de "Configuracion del tema" (offcanvas
   right-sidebar.html) -- los radios eran solo texto "Claro"/"Oscuro" sin
   ninguna referencia visual. Cada opcion ahora muestra una miniatura con
   los colores reales de marca SGE (--sge-primary #185FA5 de sge-tokens,
   mismo azul usado en 938 lugares del repo) en vez de textos sueltos. */
.sge-theme-swatch-row { display: flex; gap: 12px; flex-wrap: wrap; }
.sge-theme-swatch-item { position: relative; }
.sge-theme-swatch-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.sge-theme-swatch-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 600;
  color: var(--sge-gray-700, #475569);
  margin: 0;
}
.sge-theme-swatch {
  display: block;
  width: 52px;
  height: 34px;
  border-radius: 8px;
  border: 2px solid var(--sge-gray-200, #e2e8f0);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
  transition: border-color .15s, transform .15s, box-shadow .15s;
  overflow: hidden;
  position: relative;
}
.sge-theme-swatch-label:hover .sge-theme-swatch { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(15, 23, 42, .14); }
.sge-theme-swatch-input:checked + .sge-theme-swatch-label .sge-theme-swatch {
  border-color: var(--sge-primary, #185FA5);
  box-shadow: 0 0 0 3px rgba(24, 95, 165, .18);
}
.sge-theme-swatch-input:checked + .sge-theme-swatch-label { color: var(--sge-primary, #185FA5); }
.sge-theme-swatch-input:focus-visible + .sge-theme-swatch-label .sge-theme-swatch {
  outline: 2px solid var(--sge-primary, #185FA5);
  outline-offset: 2px;
}

/* Esquema de color: miniatura de pagina completa (topbar + sidebar + fondo) */
.sge-theme-swatch--scheme-light { background: linear-gradient(180deg, #fff 0 30%, var(--sge-gray-50, #f1f5f9) 30% 100%); }
.sge-theme-swatch--scheme-light::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 30%;
  background: var(--sge-white, #fff); border-right: 1px solid var(--sge-gray-200, #e2e8f0);
}
.sge-theme-swatch--scheme-dark { background: linear-gradient(180deg, #22282e 0 30%, var(--sge-dark, #1e293b) 30% 100%); }
.sge-theme-swatch--scheme-dark::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 30%;
  background: var(--sge-dark-alt, #323a46);
}

/* Color de la barra superior: franja superior representa el topbar */
.sge-theme-swatch--topbar-light { background: var(--sge-gray-50, #f1f5f9); }
.sge-theme-swatch--topbar-light::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%;
  background: #f9f7f7; border-bottom: 2px solid var(--sge-primary, #185FA5);
}
.sge-theme-swatch--topbar-dark { background: var(--sge-gray-50, #f1f5f9); }
.sge-theme-swatch--topbar-dark::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%;
  background: #22282e; border-bottom: 2px solid var(--sge-primary-light, #378add);
}

/* Color del menu: franja lateral representa el sidebar */
.sge-theme-swatch--menu-light { background: var(--sge-gray-50, #f1f5f9); }
.sge-theme-swatch--menu-light::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 32%;
  background: var(--sge-white, #fff); border-right: 2px solid var(--sge-primary, #185FA5);
}
.sge-theme-swatch--menu-dark { background: var(--sge-gray-50, #f1f5f9); }
.sge-theme-swatch--menu-dark::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 32%;
  background: var(--sge-dark-alt, #323a46); border-right: 2px solid var(--sge-primary-light, #378add);
}

[data-bs-theme="dark"] .sge-theme-swatch { border-color: rgba(255, 255, 255, .14); }
[data-bs-theme="dark"] .sge-theme-swatch-label { color: rgba(255, 255, 255, .65); }
[data-bs-theme="dark"] .sge-theme-swatch-input:checked + .sge-theme-swatch-label { color: #7AA7FF; }
[data-bs-theme="dark"] .sge-theme-swatch-input:checked + .sge-theme-swatch-label .sge-theme-swatch {
  border-color: #7AA7FF;
  box-shadow: 0 0 0 3px rgba(122, 167, 255, .22);
}

/* ------------------------------------------------------------------ */
/* GOV-PERF-15: transicion suave entre paginas del dashboard.          */
/* hx-swap lleva transition:true, que en navegadores con View          */
/* Transitions API (Chrome/Edge) envuelve el swap en un cross-fade     */
/* nativo. En navegadores sin soporte el swap queda igual que antes.   */
/* Corto a proposito (90/140ms): tiene que sentirse fluido, no lento.  */
/* No lo toca zero-latency-visibility.css: ese fuerza opacity en       */
/* elementos del contenido, no en los pseudo-elementos ::view-transition. */
/*                                                                      */
/* CORRECCION el mismo dia (reporte del usuario: "los iconos del       */
/* header se ven asi mientras cambio de opcion"): el fade vivia en el  */
/* grupo (root), que la spec de View Transitions captura como UNA sola */
/* foto de TODO el viewport -- topbar y sidebar incluidos, aunque       */
/* #main-content-wrapper sea lo UNICO que hx-boost reemplaza (el       */
/* topbar no se re-renderiza, verificado en layout-vertical.html). El  */
/* navegador congela esa foto durante el cruce, y los <iconify-icon>   */
/* del topbar (Shadow DOM) quedan en blanco en esa foto -- se ven      */
/* "vacios" durante el fade y se repintan solos apenas termina. Ahora  */
/* #main-content-wrapper tiene SU PROPIO grupo (view-transition-name), */
/* asi el fade queda scopeado a lo que de verdad cambia; (root) --     */
/* topbar/sidebar sin tocar -- se neutraliza a "animation: none" para  */
/* que el navegador no vuelva a fotografiar el header en cada nav.     */
/* ------------------------------------------------------------------ */
#main-content-wrapper {
  view-transition-name: sge-main-content;
}

/* ------------------------------------------------------------------ */
/* CORRECCION 2026-09-17 -- reporte del usuario en /almacen/promociones/:
   "le di crear promocion y el formulario se ve oscurecido y no lo puedo
   tocar". No era esa pantalla: era ESTA regla, y afecta a TODO modal
   del dashboard.

   Un `view-transition-name` distinto de `none` crea un CONTEXTO DE
   APILAMIENTO en el elemento (spec de View Transitions, igual que
   transform/filter/opacity). Como todos los modales viven adentro de
   #main-content-wrapper, su `z-index: 1055` pasa a resolverse DENTRO de
   ese contexto, mientras que el `.modal-backdrop` que Bootstrap cuelga
   de <body> se queda afuera, en el contexto raiz, con z-index 1050.
   Resultado: el backdrop pinta ENCIMA del modal.

   Medido en vivo: con el modal abierto, `document.elementsFromPoint()`
   sobre el input "Nombre" devolvia `DIV.modal-backdrop` como primer
   elemento, por encima del <input>. De ahi las dos mitades del sintoma:
   el formulario se ve atenuado (tiene el velo encima) y no se puede
   tocar (los clicks se los come el backdrop). Subir el z-index del
   modal NO lo arregla -- probado: adentro de un contexto de apilamiento
   el z-index no compite contra lo de afuera.

   El arreglo es soltar el nombre mientras hay un modal abierto: sin
   nombre no hay contexto de apilamiento y el modal vuelve a competir de
   igual a igual con su backdrop. No se pierde nada: la transicion de
   pagina de GOV-PERF-15 corre en la NAVEGACION, y no se navega con un
   modal abierto. Se restaura solo al cerrarlo, cuando Bootstrap saca
   .modal-open. Mismo problema y misma cura para el offcanvas, que usa
   su propio backdrop en z-index 1040. */
body.modal-open #main-content-wrapper,
body:has(.offcanvas.show) #main-content-wrapper {
  view-transition-name: none;
}
/* ------------------------------------------------------------------ */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}
::view-transition-old(sge-main-content) {
  animation: sge-vt-out 90ms ease both;
}
::view-transition-new(sge-main-content) {
  animation: sge-vt-in 140ms ease both;
}
@keyframes sge-vt-out {
  to { opacity: 0; }
}
@keyframes sge-vt-in {
  from { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(sge-main-content),
  ::view-transition-new(sge-main-content) {
    animation: none;
  }
}

/* GOV-PANT-01: el dialogo de confirmacion (SGEActionConfirm) tiene que tapar
   TODO lo flotante. Con z-index 3600 quedaba debajo de la guia de la pantalla
   (.sge-guide-card 10501, .sge-guide-launcher 10499), del panel de ayuda
   (10601) y del boton del chat (9998): medido a 375x667 en /app/, la tarjeta de
   la guia tapaba el dialogo entero. Va aca y no en sge-action-confirm.css
   porque ese archivo lo cargan ~100 plantillas con su propio `?v=` fijo: la
   copia vieja del CDN, cargada despues, volveria a ganar. `.is-open` suma
   especificidad para ganarle a la regla base cargue en el orden que cargue. */
.sge-action-confirm.is-open {
  z-index: 10700;
}

/* GOV-PANT-01: a 375 px el grupo derecho de la topbar (notificaciones, tema,
   escudo, sucursal, avatar) terminaba en x=390 y dejaba 16 px de scroll
   horizontal en TODAS las pantallas. Lo que sobraba era la etiqueta de la
   sucursal («Empresa Matriz», partida en dos renglones de 50 px): en el
   celular queda el icono con su color (verde sucursal / azul matriz) y la
   etiqueta sigue ahi para los lectores de pantalla. El nombre completo esta a
   un toque, en la cabecera del desplegable. */
@media (max-width: 575.98px) {
  .topbar-branch-btn .topbar-branch-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}
/* Y a 360 px (Android chico) el grupo todavia pasaba 6 px el borde de la
   cabecera: se achica la separacion entre botones. `gap-1` de Bootstrap es
   !important, por eso este tambien. */
@media (max-width: 399.98px) {
  .topbar .navbar-header > .d-flex.gap-1 {
    gap: 2px !important;
  }
}