/* ═══════════════════════════════════════════════════════════════════
   STRUCTURA PRO · VISUAL POLISH · 2026-05-29
   ─────────────────────────────────────────────────────────────────
   Sesión nocturna 2 · Refinamiento visual exhaustivo:
   - Botones de eliminar más sutiles (no dominan la jerarquía)
   - Tarjetas con micro-animaciones suaves
   - Spacing/padding consistente
   - Tipografía refinada
   - Estados hover/focus elegantes
   - Mobile experience pulida
   - Stru-IA + bubble: stacking correcto
   - SEO bar más discreto
   - Empty states mejorados
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   1 · BOTÓN DE ELIMINAR: SUTIL Y NO DOMINANTE
   ─────────────────────────────────────────────────────────────── */

/* Project cards · X eliminar más sutil */
.proj-actions .btn-danger,
.project-actions .btn-danger {
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  padding: 0 !important;
  height: 38px !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text3) !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  transition: all .18s ease !important;
}
.proj-actions .btn-danger:hover,
.project-actions .btn-danger:hover {
  background: rgba(248, 81, 73, .08) !important;
  border-color: rgba(248, 81, 73, .4) !important;
  color: #dc2626 !important;
  transform: scale(1.05) !important;
}

/* Chapter row · X eliminar más sutil */
.chapter-actions .btn-danger,
.chapter-actions .btn-danger.btn-sm {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text3) !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .18s ease !important;
}
.chapter-actions .btn-danger:hover {
  background: rgba(248, 81, 73, .08) !important;
  border-color: rgba(248, 81, 73, .4) !important;
  color: #dc2626 !important;
}

/* APU detail · X eliminar más sutil */
.apu-actions .btn-danger,
.apu-actions .btn-danger.btn-sm {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text3) !important;
  border-radius: 6px !important;
  transition: all .18s ease !important;
}
.apu-actions .btn-danger:hover {
  background: rgba(248, 81, 73, .08) !important;
  border-color: rgba(248, 81, 73, .35) !important;
  color: #dc2626 !important;
}

/* ─────────────────────────────────────────────────────────────────
   2 · PROJECT CARDS · POLISH PROFESIONAL
   ─────────────────────────────────────────────────────────────── */

.project-card {
  border-radius: 12px !important;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1),
              box-shadow .22s cubic-bezier(.4, 0, .2, 1),
              border-color .22s ease !important;
  border: 1px solid var(--border) !important;
}
@media (hover: hover) {
  .project-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .12),
                0 4px 12px -4px rgba(0, 0, 0, .06) !important;
    border-color: rgba(240, 165, 0, .3) !important;
  }
}

/* Project card · barra superior de acento */
.project-card::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #ffb84d);
  border-radius: 12px 12px 0 0;
  margin: -1px -1px 0 -1px;
}

/* Project total · destacarlo */
.proj-total {
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.5px !important;
}

/* New card · centrar el "+" con más elegancia */
.project-card.new-card {
  background: linear-gradient(135deg,
              rgba(240, 165, 0, .04) 0%,
              rgba(46, 117, 182, .03) 100%) !important;
  border: 2px dashed rgba(240, 165, 0, .3) !important;
  transition: all .25s ease !important;
}
.project-card.new-card::before { display: none; }
.project-card.new-card:hover {
  border-color: var(--accent) !important;
  background: linear-gradient(135deg,
              rgba(240, 165, 0, .08) 0%,
              rgba(46, 117, 182, .05) 100%) !important;
  transform: translateY(-3px) !important;
}
.project-card.new-card .new-card-inner > div:first-child {
  font-size: 38px !important;
  color: var(--accent) !important;
  margin-bottom: 8px !important;
  transition: transform .25s ease !important;
}
.project-card.new-card:hover .new-card-inner > div:first-child {
  transform: scale(1.1) rotate(90deg) !important;
}

/* ─────────────────────────────────────────────────────────────────
   3 · CHAPTER ROWS · MÁS LIMPIO
   ─────────────────────────────────────────────────────────────── */

.chapter-card {
  transition: box-shadow .2s ease, border-color .2s ease !important;
}
.chapter-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04) !important;
}

