/* =============================================================================
   modes-lattice.css — Lattice de MODOS DE USO (aditivo) — MODOS ADR 2026-07-11
   -----------------------------------------------------------------------------
   Sistema PARAMÉTRICO por modo, scoped a body.mode-{explorador,dom,cev,enterprise}.
   Con sesión legacy (sin body.mode-*) NO oculta ni pinta NADA → CERO cambio.

   Educativo NO se toca aquí: su badge/banner/whitelist viven en mode-educativo.css
   (acento ámbar). Este archivo NO define reglas body.mode-educativo (para no
   duplicar ni pisar el MVP). El enforcement REAL de emisión es server-side
   (dependencies/require_can_emit → 403); esto es reflejo de UX.

   Acentos (brand refined 2026): explorador slate-500 #64748b · dom emerald-500
   #10b981 · cev sky-500 #0ea5e9 · enterprise gradiente 135° sky→emerald.
   ============================================================================= */

/* --- 0. Tokens de acento por modo (paramétricos) ---------------------------- */
body.mode-explorador {
  --mode-accent: #64748b;                       /* slate-500 */
  --mode-accent-dim: rgba(100, 116, 139, 0.12);
  --mode-accent-border: rgba(100, 116, 139, 0.35);
}
body.mode-dom {
  --mode-accent: #10b981;                        /* emerald-500 */
  --mode-accent-dim: rgba(16, 185, 129, 0.12);
  --mode-accent-border: rgba(16, 185, 129, 0.35);
}
body.mode-cev {
  --mode-accent: #0ea5e9;                        /* sky-500 */
  --mode-accent-dim: rgba(14, 165, 233, 0.12);
  --mode-accent-border: rgba(14, 165, 233, 0.35);
}
body.mode-enterprise {
  --mode-accent: #0ea5e9;                        /* base sky para texto/borde legible */
  --mode-accent-dim: rgba(14, 165, 233, 0.12);
  --mode-accent-border: rgba(14, 165, 233, 0.35);
  --mode-accent-grad: linear-gradient(135deg, #0ea5e9, #10b981);
}

/* --- 1. Badge de modo en el header (paramétrico) ----------------------------
   .nc-mode-badge lo INYECTA el mode-switcher (agente E); aquí sólo lo estilamos
   por modo. Oculto salvo bajo un body.mode-* del lattice (evita un badge suelto
   en legacy). Educativo usa .edu-mode-badge (mode-educativo.css), no éste. */
.nc-mode-badge {
  display: none;
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mode-accent, #64748b);
  background: var(--mode-accent-dim, rgba(100, 116, 139, 0.12));
  border: 1px solid var(--mode-accent-border, rgba(100, 116, 139, 0.35));
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}
body.mode-explorador .nc-mode-badge,
body.mode-dom .nc-mode-badge,
body.mode-cev .nc-mode-badge,
body.mode-enterprise .nc-mode-badge {
  display: inline-flex;
}
/* Enterprise: pill con lavado gradiente sky→emerald. */
body.mode-enterprise .nc-mode-badge {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.14), rgba(16, 185, 129, 0.14));
  color: #7dd3fc;
}
.nc-mode-badge .nc-mode-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mode-accent, #64748b);
  flex: 0 0 auto;
}
body.mode-enterprise .nc-mode-badge .nc-mode-dot {
  background: var(--mode-accent-grad, linear-gradient(135deg, #0ea5e9, #10b981));
}

/* --- 2. Banner de release-state (#ncModeBanner, poblado por modes.js) --------
   Persistente sobre el área de cálculo. Visible sólo bajo un modo del lattice;
   educativo usa .edu-mode-banner (arriba en el DOM). Legacy → oculto. */
.nc-mode-banner {
  display: none;
}
/* FLIP MODES_ENFORCE 2026-07-11: modos LIVE no llevan banner — renderBanner()
   vacía el nodo; sin esta regla la píldora bordeada quedaba visible VACÍA
   bajo body.mode-* (nit visual cazado en revisión post-flip del gerente). */
.nc-mode-banner:empty {
  display: none !important;
}
body.mode-explorador .nc-mode-banner,
body.mode-dom .nc-mode-banner,
body.mode-cev .nc-mode-banner,
body.mode-enterprise .nc-mode-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--mode-accent-dim, rgba(100, 116, 139, 0.12));
  border: 1px solid var(--mode-accent-border, rgba(100, 116, 139, 0.35));
  border-radius: 8px;
  font-size: 12.5px;
  color: #cbd5e1;
}
body.mode-enterprise .nc-mode-banner {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.10), rgba(16, 185, 129, 0.10));
}
.nc-mode-banner .nc-mode-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--mode-accent, #64748b);
  flex: 0 0 auto;
}
body.mode-enterprise .nc-mode-banner .nc-mode-tag {
  color: #7dd3fc;
}
.nc-mode-banner .nc-mode-msg {
  line-height: 1.45;
}

/* --- 3. Nav whitelist: demand (letra CEV) fuera de cev/enterprise -----------
   Explorador y DOM no incluyen 'demand' en su lattice → se oculta del nav (el
   route-guard además la redirige). cev/enterprise SÍ la exponen. SOLO bajo
   body.mode-*: con legacy no se oculta nada. Educativo lo maneja su propio CSS. */
body.mode-explorador .nav-item[data-section="demand"],
body.mode-dom .nav-item[data-section="demand"] {
  display: none !important;
}

/* --- 4. Switcher de MODO de revisión (#ncModeSwitcher, poblado por mode-switcher.js)
   Herramienta admin/AI en .dropdown-header. Sólo aparece si can_switch_mode (el JS
   deja el contenedor vacío para el resto → :empty no ocupa espacio). Tema oscuro
   para asentarse en el dropdown. Compacto, target táctil 44px. MODOS ADR 2026-07-11. */
.nc-mode-switcher {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
}
.nc-mode-switcher:empty {
  display: none;                                 /* sin opciones → sin hueco (no elegible) */
}
.nc-mode-switcher-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;                                /* slate-400 */
}
.nc-mode-switcher-select {
  width: 100%;
  min-height: 44px;                              /* target táctil WCAG 2.2 (2.5.8) */
  box-sizing: border-box;
  padding: 8px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #e2e8f0;                                /* slate-200 */
  background: #1e293b;                           /* slate-800 (tema oscuro) */
  border: 1px solid #64748b;                     /* slate-500 (acento explorador base) */
  border-radius: 8px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.nc-mode-switcher-select:hover {
  border-color: #94a3b8;                         /* slate-400 */
}
.nc-mode-switcher-select:focus,
.nc-mode-switcher-select:focus-visible {
  outline: none;
  border-color: #0ea5e9;                         /* sky-500 (foco) */
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.35);
}
.nc-mode-switcher-select:disabled {
  opacity: 0.55;
  cursor: progress;                              /* durante el POST /auth/mode-override */
}