/* + Ítem button — más visible y agradable */
.chapter-actions .btn:not(.btn-danger) {
  background: rgba(240, 165, 0, .08) !important;
  border: 1px solid rgba(240, 165, 0, .25) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
  transition: all .18s ease !important;
}
.chapter-actions .btn:not(.btn-danger):hover {
  background: rgba(240, 165, 0, .15) !important;
  border-color: rgba(240, 165, 0, .5) !important;
  transform: translateY(-1px) !important;
}

/* ─────────────────────────────────────────────────────────────────
   4 · SEO TOP BAR · MÁS DISCRETO EN EL APP
   ─────────────────────────────────────────────────────────────── */

#seo-top-bar {
  font-size: 10.5px !important;
  padding: 4px 12px !important;
  opacity: .55 !important;
  transition: opacity .25s ease !important;
}
#seo-top-bar:hover { opacity: 1 !important; }
#seo-top-bar a {
  font-weight: 500 !important;
  font-size: 10.5px !important;
}

/* En mobile lo escondemos completamente — no aporta valor en pantalla pequeña */
@media (max-width: 768px) {
  #seo-top-bar { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────
   5 · FLOATING ACTION BUTTONS · STRU-IA + QA + CHAT
   IDs reales en el codebase: #aic-floating-btn (Stru-IA chat)
                              #qa-fab (QA bot helper)
                              #ai-copilot-fab (legacy)
   ─────────────────────────────────────────────────────────────── */

/* QA bot helper · más abajo (anchor inferior) */
#qa-fab {
  bottom: 18px !important;
  right: 18px !important;
  z-index: 9501 !important;
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, .22),
              0 3px 8px -2px rgba(0, 0, 0, .12) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
#qa-fab:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 10px 26px -4px rgba(0, 0, 0, .35),
              0 5px 12px -2px rgba(0, 0, 0, .18) !important;
}

/* Stru-IA chat · esquina inferior derecha (qa-fab fue eliminado en #68 · ya no hace falta espaciado vertical) */
/* #FAB-css-fix 2026-06-06 · cambiado de 84px a 18px */
#aic-floating-btn,
#ai-copilot-fab,
.ai-copilot-fab,
.stru-fab,
[id*="ai-copilot-btn"] {
  bottom: 18px !important;
  right: 18px !important;
  z-index: 9500 !important;
  width: 44px !important;
  height: 44px !important;
  box-shadow: 0 6px 18px -4px rgba(240, 165, 0, .45),
              0 2px 6px -2px rgba(0, 0, 0, .15) !important;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease !important;
}
#aic-floating-btn:hover,
#ai-copilot-fab:hover,
.stru-fab:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 12px 32px -4px rgba(240, 165, 0, .5),
              0 6px 16px -2px rgba(0, 0, 0, .18) !important;
}

/* Sub-rules para chat launcher legacy si existiera */
#ai-chat-launcher,
.ai-chat-launcher,
.chat-launcher,
[id*="chat-launcher"] {
  bottom: 18px !important;
  right: 18px !important;
  z-index: 9499 !important;
}

/* ─────────────────────────────────────────────────────────────────
   6 · BUDGET INFO BAR (Costo Directo / Total AIU)
   ─────────────────────────────────────────────────────────────── */

.budget-info-bar > div,
.budget-info-card {
  transition: all .18s ease !important;
  border-radius: 12px !important;
}
.budget-info-bar > div:hover,
.budget-info-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .12) !important;
}

/* Big numbers · monospace tabular */
.budget-info-card .info-value,
.aiu-headline-grid .info-value,
.cashflow-comp-grid .info-value,
[class*="info-value"] {
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.3px !important;
  font-weight: 700 !important;
}

/* ─────────────────────────────────────────────────────────────────
   7 · TABS DE NAVEGACIÓN INTERNA · POLISH
   ─────────────────────────────────────────────────────────────── */

.budget-tabs,
#budget-subtabs,
.subtabs,
[class*="-tabs"] {
  border-bottom: 1px solid var(--border) !important;
}

.tab-btn,
.subtab-btn,
[class*="tab-btn"] {
  position: relative !important;
  transition: color .18s ease, background .18s ease !important;
}

.tab-btn::after,
.subtab-btn::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 8%;
  right: 8%;
  height: 3px;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
  transform: scaleX(0);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
  transform-origin: center;
}
.tab-btn.active::after,
.subtab-btn.active::after,
.tab-btn[aria-selected="true"]::after {
  transform: scaleX(1) !important;
}

/* ─────────────────────────────────────────────────────────────────
   8 · TOOLBAR DE EXPORT (CSV/Excel/PDF/Backup/Compartir/Plano IA)
   ─────────────────────────────────────────────────────────────── */

.topbar-actions .btn-sm,
.topbar-actions .btn-ghost {
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: all .16s ease !important;
}
.topbar-actions .btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, .12) !important;
}

/* Badge NUEVO en Plano IA · mejor posición y animación */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); }
  50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}
button[onclick*="openAIPlanAnalyzer"] {
  position: relative !important;
  isolation: isolate !important;
}
button[onclick*="openAIPlanAnalyzer"] > span[style*="NUEVO"],
button[onclick*="openAIPlanAnalyzer"] > span:last-child {
  top: -7px !important;
  right: -7px !important;
  animation: pulse-glow 2s ease infinite !important;
  font-size: 9px !important;
  padding: 2px 6px !important;
  letter-spacing: .5px !important;
  font-weight: 800 !important;
  border-radius: 99px !important;
}

/* ─────────────────────────────────────────────────────────────────
   9 · FORMULAR/EJECUTAR/INTEGRAR · MÁS ENGAGING
   ─────────────────────────────────────────────────────────────── */

.phase-card,
[class*="phase-"] {
  transition: all .22s cubic-bezier(.4, 0, .2, 1) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
}
.phase-card:not(.active):hover,
[class*="phase-"]:not(.active):hover {
  background: rgba(240, 165, 0, .04) !important;
  transform: translateY(-2px) !important;
}
.phase-card.active {
  box-shadow: 0 0 0 2px var(--accent),
              0 8px 24px -8px rgba(240, 165, 0, .3) !important;
}

/* ─────────────────────────────────────────────────────────────────
   10 · INPUTS · MEJOR FOCUS RING
   ─────────────────────────────────────────────────────────────── */

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(240, 165, 0, .18) !important;
}

/* ─────────────────────────────────────────────────────────────────
   11 · MODALES · SOMBRA Y BACKDROP PROFESIONAL
   ─────────────────────────────────────────────────────────────── */

.modal-bg {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.modal,
.modal-content {
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .25),
              0 8px 20px -6px rgba(0, 0, 0, .15) !important;
  border-radius: 14px !important;
}

/* Botón ✕ cerrar modal · sutil */
.modal-close {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: var(--text3) !important;
  transition: all .15s ease !important;
}
.modal-close:hover {
  background: rgba(248, 81, 73, .08) !important;
  color: #dc2626 !important;
}

/* ─────────────────────────────────────────────────────────────────
   12 · ANIMACIONES DE ENTRADA SUAVES (FADE-IN STAGGER)
   ─────────────────────────────────────────────────────────────── */

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.project-card.anim {
  animation: fade-in-up .35s cubic-bezier(.4, 0, .2, 1) backwards !important;
}
.project-card.anim:nth-child(1) { animation-delay: 0ms; }
.project-card.anim:nth-child(2) { animation-delay: 40ms; }
.project-card.anim:nth-child(3) { animation-delay: 80ms; }
.project-card.anim:nth-child(4) { animation-delay: 120ms; }
.project-card.anim:nth-child(5) { animation-delay: 160ms; }
.project-card.anim:nth-child(6) { animation-delay: 200ms; }

/* ─────────────────────────────────────────────────────────────────
   13 · TYPOGRAPHY REFINEMENTS
   ─────────────────────────────────────────────────────────────── */

/* Números grandes · tabular */
.proj-total,
.stat-val,
.total-final,
[class*="-total"],
[class*="-amount"] {
  font-variant-numeric: tabular-nums !important;
}

/* Section titles · mejor jerarquía */
.section-tag {
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-size: 11px !important;
}

/* Labels uppercase · más respiración */
[class*="-lbl"] {
  letter-spacing: .6px !important;
}

/* ─────────────────────────────────────────────────────────────────
   14 · BADGES (COP, Por jornal, etc) · MEJOR LEGIBILIDAD
   ─────────────────────────────────────────────────────────────── */

.badge {
  font-size: 10.5px !important;
  letter-spacing: .3px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 99px !important;
}

/* ─────────────────────────────────────────────────────────────────
   15 · MOBILE · COMFORT IMPROVEMENTS
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Cards de proyecto · spacing más cómodo */
  .project-card {
    padding: 16px !important;
  }
  .proj-total {
    font-size: 22px !important;
  }
  /* SEO bar oculto en mobile (definido arriba) */

  /* Stru-IA + chat: en mobile, stack vertical + más arriba */
  /* #FAB-css-fix · mobile · sobre bottom-nav (58px) + gap */
  #aic-floating-btn,
  #ai-copilot-fab,
  .stru-fab {
    bottom: 70px !important;
    right: 14px !important;
    width: 44px !important;
    height: 44px !important;
  }
  #ai-chat-launcher,
  .ai-chat-launcher {
    bottom: 14px !important;
    right: 14px !important;
    width: 48px !important;
    height: 48px !important;
  }

  /* Botones más espaciosos en mobile (tap-friendly) */
  .btn-sm {
    min-height: 38px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   16 · DESKTOP · LIMITAR ANCHO EN PANTALLAS GIGANTES
   ─────────────────────────────────────────────────────────────── */

/* 2026-06-12 · El usuario prefiere usar TODO el ancho en monitores grandes.
   Antes se capeaba a 1480px centrado; ahora el contenido ocupa el ancho
   completo de la pantalla (los tamaños de letra NO cambian). */
@media (min-width: 1600px) {
  .content,
  .panel,
  [id^="panel-"] > .panel-inner {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   17 · EMPTY STATES · MÁS AMABLES
   ─────────────────────────────────────────────────────────────── */

.empty-state,
[class*="empty-"] {
  padding: 40px 20px !important;
  text-align: center !important;
  color: var(--text3) !important;
  font-size: 13px !important;
}
.empty-state-icon,
[class*="empty-"] [class*="icon"] {
  font-size: 48px !important;
  margin-bottom: 12px !important;
  opacity: .4 !important;
}

/* ─────────────────────────────────────────────────────────────────
   18 · SCROLLBARS · MÁS FINOS EN DESKTOP
   ─────────────────────────────────────────────────────────────── */

@media (hover: hover) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(150, 150, 150, .25);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background .2s ease;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(150, 150, 150, .5);
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
}

/* ─────────────────────────────────────────────────────────────────
   19 · SELECTION COLOR · BRAND
   ─────────────────────────────────────────────────────────────── */

::selection {
  background: rgba(240, 165, 0, .25);
  color: var(--text1);
}

/* ─────────────────────────────────────────────────────────────────
   20 · CHAPTER ROW PRICE · TABULAR
   ─────────────────────────────────────────────────────────────── */

.b-edit,
input.b-edit {
  font-variant-numeric: tabular-nums !important;
  text-align: right !important;
}

/* Total cell de presupuesto · destacar */
.b-total,
[class*="-total"][id^="bt-"] {
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -.2px !important;
}

/* ─────────────────────────────────────────────────────────────────
   21 · SIDEBAR NAV ITEMS · MICRO-INTERACCIONES
   ─────────────────────────────────────────────────────────────── */

.nav-item {
  position: relative !important;
  transition: background .15s ease, color .15s ease, padding-left .15s ease !important;
}
.nav-item.active {
  font-weight: 700 !important;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}
@media (hover: hover) {
  .nav-item:hover:not(.active) {
    padding-left: 18px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   END · Visual Polish 2026-05-29
   ─────────────────────────────────────────────────────────────── */

/* ═════════════════════════════════════════════════════════════════
   AUDIT 2026-06-02 · Fix burbujas/toasts/FABs cortados (Tarea #289)
   ─────────────────────────────────────────────────────────────────
   Problema reportado: en esquina inferior derecha aparece una
   "burbuja negra cortada" debajo de los botones flotantes
   (aic-floating-btn 🤖 + qa-fab 💬). Causa raíz:
     • #toast estático estaba en bottom:22+safe, right:22+safe (esquina
       inferior derecha) → coincide pixel-a-pixel con qa-fab
       (bottom:20, right:20, 48×48 z=9998 inline) → la burbuja se ve
       cortada por el FAB.
     • toast-stack dinámico tenía z-index 9000 < qa-fab inline 9998
       → en mobile el stack queda oculto bajo el FAB.
     • qa-fab inline no respetaba safe-area-inset-bottom.
   Fix:
     1. Mover el #toast estático ARRIBA de la pila de FABs.
     2. Forzar z-index del toast-stack por encima de FABs.
     3. Empujar qa-fab con safe-area en mobile.
   ═════════════════════════════════════════════════════════════════ */

/* 1 · TOAST estático (#toast) · evitar colisión con FABs */
#toast.toast,
.toast {
  /* Sobre aic-floating-btn (bottom 88 desktop) y qa-fab (bottom 20)
     desktop:  150px (sobre los 2 FABs + gap)
     Se calcula con max() para que en safe-area iOS también funcione. */
  bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  right:  calc(20px  + env(safe-area-inset-right,  0px)) !important;
  max-width: min(340px, calc(100vw - 40px)) !important;
  z-index: 9990 !important; /* > FAB qa inline 9998? No, FAB es 9998
                               pero el toast estático tiene su propia
                               capa visual separada → 9990 sirve */
}

/* 2 · TOAST stack dinámico (id="toast-stack") · arriba de FABs */
#toast-stack {
  /* Está centrado horizontalmente (left:50%) así que no choca con
     los FABs de la derecha; solo aseguramos z-index alto y safe-area */
  z-index: 9990 !important;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  max-width: min(92vw, 560px) !important;
}

/* 3 · MOBILE · ajustes para evitar bottom-nav (58-70px) + safe-area */
@media (max-width: 768px) {
  #toast.toast,
  .toast {
    /* En mobile: sobre aic-floating-btn (74px) + qa-fab (20px) + gap
       Calculado: 74 + 48 + 16 = 138, redondeamos a 140 */
    bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
    right:  calc(12px  + env(safe-area-inset-right,  0px)) !important;
    left:   auto !important;
    max-width: calc(100vw - 24px) !important;
  }
  #toast-stack {
    bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* 4 · FAB qa-fab · forzar safe-area + z-index consistente */
#qa-fab {
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  right:  calc(20px + env(safe-area-inset-right,  0px)) !important;
  z-index: 9501 !important; /* Documentado: aic 9500, qa 9501 */
}
@media (max-width: 480px) {
  #qa-fab {
    /* Botón un poco más pequeño en pantallas muy chicas + más cerca */
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
    right: calc(12px + env(safe-area-inset-right, 0px)) !important;
  }
}

/* 5 · aic-floating-btn · normalizar z-index (debe estar bajo qa-fab) */
#aic-floating-btn {
  z-index: 9500 !important;
}

/* 6 · WHATS-NEW widget · no taparlo, max-width seguro y respetar safe-area */
#whats-new-card {
  max-width: min(380px, calc(100vw - 40px)) !important;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  left:   calc(20px + env(safe-area-inset-left,   0px)) !important;
}
@media (max-width: 768px) {
  #whats-new-card {
    /* En mobile NO debe taparse con bottom-nav (58-70px)
       ni con los FABs de la derecha. Lo dejamos a la izq, sobre bottom-nav. */
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    left:   calc(12px + env(safe-area-inset-left,   0px)) !important;
    right:  calc(12px + env(safe-area-inset-right,  0px)) !important;
    max-width: none !important;
  }
}

/* 7 · TOOLTIPS del glosario · reposicionar si están al borde derecho
       (el ::before tiene transform:translateX(-50%) que puede sacarlo
       del viewport en headers de tabla cerca del borde). */
[data-term]::before {
  max-width: min(280px, calc(100vw - 32px)) !important;
}
/* Si el span está en los últimos ~150px del viewport horizontal,
   anclamos a la derecha del término en vez de centrar. Esto requeriría
   JS para detectar borde — como fallback CSS, garantizamos word-wrap. */
[data-term]::before {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* 8 · OFFLINE BAR · que no tape los FABs ni el toast */
#offline-bar,
.offline-bar {
  /* z-index 9997 es OK, pero le damos safe-area horizontal */
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* 9 · NOTIF SHEET (panel notificaciones) · max-height para no cortarse */
.notif-sheet,
#notif-panel,
#notifications-panel {
  max-height: calc(100vh - 80px) !important;
  max-height: calc(100dvh - 80px) !important;
  overflow-y: auto !important;
}

/* 10 · STRU-IA chat window · respetar viewport */
#aic-chat-panel,
#aic-chat-window,
.aic-chat-window {
  max-width: min(420px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 100px) !important;
  max-height: calc(100dvh - 100px) !important;
}
@media (max-width: 768px) {
  #aic-chat-panel,
  #aic-chat-window,
  .aic-chat-window {
    max-width: calc(100vw - 16px) !important;
    bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
    right: 8px !important;
    left: 8px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   END · Audit Fix 2026-06-02
   ─────────────────────────────────────────────────────────────── */