/* ============================================================
   Inter font (Google Fonts CDN)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   Variables globales — paleta Venezuela
   ============================================================ */
:root {
  /* Controles nativos (date picker, flecha de select, scrollbars, botón clear del
     search) siguen este esquema → adaptan a oscuro sin CSS extra. Se invierte en
     html.light-mode. */
  color-scheme: dark;
  /* ── Fondos / superficies (OSCURO = base) ── */
  --bg:                #0d1117;
  --bg-2:              #0f172a;
  --surface:           rgba(255,255,255,0.04);
  --surface-2:         rgba(255,255,255,0.06);
  --surface-3:         #0f172a;
  --panel:             rgba(255,255,255,0.05);
  --panel-2:           #1e293b;
  /* Superficie de overlays flotantes (modales / drawer): casi opaca para que el
     contenido detrás no se transparente y el panel sea legible. NO usar --surface
     (tinte translúcido pensado para cards en flujo). */
  --surface-overlay:   rgba(26,34,52,0.97);
  --control-bg:        rgba(255,255,255,0.06);
  --control-bg-hover:  rgba(255,255,255,0.10);
  --control-border:    rgba(255,255,255,0.12);
  --scrim:             rgba(15,23,42,0.65);
  /* ── Texto ── */
  --text:              #e2e8f0;
  --text-strong:       #f1f5f9;
  --muted:             #94a3b8;
  --muted-2:           #64748b;
  /* ── Bordes ── */
  --border:            rgba(255,255,255,0.08);
  --border-soft:       rgba(255,255,255,0.05);
  /* ── Marca / acento (vivos, iguales en ambos temas salvo los soft) ── */
  --brand:             #3b82f6;
  --brand-dark:        #2563eb;
  /* Componentes RGB de la marca — para tints con alfa: rgba(var(--brand-rgb),α).
     Un tema puede overridearlos igual que --brand y así controlar también los
     fondos/anillos translúcidos, no solo los colores sólidos. */
  --brand-rgb:         59, 130, 246;
  --brand-dark-rgb:    37, 99, 235;
  --brand-soft-bg:     rgba(59,130,246,0.18);
  --brand-soft-fg:     #93c5fd;
  --accent:            #111827;
  --danger:            #ef4444;
  --success:           #10b981;
  /* ── Tooltip ── */
  --tooltip-bg:        #1e293b;
  --tooltip-fg:        #f1f5f9;
  /* ── Tags / badges (bg + fg) ── */
  --badge-success-bg:  rgba(16,185,129,0.15);  --badge-success-fg: #34d399;
  --badge-warn-bg:     rgba(245,158,11,0.16);  --badge-warn-fg:    #fbbf24;
  --badge-danger-bg:   rgba(239,68,68,0.15);   --badge-danger-fg:  #f87171;
  --badge-info-bg:     rgba(59,130,246,0.16);  --badge-info-fg:    #60a5fa;
  --badge-neutral-bg:  rgba(148,163,184,0.18); --badge-neutral-fg: #cbd5e1;
  --badge-purple-bg:   rgba(139,92,246,0.16);  --badge-purple-fg:  #a78bfa;
  /* ── Sombras (oscuro: más marcadas para que se vean) ── */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.30);
  --shadow-lg:  0 12px 28px rgba(0,0,0,0.50), 0 4px 8px rgba(0,0,0,0.40);
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Transición suave claro⇄oscuro. Solo props de color; NO afecta la carga
   inicial (index.html fija la clase de tema en un script pre-paint, antes del
   primer render → la transición solo dispara en el toggle en runtime). Las
   reglas con transition propia (botones, hover, etc.) ganan por especificidad,
   así que las interacciones siguen igual de rápidas; aquí solo funden las
   superficies estáticas. box-shadow/transform se dejan a sus reglas de hover. */
*, *::before, *::after {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, fill 0.3s ease;
}

/* scrollbar-gutter: stable → reserva SIEMPRE el ancho de la barra de scroll del
   documento, aunque no haga falta. Evita que al pasar a una tab alta (Bloques)
   aparezca la barra, encoja el viewport y desplace el contenido centrado. */
/* --font-scale (F6.3): escala global de tipografía. Todo lo dimensionado en rem
   reescala con esto; los px literales NO (deuda conocida, riesgo 8 del plan). */
html { font-size: calc(16px * var(--font-scale, 1)); scrollbar-gutter: stable; }

body {
  /* --font-family (F6.5): lo fija el fontpack activo; fallback = Inter de fábrica. */
  font-family: var(--font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  background: var(--bg);
  min-height: 100vh;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.active {
  background: var(--brand-dark) !important;
  color: #fff !important;
}

/* ============================================================
   Splash / carga inicial
   ============================================================ */
.splash {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  color: var(--muted);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 40%, #0f172a 100%);
  position: relative;
  overflow: hidden;
}

/* capa de estrellas animadas */
.login-container::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.75) 1px, transparent 1px),
    radial-gradient(circle, rgba(147,197,253,0.60) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.45) 1px, transparent 1px),
    radial-gradient(circle, rgba(96,165,250,0.40) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.30) 1px, transparent 1px);
  background-size: 280px 280px, 190px 190px, 130px 130px, 90px 90px, 60px 60px;
  background-position: 15px 25px, 55px 70px, 90px 15px, 130px 110px, 40px 80px;
  animation: starDrift 50s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* orbs de brillo pulsantes */
.login-container::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 650px 650px at 78% 8%,  rgba(var(--brand-rgb),0.14) 0%, transparent 65%),
    radial-gradient(ellipse 450px 450px at 22% 92%, rgba(var(--brand-dark-rgb),0.09)  0%, transparent 65%),
    radial-gradient(ellipse 300px 300px at 55% 50%, rgba(99,102,241,0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: orbPulse 9s ease-in-out infinite alternate;
}

@keyframes starDrift {
  from { background-position: 15px 25px, 55px 70px, 90px 15px, 130px 110px, 40px 80px; }
  to   { background-position: 295px 305px, 245px 260px, 220px 145px, 220px 200px, 100px 140px; }
}

@keyframes orbPulse {
  from { opacity: 0.6; }
  to   { opacity: 1.0; }
}

/* tarjeta */
.login-card {
  width: 100%;
  max-width: 420px;
  padding: 40px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,0.98) 0%, rgba(241,245,249,0.95) 100%);
  border: 1px solid rgba(226,232,240,0.8);
  box-shadow:
    0 25px 60px rgba(0,0,0,0.3),
    0 0 0 1px rgba(255,255,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter: blur(20px);
  animation: fadeInUp 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
  /* GPU: compositor handles transform+opacity animation without layout recalc */
  will-change: transform, opacity;
  contain: layout style paint;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* header */
.login-header {
  text-align: center;
  margin-bottom: 36px;
}

.login-logo {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(var(--brand-dark-rgb),0.4), 0 2px 6px rgba(var(--brand-dark-rgb),0.2);
}

.login-logo svg {
  color: #ffffff;
}

.login-header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 6px;
}

.login-subtitle {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
}

.login-weather-chip {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(148, 163, 184, 0.22);
  backdrop-filter: blur(12px);
  display: grid;
  gap: 4px;
}

.login-weather-chip__location {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-strong);
}

.login-weather-chip__country {
  font-size: 0.77rem;
  font-weight: 600;
  color: var(--text-strong);
}

.login-weather-chip__status {
  font-size: 0.76rem;
  color: var(--muted);
  font-weight: 500;
}

.login-container--dynamic {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 40%, #0f172a 100%);
  transition: background 1.2s ease;
}

/* ── Paleta de cielo por franja horaria (ortogonal al clima) ─────
   El tema (clima) define las partículas; la fase define el cielo.
   Los climas que ocurren a cualquier hora (nublado/lluvia/nieve)
   construyen su fondo sobre estas variables. ─────────────────── */
.login-container--dynamic.phase-dawn  { --sky-a: #f7b27a; --sky-b: #c98a9b; --sky-c: #5b6aa8; }
.login-container--dynamic.phase-day   { --sky-a: #6fa8dc; --sky-b: #9cc3e6; --sky-c: #3d6aa3; }
.login-container--dynamic.phase-dusk  { --sky-a: #e8915b; --sky-b: #9b5e8e; --sky-c: #2e2f5b; }
.login-container--dynamic.phase-night { --sky-a: #050816; --sky-b: #102347; --sky-c: #040a17; }
/* Fallback si por algún motivo no hay clase de fase. */
.login-container--dynamic { --sky-a: #4b5f79; --sky-b: #6f86a3; --sky-c: #2e3d53; }

.login-container--dynamic.theme-default::before {
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.75) 1px, transparent 1px),
    radial-gradient(circle, rgba(147,197,253,0.60) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.45) 1px, transparent 1px),
    radial-gradient(circle, rgba(96,165,250,0.40) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.30) 1px, transparent 1px);
}

.login-container--dynamic.theme-default::after {
  background:
    radial-gradient(ellipse 650px 650px at 78% 8%,  rgba(var(--brand-rgb),0.14) 0%, transparent 65%),
    radial-gradient(ellipse 450px 450px at 22% 92%, rgba(var(--brand-dark-rgb),0.09)  0%, transparent 65%),
    radial-gradient(ellipse 300px 300px at 55% 50%, rgba(99,102,241,0.06) 0%, transparent 60%);
}

/* El cielo soleado sigue la hora (amanecer/día/atardecer); el sol cambia de
   posición y color por fase vía variables (usadas en `.theme-sunny .wbg-1`). */
.login-container--dynamic.theme-sunny {
  --sun-x: 83%; --sun-y: 16%;
  --sun-core: rgba(255,255,220,1);
  --sun-glow: rgba(255,228,60,0.38);
  background: linear-gradient(160deg, #8ec5ef 0%, #bfe0f5 45%, #ffe9a8 100%);
}
.login-container--dynamic.theme-sunny.phase-day {
  --sun-x: 83%; --sun-y: 16%;
  --sun-core: rgba(255,255,225,1);
  --sun-glow: rgba(255,228,60,0.38);
  background: linear-gradient(160deg, #8ec5ef 0%, #bfe0f5 45%, #ffe9a8 100%);
}
.login-container--dynamic.theme-sunny.phase-dawn {
  --sun-x: 80%; --sun-y: 62%;
  --sun-core: rgba(255,238,205,1);
  --sun-glow: rgba(255,182,120,0.42);
  background: linear-gradient(160deg, #fde7c7 0%, #f7b98a 46%, #e98a86 100%);
}
.login-container--dynamic.theme-sunny.phase-dusk {
  --sun-x: 22%; --sun-y: 64%;
  --sun-core: rgba(255,226,184,1);
  --sun-glow: rgba(255,140,90,0.44);
  background: linear-gradient(160deg, #ffd29b 0%, #ff9e7a 46%, #b5638f 100%);
}

.login-container--dynamic.theme-sunny::before {
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 252, 227, 0.92) 0 10%, rgba(255, 252, 227, 0.25) 18%, transparent 38%),
    radial-gradient(circle at 12% 22%, rgba(255,255,255,0.24) 0 8%, transparent 24%),
    radial-gradient(circle at 22% 30%, rgba(255,255,255,0.16) 0 7%, transparent 22%);
  animation: orbPulse 8s ease-in-out infinite alternate;
}

.login-container--dynamic.theme-sunny::after {
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.18) 44%, rgba(255,255,255,0) 62%),
    radial-gradient(ellipse 560px 220px at 20% 100%, rgba(116, 185, 129, 0.22) 0%, transparent 62%);
  animation: sunnyGlow 9s ease-in-out infinite alternate;
}

.login-container--dynamic.theme-cloudy {
  /* Velo gris translúcido sobre el cielo de la fase → nublado de día u
     oscuro de noche según las variables --sky-*. */
  background:
    linear-gradient(180deg, rgba(120,134,158,0.42) 0%, rgba(70,84,108,0.34) 100%),
    linear-gradient(135deg, var(--sky-a) 0%, var(--sky-b) 45%, var(--sky-c) 100%);
}

.login-container--dynamic.theme-cloudy::before {
  background:
    radial-gradient(ellipse 360px 135px at 18% 22%, rgba(255,255,255,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 460px 155px at 76% 20%, rgba(255,255,255,0.18) 0%, transparent 72%),
    radial-gradient(ellipse 400px 145px at 48% 74%, rgba(255,255,255,0.10) 0%, transparent 70%);
  filter: blur(6px);
  animation: cloudDrift 24s ease-in-out infinite alternate;
}

.login-container--dynamic.theme-cloudy::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(ellipse 580px 360px at 50% 10%, rgba(255,255,255,0.08) 0%, transparent 70%);
}

.login-container--dynamic.theme-rainy {
  /* Cielo de la fase (azul de día … negro de noche) + velo de tormenta
     cuya opacidad sube con la intensidad (clases .intensity-*). */
  --storm: rgba(8,12,24,0.34);
  background:
    linear-gradient(180deg, var(--storm) 0%, var(--storm) 100%),
    linear-gradient(135deg, var(--sky-a) 0%, var(--sky-b) 46%, var(--sky-c) 100%);
}
.login-container--dynamic.theme-rainy.intensity-1 { --storm: rgba(20,28,44,0.20); }
.login-container--dynamic.theme-rainy.intensity-2 { --storm: rgba(12,18,32,0.36); }
.login-container--dynamic.theme-rainy.intensity-3 { --storm: rgba(4,8,18,0.55); }

.login-container--dynamic.theme-rainy::before {
  background-image:
    repeating-linear-gradient(110deg,
      transparent                    0px    7px,
      rgba(174,214,241, 0.44)        7px    8.5px,
      transparent                    8.5px  24px,
      rgba(174,214,241, 0.26)        24px   25.5px,
      transparent                    25.5px 42px);
  background-size: 42px 88px;
  animation: rainFall 0.48s linear infinite;
  opacity: 1;
}

.login-container--dynamic.theme-rainy::after {
  background:
    radial-gradient(ellipse 620px 280px at 50% 100%, rgba(56, 189, 248, 0.16) 0%, transparent 68%),
    radial-gradient(ellipse 260px 260px at 85% 18%, rgba(14, 165, 233, 0.14) 0%, transparent 70%);
}

.login-container--dynamic.theme-snowy {
  /* Aclarado suave sobre el cielo de la fase: nieve luminosa de día,
     más sobria de noche (las variables --sky-* ya oscurecen). */
  background:
    linear-gradient(180deg, rgba(225,236,246,0.34) 0%, rgba(183,202,223,0.20) 100%),
    linear-gradient(135deg, var(--sky-a) 0%, var(--sky-b) 45%, var(--sky-c) 100%);
}

.login-container--dynamic.theme-snowy::before {
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.92) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,0.72) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.54) 1.2px, transparent 1.2px);
  background-size: 180px 180px, 120px 120px, 90px 90px;
  background-position: 10px 10px, 70px 40px, 30px 80px;
  animation: snowFall 12s linear infinite;
}

.login-container--dynamic.theme-snowy::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.00) 52%),
    radial-gradient(ellipse 440px 200px at 50% 100%, rgba(255,255,255,0.18) 0%, transparent 70%);
}

.login-container--dynamic.theme-night {
  background: linear-gradient(135deg, #050816 0%, #102347 45%, #040a17 100%);
}

.login-container--dynamic.theme-night::before {
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.86) 1px, transparent 1px),
    radial-gradient(circle, rgba(96,165,250,0.58) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.38) 1px, transparent 1px);
  background-size: 220px 220px, 130px 130px, 80px 80px;
  background-position: 15px 25px, 55px 70px, 90px 15px;
  animation: starDrift 40s linear infinite;
}

.login-container--dynamic.theme-night::after {
  /* Sin disco brillante aquí: la luna (con su fase real) la dibuja el canvas.
     Solo queda el ambiente azulado del cielo nocturno. */
  background:
    radial-gradient(ellipse 460px 460px at 78% 10%, rgba(var(--brand-rgb),0.16) 0%, transparent 68%),
    radial-gradient(ellipse 350px 160px at 50% 100%, rgba(var(--brand-dark-rgb),0.10) 0%, transparent 72%);
}

.login-container--dynamic.theme-christmas {
  background: linear-gradient(135deg, #0f2e24 0%, #7f1d1d 52%, #1f2937 100%);
}

.login-container--dynamic.theme-christmas::before {
  background-image:
    radial-gradient(circle, rgba(248, 250, 252, 0.92) 2px, transparent 2px),
    radial-gradient(circle, rgba(248, 113, 113, 0.72) 2.5px, transparent 2.5px),
    radial-gradient(circle, rgba(74, 222, 128, 0.72) 2.5px, transparent 2.5px),
    radial-gradient(circle, rgba(250, 204, 21, 0.76) 2px, transparent 2px);
  background-size: 170px 170px, 210px 210px, 240px 240px, 130px 130px;
  background-position: 18px 40px, 42px 82px, 110px 22px, 84px 124px;
  animation: festiveBokeh 14s ease-in-out infinite alternate;
}

.login-container--dynamic.theme-christmas::after {
  background:
    radial-gradient(ellipse 540px 220px at 50% 100%, rgba(250, 204, 21, 0.14) 0%, transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.00) 48%);
}

@keyframes rainFall {
  from { background-position: 0 0; }
  to   { background-position: -42px 88px; }
}

@keyframes snowFall {
  /* background-position animation: each layer moves exactly one tile height = seamless loop */
  from { background-position: 10px  10px, 70px 40px,  30px 80px; }
  to   { background-position: -10px 190px, 55px 160px, 10px 170px; }
}

@keyframes cloudDrift {
  from { transform: translateX(-14px); opacity: 0.8; }
  to { transform: translateX(16px); opacity: 1; }
}

@keyframes sunnyGlow {
  from { opacity: 0.7; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(12px); }
}

@keyframes festiveBokeh {
  from { opacity: 0.78; transform: scale(1); }
  to { opacity: 1; transform: scale(1.04); }
}

/* ═══════════════════════════════════════════════════════════════
   Weather background animation layers (.wbg)
   3 fixed divs injected by login.rs, z-index: 0, pointer-events: none
   Each theme drives its own wbg-1/2/3 rules.
   ═══════════════════════════════════════════════════════════════ */

.wbg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ── Selector de fondos (solo modo test) ──────────────────────── */
.bgsel {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: min(92vw, 720px);
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  color: #e2e8f0;
  font-size: 0.78rem;
}
.bgsel__title {
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  opacity: 0.85;
  margin-bottom: 2px;
}
.bgsel__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bgsel__lbl {
  flex: 0 0 70px;
  font-weight: 600;
  opacity: 0.7;
  font-size: 0.72rem;
}
.bgsel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.bgsel__chip {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bgsel__chip:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(148, 163, 184, 0.55);
}
.bgsel__chip.is-active {
  background: var(--brand);
  border-color: var(--brand-soft-fg);
  color: #fff;
}
@media (max-width: 560px) {
  .bgsel__lbl { flex-basis: 100%; }
  .bgsel__row { flex-wrap: wrap; }
}

/* Canvas cloud — sits above .wbg layers; blur matches HTML example */
canvas.login-cloud-canvas {
  position: fixed;
  inset: 0;
  display: block;
  pointer-events: none;
  z-index: 0;
  filter: blur(3px);
}

/* Canvas rain — sits above .wbg layers, below .login-card (z-index:1) */
canvas.login-rain-canvas {
  position: fixed;
  inset: 0;
  display: block;
  pointer-events: none;
  z-index: 0;
}

/* Canvas moon — luna con fase real (tema noche); sobre las estrellas .wbg */
canvas.login-moon-canvas {
  position: fixed;
  inset: 0;
  display: block;
  pointer-events: none;
  z-index: 0;
}

/* ── CLOUDY: puffy cloud formations scrolling across sky ─────── */
/* wbg-1/2 hidden — canvas handles foreground clouds */
.theme-cloudy .wbg-1,
.theme-cloudy .wbg-2 { display: none; }

.theme-cloudy .wbg-1-UNUSED {
  /* Tile 680×210px: two distinct cloud formations built from
     overlapping circles — fewer blur pixels = crisper puffs. */
  background-image:
    /* Cloud A — left formation */
    radial-gradient(circle 78px  at 17% 72%, rgba(228,240,254,0.96) 0%, transparent 80%),
    radial-gradient(circle 62px  at 23% 56%, rgba(228,240,254,0.94) 0%, transparent 78%),
    radial-gradient(circle 70px  at 32% 58%, rgba(228,240,254,0.96) 0%, transparent 78%),
    radial-gradient(circle 56px  at 40% 67%, rgba(220,234,252,0.90) 0%, transparent 78%),
    radial-gradient(circle 48px  at  8% 76%, rgba(210,228,250,0.82) 0%, transparent 78%),
    /* Cloud B — right formation */
    radial-gradient(circle 62px  at 71% 68%, rgba(220,234,252,0.90) 0%, transparent 78%),
    radial-gradient(circle 50px  at 77% 56%, rgba(220,234,252,0.88) 0%, transparent 76%),
    radial-gradient(circle 56px  at 85% 62%, rgba(220,234,252,0.90) 0%, transparent 76%),
    radial-gradient(circle 42px  at 64% 73%, rgba(210,226,248,0.80) 0%, transparent 78%),
    radial-gradient(circle 36px  at 93% 70%, rgba(210,226,248,0.76) 0%, transparent 76%);
  background-size: 680px 210px;
  background-repeat: repeat-x;
  filter: blur(2.5px);
  opacity: 0.94;
  animation: cloudRoll1 32s linear infinite;
}

.theme-cloudy .wbg-2 {
  /* Larger background clouds, slower + softer */
  background-image:
    radial-gradient(circle 115px at 17% 62%, rgba(195,218,240,0.80) 0%, transparent 78%),
    radial-gradient(circle  98px at 26% 50%, rgba(195,218,240,0.76) 0%, transparent 76%),
    radial-gradient(circle 108px at 36% 55%, rgba(195,218,240,0.78) 0%, transparent 76%),
    radial-gradient(circle  88px at 46% 63%, rgba(185,210,236,0.72) 0%, transparent 76%),
    radial-gradient(circle  92px at 70% 60%, rgba(190,212,238,0.74) 0%, transparent 74%),
    radial-gradient(circle  80px at 79% 50%, rgba(190,212,238,0.70) 0%, transparent 74%),
    radial-gradient(circle  88px at 88% 58%, rgba(190,212,238,0.72) 0%, transparent 74%),
    radial-gradient(circle  72px at 60% 66%, rgba(182,206,234,0.68) 0%, transparent 74%);
  background-size: 900px 280px;
  background-repeat: repeat-x;
  filter: blur(10px);
  opacity: 0.72;
  animation: cloudRoll2 56s linear infinite;
}

.theme-cloudy .wbg-3 {
  background:
    linear-gradient(180deg, rgba(52,72,98,0.62) 0%, rgba(52,72,98,0.18) 26%, transparent 50%),
    linear-gradient(  0deg, rgba(40,58,82,0.32) 0%, transparent 16%);
}

@keyframes cloudRoll1 {
  from { background-position:    0px   70px; }
  to   { background-position:  680px   70px; }
}
@keyframes cloudRoll2 {
  from { background-position: -200px 230px; }
  to   { background-position:  700px 230px; }
}

/* ── RAINY: drizzle + storm clouds + lightning flash ─────────── */

.theme-rainy .wbg-1 {
  /* Very faint background rain — Canvas handles the foreground drops */
  background-image:
    repeating-linear-gradient(107deg,
      transparent            0px   13px,
      rgba(174,214,241,0.09) 13px  14px,
      transparent            14px  42px);
  background-size: 42px 125px;
  animation: rainWbgB 0.72s linear infinite;
  opacity: 0.7;
}

/* Relámpago: solo en lluvia fuerte/tormenta (intensity-3). */
.theme-rainy .wbg-2 { display: none; }
.theme-rainy.intensity-3 .wbg-2 {
  display: block;
  /* Lightning flash: long silence then rapid double-strike (18s cycle). */
  background: linear-gradient(155deg,
    rgba(205,232,255,0.94) 0%,
    rgba(225,244,255,0.65) 40%,
    transparent 78%);
  opacity: 0;
  animation: lightningFlash 18s ease-in 0s infinite;
}

.theme-rainy .wbg-3 {
  /* Oscurecimiento superior que sigue la intensidad (--storm). Las nubes
     volumétricas las dibuja el canvas según la fase (claras de día,
     oscuras de noche), por eso aquí solo damos profundidad al cielo. */
  background:
    linear-gradient(180deg, var(--storm) 0%, transparent 46%);
  opacity: 0.9;
  animation: stormDrift 50s ease-in-out infinite alternate;
}

@keyframes lightningFlash {
  /* Double-strike at 70% of 18s = 12.6s. Total duration ≈ 324ms. */
  0%,   70%,   70.8%, 71%,   71.8%, 100% { opacity: 0; }
  70.3%                                   { opacity: 0.90; }
  70.5%                                   { opacity: 0.28; }
  71.3%                                   { opacity: 0.74; }
  71.6%                                   { opacity: 0.10; }
}

@keyframes rainWbgB {
  from { background-position: 0 0; }
  to   { background-position: -42px 125px; }
}

@keyframes stormDrift {
  from { transform: translateX(-18px); }
  to   { transform: translateX( 18px); }
}

/* ── SUNNY: sun disc + ray corona + wispy clouds ─────────────── */

.theme-sunny .wbg-1 {
  /* Sun disc + inner corona + outer halo + conic ray spikes.
     Posición (--sun-x/--sun-y) y color (--sun-core/--sun-glow) varían por fase. */
  background:
    radial-gradient(circle 52px  at var(--sun-x) var(--sun-y), var(--sun-core) 0%, rgba(255,248,140,0.90) 35%, transparent 58%),
    radial-gradient(circle 118px at var(--sun-x) var(--sun-y), var(--sun-glow)  0%, transparent 62%),
    radial-gradient(circle 245px at var(--sun-x) var(--sun-y), rgba(255,210,20,0.14)  0%, transparent 78%),
    repeating-conic-gradient(from 0deg at var(--sun-x) var(--sun-y),
      rgba(255,240,80,0.28) 0deg 4deg,
      transparent 4deg 22deg);
  animation: sunBeat 5.5s ease-in-out infinite alternate;
}

.theme-sunny .wbg-2 {
  /* Wispy cloud tile 920×130px drifting left to right */
  background-image:
    radial-gradient(ellipse 190px 58px at 22% 66%, rgba(255,255,255,0.64) 0%, transparent 72%),
    radial-gradient(ellipse 148px 44px at 36% 58%, rgba(255,255,255,0.52) 0%, transparent 70%),
    radial-gradient(ellipse 168px 52px at 57% 62%, rgba(255,255,255,0.58) 0%, transparent 70%),
    radial-gradient(ellipse 132px 40px at 72% 58%, rgba(255,255,255,0.50) 0%, transparent 68%),
    radial-gradient(ellipse 155px 48px at 90% 65%, rgba(255,255,255,0.56) 0%, transparent 70%);
  background-size: 920px 130px;
  background-repeat: repeat-x;
  filter: blur(3px);
  opacity: 0.82;
  animation: cloudRollSun 70s linear infinite;
}

.theme-sunny .wbg-3 {
  background:
    linear-gradient(0deg, rgba(255,175,55,0.14) 0%, transparent 32%),
    radial-gradient(ellipse 340px 240px at 92% 12%, rgba(255,255,220,0.20) 0%, transparent 70%);
  animation: sunHaze 9s ease-in-out infinite alternate;
}

@keyframes cloudRollSun {
  from { background-position:    0px 160px; }
  to   { background-position:  920px 160px; }
}
@keyframes sunBeat {
  from { opacity: 0.80; transform: scale(0.97); }
  to   { opacity: 1.00; transform: scale(1.03); }
}
@keyframes sunHaze {
  from { opacity: 0.68; }
  to   { opacity: 1.00; }
}

/* ── SNOWY: layered snowflakes + cloud ceiling ───────────────── */

.theme-snowy .wbg-1 {
  background-image:
    radial-gradient(circle 3.8px at 20% 50%, rgba(255,255,255,0.92) 0%, transparent 100%),
    radial-gradient(circle 2.6px at 68% 50%, rgba(255,255,255,0.82) 0%, transparent 100%);
  background-size: 210px 210px, 140px 140px;
  animation: snowWbgA 18s linear infinite;
}

.theme-snowy .wbg-2 {
  background-image:
    radial-gradient(circle 2.0px at 42% 50%, rgba(255,255,255,0.78) 0%, transparent 100%),
    radial-gradient(circle 1.6px at 74% 50%, rgba(255,255,255,0.66) 0%, transparent 100%);
  background-size: 115px 115px, 78px 78px;
  animation: snowWbgB 10s linear infinite;
  opacity: 0.85;
}

.theme-snowy .wbg-3 {
  /* Soft cloud ceiling at top + ground glow at bottom */
  background:
    radial-gradient(ellipse 460px 130px at 28% 8%,  rgba(222,236,252,0.48) 0%, transparent 72%),
    radial-gradient(ellipse 380px 110px at 74% 5%,  rgba(222,236,252,0.42) 0%, transparent 70%),
    linear-gradient(  0deg, rgba(215,232,250,0.40) 0%, transparent 24%),
    linear-gradient(180deg, rgba(200,222,244,0.22) 0%, transparent 14%);
}

@keyframes snowWbgA {
  from { background-position:  35px   0px,  85px  60px; }
  to   { background-position: -10px 210px,  60px 200px; }
}
@keyframes snowWbgB {
  from { background-position:  58px  22px,  22px  42px; }
  to   { background-position:  20px 137px,  -2px 120px; }
}

/* ── NIGHT: dense starfield + nebula + moon disc ─────────────── */

.theme-night .wbg-1 {
  background-image:
    radial-gradient(circle 1.5px at 50% 50%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(circle 1.0px at 50% 50%, rgba(200,220,255,0.78) 0%, transparent 100%),
    radial-gradient(circle 1.2px at 50% 50%, rgba(255,255,255,0.62) 0%, transparent 100%);
  background-size: 225px 225px, 145px 145px, 88px 88px;
  background-position: 18px 28px, 58px 72px, 40px 14px;
  animation: starTwinkleWbg 5s ease-in-out infinite alternate;
}

.theme-night .wbg-2 {
  background:
    radial-gradient(ellipse 720px 420px at 62% 32%, rgba(22,46,110,0.24) 0%, transparent 74%),
    radial-gradient(ellipse 380px 260px at 16% 74%, rgba(10,22,90,0.15)  0%, transparent 66%);
  animation: nebulaPulse 15s ease-in-out infinite alternate;
}

.theme-night .wbg-3 {
  /* Solo el resplandor azulado de fondo; el disco lunar lo dibuja el canvas
     (login-moon-canvas) con la fase real y su propio halo. */
  background:
    radial-gradient(ellipse 620px 480px at 50% 0%, rgba(var(--brand-rgb),0.12) 0%, transparent 72%);
}

@keyframes starTwinkleWbg {
  from { opacity: 0.60; }
  to   { opacity: 1.00; }
}
@keyframes nebulaPulse {
  from { opacity: 0.48; transform: scale(1.00); }
  to   { opacity: 1.00; transform: scale(1.06); }
}

/* ── CHRISTMAS: snowfall + bokeh + festive corner glow ──────── */

.theme-christmas .wbg-1 {
  background-image:
    radial-gradient(circle 2.8px at 20% 50%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(circle 1.8px at 66% 50%, rgba(255,255,255,0.76) 0%, transparent 100%);
  background-size: 160px 160px, 102px 102px;
  animation: snowWbgA 14s linear infinite;
  opacity: 0.90;
}

.theme-christmas .wbg-2 {
  background-image:
    radial-gradient(circle 16px at 50% 50%, rgba(248,113,113,0.74) 0%, transparent 100%),
    radial-gradient(circle 12px at 50% 50%, rgba(74,222,128,0.70)  0%, transparent 100%),
    radial-gradient(circle 18px at 50% 50%, rgba(250,204,21,0.76)  0%, transparent 100%),
    radial-gradient(circle 11px at 50% 50%, rgba(248,250,252,0.84) 0%, transparent 100%);
  background-size: 225px 225px, 182px 182px, 265px 265px, 138px 138px;
  background-position: 44px 84px, 112px 24px, 86px 126px, 20px 42px;
  filter: blur(2px);
  animation: festiveBokeh 14s ease-in-out infinite alternate;
  opacity: 0.82;
}

.theme-christmas .wbg-3 {
  background:
    radial-gradient(ellipse 620px 295px at 16% 90%, rgba(12,68,34,0.28)  0%, transparent 72%),
    radial-gradient(ellipse 520px 260px at 84% 94%, rgba(110,12,12,0.23) 0%, transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 16%);
}

/* ── DEFAULT: subtle orb depth ──────────────────────────────── */
.theme-default .wbg-2 {
  background:
    radial-gradient(ellipse 500px 350px at 72% 28%, rgba(var(--brand-dark-rgb),0.08)  0%, transparent 68%),
    radial-gradient(ellipse 380px 280px at 28% 80%, rgba(var(--brand-dark-rgb),0.06) 0%, transparent 65%);
  animation: nebulaPulse 18s ease-in-out infinite alternate;
}

/* campos */
.form-field {
  margin-bottom: 20px;
}

.form-field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

/* La tarjeta de login es SIEMPRE clara (independiente del tema), así que sus
   labels deben ser oscuros en ambos temas para no quedar blancos sobre blanco. */
.login-card .form-field label { color: var(--text-strong); }

/* Selects en tema OSCURO (base): sin `color` explícito el texto del <select> y
   su popup nativo de <option> caen al negro por defecto del navegador → invisibles
   sobre superficie oscura. Damos color legible y un popup casi opaco. En claro,
   los overrides con !important de `html.light-mode select` ganan a esta base. */
select { color: var(--text); }
select option {
  background: var(--surface-overlay);
  color: var(--text);
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrapper input {
  width: 100%;
  padding: 14px 46px 14px 14px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.9375rem;
  font-family: inherit;
  font-weight: 400;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
}

.input-wrapper input::placeholder {
  color: var(--muted-2);
  font-weight: 400;
}

.input-wrapper input:focus {
  outline: none;
  border-color: var(--brand-dark);
  box-shadow: 0 0 0 3px rgba(var(--brand-dark-rgb),0.1), var(--shadow-sm);
  transform: translateY(-1px);
  background: var(--surface);
}

.input-icon {
  position: absolute;
  right: 14px;
  color: var(--muted-2);
  pointer-events: none;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
}

.input-wrapper:focus-within .input-icon {
  color: var(--brand);
}

.otp-input-group {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 44px));
  gap: 10px;
  justify-content: start;
}

.pin-box {
  width: 44px;
  height: 52px;
  padding: 0;
  text-align: center;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--surface-2);
  color: var(--text-strong);
  font-size: 1.2rem;
  font-weight: 700;
  font-family: inherit;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.pin-box::placeholder {
  color: var(--muted-2);
  opacity: 0.7;
}

.pin-box.filled {
  border-color: var(--amber, #d97706);
  background: color-mix(in srgb, var(--surface) 86%, #f59e0b 14%);
}

.pin-box.pop {
  transform: scale(1.14);
}

.pin-box:focus {
  border-color: var(--amber, #d97706);
  outline: none;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.16), var(--shadow-sm);
  background: var(--surface);
}

.password-toggle {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: var(--muted-2);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.password-toggle:hover {
  color: var(--text);
  background: rgba(var(--brand-dark-rgb),0.08);
}

/* botón submit */
.btn-login {
  width: 100%;
  padding: 15px 24px;
  border-radius: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.015em;
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(var(--brand-dark-rgb),0.45), 0 1px 3px rgba(var(--brand-dark-rgb),0.3);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 12px;
}

/* ── Ticket module layout ───────────────────────────────── */

/* Márgenes del módulo: el contenido no debe pegarse a los bordes de la pantalla. */
.tickets-content { padding: 24px 32px; }

/* ── Toolbar reutilizable de tickets (bandeja + tipos) ─────────────────────── */
.tickets-toolbar {
  position: relative;               /* ancla del popover de filtros */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.tickets-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Popover de filtros (se renderiza siempre, se muestra/oculta por CSS).
   position:absolute lo saca del flujo flex → abrir filtros NO mueve los botones. */
.tickets-filters-wrap { display: none; position: absolute; top: 0; left: 0; }
.tickets-filters-wrap.is-open { display: block; }
/* El wrap (absolute, sin ancho) hacía que el `calc(100% - 64px)` del popover
   colapsara → popover aplastado. Se fija el ancho por viewport, no por el wrap. */
.tickets-toolbar .tickets-filters-popover,
.monitor-toolbar .tickets-filters-popover { top: 52px; left: 0; width: min(420px, calc(100vw - 48px)); }
.monitor-toolbar .tickets-filters-popover { top: 44px; }

/* Botones de la toolbar de tickets al mismo tamaño que Añadir/Exportar (bandeja,
   tipos e interno): Limpiar (btn-sm) y Asignar (btn-secondary) quedaban dispares. */
.tickets-toolbar-right .btn-secondary,
.monitor-toolbar .btn-secondary {
  padding: 8px 16px;
  border-radius: 9px;
  font-size: 0.8125rem;
}

/* Recarga acotada a la tabla: se atenúa mientras llega la nueva página, sin
   desmontar toda la vista (tabs/toolbar quedan). */
.tk-reloading { opacity: 0.55; pointer-events: none; transition: opacity 0.12s ease; }
/* Celdas centradas verticalmente: los badges (SLA/estado) hacían que el texto
   plano (Asunto/Cliente) se viera "subido". */
.tickets-table td { vertical-align: middle; }
/* Fila clickeable → abre el detalle (se elimino la accion "Ver"). */
.tk-row-click { cursor: pointer; }
.tk-row-click:hover > td { background: rgba(255, 255, 255, 0.03); }

/* Scrollbar de los modales/forms: overlay auto-oculta, estilo sidebar (no una
   barra "metida" invasiva). Se revela solo al pasar el puntero por encima. */
.modal-card, .ticket-manage-form, .ticket-panel-scroll {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.modal-card:hover, .ticket-manage-form:hover, .ticket-panel-scroll:hover {
  scrollbar-color: var(--control-border) transparent;
}
.modal-card::-webkit-scrollbar,
.ticket-manage-form::-webkit-scrollbar,
.ticket-panel-scroll::-webkit-scrollbar { width: 10px; }
.modal-card::-webkit-scrollbar-thumb,
.ticket-manage-form::-webkit-scrollbar-thumb,
.ticket-panel-scroll::-webkit-scrollbar-thumb {
  background: transparent;
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}
.modal-card:hover::-webkit-scrollbar-thumb,
.ticket-manage-form:hover::-webkit-scrollbar-thumb,
.ticket-panel-scroll:hover::-webkit-scrollbar-thumb {
  background: var(--control-border);
  background-clip: padding-box;
}
/* Selects dentro del popover de filtros (compartido contactos/tickets) */
.contacts-filters-popover select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--control-border);
  border-radius: 9px;
  font: inherit;
  font-size: 0.85rem;
  background: var(--control-bg);
  color: var(--text);
  cursor: pointer;
}
.contacts-filters-popover select:focus { outline: none; border-color: var(--brand); }
.contacts-filters-popover .ticket-daterange { flex-wrap: wrap; }
/* Inputs de texto dentro del popover (Monitor filtra por User ID ahí). */
.contacts-filters-popover input[type="text"] {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--control-border);
  border-radius: 9px;
  font: inherit;
  font-size: 0.85rem;
  background: var(--control-bg);
  color: var(--text);
}
.contacts-filters-popover input[type="text"]:focus { outline: none; border-color: var(--brand); }

/* Dropdown Exportar (CSV / Excel) */
.tickets-export { position: relative; }
.btn-export-main {
  padding: 8px 14px;
  border: 1px solid var(--control-border);
  border-radius: 9px;
  background: var(--control-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.btn-export-main:hover:not(:disabled) { background: var(--control-bg-hover); border-color: var(--brand); }
.btn-export-main:disabled { opacity: 0.55; cursor: not-allowed; }
.tickets-export-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 42;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  padding: 5px;
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
}
.tickets-export-menu button {
  text-align: left;
  padding: 8px 12px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.tickets-export-menu button:hover { background: var(--control-bg-hover); }

/* Cards de resumen clickeables: elevación leve + cursor pointer */
.ticket-summary-card--clickable {
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.ticket-summary-card--clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ticket-summary-card--clickable.is-active { box-shadow: 0 0 0 2px var(--brand); }

/* Modal de confirmación de export */
.export-confirm-body { padding: 18px 20px; color: var(--text); font-size: 0.9rem; }

/* ── Form de nuevo ticket: canal Otro, picker de contacto, uploader ───────── */
.channel-other-input { margin-top: 8px; }

/* Picker de contacto (paginado + búsqueda) */
.ticket-contact-picker { position: relative; display: flex; gap: 8px; align-items: stretch; }
.ticket-contact-userid { flex: 1 1 auto; }
.ticket-contact-search-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.ticket-picker-backdrop {
  position: fixed; inset: 0; z-index: 40; background: transparent;
}
.ticket-picker-pop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 41;
  background: var(--surface-overlay); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; overflow: hidden;
}
.ticket-picker-search {
  margin: 8px; width: calc(100% - 16px);
}
.ticket-picker-list {
  max-height: 240px; overflow-y: auto; display: flex; flex-direction: column;
  padding: 4px; gap: 2px;
  /* barra de scroll estilo sidebar (auto-oculta) */
  scrollbar-width: thin; scrollbar-color: transparent transparent;
}
.ticket-picker-list:hover { scrollbar-color: var(--control-border) transparent; }
.ticket-picker-list::-webkit-scrollbar { width: 8px; }
.ticket-picker-list::-webkit-scrollbar-thumb {
  background: transparent; border: 2px solid transparent; background-clip: padding-box;
  border-radius: 8px;
}
.ticket-picker-list:hover::-webkit-scrollbar-thumb { background: var(--control-border); background-clip: padding-box; }
.ticket-picker-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 8px 10px; border: none; border-radius: 7px; background: transparent;
  color: var(--text); text-align: left; cursor: pointer; width: 100%;
  transition: background 0.12s ease;
}
.ticket-picker-item:hover { background: var(--control-bg-hover); }
.ticket-picker-item-name { font-weight: 600; font-size: 0.88rem; }
.ticket-picker-item-sub { font-size: 0.76rem; color: var(--muted); }
.ticket-picker-empty, .ticket-picker-loading {
  padding: 14px; text-align: center; color: var(--muted); font-size: 0.82rem;
}

/* Uploader de evidencias + chips */
.evidence-uploader { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.evidence-upload-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--control-border);
  background: var(--control-bg); color: var(--text); font-size: 0.85rem;
  white-space: nowrap; transition: background 0.12s ease;
}
.evidence-upload-btn:hover { background: var(--control-bg-hover); }
.evidence-upload-btn.is-busy { opacity: 0.6; pointer-events: none; }
.evidence-url-row { display: flex; gap: 8px; flex: 1 1 240px; }
.evidence-url-input { flex: 1 1 auto; }
.evidence-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.evidence-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 4px 6px 4px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 0.8rem; color: var(--text);
}
.evidence-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evidence-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: none; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem;
  line-height: 1; transition: background 0.12s ease, color 0.12s ease;
}
.evidence-chip-x:hover { background: var(--badge-danger-bg); color: var(--badge-danger-fg); }

/* Limpiar filtros en la toolbar de contactos */
.contacts-toolbar-right { display: flex; align-items: center; gap: 10px; }

.ticket-summary-grid,
.ticket-grid {
  display: grid;
  gap: 14px;
}

.ticket-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-bottom: 20px;
}

.ticket-grid {
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  align-items: start;
}

.ticket-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

/* ── Ticket tabs — pill-group ───────────────────────────── */

/* ── SEGMENTED CONTROL ESTÁNDAR ───────────────────────────────────────────────
   UN solo dialecto de barra de tabs para todo el panel. El de Tickets es el
   canónico; el resto de módulos se cuelga de estas mismas reglas en vez de
   inventar tamaños/colores propios.

   Para sumar una barra nueva: añade su clase de contenedor a las tres listas de
   abajo, a la lista `SEL` del script del pill en index.html, y a los grupos de
   `html.light-mode` (buscar "SEGMENTED"). No dupliques declaraciones.

   El resaltado del tab activo lo pinta el pill deslizante (.slide-tabs::after),
   que anula el `background` del botón activo — el `background` de aquí es solo
   el fallback de si el script no ha corrido todavía. */
.ticket-tabs,
.camp-tabs,
.metrics-tabs,
.metrics-agent-tabs {
  display: flex;
  gap: 3px;
  margin-bottom: 20px;
  background: var(--surface-2);
  border-radius: 12px;
  padding: 5px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}

.ticket-tabs button,
.camp-tab,
.metrics-tab,
.metrics-subtab {
  appearance: none;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  padding: 8px 18px;
  white-space: nowrap;
  transition: all 0.15s;
}

.ticket-tabs button:not(.active):hover,
.camp-tab:not(.camp-tab--active):hover,
.metrics-tab:not(.active):hover,
.metrics-subtab:not(.active):hover {
  background: var(--control-bg-hover);
  color: var(--text);
}

.ticket-tabs button.active,
.camp-tab--active,
.metrics-tab.active,
.metrics-subtab.active {
  background: var(--brand-dark) !important;
  color: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* ── Toolbar ────────────────────────────────────────────── */

.ticket-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 180px));
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

/* Toolbar de la bandeja: nº variable de selects (el de "cerrado" y los desenlaces
   solo existen para supervisor/owner) → flex con wrap, no grid de columnas fijas.
   Los botones van pegados a la derecha; si no caben, envuelven a otra fila. */
.ticket-toolbar-wide {
  display: flex;
  flex-wrap: wrap;
}

.ticket-toolbar-wide select {
  width: auto;
  min-width: 150px;
  flex: 0 1 190px;
}

.ticket-toolbar-wide .ticket-toolbar-actions {
  margin-left: auto;
  flex: 0 0 auto;
}

/* Cada filtro con su título arriba, para que se entienda qué hace. */
.ticket-filter-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 0 1 190px;
}
.ticket-filter-field > select {
  width: 100%;
  min-width: 0;
  flex: none;
}
.ticket-filter-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* Segunda fila de filtros de la bandeja: búsqueda por texto + rango de fechas. */
.ticket-subfilters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: -4px 0 16px;
}
.ticket-search {
  flex: 1 1 240px;
  min-width: 200px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--control-bg);
}
.ticket-search:focus { outline: none; border-color: var(--brand); }
.ticket-daterange {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.85rem;
}
/* datetime-local además de date: Monitor filtra ejecuciones con hora. */
.ticket-daterange input[type="date"],
.ticket-daterange input[type="datetime-local"] {
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--control-bg);
  min-width: 0;
}
.ticket-daterange input[type="date"]:focus,
.ticket-daterange input[type="datetime-local"]:focus { outline: none; border-color: var(--brand); }
.ticket-clear-dates {
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--muted);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  line-height: 1;
}
.ticket-clear-dates:hover { background: var(--control-bg-hover); color: var(--text); }
.ticket-created { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }

/* Bandeja: layout fijo para respetar el colgroup y que nada se desborde. */
.tickets-table { table-layout: fixed; width: 100%; }
.tickets-table th,
.tickets-table td {
  padding: 11px 10px;
  vertical-align: middle;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;   /* parte solo si no hay espacio/guion; sin cortes a media palabra */
  overflow: hidden;
  text-overflow: ellipsis;
}
.tickets-table td > .ticket-cell-text,
.tickets-table td > .ticket-cell-clamp {
  display: block;
  max-width: 100%;
  overflow: hidden;
}
.tickets-table td > .ticket-cell-text {
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* REF: código monoespaciado; quiebra limpio en el guion si no cabe */
.tickets-table td.tk-ref {
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: -0.02em;
  color: var(--muted-2);
}
/* ASUNTO: máximo 2 líneas con elipsis. El clamp va en un SPAN interno para que el
   <td> siga siendo table-cell y `vertical-align: middle` centre el texto (con el
   clamp en el td, `display:-webkit-box` rompía el centrado → texto "levantado"). */
.tickets-table td.tk-subject { white-space: normal; }
.tickets-table td.tk-subject .tk-subject-txt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* CREADO: fecha+hora en una sola línea */
.tickets-table td.ticket-created { white-space: nowrap; font-size: 0.8rem; color: var(--muted-2); }
/* Paginación de la bandeja: layout en el bloque canónico (buscar "PAGINACIÓN
   ESTÁNDAR"). Aquí solo la agrupación de los controles. */
.ticket-pagination-controls { display: flex; align-items: center; gap: 12px; }

.ticket-toolbar-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.ticket-toolbar select {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font: inherit;
  font-size: 0.85rem;
  background: var(--control-bg);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s;
}

.ticket-toolbar select:focus {
  outline: none;
  border-color: var(--brand-dark);
}

/* Toolbar de filtros de las pestañas Tipos/Planes: layout flex (no el grid de la
   bandeja), para que la búsqueda se estire y los selects/botón queden alineados. */
.ticket-toolbar--filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.ticket-toolbar--filters > select {
  width: auto;
  min-width: 150px;
  flex: 0 1 190px;
}
.ticket-toolbar--filters > input[type="text"] {
  flex: 1 1 200px;
  min-width: 160px;
  min-height: 38px;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font: inherit;
  font-size: 0.85rem;
  background: var(--control-bg);
  color: var(--text);
}
.ticket-toolbar--filters > input[type="text"]:focus { outline: none; border-color: var(--brand-dark); }
.ticket-toolbar--filters > button { flex: 0 0 auto; }

/* Reasignar departamento (reclasificar) en el detalle del ticket */
.ticket-reassign-hint { color: var(--muted); font-size: 0.84rem; margin-bottom: 8px; }
.ticket-reassign-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ticket-reassign-select {
  flex: 1 1 220px;
  min-width: 180px;
  min-height: 38px;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font: inherit;
  font-size: 0.88rem;
  background: var(--control-bg);
  color: var(--text);
  cursor: pointer;
}
.ticket-reassign-select:focus { outline: none; border-color: var(--brand-dark); }
.ticket-reassign-btn { flex: 0 0 auto; }
.ticket-reassign-error { color: var(--badge-danger-fg); font-size: 0.82rem; margin-top: 8px; }

.ticket-toolbar button,
.ticket-toolbar-actions button {
  padding: 9px 16px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--control-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.ticket-toolbar button:hover,
.ticket-toolbar-actions button:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
}

.ticket-toolbar-actions .btn-create {
  background: var(--brand-dark);
  color: #fff;
  border-color: var(--brand-dark);
}

.ticket-toolbar-actions .btn-create:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

.ticket-toolbar-actions .btn-export {
  border-color: rgba(14,116,144,0.22);
  background: linear-gradient(135deg, #ecfeff 0%, #f0fdfa 100%);
  color: #0f766e;
  box-shadow: 0 1px 3px rgba(15,118,110,0.10);
}

.ticket-toolbar-actions .btn-export:hover {
  border-color: #0f766e;
  color: #115e59;
  transform: translateY(-1px);
}

.ticket-toolbar-actions .btn-export--excel {
  border-color: rgba(22,163,74,0.24);
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  color: #15803d;
}

.ticket-toolbar-actions .btn-export--excel:hover {
  border-color: #16a34a;
  color: #166534;
}

.ticket-toolbar-actions .btn-export:disabled,
.ticket-toolbar-actions .btn-export--excel:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none;
}

/* ── Generic export buttons (CSV / Excel) ───────────────── */

.btn-export {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid rgba(14,116,144,0.22);
  background: linear-gradient(135deg, #ecfeff 0%, #f0fdfa 100%);
  color: #0f766e;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
  box-shadow: 0 1px 3px rgba(15,118,110,0.10);
  white-space: nowrap;
}

.btn-export:hover {
  border-color: #0f766e;
  color: #115e59;
  transform: translateY(-1px);
}

.btn-export--excel {
  border-color: rgba(22,163,74,0.24);
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  color: #15803d;
}

.btn-export--excel:hover {
  border-color: #16a34a;
  color: #166534;
}

.btn-export:disabled,
.btn-export--excel:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none;
}

/* ── Summary cards ──────────────────────────────────────── */

.ticket-summary-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ticket-summary-card h3 {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: #f1f5f9;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 10px 16px;
  margin: 0;
}

.ticket-summary-card p {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  padding: 12px 16px 4px;
  margin: 0;
}

.ticket-summary-card small {
  font-size: 0.74rem;
  color: var(--muted);
  padding: 0 16px 14px;
  line-height: 1.5;
}

/* Segunda línea de la tarjeta: desglose del desenlace de los tickets cerrados */
.ticket-summary-card small.ticket-summary-resolutions {
  margin-top: -8px;
  font-size: 0.7rem;
  color: var(--muted-2);
}

/* ── Ticket panels ──────────────────────────────────────── */

.ticket-panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 20px 16px;
  box-shadow: var(--shadow-sm);
}

.ticket-panel h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ticket-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.ticket-panel-header h3 {
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
}
/* Botones de acción del header (p. ej. "Órdenes SAE" + "+ Nuevo tipo"). */
.ticket-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Modal ancho para tablas (catálogo de órdenes SAE, 9 columnas con selects +
   inputs + toggles). Más ancho para que la data respire; en pantallas chicas usa
   casi todo el viewport y la tabla igual hace scroll-x en .ticket-table-wrap. */
.modal-card--wide {
  max-width: min(1280px, 96vw);
  width: 96%;
}

/* Contenedor de scroll para tablas anchas dentro de modales/paneles (p. ej. el
   catálogo de órdenes SAE: 9 columnas). Sin esto la tabla desborda la modal y,
   como .modal-card tiene overflow-x:hidden, las últimas columnas (los toggles de
   acción: "Sube a SAE", "Requiere equipo Fibex", "Activo") quedaban recortadas e
   inaccesibles. Aquí la tabla hace scroll horizontal propio en vez de recortarse. */
.ticket-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.ticket-table-wrap > table { min-width: max-content; }

/* ── Ticket form ────────────────────────────────────────── */

.ticket-form {
  display: grid;
  gap: 10px;
}

.ticket-form input,
.ticket-form select,
.ticket-form textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font: inherit;
  font-size: 0.87rem;
  background: var(--surface-2);
  color: var(--text);
  transition: border-color 0.15s;
}

.ticket-form input:focus,
.ticket-form select:focus,
.ticket-form textarea:focus {
  outline: none;
  border-color: var(--brand-dark);
  background: var(--surface);
}

.ticket-form textarea {
  min-height: 80px;
  resize: vertical;
}

.ticket-form button[type="submit"] {
  padding: 10px 18px;
  background: var(--brand-dark);
  color: #fff;
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-size: 0.87rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.ticket-form button[type="submit"]:hover {
  background: var(--brand-dark);
}

.type-form-actions {
  display: flex;
  gap: 8px;
}

.type-form-actions .btn-cancel {
  padding: 10px 14px;
  background: var(--surface-2);
  color: var(--muted);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font: inherit;
  font-size: 0.87rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.type-form-actions .btn-cancel:hover {
  background: var(--control-bg-hover);
}

/* Acciones de fila: ver .pg-actions / .pg-btn (patrón único del panel). */

/* ── Manage modal tabs ──────────────────────────────────── */

.ticket-manage-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 0 24px 16px;
}

/* Sub-tags del monitor Interno: cambian entre tablas (cada una carga su sección) */
.ticket-monitor-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.ticket-monitor-subtabs button {
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.ticket-monitor-subtabs button:hover { color: var(--text); background: var(--control-bg-hover); }
.ticket-monitor-subtabs button.active { color: var(--brand); border-bottom-color: var(--brand); }

/* ── Monitor interno: filtros embudo (debajo de las sub-tags, sin caja visible) ── */
.monitor-toolbar {
  position: relative;               /* ancla del popover de filtros */
  display: flex;
  align-items: center;
  justify-content: space-between;   /* embudo a la izq · Limpiar a la der */
  gap: 12px;
  margin-bottom: 14px;
}
.monitor-toolbar .tickets-filters-popover { top: 44px; left: 0; }

/* ── Monitor interno: grilla de cards con minitabla ── */
.interno-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 360px));
  justify-content: start;
  gap: 16px;
  align-items: start;
}
.interno-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px 12px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* OJO: NADA de `transform` en la card. Un transform crea containing block para los
   descendientes `position: fixed` → el backdrop del dropdown de Exportar (fixed, vive
   dentro de la card) dejaba de cubrir el viewport al hacer hover, el cursor salía de la
   card, se quitaba el hover, el backdrop volvía a cubrir todo… bucle infinito de cursor. */
.interno-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
}
/* El backdrop es hijo de la card (que es clicable): no debe heredar el cursor pointer
   ni pintarlo por toda la pantalla mientras el dropdown está abierto. */
.interno-card .lc-filters-backdrop { cursor: default; }
.interno-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.interno-card-head h3 { margin: 0; font-size: 0.92rem; color: var(--text-strong); }

/* Minitabla dentro de la card: compacta, sin scroll horizontal. */
.interno-mini { table-layout: fixed; width: 100%; font-size: 0.8rem; }
.interno-mini th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  padding: 4px 8px;
}
.interno-mini td {
  padding: 5px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.interno-mini-empty { text-align: center; color: var(--muted); padding: 12px 8px; }
.interno-card-foot {
  margin-top: 10px;
  text-align: right;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand);
}

/* Cabecera de la tabla-detalle (al abrir una card): volver · título · Exportar. */
.interno-full-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.interno-full-head h3 { margin: 0; font-size: 0.98rem; color: var(--text-strong); flex: 1; }
.interno-back {
  appearance: none;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.interno-back:hover { background: var(--control-bg-hover); border-color: var(--brand); }

.ticket-manage-tabs button {
  appearance: none;
  border: 0;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  padding: 7px 16px;
  white-space: nowrap;
  transition: all 0.15s;
}

.ticket-manage-tabs button.active {
  background: var(--brand-dark) !important;
  color: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.ticket-manage-tabs button:not(.active):hover {
  background: rgba(15,23,42,0.10);
  color: var(--text);
}

.ticket-manage-form {
  padding-bottom: 0;
}

/* Row highlight when editing */
tr.row-editing {
  background: rgba(var(--brand-rgb),0.04);
  outline: 2px solid rgba(var(--brand-rgb),0.25);
  outline-offset: -2px;
}

/* ── SLA badges ─────────────────────────────────────────── */

.sla-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.77rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}

.sla-green  { background: var(--badge-success-bg); color: var(--badge-success-fg); border-color: var(--badge-success-bg); }
.sla-yellow { background: var(--badge-warn-bg);  color: var(--badge-warn-fg); border-color: var(--badge-warn-bg); }
.sla-red    { background: var(--badge-danger-bg);   color: var(--badge-danger-fg); border-color: var(--badge-danger-bg); }

/* ── Badges de Estado y Prioridad (bandeja de tickets) ── */
.ticket-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.tk-status-abierto    { background: var(--badge-info-bg);  color: var(--badge-info-fg); border-color: var(--badge-info-bg); }
.tk-status-tomado     { background: var(--badge-purple-bg); color: var(--badge-purple-fg); border-color: var(--badge-purple-bg); }
.tk-status-en_proceso { background: var(--badge-warn-bg);  color: var(--badge-warn-fg); border-color: var(--badge-warn-bg); }
.tk-status-escalado   { background: var(--badge-danger-bg);   color: var(--badge-danger-fg); border-color: var(--badge-danger-bg); }
.tk-status-resuelto   { background: var(--badge-success-bg);  color: var(--badge-success-fg); border-color: var(--badge-success-bg); }
.tk-status-cerrado    { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); border-color: var(--badge-neutral-bg); }

.tk-prio-baja    { background: var(--badge-success-bg);  color: var(--badge-success-fg); border-color: var(--badge-success-bg); }
.tk-prio-media   { background: var(--badge-info-bg);  color: var(--badge-info-fg); border-color: var(--badge-info-bg); }
.tk-prio-alta    { background: var(--badge-warn-bg);  color: var(--badge-warn-fg); border-color: var(--badge-warn-bg); }
.tk-prio-critica { background: var(--badge-danger-bg);   color: var(--badge-danger-fg); border-color: var(--badge-danger-bg); }

/* ── Resolution status badges ───────────────────────────── */

.res-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.res-resuelto    { background: var(--badge-success-bg);  color: var(--badge-success-fg); border-color: var(--badge-success-bg); }
.res-no_resuelto { background: var(--badge-danger-bg);   color: var(--badge-danger-fg); border-color: var(--badge-danger-bg); }
.res-cancelado   { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); border-color: var(--badge-neutral-bg); }
.res-pausado     { background: var(--badge-warn-bg);  color: var(--badge-warn-fg); border-color: var(--badge-warn-bg); }
.res-sin_estado  { background: var(--badge-neutral-bg);  color: var(--badge-neutral-fg); border-color: var(--badge-neutral-bg); }

/* Tinted header cells for resolution outcome columns */
.res-col-resuelto    { color: var(--badge-success-fg); }
.res-col-no_resuelto { color: var(--badge-danger-fg); }
.res-col-cancelado   { color: var(--badge-neutral-fg); }
.res-col-pausado     { color: var(--badge-warn-fg); }

/* Truncated notes cell in trazabilidad */
.res-notes-cell {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ── Monitor tab layout ─────────────────────────────────── */

.ticket-monitor-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Allow dense tables (planes, trazabilidad) to scroll horizontally
   instead of squashing columns below readable width              */
.ticket-panel-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ticket-panel-scroll .contacts-table {
  min-width: 900px;
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 1024px) {
  .ticket-grid,
  .ticket-toolbar {
    grid-template-columns: 1fr;
  }

  .ticket-tabs {
    flex-wrap: wrap;
  }
}

.btn-login:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--brand-dark-rgb),0.55), 0 2px 6px rgba(var(--brand-dark-rgb),0.3);
}

.btn-login:not(:disabled):active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(var(--brand-dark-rgb),0.4);
}

.btn-login:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* enlaces debajo del botón */
.login-footer-links {
  text-align: center;
  margin-top: 16px;
}

.link-forgot {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.link-forgot:hover {
  color: var(--brand-dark);
  text-decoration: underline;
}

/* banner de éxito */
.success-banner {
  background: linear-gradient(135deg, rgba(16,185,129,0.08) 0%, rgba(5,150,105,0.05) 100%);
  border: 1px solid rgba(16,185,129,0.25);
  color: #059669;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: fadeInUp 0.25s ease;
}

/* banner de error */
.error-banner {
  background: linear-gradient(135deg, rgba(239,68,68,0.08) 0%, rgba(220,38,38,0.05) 100%);
  border: 1px solid rgba(239,68,68,0.25);
  color: #dc2626;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: fadeInUp 0.25s ease;
}

/* ============================================================
   HOME PAGE
   ============================================================ */
.home-container {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

/* ---- Header ---- */
.app-header {
  background: rgba(10, 15, 35, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  padding: 0 28px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Subtle gradient accent line at bottom */
.app-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(99, 102, 241, 0.35) 25%,
    rgba(var(--brand-rgb), 0.5) 50%,
    rgba(99, 102, 241, 0.35) 75%,
    transparent 100%
  );
  pointer-events: none;
}

.app-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-logo-badge {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand) 0%, #6366f1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.45);
}

.app-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: -0.02em;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---- Body layout (sidebar + main) ---- */
.home-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ---- Sidebar ---- */
.home-sidebar {
  width: 232px;
  flex-shrink: 0;
  background: #0f172a;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
}

.home-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  margin-bottom: 2px;
}

.home-sidebar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--brand) 0%, #6366f1 100%);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0;
}

.home-sidebar-user-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.home-sidebar-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-sidebar-role {
  font-size: 0.6875rem;
  color: var(--muted-2);
  font-weight: 500;
  white-space: nowrap;
}

.home-sidebar-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 10px 4px;
}

.home-sidebar-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 0 10px;
  margin-bottom: 4px;
}

.home-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--muted-2);
  font-size: 0.8375rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: left;
  width: 100%;
}

.home-sidebar-item:hover:not(.home-sidebar-item--maint) {
  background: rgba(255, 255, 255, 0.06);
  color: var(--brand-soft-fg);
}

.home-sidebar-item--maint {
  opacity: 0.45;
  cursor: not-allowed;
}

.home-sidebar-item-icon {
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1;
  width: 20px;
  text-align: center;
}

.home-sidebar-item-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-sidebar-item-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f59e0b;
  flex-shrink: 0;
}

.home-sidebar-empty {
  font-size: 0.8rem;
  color: var(--muted-2);
  padding: 8px 10px;
}

/* ---- Main ---- */
.app-main {
  flex: 1;
  padding: 36px 40px;
  min-width: 0;
  overflow-y: auto;
}

.module-main {
  --module-main-max-width: 1440px;
  --module-main-pad-x: clamp(20px, 2.2vw, 36px);
  --module-main-pad-y: clamp(24px, 2vw, 32px);
  width: min(100%, var(--module-main-max-width));
  margin: 0 auto;
  padding: var(--module-main-pad-y) var(--module-main-pad-x) !important;
}

.module-main > * {
  min-width: 0;
}

.module-main--compact {
  --module-main-max-width: 1280px;
}

.module-main--wide {
  --module-main-max-width: 1680px;
}

.module-main--xl {
  --module-main-max-width: 1920px;
}

@media (max-width: 860px) {
  .module-main {
    --module-main-pad-x: 16px;
    --module-main-pad-y: 20px;
  }
}

/* ---- Greeting inline (no box) ---- */
.home-welcome {
  margin-bottom: 32px;
  padding-top: 4px;
}

.home-welcome-title {
  font-size: 1.875rem;
  font-weight: 800;
  color: #f1f5f9;
  letter-spacing: -0.04em;
  margin-bottom: 6px;
  line-height: 1.15;
}

.home-welcome-sub {
  font-size: 0.875rem;
  color: var(--muted);
  font-weight: 400;
}

/* ---- Modules grid ---- */
.modules-heading {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
}

.empty-state {
  color: var(--muted);
  font-size: 0.9375rem;
  padding: 40px;
  text-align: center;
  background: var(--surface);
  border-radius: 16px;
  border: 2px dashed var(--border);
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

/* ---- Module card ---- */
.mod-card {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 28px 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.22s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);
}

.mod-card--link {
  cursor: pointer;
}

.mod-card--link:hover {
  transform: translateY(-4px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 12px 32px rgba(var(--brand-rgb), 0.12),
    0 4px 12px rgba(0, 0, 0, 0.06);
  border-color: rgba(var(--brand-rgb), 0.3);
}

.mod-card--maint {
  opacity: 0.55;
  cursor: default;
}

.mod-icon {
  font-size: 2rem;
  line-height: 1;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-radius: 15px;
  border: 1px solid rgba(var(--brand-rgb), 0.35);
  flex-shrink: 0;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  /* Badge SÓLIDO de marca (sigue el tema en claro y oscuro): un icono de iconset
     (monocromo, currentColor) se pinta blanco legible sobre el badge; los emoji
     multicolor del fallback lo ignoran. */
  color: #fff;
}
/* Un iconset provee un SVG monocromo → tamaño acorde al badge (el emoji se
   dimensiona por font-size). */
.mod-icon svg {
  width: 34px;
  height: 34px;
  display: block;
}

.mod-card--link:hover .mod-icon {
  transform: scale(1.06);
}

.mod-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: #e2e8f0;
  text-align: center;
  line-height: 1.35;
}

.maint-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #b45309;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 6px;
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Description slides up from bottom on hover */
.mod-desc {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 18px 18px;
  background: linear-gradient(160deg, var(--brand-dark) 0%, var(--brand-dark) 100%);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.775rem;
  font-weight: 400;
  line-height: 1.55;
  text-align: center;
  /* +2px extra para que el borde superior del panel no asome como una línea
     azul en el fondo de la card cuando está oculto (subpixel rounding). */
  transform: translateY(calc(100% + 2px));
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0 0 20px 20px;
}

.mod-card--link:hover .mod-desc {
  transform: translateY(0);
}

/* ============================================================
   CONTACTS PAGE (shared page shell)
   ============================================================ */
.page-container {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.page-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  padding: 0 32px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  position: sticky;
  top: 0;
  z-index: 100;
}

.btn-back {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  background: rgba(255,255,255,0.08);
  color: #cbd5e1;
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-back:hover {
  background: rgba(255,255,255,0.15);
  color: #f8fafc;
}

.page-header h1 {
  font-size: 1rem;
  font-weight: 700;
  color: #f8fafc;
}

.page-content {
  flex: 1;
  padding: 28px 32px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/* ---- Search bar ---- */
.search-form {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.search-input {
  flex: 1;
  padding: 11px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: var(--shadow-sm);
}

.search-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb),0.12);
}

.btn-search {
  padding: 11px 22px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  background: var(--brand-dark);
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-search:hover:not(:disabled) { background: var(--brand-dark); }
.btn-search:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-clear {
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  background: var(--surface);
  color: var(--muted);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-clear:hover { background: var(--surface-2); color: var(--danger); border-color: var(--danger); }

/* ---- Result count ---- */
.result-count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---- Table wrapper ---- */
.table-wrapper {
  background: #161b22;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.contacts-table {
  width: 100%;
  border-collapse: collapse;
}

.contacts-table th {
  background: rgba(255,255,255,0.04);
  padding: 12px 18px;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.contacts-table td {
  padding: 14px 18px;
  font-size: 0.875rem;
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.contacts-table tbody tr:last-child td { border-bottom: none; }

.contact-row {
  cursor: pointer;
  transition: background 0.15s;
}

.contact-row:hover td { background: rgba(255,255,255,0.04); }

.row-blocked td { color: var(--muted); }
.row-blocked:hover td { background: var(--badge-danger-bg); }

.td-name {
  font-weight: 600;
  color: var(--text);
}

.td-center { text-align: center; }
.td-muted { color: var(--muted); font-size: 0.84rem; }

/* ---- Badges ---- */
.channel-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(var(--brand-rgb),0.1);
  color: var(--brand-dark);
}

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-active {
  background: rgba(16,185,129,0.1);
  color: #059669;
}

.status-blocked {
  background: rgba(239,68,68,0.1);
  color: var(--danger);
}

/* ---- States ---- */
.loading-state {
  text-align: center;
  padding: 48px;
  color: var(--muted);
  font-size: 0.9375rem;
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--border);
}

.error-msg {
  color: var(--danger);
  font-size: 0.875rem;
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

/* ---- Pagination ---- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

/* .btn-page / .page-info se retiraron con el pager viejo de Contactos: ahora
   usa el bloque canónico (buscar "PAGINACIÓN ESTÁNDAR"). */

/* ---- Contact detail drawer ---- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.45);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.drawer-backdrop.open {
  opacity: 1;
  pointer-events: all;
}

.contact-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 380px;
  background: var(--surface-overlay);
  box-shadow: -8px 0 40px rgba(0,0,0,0.14);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
}

.contact-drawer.open { transform: translateX(0); }

.drawer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.drawer-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 24px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.drawer-avatar {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.drawer-avatar-pic {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  object-fit: cover;
  flex-shrink: 0;
}

.drawer-identity {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drawer-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-close {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.9375rem;
  background: rgba(15,23,42,0.06);
  color: var(--muted);
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  align-self: flex-start;
}

.drawer-close:hover { background: rgba(239,68,68,0.1); color: var(--danger); }

.drawer-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.drawer-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-soft);
}

.drawer-field:last-child { border-bottom: none; }

.field-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.field-value {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
}

.field-id {
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  color: var(--muted);
  word-break: break-all;
}

/* ============================================================
   USERS PAGE
   ============================================================ */

/* Cabecera de cada pestaña de Usuarios: solo el título con su tooltip. La
   toolbar de verdad (.tickets-toolbar) va justo debajo, y este margen es el
   aire que las separa — no lo pises con un style inline. */
.users-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

/* Un solo envoltorio con el padding del modal de Departamentos. Sin él, cada
   bloque es hijo directo de .modal-card, hereda `padding: 0 24px` y pierde su
   propio padding vertical → todo pegado a los bordes. */
.dept-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 4px;
}

/* Fila "¿Eliminar?" dentro de una celda de acciones. */
.pg-actions-ask { font-size: 0.8rem; color: var(--muted); }
/* Marcador de "sin acciones disponibles" en una fila. */
.pg-actions-empty { color: var(--muted-2); }

/* .users-filterbar / .users-filter-* se retiraron: el módulo usa la toolbar
   estándar y el alta de departamentos vive en su propio modal con .form-field. */

.users-table-wrap {
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
}

.users-table th {
  background: rgba(255,255,255,0.04);
  padding: 11px 14px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.users-table td {
  padding: 12px 14px;
  font-size: 0.875rem;
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: middle;
}

.users-table tr:last-child td { border-bottom: none; }
.users-table tr:hover td { background: rgba(255,255,255,0.04); }
.users-table tr.row-blocked td { opacity: 0.6; }

.col-email { color: var(--muted); font-size: 0.8125rem; }
.col-date  { color: var(--muted); font-size: 0.8125rem; white-space: nowrap; }
.col-actions { white-space: nowrap; display: flex; gap: 5px; align-items: center; }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}

.badge-active  { background: rgba(16,185,129,0.12); color: #059669; }
.badge-blocked { background: rgba(239,68,68,0.12);  color: #dc2626; }
.badge-warn    { background: rgba(245,158,11,0.15); color: #b45309; }

.badge-role        { border-radius: 6px; }
.badge-owner       { background: rgba(139,92,246,0.12); color: #7c3aed; }
.badge-supervisor  { background: rgba(59,130,246,0.12);  color: #1d4ed8; }
.badge-operator    { background: rgba(16,185,129,0.12);  color: #059669; }
.badge-marketing   { background: rgba(245,158,11,0.12);  color: #b45309; }
.badge-guest       { background: rgba(148,163,184,0.2);  color: var(--muted); }

/* Action buttons */
.btn-action {
  padding: 8px 16px;
  border-radius: 9px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
/* Estado deshabilitado base: sin esto, un `.btn-action` con `disabled` (p. ej. el
   "Siguiente →" de un wizard con validación pendiente) se veía plenamente clicable.
   Los modificadores que ya definen su propio `:disabled` (--send, --danger, …) ganan
   por venir después en la cascada; esto solo cubre los que no lo tenían. */
.btn-action:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-create  { background: var(--brand-dark); color: white; }
.btn-create:hover { background: var(--brand-dark); }

/* .btn-invite se retiró: en la toolbar de Usuarios las acciones secundarias
   usan .btn-secondary, como en Tickets. */

.btn-delete-confirm { background: var(--danger); color: white; }
.btn-delete-confirm:hover { background: #dc2626; }

/* Small action buttons in table rows */
.btn-sm {
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-edit    { background: var(--control-bg); color: var(--text); border-color: var(--control-border); }
.btn-edit:hover { background: var(--control-bg-hover); }

/* .btn-block / .btn-unblock / .btn-perms se retiraron: las acciones de fila de
   Usuarios usan .pg-btn, neutro salvo lo destructivo. */

.btn-delete  { background: rgba(239,68,68,0.08); color: #dc2626; border-color: rgba(239,68,68,0.2); font-size: 0.85rem; padding: 4px 8px; }
.btn-delete:hover { background: rgba(239,68,68,0.18); }

.btn-cancel  { background: var(--control-bg); color: var(--muted); border-color: var(--control-border); }
.btn-cancel:hover { background: var(--control-bg-hover); color: var(--text); }

.btn-view    { background: rgba(99,102,241,0.08); color: #4f46e5; border-color: rgba(99,102,241,0.2); }
.btn-view:hover { background: rgba(99,102,241,0.16); }

/* ── Resultados de encuesta (drill-down canal → contacto → respuestas) ───────── */
/* max-height + overflow:hidden → el scroll vive SOLO en .survey-res-channels,
   no en toda la tarjeta (así el header y el resumen quedan fijos).
   Selector .modal-card.survey-res: gana en especificidad al overflow-y:auto de .modal-card. */
.modal-card.survey-res { max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; padding: 18px 0 6px; }
.survey-res .kn-wizard-head { flex-wrap: wrap; gap: 8px; }

.survey-res-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 18px;
}
.survey-res-kpi {
  flex: 1 1 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.survey-res-kpi__n { font-size: 1.5rem; font-weight: 800; color: var(--brand); line-height: 1; }
.survey-res-kpi__l { font-size: 0.72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }

/* El scroll vive en .survey-res-body (hijo directo estático de la tarjeta, flex item
   fiable). channels solo apila; así el header queda fijo y el cuerpo se desplaza. */
.survey-res-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.survey-res-channels { display: flex; flex-direction: column; gap: 10px; }

.survey-res-channel { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.survey-res-channel__head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: var(--brand-soft-bg);
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.survey-res-channel__head:hover { background: var(--brand-soft-bg); }
.survey-res-channel__name { font-weight: 700; color: var(--text-strong); font-size: 0.95rem; }
.survey-res-channel__meta { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }

.survey-res-contacts { padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 6px; }

.survey-res-contact { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.survey-res-contact__head {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.survey-res-contact__head:hover { background: var(--surface-2); }
.survey-res-contact__name { font-weight: 600; color: var(--text-strong); font-size: 0.88rem; }
.survey-res-contact__pct  { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.survey-res-contact__date { font-size: 0.74rem; color: var(--muted-2); white-space: nowrap; }
.survey-res-contact__sub  { font-size: 0.78rem; color: var(--muted); margin: 0 0 8px; }

.survey-res-pill {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}
.survey-res-pill--ok   { background: rgba(16,185,129,0.12); color: #059669; }
.survey-res-pill--warn { background: rgba(245,158,11,0.14); color: #b45309; }

.survey-res-answers { padding: 4px 14px 14px; background: var(--surface-2); border-top: 1px dashed var(--border); }
.survey-res-answer {
  display: grid;
  grid-template-columns: minmax(140px, 40%) 1fr;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-soft);
}
.survey-res-answer:last-child { border-bottom: none; }
.survey-res-answer__q { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.survey-res-answer__a { font-size: 0.86rem; color: var(--text-strong); font-weight: 600; word-break: break-word; }
.survey-res-empty { font-size: 0.82rem; color: var(--muted); margin: 4px 0; font-style: italic; }

/* Responsive: en móvil el modal ocupa casi toda la pantalla y los grids apilan */
@media (max-width: 640px) {
  .modal-card.modal-xl { max-width: 100%; }
  .modal-card.survey-res { max-height: 92vh; padding: 14px 0 6px; }
  .modal-card.survey-res > div:not(.modal-header):not(.modal-footer) { padding: 0 14px; }
  .survey-res-summary { gap: 8px; margin: 4px 0 12px; }
  .survey-res-kpi { flex: 1 1 calc(50% - 8px); padding: 10px 8px; }
  .survey-res-kpi__n { font-size: 1.25rem; }
  /* fila de contacto: nombre|pill arriba, %|fecha en la 2da línea */
  .survey-res-contact__head {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
  }
  .survey-res-answer { grid-template-columns: 1fr; gap: 2px; }
}

/* Header nav */
.header-left { display: flex; align-items: center; gap: 16px; }

.app-header h1 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.01em;
}

.header-back {
  color: var(--muted-2);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
}
.header-back:hover { color: #f8fafc; background: rgba(255,255,255,0.13); }

/* Modals */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-card {
  background: var(--surface-overlay);
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.25);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;   /* nunca scroll horizontal: el contenido se ajusta en Y */
  animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── Modal de error crítico (sesión expirada, fallo al iniciar, etc.) ── */
.crit-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;                 /* por encima de cualquier modal/drawer */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--scrim);
  backdrop-filter: blur(4px);
}
.crit-modal {
  width: min(420px, 94vw);
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 28px 26px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.crit-img { width: 160px; max-width: 60%; height: auto; margin-bottom: 4px; }
.crit-title { font-size: 1.25rem; font-weight: 700; color: var(--text-strong); margin: 0; }
.crit-msg { font-size: 0.92rem; color: var(--muted); margin: 0; line-height: 1.5; white-space: pre-line; }
.crit-btn {
  margin-top: 8px;
  padding: 11px 22px;
  border: none;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.crit-btn:hover { background: var(--brand-dark); }

/* ── Ruta inexistente (fallback del router: /docs y cualquier URL desconocida) ── */
.route-notfound {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 32px 20px;
}
.route-notfound-img { width: 160px; max-width: 55%; height: auto; margin-bottom: 4px; }
.route-notfound-title { font-size: 1.4rem; font-weight: 700; color: var(--text-strong); margin: 0; }
.route-notfound-msg { font-size: 0.95rem; color: var(--muted); margin: 0; max-width: 460px; line-height: 1.5; }
.route-notfound-btn {
  margin-top: 8px;
  padding: 11px 22px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.route-notfound-btn:hover { background: var(--brand-dark); }

.modal-card.modal-wide { max-width: 640px; }
.modal-card.permissions-modal { max-width: min(1080px, 95vw); }
.modal-card.modal-sm   { max-width: 380px; padding: 28px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
  margin-bottom: 20px;
}

.modal-header h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s;
}
.modal-close:hover { background: var(--control-bg-hover); color: var(--text); }

.modal-card form,
.modal-card > div:not(.modal-header):not(.modal-footer) {
  padding: 0 24px;
}

.modal-card .form-field { margin-bottom: 16px; }

.modal-card .form-field input:not([type="checkbox"]):not([type="radio"]),
.modal-card .form-field textarea,
.modal-card .form-field select {
  width: 100%;
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid var(--border);
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--surface-2);
  color: var(--text);
  transition: border-color 0.2s;
}
.modal-card .form-field input:not([type="checkbox"]):not([type="radio"]):focus,
.modal-card .form-field select:focus {
  outline: none;
  border-color: var(--brand-dark);
  background: var(--surface);
}

.modal-card .form-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

.form-check { margin: 4px 0 8px; }
.check-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
  line-height: 1.4;
}
.check-label input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 24px;
  border-top: 1px solid var(--border);
  margin-top: 20px;
}

/* Permissions panel */
/* .perms-filterbar / .perms-filter-* se retiraron: las pestañas de permisos y el
   modal de overrides usan la toolbar estándar (ver `perms_toolbar`). */

.perms-scroll {
  max-height: 52vh;
  overflow-x: auto;
  overflow-y: auto;
  padding: 0 24px;
}

.perms-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.perms-table th {
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 9px 10px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.perms-table td {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 0.78rem;
  padding: 9px 10px;
  vertical-align: middle;
}

.perms-table tr:last-child td { border-bottom: none; }
.perms-table tr:hover td { background: rgba(255,255,255,0.04); }
.perms-table tr.perm-granted td { background: rgba(16,185,129,0.035); }
/* Permiso restringido por whitelist de departamento y el depto seleccionado NO está */
.perms-table tr.perm-dept-filtered td { background: rgba(239,68,68,0.05); }
.perm-dept-lock { color: #b45309; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }

.perm-module-cell {
  color: var(--muted);
  font-weight: 700;
  min-width: 180px;
}

.perm-module-chip {
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  padding: 6px 9px;
  white-space: nowrap;
}

.module-contacts { background: rgba(20,184,166,0.14); color: #0f766e; }
.module-users { background: rgba(99,102,241,0.14); color: #4338ca; }
.module-campaigns { background: rgba(245,158,11,0.16); color: #b45309; }
.module-support { background: rgba(14,165,233,0.14); color: #0369a1; }
.module-control { background: rgba(139,92,246,0.14); color: #6d28d9; }
.module-analytics { background: rgba(16,185,129,0.14); color: #047857; }
.module-security { background: rgba(239,68,68,0.13); color: #b91c1c; }
.module-billing { background: rgba(217,119,6,0.14); color: #92400e; }
.module-other { background: var(--bg); color: var(--muted); }

.perm-action-badge.action-view { background: rgba(59,130,246,0.12); color: #1d4ed8; }
.perm-action-badge.action-create { background: rgba(16,185,129,0.14); color: #047857; }
.perm-action-badge.action-edit { background: rgba(245,158,11,0.15); color: #b45309; }
.perm-action-badge.action-delete { background: rgba(239,68,68,0.12); color: #dc2626; }
.perm-action-badge.action-export { background: rgba(14,165,233,0.14); color: #0369a1; }
.perm-action-badge.action-manage { background: rgba(139,92,246,0.14); color: #6d28d9; }
.perm-action-badge.action-other { background: var(--surface-2); color: var(--text); }

.perm-action-badge {
  background: var(--surface-2);
  border-radius: 999px;
  color: var(--text);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 6px 9px;
  white-space: nowrap;
}

.perm-id-cell {
  color: var(--text-strong);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.74rem !important;
  min-width: 230px;
  word-break: break-word;
}

.perm-description-cell {
  color: var(--muted) !important;
  max-width: 280px;
  min-width: 220px;
}

.perm-status {
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.status-granted { color: #059669; }
.status-denied  { color: #cbd5e1; }

.perm-override-badge {
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.override-yes {
  background: rgba(245,158,11,0.12);
  color: #b45309;
}

.override-no {
  background: rgba(239,68,68,0.10);
  color: #dc2626;
}

.perm-override-empty {
  color: var(--muted-2);
  font-size: 0.74rem;
  font-weight: 600;
}

.perm-action-cell { white-space: nowrap; }

/* ============================================================
   CONTROL CENTER
   ============================================================ */

/* El segmented NO envuelve: si las pestañas superan el ancho, se hace scroll
   horizontal dentro de la barra (rueda con Shift o arrastre táctil, pero también
   con la propia barra de scroll — no todo el mundo conoce Shift+rueda). La barra
   es no invasiva estilo sidebar: carril propio abajo, transparente hasta hover. */
.control-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  margin-bottom: 28px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--surface-2);
  border-radius: 12px;
  padding: 5px 5px 7px;
  width: 100%;
  max-width: 100%;
  scrollbar-width: thin;                       /* Firefox */
  scrollbar-color: transparent transparent;
}
.control-tabs:hover { scrollbar-color: var(--control-border) transparent; }
.control-tabs::-webkit-scrollbar { height: 7px; }
.control-tabs::-webkit-scrollbar-track { background: transparent; }
.control-tabs::-webkit-scrollbar-thumb {
  background: transparent;
  border: 2px solid transparent;               /* inset → carril propio */
  background-clip: padding-box;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}
.control-tabs:hover::-webkit-scrollbar-thumb { background: var(--control-border); background-clip: padding-box; }

.control-tab {
  appearance: none;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  padding: 8px 18px;
  white-space: nowrap;
  flex-shrink: 0;                              /* no se comprimen: fuerzan el scroll */
  transition: all 0.15s;
}

.control-tab:not(.active):hover {
  background: var(--control-bg-hover);
  color: var(--text);
}

/* Estado activo autosuficiente (no depende de la global .active): sólido de marca
   + texto blanco en oscuro; el override light-mode lo suaviza. Tokens sólidos que
   siempre resuelven (evita el fallback a violeta-sólido con texto invisible). */
.control-tab.active {
  background: var(--brand-dark) !important;
  color: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
}

.control-tab:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.control-table .col-code {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
}

.control-table .col-outputs {
  color: var(--muted);
  max-width: 320px;
}

.control-table .col-token {
  min-width: 160px;
  vertical-align: top;
}
.control-table .col-token .key-status-info {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 6px;
}

/* ── Badge de token pressable + popover (columna Token de Canales) ──────────────
   El badge dice solo el estado (Validado / Inválido / Sin verificar) y al pulsarlo
   abre un popover con la fecha de la última verificación y un botón para re-verificar
   (el resultado se avisa por toast, no en la celda). */
.cc-token-wrap { position: relative; display: inline-block; }
.cc-token-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; font-family: inherit;
  border: 1px solid transparent; cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.cc-token-badge:hover { filter: brightness(1.05); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),0.10); }
.cc-token-badge:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cc-token-caret { opacity: 0.7; flex-shrink: 0; }
.cc-token-badge--ok      { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.cc-token-badge--bad     { background: var(--badge-danger-bg);  color: var(--badge-danger-fg); }
.cc-token-badge--unknown { background: var(--surface-2);        color: var(--muted); }

.cc-token-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  min-width: 220px; display: flex; flex-direction: column; gap: 10px;
  padding: 12px; background: var(--surface-overlay);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-md);
}
.cc-token-pop-row { display: flex; flex-direction: column; gap: 2px; }
.cc-token-pop-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted);
}
.cc-token-pop-val { font-size: 0.82rem; color: var(--text); }
.cc-token-pop-err {
  font-size: 0.74rem; color: var(--badge-danger-fg); background: var(--badge-danger-bg);
  padding: 6px 8px; border-radius: 6px; word-break: break-word;
}
.cc-token-verify { align-self: flex-start; }

/* Fila de la tabla de system prompts: clickeable → abre el modal de detalle/edición.
   La celda de acciones corta la propagación (sus botones no abren el modal). */
.control-row-click { cursor: pointer; }
.control-row-click:hover > td { background: var(--control-bg-hover); }

/* Botón de acción deshabilitado dentro de .tb-icon-wrap: sin captura de ratón, así
   el envoltorio recibe el hover y muestra su tooltip + cursor de bloqueo. */
.tb-icon-wrap.is-disabled .pg-btn:disabled { pointer-events: none; }

.badge-status {
  border-radius: 999px;
}

.badge-status-live {
  background: rgba(16,185,129,0.12);
  color: #059669;
}

.badge-status-test {
  background: rgba(245,158,11,0.14);
  color: #b45309;
}

.badge-status-off {
  background: rgba(148,163,184,0.18);
  color: var(--muted);
}

.output-section {
  margin-bottom: 4px;
}

.form-section-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.output-grid {
  display: grid;
  /* min 140px: la etiqueta más larga ("Documentos") necesita aire para no rozar
     el borde de su toggle en el modal angosto. */
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin: 0 0 20px;
}

.output-toggle {
  align-items: center;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  font-size: 0.84rem;
  font-weight: 500;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, color 0.15s;
  user-select: none;
}

.output-toggle:hover {
  background: var(--surface-2);
  border-color: var(--muted-2);
}

.output-toggle:has(input:checked) {
  background: var(--brand-soft-bg);
  border-color: var(--brand);
  color: var(--brand-dark);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb),0.1);
}

.output-toggle input[type="checkbox"] {
  accent-color: var(--brand);
  cursor: pointer;
  flex-shrink: 0;
  height: 15px;
  width: 15px !important;
}

.output-toggle-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.output-toggle-label {
  flex: 1;
  min-width: 0;
}

.readonly-line {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  padding: 10px 14px;
}

.readonly-info-pair {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.readonly-label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.readonly-line strong {
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 600;
}

/* ID del canal: empujado a la derecha y en gris tenue → dato de referencia, no
   protagonista. */
.readonly-info-pair--id { margin-left: auto; text-align: right; }
.readonly-info-pair--id strong { color: var(--muted-2); font-weight: 500; }

.control-form-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 20px 24px 0;
}

.form-section {
  margin-bottom: 24px;
}

.form-section-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* Checkbox con etiqueta dentro de .form-field: `.form-field label` (block)
   pisa a `.check-label` (flex) por especificidad y el checkbox quedaba
   flotando en su propia línea. Restaurar el layout en línea. */
.form-field label.check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-weight: 600;
}

/* Límites → Bloqueo de loop concurrente: lista de estado por canal */
.ll-channel-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 620px;
  margin-top: 8px;
}
.ll-channel-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 170px auto;
  gap: 12px;
  align-items: center;
  padding: 8px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}
.ll-channel-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ll-channel-name > span:first-child {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ll-channel-id {
  font-size: 0.72rem;
  color: var(--muted);
}
.control-form-panel .form-field select.ll-channel-select {
  width: 170px;
  padding: 7px 10px;
}
.ll-override-tag {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--badge-info-bg);
  color: var(--badge-info-fg);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .ll-channel-row { grid-template-columns: 1fr; gap: 6px; }
  .control-form-panel .form-field select.ll-channel-select { width: 100%; }
}

.control-form-panel .form-field input:not([type="checkbox"]):not([type="radio"]),
.control-form-panel .form-field textarea,
.control-form-panel .form-field select {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid var(--border);
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--surface-2);
  color: var(--text);
  transition: border-color 0.2s;
}

.control-form-panel .form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
  cursor: pointer;
}

.control-form-panel .form-field input:not([type="checkbox"]):not([type="radio"]):focus,
.control-form-panel .form-field textarea:focus,
.control-form-panel .form-field select:focus {
  outline: none;
  border-color: var(--brand-dark);
  background: var(--surface);
}

.control-form-panel .form-field input:not([type="checkbox"]):not([type="radio"]):disabled,
.control-form-panel .form-field textarea:disabled,
.control-form-panel .form-field select:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

.control-textarea {
  min-height: 150px;
  resize: vertical;
}

.control-textarea-tall {
  min-height: 220px;
}

.control-form-footer {
  margin-left: -24px;
  margin-right: -24px;
}

.control-save-state {
  color: #059669;
  font-size: 0.8rem;
  font-weight: 700;
}

/* ============================================================
   LLM panel
   ============================================================ */

.llm-key-field {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
}

.key-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.key-input-row input {
  flex: 1;
}

.key-set-badge {
  color: #059669;
  font-weight: 600;
  font-size: 0.85rem;
}

.key-unset-badge {
  color: var(--muted-2);
  font-weight: 500;
  font-size: 0.85rem;
}

.form-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--muted-2);
  line-height: 1.4;
}

.evidencia-tipos {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  background: #1e293b;
  border-radius: 6px;
  flex-wrap: wrap;
}
.evidencia-label {
  font-size: 0.75rem;
  color: var(--muted-2);
  white-space: nowrap;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--brand);
  cursor: pointer;
}

input[type="range"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--muted-2);
  margin-top: 2px;
}

.range-val {
  font-weight: 700;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

/* ── LLM panel extras ───────────────────────────────────── */

.fallback-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* Fallback chips — hide native checkbox, use pill style */
.fallback-checks .check-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: all 0.15s;
  line-height: 1;
}

.fallback-checks .check-label input[type="checkbox"] {
  display: none;
}

.fallback-checks .check-label::before {
  content: '○';
  font-size: 0.75rem;
  opacity: 0.5;
  transition: all 0.15s;
}

.fallback-checks .check-label:has(input:checked) {
  background: rgba(var(--brand-rgb),0.08);
  border-color: var(--brand);
  color: var(--brand-dark);
  font-weight: 600;
}

.fallback-checks .check-label:has(input:checked)::before {
  content: '✓';
  opacity: 1;
}

.fallback-checks .check-label:hover:not(:has(input:disabled)) {
  border-color: var(--muted-2);
  color: var(--text);
}

.timeout-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 6px;
}

.timeout-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timeout-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

.provider-model-tabs {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
  background: var(--surface-2);
  border-radius: 10px;
  padding: 4px;
  width: fit-content;
  flex-wrap: wrap;
}

.model-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.llm-keys-section {
  margin-top: 24px;
  padding: 16px 24px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.llm-keys-title {
  margin: 0 0 4px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-strong);
}

.llm-keys-grid {
  display: flex;
  flex-direction: column;
}

.llm-key-row .timeout-label {
  min-width: 148px;
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-strong);
}

/* ============================================================
   LLM Key Status badges
   ============================================================ */
.key-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.key-badge.valid       { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.key-badge.low-credits { background: var(--badge-warn-bg); color: var(--badge-warn-fg); }
.key-badge.invalid     { background: var(--badge-danger-bg); color: var(--badge-danger-fg); }
.key-badge.no-key      { background: var(--surface-2); color: var(--muted); }
.key-badge.error       { background: var(--badge-danger-bg); color: var(--badge-danger-fg); }
.key-badge.unknown     { background: var(--surface-2); color: var(--muted-2); }

.key-credits-info {
  font-size: 0.7rem;
  color: var(--muted);
  margin-left: 2px;
}
.key-error-hint {
  font-size: 0.68rem;
  color: #991b1b;
}
.key-checked-at {
  font-size: 0.65rem;
  color: var(--muted);
}

.btn-verify {
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 7px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-verify:hover:not(:disabled) {
  border-color: var(--brand);
  color: var(--brand);
  background: rgba(var(--brand-rgb),0.05);
}
.btn-verify:disabled { opacity: 0.45; cursor: not-allowed; }

/* Notification tabs (Plantillas | Historial) */
.notif-tab-nav {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}
.notif-tab {
  padding: 8px 18px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  border-radius: 6px 6px 0 0;
}
.notif-tab:hover { color: var(--brand); background: rgba(var(--brand-rgb),0.05); }
.notif-tab--active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  background: rgba(var(--brand-rgb),0.07);
}

/* Notification log — filter bar */
.notif-log-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--panel-1);
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* Notification log — pagination */
.notif-log-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 4px;
}

/* Variable chips — email template editor */
.var-chips-container {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.var-chips-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.var-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.var-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-weight: 600;
  background: rgba(99,102,241,0.08);
  color: #4f46e5;
  border: 1.5px solid rgba(99,102,241,0.25);
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
  line-height: 1;
}
.var-chip:hover {
  background: rgba(99,102,241,0.18);
  border-color: #4f46e5;
  transform: translateY(-1px);
}
/* form-label utility used in tpl create form */
.form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 6px;
}

/* Input base GLOBAL — con tokens (tema claro/oscuro). Antes solo existía
   `.kn-wizard .form-input`, así que cualquier `.form-input` fuera del wizard
   (p. ej. los modales de edición dedicados) quedaba sin estilo → se veía roto /
   sin tema oscuro. `.kn-wizard .form-input` (más específico) sigue ganando donde
   aplica, así que no hay regresión en los wizards. */
.form-input {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.form-input:focus {
  border-color: var(--brand-dark);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}
.form-input::placeholder { color: var(--muted-2); }

.key-status-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-soft);
}

.key-status-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.key-status-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}

.llm-key-row {
  display: flex;
  align-items: center;
  gap: 0;
}

.llm-key-row:last-child .key-status-row { border-bottom: none; }

/* ============================================================
   Auditoría
   ============================================================ */
/* La barra de filtros propia de Auditoría (.audit-filters / .audit-filter-*) se
   retiró: el módulo usa la toolbar estándar (.tickets-toolbar + embudo). */

.audit-table-wrap {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: auto;
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
}
.audit-loading {
  padding: 40px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}
.audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}
.audit-table thead tr {
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
}
.audit-table th {
  padding: 10px 14px;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
}
.audit-table td { padding: 9px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.audit-table tbody tr:last-child td { border-bottom: none; }
.audit-table tbody tr:hover td { background: rgba(var(--brand-rgb),0.03); }

.audit-cell--dt   { white-space: nowrap; color: var(--muted); font-size: 0.8rem; }
.audit-cell--user { min-width: 160px; }
.audit-cell--action { max-width: 380px; font-size: 0.84rem; }
.audit-cell--resource { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.audit-cell--ip   { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.audit-cell--result { white-space: nowrap; }
.audit-cell--actions { white-space: nowrap; }

.audit-user-name  { display: block; font-weight: 500; }
.audit-user-email { display: block; font-size: 0.76rem; color: var(--muted); }

/* Celda de acción en tres líneas: qué se hizo · sobre qué objeto · qué cambió.
   El objetivo y el resumen son el snapshot legible que graba core/audit_diff.py;
   las filas anteriores a esa función simplemente no los pintan. */
.audit-action-name    { display: block; font-weight: 500; }
.audit-action-target  { display: block; font-size: 0.78rem; color: var(--text); }
.audit-change-summary {
  display: block;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.35;
  margin-top: 2px;
}

.audit-action {
  font-family: 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.78rem;
  background: var(--panel-2);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--brand-dark);
  word-break: break-all;
}

.audit-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
}
.audit-badge--ok     { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.audit-badge--denied { background: var(--badge-warn-bg); color: var(--badge-warn-fg); }
.audit-badge--error  { background: var(--badge-danger-bg); color: var(--badge-danger-fg); }
/* La columna Módulo usa el mismo badge que Resultado, en morado neutro. */
.audit-badge--module { background: var(--badge-purple-bg); color: var(--badge-purple-fg); }

.audit-error-detail {
  display: block;
  font-size: 0.72rem;
  color: var(--danger);
  margin-top: 2px;
  cursor: help;
}

/* El detalle ya no expande la fila: se abre en modal (.audit-detail-modal), así
   que .audit-toggle-btn, .audit-row--expanded, .audit-row-detail y
   .audit-module-tag (que además fijaba colores a mano) quedaron sin uso. */
.audit-cell--module { white-space: nowrap; }

/* ── Modal de detalle del registro ── */
.audit-detail-modal { max-width: 640px; width: 100%; }

.audit-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 18px;
  margin-bottom: 14px;
}

.audit-detail-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  word-break: break-word;
}

.audit-detail-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.audit-detail-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.audit-detail-label--error { color: var(--badge-danger-fg); }

/* Separa cada bloque de texto largo de lo que tiene encima dentro del modal. */
.audit-detail-section + .audit-detail-section { margin-top: 12px; }

.audit-changes-pre {
  font-size: 0.78rem;
  font-family: 'Fira Code', 'Cascadia Code', monospace;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--text);
  margin: 0;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 300px;
  overflow-y: auto;
}

.audit-error-pre {
  background: var(--badge-danger-bg);
  border-color: var(--badge-danger-bg);
  color: var(--badge-danger-fg);
}

/* Layout del pager en el bloque canónico (buscar "PAGINACIÓN ESTÁNDAR"). */

/* ============================================================
   Metrics module
   ============================================================ */

.metrics-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 40px 0;
}

.metrics-header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.metrics-period-select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.1);
  color: #f1f5f9;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 7px 30px 7px 12px;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f1f5f9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  transition: border-color 0.2s;
}
.metrics-period-select:focus { outline: none; border-color: rgba(255,255,255,0.5); }
.metrics-period-select option { background: #1e293b; color: #f1f5f9; }

.metrics-refresh-btn {
  padding: 7px 12px;
  font-size: 1rem;
  min-width: 36px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #f1f5f9;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.metrics-refresh-btn:hover { background: rgba(255,255,255,0.18); }

/* ── Main tab nav (pill-group) ── */
/* SEGMENTED: estilo en el bloque canónico. Aquí solo su posición en la cabecera. */
.metrics-tabs { margin: 8px 40px 0; }

/* align app-main below the pill tab row */
.metrics-tabs ~ .app-main { padding-top: 20px; }

/* ── KPI grid ── */
.metrics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.metrics-kpi-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-left: 3px solid var(--kpi-accent, var(--brand));
  border-radius: 10px;
  padding: 18px 16px;
  box-shadow: var(--shadow-sm);
}

.metrics-kpi-value {
  font-size: 1.7rem;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1;
  margin-bottom: 6px;
}

.metrics-kpi-label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* ── Charts grid ── */
.metrics-charts-grid {
  display: grid;
  /* auto-fit (no auto-fill): colapsa las columnas vacías y estira los gráficos
     presentes para llenar todo el ancho, proporcional a la tabla de abajo. */
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.metrics-charts-grid--2col {
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.metrics-chart-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 16px;
  box-shadow: var(--shadow-sm);
}

.metrics-chart-card--full { grid-column: 1 / -1; }
.metrics-chart-card--sm   { min-width: 200px; }

.metrics-chart-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #e2e8f0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}

.metrics-chart-container { min-height: 200px; }

.metrics-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-strong);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 16px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}

.metrics-loading {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
  font-size: 0.95rem;
}

.metrics-empty {
  color: var(--muted);
  font-size: 0.88rem;
  padding: 32px 16px;
  text-align: center;
}

/* ── Barras de cobertura de guías (Uso del Panel › Guías) ── */
.metrics-cov-list { display: flex; flex-direction: column; gap: 14px; padding: 6px 2px; }
.metrics-cov-row { display: flex; flex-direction: column; gap: 6px; }
.metrics-cov-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.metrics-cov-label { font-weight: 600; color: var(--text-strong); }
.metrics-cov-val { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.metrics-cov-track { height: 12px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.metrics-cov-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c6af7, var(--brand-soft-fg));
  border-radius: 999px;
  transition: width 0.4s ease;
  min-width: 2px;
}

/* ── Agent sub-tabs (pill-group) ── */
/* SEGMENTED: estilo en el bloque canónico. */
.metrics-agent-tabs { border-bottom: none; }

/* ── Light controls for Investment Tab ── */
.metrics-select-light {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--control-bg);
  color: var(--text);
  border: 1px solid var(--control-border);
  border-radius: 8px;
  padding: 7px 32px 7px 12px;
  font-size: 0.85rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: var(--shadow-sm);
}
.metrics-select-light:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.15);
}
.metrics-select-light option {
  background: var(--surface);
  color: var(--text);
}

.metrics-input-light {
  background: var(--control-bg);
  color: var(--text);
  border: 1px solid var(--control-border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-family: inherit;
  font-weight: 500;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.metrics-input-light:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.15);
}


/* ============================================================
   LIVECHAT MODULE
   ============================================================ */

/* Badge variants (--modifier on base .badge) */
.badge--warn    { background: rgba(245,158,11,0.15);  color: #b45309; border: 1px solid rgba(245,158,11,0.3); }
.badge--success { background: rgba(16,185,129,0.12);  color: #059669; border: 1px solid rgba(16,185,129,0.25); }
.badge--danger  { background: rgba(239,68,68,0.12);   color: #dc2626; border: 1px solid rgba(239,68,68,0.25); }
.badge--info    { background: rgba(99,102,241,0.12);  color: #4338ca; border: 1px solid rgba(99,102,241,0.25); }
.badge--locked  { background: rgba(239,68,68,0.10);   color: #b91c1c; border: 1px solid rgba(239,68,68,0.22); }
.badge--ticket-active { background: rgba(99,102,241,0.10); color: #4338ca; border: 1px solid rgba(99,102,241,0.22); }

/* Page header meta (conversation count) */
.page-header-meta {
  font-size: 0.8125rem;
  color: var(--muted);
  font-weight: 500;
  margin-left: auto;
}

/* ── 3-column layout ─────────────────────────────────────── */
.livechat-page {
  height: 100vh;
  overflow: hidden;
}

.livechat-page .page-header {
  flex-shrink: 0;
}

.livechat-layout {
  display: flex;
  align-items: stretch;
  height: calc(100vh - 60px);
  overflow: hidden;
  background: var(--bg);
}

/* ── Bandeja (izquierda) — ancho por estilo inline (redimensionable) ─────── */
.livechat-sidebar {
  position: relative;               /* ancla del popover de filtros */
  flex: 0 0 auto;
  width: 320px;                     /* fallback; el inline manda */
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border-soft);
  overflow: hidden;
}
.livechat-sidebar--collapsed { width: 48px !important; }

/* Barra superior de la bandeja: búsqueda + embudo + colapsar */
.lc-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.lc-topbar .lc-search { flex: 1 1 auto; min-width: 0; }
.lc-topbar--collapsed { justify-content: center; padding: 12px 4px; }

/* Botones cuadrados de la barra (embudo, colapsar) */
.lc-filter-btn,
.lc-collapse-btn {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--control-border);
  border-radius: 9px;
  background: var(--control-bg);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.lc-filter-btn:hover,
.lc-collapse-btn:hover { background: var(--control-bg-hover); }
.lc-filter-btn.is-active { border-color: var(--brand); color: var(--brand); }
.lc-filter-count {
  position: absolute; top: -5px; right: -5px;
  min-width: 15px; height: 15px; padding: 0 3px;
  background: var(--brand); color: #fff;
  border-radius: 8px; font-size: 0.6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}

/* Popover de filtros (empaquetados tras el embudo) */
.lc-filters-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: transparent;
}
.lc-filters-popover {
  position: absolute; top: 58px; left: 8px; right: 8px; z-index: 41;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px;
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}

/* Wrapper scrollable de la lista (se oculta al colapsar) */
.lc-list-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.livechat-sidebar--collapsed .lc-list-wrap { display: none; }

/* ── Resizer entre paneles ─────────────────────────────────── */
.lc-resizer {
  flex: 0 0 auto;
  width: 5px;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s;
}
.lc-resizer:hover { background: var(--brand); }

.livechat-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Búsqueda de conversaciones (nombre / user_id) */
.lc-search {
  position: relative;
  display: flex;
  align-items: center;
}
.lc-search-icon {
  position: absolute;
  left: 10px;
  font-size: 0.8rem;
  opacity: 0.7;
  pointer-events: none;
}
.lc-search-input {
  width: 100%;
  padding: 8px 30px 8px 30px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text);
  font-size: 0.85rem;
  outline: none;
}
.lc-search-input::placeholder { color: var(--muted-2); }
.lc-search-input:focus {
  border-color: var(--brand);
  background: var(--control-bg-hover);
}
.lc-search-clear {
  position: absolute;
  right: 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  padding: 4px;
  border-radius: 6px;
}
.lc-search-clear:hover { color: var(--text); background: var(--control-bg-hover); }

.livechat-filters select,
.lc-filters-popover select {
  width: 100%;
  padding: 9px 30px 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.07);
  color: #cbd5e1;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
}

.livechat-filters select:focus,
.lc-filters-popover select:focus {
  border-color: rgba(99,179,237,0.5);
  background-color: rgba(255,255,255,0.1);
}

.livechat-filters select option,
.lc-filters-popover select option { background: #1e293b; }

.filter-channel-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

.filter-pills {
  display: flex;
  gap: 6px;
}

.filter-pill {
  flex: 1;
  padding: 8px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--muted-2);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}

.filter-pill:hover {
  background: rgba(255,255,255,0.1);
  color: #e2e8f0;
}

.filter-pill--active {
  background: rgba(var(--brand-rgb),0.2) !important;
  border-color: rgba(var(--brand-rgb),0.4) !important;
  color: var(--brand-soft-fg) !important;
}

.conversation-list {
  list-style: none;
  overflow-y: auto;
  flex: 1;
  padding: 8px;
}

.conversation-list::-webkit-scrollbar { width: 4px; }
.conversation-list::-webkit-scrollbar-track { background: transparent; }
.conversation-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

.conv-item {
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
  margin-bottom: 4px;
}

.conv-item:hover {
  background: rgba(255,255,255,0.06);
}

.conv-item--selected {
  background: rgba(var(--brand-rgb),0.18) !important;
  border: 1px solid rgba(var(--brand-rgb),0.3);
}

.conv-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.conv-channel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #475569;
  flex-shrink: 0;
  overflow: hidden;
}

.conv-channel-icon {
  width: 30px;
  height: 30px;
  display: block;
  object-fit: cover;
}

.conv-contact-pic {
  width: 30px;
  height: 30px;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}

/* Per-channel brand colors (fallback when img fails) */
.conv-channel-badge--wa   { background: #25D366; }
.conv-channel-badge--wapi { background: #1DAA61; }
.conv-channel-badge--ig   { background: linear-gradient(135deg, #833AB4, #E1306C, #F77737); }
.conv-channel-badge--tg   { background: #229ED9; }
.conv-channel-badge--fb   { background: #0084FF; }
.conv-channel-badge--tt   { background: #111; }
.conv-channel-badge--web  { background: #3b5bdb; }
.conv-channel-badge--other { background: #475569; }

/* Channel type cell in config table */
.ch-type-cell {
  align-items: center;
  display: flex;
  gap: 8px;
}

.ch-type-label {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
}

.conv-title {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conv-item-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}

.conv-last-msg {
  font-size: 0.75rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  max-width: 180px;
}

.conv-time {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.conv-assigned {
  font-size: 0.7rem;
  color: #22c55e;
  margin-top: 2px;
  font-weight: 500;
}

/* Sidebar pagination */
.livechat-sidebar .pagination {
  padding: 8px 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  justify-content: space-between;
}

.livechat-sidebar .pagination button {
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  background: rgba(255,255,255,0.07);
  color: var(--muted-2);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: all 0.15s;
}

.livechat-sidebar .pagination button:hover:not(:disabled) {
  background: rgba(255,255,255,0.13);
  color: #e2e8f0;
}

.livechat-sidebar .pagination button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.livechat-sidebar .pagination span {
  font-size: 0.75rem;
  color: var(--muted);
}

.livechat-sidebar .loading-row,
.livechat-sidebar .error-banner {
  margin: 6px;
  padding: 8px 12px;
  font-size: 0.8rem;
  border-radius: 8px;
}

.livechat-sidebar .loading-row {
  color: var(--muted);
  text-align: center;
  padding: 20px;
}

/* ── Historial de mensajes (centro) ──────────────────────── */
.livechat-messages {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #0f172a;
  border-right: 1px solid var(--border);
  overflow: hidden;
}

/* Nombre del contacto en la cabecera del chat → abre la ficha derecha */
.mh-contact-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 260px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-strong);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mh-contact-name:hover { background: var(--control-bg); border-color: var(--control-border); }
.mh-contact-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-contact-name-caret { flex-shrink: 0; opacity: 0.6; }

.livechat-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 500;
  background: var(--bg);
}

.messages-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: #0f172a;
  flex-shrink: 0;
  gap: 12px;
  flex-wrap: wrap;
}

.messages-header-id {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.messages-header-id strong {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.action-error {
  font-size: 0.78rem;
  color: var(--danger);
  font-weight: 500;
  max-width: 200px;
}

/* Livechat action buttons */
.btn-action--pause {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  background: rgba(245,158,11,0.12);
  color: #b45309;
  border: 1px solid rgba(245,158,11,0.3);
}
.btn-action--pause:hover:not(:disabled) { background: rgba(245,158,11,0.2); }

.btn-action--resume {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  background: rgba(16,185,129,0.12);
  color: #059669;
  border: 1px solid rgba(16,185,129,0.3);
}
.btn-action--resume:hover:not(:disabled) { background: rgba(16,185,129,0.2); }

.btn-action--assign {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  background: rgba(var(--brand-rgb),0.1);
  color: var(--brand-dark);
  border: 1px solid rgba(var(--brand-rgb),0.25);
}
.btn-action--assign:hover:not(:disabled) { background: rgba(var(--brand-rgb),0.18); }

.btn-action--unassign {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
}
.btn-action--unassign:hover:not(:disabled) { background: var(--control-bg-hover); color: var(--text); }

.btn-action--resolve {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  background: rgba(139,92,246,0.1);
  color: #7c3aed;
  border: 1px solid rgba(139,92,246,0.25);
}
.btn-action--resolve:hover:not(:disabled) { background: rgba(139,92,246,0.18); }

.btn-action--send {
  padding: 6px 18px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--brand-dark);
  color: #fff;
  border: none;
  white-space: nowrap;
  align-self: flex-end;
}
.btn-action--send:hover:not(:disabled) { background: var(--brand-dark); }

.btn-action--pause:disabled,
.btn-action--resume:disabled,
.btn-action--assign:disabled,
.btn-action--unassign:disabled,
.btn-action--resolve:disabled,
.btn-action--send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Reply box */
.reply-box {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: #0f172a;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reply-input-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.reply-textarea {
  flex: 1;
  min-height: 72px;
  max-height: 160px;
  resize: vertical;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-family: inherit;
  line-height: 1.5;
  color: #e2e8f0;
  background: rgba(255,255,255,0.07);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.reply-textarea:focus { border-color: rgba(99,179,237,0.5); background: rgba(255,255,255,0.1); }
.reply-textarea::placeholder { color: var(--muted); }

.reply-error {
  margin: 0;
  font-size: 0.8rem;
}

.reply-ia-notice {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--surface)beb;
  color: #92400e;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 12px 16px;
  text-align: center;
}
.reply-ia-notice--warn {
  background: var(--badge-danger-bg);
  color: #991b1b;
  border-top-color: #fecaca;
}

/* Messages list */
.messages-list {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface-2);
}

.messages-list::-webkit-scrollbar { width: 5px; }
.messages-list::-webkit-scrollbar-track { background: transparent; }
.messages-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* Bubbles */
.msg-bubble {
  max-width: 72%;
  padding: 12px 16px;
  border-radius: 16px;
  word-break: break-word;
}

.msg-bubble--user {
  align-self: flex-end;
  background: var(--badge-info-bg);
  border: 1px solid rgba(var(--brand-rgb),0.25);
  border-bottom-right-radius: 4px;
}

.msg-bubble--agent {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-sm);
}

.msg-bubble--operator {
  align-self: flex-start;
  background: var(--badge-success-bg);
  border: 1px solid rgba(34,197,94,0.25);
  border-bottom-left-radius: 4px;
}

.msg-bubble--system {
  align-self: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 14px;
  max-width: 90%;
}

.msg-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.msg-sender {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}

.msg-bubble--user .msg-sender { color: var(--badge-info-fg); }
.msg-bubble--operator .msg-sender { color: var(--badge-success-fg); }
.msg-bubble--system .msg-sender { display: none; }

.msg-time {
  font-size: 0.68rem;
  color: var(--muted-2);
  margin-left: auto;
}

.msg-text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
}

.msg-bubble--system .msg-text {
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}

.msg-empty {
  color: var(--muted-2) !important;
  font-style: italic;
}

.msg-media-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-dark);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
}
.msg-media-link:hover { text-decoration: underline; }

/* ── Rich media bubbles ─────────────────────────────────────── */
.msg-media-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.msg-media-img {
  max-width: 280px;
  max-height: 280px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: opacity 0.15s;
}
.msg-media-img:hover { opacity: 0.88; }

.msg-media-sticker {
  max-width: 140px;
  max-height: 140px;
  object-fit: contain;
  display: block;
}

.msg-media-video {
  max-width: 300px;
  border-radius: 10px;
  display: block;
  background: #000;
}

.msg-media-audio {
  width: 260px;
  max-width: 100%;
  height: 36px;
  accent-color: var(--brand);
}

.msg-media-doc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(0,0,0,0.05);
  color: var(--brand-dark);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  max-width: 260px;
}
.msg-media-doc:hover { background: rgba(0,0,0,0.1); }
.msg-media-doc-icon { font-size: 1.2rem; flex-shrink: 0; }
.msg-media-doc-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-media-caption {
  margin-top: 2px;
  font-size: 0.825rem;
  color: var(--text);
}

.msg-location {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.msg-location-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--brand-dark);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  background: rgba(var(--brand-rgb),0.1);
  padding: 5px 10px;
  border-radius: 6px;
}
.msg-location-link:hover { background: rgba(var(--brand-rgb),0.18); }
.msg-location-addr {
  font-size: 0.78rem;
  color: var(--muted);
}

/* ── Ficha del contacto (derecha) ───────────────────────── */
.livechat-contact-panel {
  flex: 0 0 auto;
  width: 320px;                     /* fallback; el inline manda */
  display: flex;
  flex-direction: column;
  background: #0f172a;
  overflow-y: auto;
  padding: 20px;
}
/* Barra superior de la ficha (título + X para cerrar) */
.lc-contact-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.lc-contact-topbar-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.lc-contact-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lc-contact-close:hover { background: var(--control-bg); border-color: var(--control-border); color: var(--text); }

/* Tabs de la ficha del contacto — scroll horizontal si el panel es angosto.
   La barra de scroll va ARRIBA del strip (truco de flip vertical) y usa el mismo
   estilo overlay auto-oculto de la sidebar. */
.lc-contact-tabs-wrap { display: flex; flex-direction: column; gap: 10px; }
.lc-tabs {
  display: flex;
  gap: 3px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: 10px;
  overflow-x: auto;
  transform: scaleY(-1);            /* voltea → la barra (abajo) queda arriba */
  scrollbar-width: thin;            /* Firefox */
  scrollbar-color: transparent transparent;
}
.lc-tabs > * { transform: scaleY(-1); }   /* restaura el contenido */
.lc-tabs:hover { scrollbar-color: rgba(255, 255, 255, 0.20) transparent; }
.lc-tabs::-webkit-scrollbar { height: 8px; }
.lc-tabs::-webkit-scrollbar-track { background: transparent; }
.lc-tabs::-webkit-scrollbar-thumb {
  background: transparent;
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}
.lc-tabs:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.20); background-clip: padding-box; }
.lc-tabs:hover::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.34); background-clip: padding-box; }
html.light-mode .lc-tabs:hover { scrollbar-color: rgba(0, 0, 0, 0.22) transparent; }
html.light-mode .lc-tabs:hover::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); background-clip: padding-box; }
html.light-mode .lc-tabs:hover::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.30); background-clip: padding-box; }
.lc-tab {
  flex: 1 0 auto;
  white-space: nowrap;              /* no romper el texto → desborda y hace scroll */
  padding: 7px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.lc-tab:hover { color: var(--text); }
.lc-tab.is-active { background: var(--brand-dark); color: #fff; }
.lc-tab-panel { display: flex; flex-direction: column; gap: 12px; }
.lc-tab-panel.is-hidden { display: none; }

.livechat-contact-panel::-webkit-scrollbar { width: 4px; }
.livechat-contact-panel::-webkit-scrollbar-track { background: transparent; }
.livechat-contact-panel::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

.contact-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  padding: 24px;
}

.contact-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.contact-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contact-value {
  font-size: 0.8375rem;
  color: var(--text);
  font-weight: 500;
  word-break: break-all;
}

.contact-card .badge {
  align-self: flex-start;
}

.contact-profile-pic {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  align-self: center;
  border: 2px solid var(--border);
}

.contact-card-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.contact-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.contact-section-title {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 10px 0 4px;
  border-bottom: 1px solid var(--border);
  margin-top: 6px;
}

.contact-empty { color: var(--text-muted, #9ca3af); font-style: italic; font-size: 0.8rem; }
.contact-yes   { color: #16a34a; font-weight: 600; }
.contact-no    { color: var(--text); }

/* ── Drawer full-detail extra classes ───────────────────────── */

.drawer-section-title {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 10px 0 2px;
  border-bottom: 1px solid var(--border);
  margin-top: 4px;
}

.field-empty { color: var(--text-muted, #9ca3af); font-style: italic; }
.field-yes   { color: #16a34a; font-weight: 600; }
.field-no    { color: var(--text); }

.drawer-loading {
  padding: 12px 0;
  color: var(--text-muted, #9ca3af);
  font-size: 0.875rem;
}

.drawer-error {
  padding: 8px;
  color: #dc2626;
  background: var(--badge-danger-bg);
  border-radius: 6px;
  font-size: 0.8rem;
  margin: 8px 0;
}

/* ── Agent JSON response rendering ──────────────────────────── */
.agent-response {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.agent-thought {
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.82rem;
  color: var(--muted);
}

.agent-thought summary.agent-thought-label {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--muted-2);
  user-select: none;
  list-style: none;
  padding: 2px 0;
}

.agent-thought summary.agent-thought-label::-webkit-details-marker {
  display: none;
}

.agent-thought[open] summary.agent-thought-label {
  margin-bottom: 6px;
  color: var(--muted);
}

.agent-thought .msg-text {
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
  margin: 2px 0;
}

.agent-user-parts {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.agent-user-parts .msg-text {
  margin: 0;
}

/* Metadatos del agente por mensaje: tarea + etapa embudo */
.msg-agent-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.msg-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.msg-flag--task {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.msg-flag--done {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.msg-flag--embudo {
  background: rgba(99, 102, 241, 0.10);
  color: #4f46e5;
  border: 1px solid rgba(99, 102, 241, 0.25);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}

/* ============================================================
   Base de Conocimiento (Centro de Control)
   ============================================================ */

.kn-toolbar { flex-wrap: wrap; gap: 10px; }
.kn-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kn-search {
  padding: 7px 10px; border: 1px solid var(--control-border); border-radius: 8px;
  font-size: 0.85rem; min-width: 180px;
}
.kn-select {
  padding: 7px 10px; border: 1px solid var(--control-border); border-radius: 8px;
  font-size: 0.85rem; background: var(--surface); color: var(--text);
}

/* Badges de tipo */
.kn-tipo-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.74rem; font-weight: 600; padding: 3px 9px;
  border-radius: 10px; white-space: nowrap;
}
.kn-tipo-informacion_basica      { background: rgba(59,130,246,.12); color:#1d4ed8; border:1px solid rgba(59,130,246,.3); }
.kn-tipo-instrucciones           { background: rgba(14,165,233,.12); color:#0369a1; border:1px solid rgba(14,165,233,.3); }
.kn-tipo-promociones             { background: rgba(236,72,153,.12); color:#be185d; border:1px solid rgba(236,72,153,.3); }
.kn-tipo-informacion_corporativa { background: rgba(100,116,139,.12); color: var(--text-strong); border:1px solid rgba(100,116,139,.3); }
.kn-tipo-reglas                  { background: rgba(34,197,94,.12); color:#15803d; border:1px solid rgba(34,197,94,.3); }
.kn-tipo-restricciones           { background: rgba(239,68,68,.12); color:#b91c1c; border:1px solid rgba(239,68,68,.3); }

/* Chips de canal */
.kn-chip {
  display: inline-block; font-size: 0.72rem; padding: 2px 8px; margin: 1px 2px;
  border-radius: 10px; background: rgba(99,102,241,.1); color:#4f46e5;
  border: 1px solid rgba(99,102,241,.25);
}
.kn-chip-all { background: rgba(34,197,94,.1); color:#15803d; border-color: rgba(34,197,94,.25); }
.kn-td-chips { max-width: 200px; }
.kn-td-tema { font-weight: 600; max-width: 260px; }
.kn-td-updated { font-size: 0.78rem; color: var(--muted); }

.kn-row-expired td { opacity: 0.75; }
.kn-badge-expired {
  display:inline-block; margin-left:5px; font-size:0.7rem; font-weight:700;
  padding:2px 7px; border-radius:8px; background:rgba(239,68,68,.12);
  color:#b91c1c; border:1px solid rgba(239,68,68,.3);
}
.kn-badge-hidden {
  display:inline-block; margin-left:5px; font-size:0.7rem; font-weight:600;
  padding:2px 7px; border-radius:8px; background:rgba(245,158,11,.12);
  color:#b45309; border:1px solid rgba(245,158,11,.3);
}
.btn-danger { color:#b91c1c; border-color: rgba(239,68,68,.4); }

/* ── Wizard ── */
.kn-wizard {
  max-width: 720px; width: 95%; max-height: 92vh;
  overflow-y: auto; padding: 24px 28px;
}
.kn-wizard-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.kn-wizard-body { min-height: 280px; }

/* Campos del wizard */
.kn-form-step { display:flex; flex-direction:column; gap:0; width:100%; }
.kn-form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:20px; }
.kn-form-group:last-child { margin-bottom:4px; }

/* Campo multimedia: lista de archivos (varios) + subir/añadir */
.kn-media { display:flex; flex-direction:column; gap:10px; }
.kn-media-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.kn-media-list { display:flex; flex-direction:column; gap:10px; }
.kn-media-item {
  display:flex; flex-direction:column; gap:6px;
  padding:10px; border:1px solid var(--border-soft); border-radius:8px;
  background:var(--surface-2);
}
.kn-media-item-row { display:flex; gap:6px; align-items:center; }
.kn-media-item-row .form-input { flex:1; }
.kn-media-del { color:var(--badge-danger-fg, #ef4444); }
.kn-media-newurl { flex:1; min-width:160px; }
.kn-media-upload { cursor:pointer; display:inline-flex; align-items:center; }
.kn-media-upload.is-busy { opacity:0.6; pointer-events:none; }
.kn-media-required {
  display:flex; align-items:center; gap:6px;
  font-size:0.8rem; color:var(--muted); cursor:pointer; user-select:none;
}
.kn-media-required input { width:15px; height:15px; cursor:pointer; }
.kn-media-msg { font-size:0.8rem; color:var(--muted); }
.kn-media-ok  { font-size:0.82rem; color:var(--badge-success-fg, #22c55e); font-weight:600; }
.kn-media-err { font-size:0.82rem; color:var(--badge-danger-fg, #ef4444); font-weight:600; }

.kn-wizard .form-label {
  display:flex; align-items:center; gap:4px;
  font-size:0.83rem; font-weight:600; color: var(--text-strong);
}
.kn-wizard .form-input {
  display:block; width:100%; padding:10px 14px;
  border-radius:10px; border:2px solid var(--border);
  background: var(--surface-2); font-size:0.9rem; font-family:inherit;
  color: var(--text-strong); transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  box-sizing:border-box; outline:none;
}
.kn-wizard .form-input:focus {
  border-color:#4f46e5; background: var(--surface);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.kn-wizard .form-input::placeholder { color: var(--muted-2); font-size:0.86rem; }

.kn-textarea-sm { min-height: 90px; resize: vertical; line-height:1.55; }
.kn-textarea-md { min-height: 120px; resize: vertical; line-height:1.55; }
.kn-textarea-lg { min-height: 260px; resize: vertical; font-family:inherit; line-height:1.6; }

.kn-stepper {
  display:flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap;
}
.kn-step {
  display:flex; align-items:center; gap:6px; padding:5px 10px;
  border-radius: 14px; font-size: 0.76rem; color: var(--muted-2);
}
.kn-step-dot {
  display:inline-flex; align-items:center; justify-content:center;
  width: 20px; height: 20px; border-radius:50%;
  background: var(--control-bg-hover); color: var(--muted); font-size:0.72rem; font-weight:700;
  flex-shrink:0;
}
.kn-step.active { color:#4f46e5; font-weight:600; background: rgba(99,102,241,.08); }
.kn-step.active .kn-step-dot { background:#4f46e5; color:#fff; }
.kn-step.done .kn-step-dot { background:#22c55e; color:#fff; }
.kn-step.done { color:#15803d; }

.kn-step-question { font-weight:600; color: var(--text); margin: 4px 0 14px; }

/* Cards de tipo (paso 1) */
.kn-tipo-cards {
  display:grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.kn-tipo-card {
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding: 13px 14px; border: 2px solid var(--border); border-radius: 12px;
  background: rgba(255,255,255,0.04); cursor:pointer; text-align:left; transition: border-color .15s, box-shadow .15s;
  width:100%; box-sizing:border-box;
}
.kn-tipo-card:hover { border-color:#818cf8; background: rgba(255,255,255,0.08); }
.kn-tipo-card.selected { border-color:#4f46e5; background: rgba(99,102,241,0.12); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.kn-tipo-card-icon { font-size: 1.5rem; }

/* Canal chips — selector de canales en wizard de tareas */
.kn-channel-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.kn-channel-chip {
  padding: 5px 14px; border-radius: 20px;
  border: 1.5px solid var(--border); cursor: pointer;
  font-size: 0.82rem; color: var(--muted); background: var(--surface-2);
  font-weight: 500; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.kn-channel-chip:hover { border-color: #a5b4fc; background: var(--surface-2); color: #4f46e5; }
.kn-channel-chip.active {
  border-color: #4f46e5; background: rgba(99,102,241,.08);
  color: #4f46e5; font-weight: 700;
  box-shadow: 0 0 0 2px rgba(99,102,241,.15);
}
.kn-tipo-card-label { font-weight:700; color: var(--text-strong); font-size:0.88rem; }
.kn-tipo-card-desc { font-size:0.74rem; color: var(--muted); line-height:1.35; }

/* Tooltips de ayuda */
.kn-help {
  display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; border-radius:50%;
  background: var(--control-bg-hover); color: var(--muted); font-size:0.68rem; font-weight:700;
  cursor: help; flex-shrink:0;
}
.kn-hint-warn { margin-top:10px; padding:8px 12px; border-radius:8px; font-size:0.8rem; color:#92400e; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.25); }

/* ── Asistente de canal Telegram ─────────────────────────────────────────── */
.tg-help { display:block; margin-top:6px; font-size:0.78rem; color: var(--muted); line-height:1.4; }
.kn-warn { margin-top:10px; padding:8px 12px; border-radius:8px; font-size:0.8rem; color:#92400e; background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.30); }
.kn-ok { margin-top:10px; padding:8px 12px; border-radius:8px; font-size:0.8rem; color:#065f46; background:rgba(16,185,129,.10); border:1px solid rgba(16,185,129,.30); }

/* Reemplazo de credenciales (solo owner) en el modal de edición de canal */
.cc-creds {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.04);
}
.cc-creds-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.cc-creds-title { font-weight: 700; color: var(--text); font-size: 0.92rem; }
.cc-creds-sub { color: var(--muted); font-size: 0.8rem; line-height: 1.4; }
.cc-masked { color: var(--muted); letter-spacing: 1px; }
.cc-creds-msg {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--brand-dark);
  background: rgba(var(--brand-rgb), 0.08);
  border: 1px solid rgba(var(--brand-rgb), 0.25);
}
.cc-creds-actions { margin-top: 12px; display: flex; justify-content: flex-end; }
/* margin-bottom 24px: el CTA es lo último visible del modal Crear (el bloque no
   guiado va oculto), así que sin este aire chocaría con el borde inferior. */
.tg-cta { margin:4px 0 24px; padding:18px; border:1px dashed #38bdf8; border-radius:12px; background:rgba(56,189,248,.06); text-align:center; }
.tg-cta-title { display:inline-flex; align-items:center; justify-content:center; gap:6px; margin:0 0 14px; font-weight:700; color:#0369a1; }
.tg-url { display:block; margin-top:6px; padding:8px 10px; border-radius:8px; background:#0f172a; color:#7dd3fc; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:0.78rem; word-break:break-all; }
.tg-secret-row { display:flex; gap:8px; align-items:center; }
.tg-secret-row input { flex:1; }
.tg-review { list-style:none; margin:8px 0; padding:0; }
.tg-review li { padding:6px 0; border-bottom:1px solid var(--border); font-size:0.85rem; color: var(--text-strong); }
.tg-review li:last-child { border-bottom:none; }
.tg-result .tg-review li { border-bottom:1px solid var(--border); }
.kn-required { color:#b91c1c; font-size:0.76rem; font-weight:600; }
.kn-optional { color: var(--muted-2); font-size:0.76rem; }

/* Duplicados */
.kn-dup-error { margin-top:6px; font-size:0.8rem; color:#b91c1c; font-weight:600; }
.kn-dup-warn {
  margin-top:8px; padding:8px 12px; border-radius:8px; font-size:0.8rem;
  background: rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.3); color:#92400e;
}
.kn-dup-warn ul { margin: 4px 0 0 18px; }

/* Canales (paso 4) */
.kn-check { display:flex; align-items:center; gap:6px; padding:5px 0; font-size:0.85rem; color: var(--text-strong); cursor:pointer; }
.kn-channel-list { margin-left: 18px; border-left: 2px solid var(--border); padding-left: 12px; }
.kn-channel-type { font-size:0.7rem; color: var(--muted-2); margin-left:6px; }
.kn-fecha-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.kn-date { max-width: 170px; }
.kn-fecha-chips { display:flex; gap:6px; flex-wrap:wrap; }
.kn-chip-btn {
  padding: 4px 10px; font-size:0.76rem; border-radius: 12px;
  border:1px solid var(--control-border); background: var(--surface-2); color: var(--text-strong); cursor:pointer;
}
.kn-chip-btn:hover { background: var(--brand-soft-bg); border-color:#a5b4fc; }

/* Revisión (paso 5) */
.kn-preview-index {
  padding: 12px 14px; border:1px solid var(--border); border-radius:10px;
  background: var(--surface-2); margin-bottom:10px;
}
.kn-preview-index strong { display:block; margin-top:6px; color: var(--text-strong); }
.kn-preview-desc { margin:4px 0 0; font-size:0.82rem; color: var(--muted); }
.kn-preview-detail { margin: 8px 0; font-size: 0.82rem; }
.kn-preview-detail summary { cursor:pointer; color:#4f46e5; font-weight:600; padding:4px 0; }
.kn-preview-content {
  white-space: pre-wrap; background: var(--surface-2); padding:10px 12px;
  border-radius:8px; font-size:0.78rem; max-height: 220px; overflow-y:auto;
}
.kn-human-summary {
  margin-top:10px; padding:10px 14px; border-radius:10px; font-size:0.85rem;
  background: rgba(34,197,94,.07); border:1px solid rgba(34,197,94,.25); color:#14532d;
}
.kn-edit-toggles { margin-top:12px; display:flex; gap:18px; }

/* Conflictos */
.kn-conflict {
  padding: 14px 16px; border-radius:10px; margin-bottom: 10px;
  background: rgba(245,158,11,.07); border:1px solid rgba(245,158,11,.35);
}
.kn-conflict-title { margin: 0 0 8px; color:#92400e; }
.kn-conflict-list { margin: 6px 0 10px 16px; font-size:0.84rem; }
.kn-similarity { color: var(--muted-2); font-size:0.76rem; }
.kn-llm-explain {
  padding:8px 12px; background: var(--surface); border-radius:8px;
  border:1px solid rgba(245,158,11,.3); font-size:0.84rem; color: var(--text-strong);
}

/* Historial */
.kn-history { max-width: 640px; width: 95%; max-height: 85vh; overflow-y:auto; padding: 22px 26px; }
.kn-hist-list { display:flex; flex-direction:column; gap:6px; }
.kn-hist-item {
  border:1px solid var(--border); border-radius:10px; padding:8px 12px; font-size:0.84rem;
}
.kn-hist-item summary { cursor:pointer; }
.kn-hist-action { font-weight:700; color:#4f46e5; }
.kn-hist-date { float:right; color: var(--muted-2); font-size:0.76rem; }
.kn-hist-field { margin: 8px 0 0 8px; }
.kn-hist-fieldname { font-weight:600; font-size:0.78rem; color: var(--text-strong); }
.kn-hist-diff { display:flex; gap:8px; align-items:flex-start; margin-top:2px; flex-wrap:wrap; }
.kn-hist-old {
  background: rgba(239,68,68,.08); color:#991b1b; padding:2px 8px;
  border-radius:6px; font-size:0.76rem; max-width:45%; overflow-wrap:anywhere;
}
.kn-hist-new {
  background: rgba(34,197,94,.08); color:#166534; padding:2px 8px;
  border-radius:6px; font-size:0.76rem; max-width:45%; overflow-wrap:anywhere;
}
.kn-hist-arrow { color: var(--muted-2); }
.kn-hist-note { font-size:0.8rem; color: var(--muted); margin:6px 0 0; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 480px) {
  .login-card {
    padding: 28px 24px;
  }

  .app-header, .page-header {
    padding: 0 16px;
  }

  .app-main, .page-content {
    padding: 20px 16px;
  }

  .modules-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .greeting-title {
    font-size: 1.5rem;
  }

  .home-greeting {
    padding: 28px 24px;
  }
}

/* ============================================================
   CAMPAÑAS MASIVAS
   ============================================================ */

.campaigns-page {
  padding: 28px 32px;
}

.campaigns-header {
  margin-bottom: 20px;
}

.campaigns-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}

.campaigns-subtitle {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0;
}

/* Los avisos del módulo salen por el toast global (ver .toast-host). */

/* ── Tabs: SEGMENTED estándar, estilo en el bloque canónico ── */
/* Icono (iconset) o emoji de la pestaña, alineado con el texto del label. */
.camp-tab svg { vertical-align: -0.15em; }

/* ── Content ── */
.camp-content {
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.camp-empty {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 40px 0;
}

/* ── Detalle de campaña: rejilla de metadatos ── */
.camp-detail-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 16px;
  margin-bottom: 1rem;
}
.camp-detail-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.camp-detail-counts { display: flex; gap: 6px; flex-wrap: wrap; }
.camp-detail-export { margin-left: auto; display: flex; gap: 6px; }
.camp-cell-err {
  max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--muted); font-size: 0.8rem;
}
.camp-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}
.camp-detail-k {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.camp-detail-v {
  font-size: 0.9rem;
  color: var(--text-strong);
  font-weight: 600;
  word-break: break-word;
}

/* ── Badges ── */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-green  { background: rgba(16,185,129,0.15); color: #34d399; }
.badge-yellow { background: rgba(245,158,11,0.16);  color: #fbbf24; }
.badge-red    { background: rgba(239,68,68,0.15);   color: #f87171; }
.badge-blue   { background: rgba(59,130,246,0.16);  color: #60a5fa; }
.badge-gray   { background: rgba(148,163,184,0.18); color: #cbd5e1; }
.badge-type   { background: rgba(139,92,246,0.16);  color: #a78bfa; }

/* ── Table ── */
.camp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.camp-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.camp-table td {
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: middle;
}

.camp-table tr:last-child td { border-bottom: none; }
.camp-table tr:hover td      { background: rgba(255,255,255,0.04); }

.camp-cell-title { font-weight: 600; color: var(--text); margin-bottom: 2px; }
.camp-cell-sub   { font-size: 0.78rem; color: var(--muted); }

.camp-date { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }

/* ── Progress bar ── */
.camp-progress {
  height: 6px;
  background: var(--control-bg-hover);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
  min-width: 80px;
}

.camp-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-dark));
  border-radius: 3px;
  transition: width 0.4s ease;
  min-width: 2px;
}

.camp-progress-label {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

.camp-failed-count { color: #dc2626; }

.camp-spinner {
  display: inline-block;
  animation: campPulse 1s ease-in-out infinite;
  color: var(--brand);
}

@keyframes campPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ── Action buttons ── */
.camp-actions { white-space: nowrap; }

.camp-btn {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  margin-right: 4px;
}

.camp-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.camp-btn--primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.camp-btn--primary:hover:not(:disabled) { background: var(--brand-dark); }

.camp-btn--warn    { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.camp-btn--warn:hover:not(:disabled)    { background: #d97706; }

.camp-btn--danger  { background: var(--control-bg); color: var(--badge-danger-fg); border-color: rgba(239,68,68,0.45); }
.camp-btn--danger:hover:not(:disabled)  { background: var(--badge-danger-bg); }

.camp-btn--secondary { background: var(--control-bg); color: var(--text); border-color: var(--control-border); }
.camp-btn--secondary:hover:not(:disabled) { background: var(--control-bg-hover); border-color: var(--muted); color: var(--text-strong); }

.camp-btn--sm      { padding: 4px 10px; font-size: 0.78rem; }

.camp-btn--lg      { padding: 10px 24px; font-size: 0.95rem; }

/* ── Form ── */
.camp-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.camp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.camp-field        { display: flex; flex-direction: column; gap: 6px; }
.camp-field--full  { grid-column: 1 / -1; }

.camp-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

.camp-hint-inline {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.78rem;
  margin-left: 6px;
}

.camp-hint {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 2px 0 0;
}

.camp-input,
.camp-select,
.camp-textarea {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--text);
  background: var(--surface);
  transition: border-color 0.15s;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.camp-input:focus,
.camp-select:focus,
.camp-textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb),0.15);
}

.camp-input:disabled,
.camp-select:disabled,
.camp-textarea:disabled { background: var(--surface-2); color: var(--muted); }

.camp-textarea     { resize: vertical; min-height: 80px; }
.camp-textarea--csv { font-family: 'Courier New', monospace; font-size: 0.8rem; }

.camp-csv-count {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand);
  margin-top: 4px;
}

.camp-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.camp-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

/* ── Templates tab ── */
.camp-templates { }

.camp-templates-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}

.camp-templates-toolbar .camp-select { max-width: 280px; }

.camp-template-name { font-weight: 500; font-family: monospace; font-size: 0.85rem; }
.camp-vars-count    { text-align: center; font-weight: 600; color: #7c3aed; }
.camp-sync-time     { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }

/* ── Config tab ── */
.camp-config { }

.camp-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.camp-channels-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.camp-channel-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.camp-channel-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.camp-channel-name   { font-weight: 700; color: var(--text); }
.camp-channel-nameid { font-family: monospace; font-size: 0.8rem; color: var(--muted); }
.camp-channel-checked { font-size: 0.78rem; color: var(--muted); width: 100%; }
.camp-channel-err    { color: #dc2626; }

.camp-channel-creds {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}

.camp-creds-masked {
  font-size: 0.78rem;
  color: var(--muted);
  font-family: monospace;
}

.camp-channel-actions { flex-shrink: 0; }

.camp-channel-form { margin-top: 8px; }


.camp-edit-form {
  flex-basis: 100%;
  width: 100%;
  margin-top: 12px;
  padding: 14px;
  background: var(--surface);
  border: 1px dashed var(--primary);
  border-radius: 8px;
}

.camp-edit-title {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 10px;
}

.camp-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* ── Utility: toggle switch ── */
.switch-field {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  cursor: pointer;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}

.form-field label.switch-field {
  display: inline-flex;
  margin-bottom: 6px;
}

.switch-field__text {
  display: inline-block;
}

/* Variante compacta: filas de toggles pequeños (multimedia, obligatorio en
   gestión de tickets). Menos peso/tamaño para que no dominen el modal. */
.switch-field--sm {
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 500;
}

.toggle-switch {
  --switch-width: 46px;
  --switch-height: 24px;
  --switch-knob-size: 18px;
  --switch-knob-offset: 3px;
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: var(--switch-width);
  height: var(--switch-height);
  cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--muted-2) 40%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 999px;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  width: var(--switch-knob-size);
  height: var(--switch-knob-size);
  border-radius: 50%;
  background: #fff;
  top: var(--switch-knob-offset);
  left: var(--switch-knob-offset);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.22);
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.3s ease;
}
.toggle-switch input:focus-visible + .toggle-slider {
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.18);
}
.toggle-switch input:checked + .toggle-slider {
  background: color-mix(in srgb, var(--brand) 72%, #ffffff 8%);
  border-color: color-mix(in srgb, var(--brand) 82%, #ffffff 6%);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(22px);
}
.toggle-switch input:disabled + .toggle-slider {
  opacity: 0.62;
  cursor: not-allowed;
}
.toggle-switch--sm {
  --switch-width: 32px;
  --switch-height: 18px;
  --switch-knob-size: 12px;
  --switch-knob-offset: 3px;
}
.toggle-switch--sm input:checked + .toggle-slider::before { transform: translateX(14px); }

/* ── Utility: small buttons ── */
.btn-xs {
  font-size: 0.75rem; padding: 3px 10px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text); cursor: pointer; white-space: nowrap;
}
.btn-xs:hover { background: var(--border); }
.btn-link-xs {
  font-size: 0.75rem; padding: 0 4px; border: none; background: none;
  color: var(--brand); cursor: pointer; text-decoration: underline;
}
.btn-link-xs:hover { color: var(--brand-dark); }

/* ── Utility: status chips ── */
.status-chip {
  font-size: 0.7rem; padding: 2px 8px; border-radius: 999px;
  font-weight: 600; white-space: nowrap;
}
.chip-active { background: rgba(16,185,129,0.15); color: #34d399; }
.chip-off    { background: rgba(239,68,68,0.15);  color: #f87171; }

/* ── Herramientas panel ── */
.tools-panel { padding: 24px; display: flex; flex-direction: column; gap: 12px; }

/* Header con botón agregar */
.tools-list-header { display: flex; justify-content: flex-end; padding-bottom: 4px; }

/* Botón peligro pequeño en tarjeta */
.btn-danger-xs {
  padding: 3px 10px; font-size: 0.75rem; border-radius: 6px; border: none; cursor: pointer;
  background: var(--badge-danger-bg); color: var(--badge-danger-fg); font-weight: 600; transition: background 0.15s;
}
.btn-danger-xs:hover { background: rgba(239,68,68,0.3); }

/* Formulario crear MCP */
.tools-create-form { display: flex; flex-direction: column; gap: 14px; padding: 8px 0; }
.tools-create-field { display: flex; flex-direction: column; gap: 4px; }
.tools-create-field label { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.tools-create-field .form-hint { font-size: 0.72rem; color: var(--muted-2); }
.tools-create-row { display: flex; gap: 16px; }
.tools-create-row .tools-create-field { flex: 1; }

.tools-feedback {
  padding: 8px 14px; background: var(--badge-success-bg); color: var(--badge-success-fg);
  border-radius: 8px; font-size: 0.85rem; font-weight: 500;
}

.tools-list { display: flex; flex-direction: column; gap: 12px; }

.tools-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
  transition: opacity 0.2s;
}
.tools-card--off { opacity: 0.6; }

.tools-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; gap: 12px; flex-wrap: wrap;
}
.tools-card-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tools-mcp-id    { font-weight: 700; font-size: 0.95rem; }
.tools-mcp-type  { font-size: 0.78rem; color: var(--muted); }

.health-badge {
  font-size: 0.7rem; font-weight: 600; padding: 2px 10px;
  border-radius: 999px; white-space: nowrap;
}
.health-badge--ok       { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.health-badge--error    { background: var(--badge-danger-bg); color: var(--badge-danger-fg); }
.health-badge--timeout  { background: var(--badge-warn-bg); color: var(--badge-warn-fg); }
.health-badge--internal { background: var(--badge-purple-bg); color: var(--badge-purple-fg); }
.health-badge--unknown  { background: var(--panel-2); color: var(--muted); }
.health-ms { font-weight: 400; font-size: 0.68rem; }

.tools-card-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.tools-card-meta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 8px 18px 14px; border-top: 1px solid var(--border);
  font-size: 0.82rem; color: var(--muted);
}
.tools-meta-ch    { display: flex; align-items: center; gap: 4px; }
.tools-meta-check { font-size: 0.78rem; }

.tools-tools-grid {
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--border);
}
.tools-tool-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; border-bottom: 1px solid var(--border);
  font-size: 0.85rem; flex-wrap: wrap;
}
.tools-tool-row:last-child { border-bottom: none; }
.tools-tool-row--off { opacity: 0.55; }
.tools-tool-name { font-weight: 600; min-width: 140px; }
.tools-tool-ch   { color: var(--muted); flex: 1; font-size: 0.78rem; }
.tools-tool-acts { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.tools-key-note {
  margin: 12px 0 8px; font-size: 0.82rem; color: var(--muted);
}

.tools-channels-body { padding: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.tools-channels-opts { display: flex; flex-direction: column; gap: 6px; padding-left: 8px; }
.tools-channel-opt {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem; cursor: pointer;
}
.tools-channel-opt input { cursor: pointer; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .campaigns-page { padding: 20px 16px; }
  .camp-form-grid { grid-template-columns: 1fr; }
  .camp-field--full { grid-column: 1; }
  .camp-table th, .camp-table td { padding: 8px 8px; }
  .camp-channel-card { flex-direction: column; }
  .camp-channel-creds { flex-wrap: wrap; }
  .camp-tabs { flex-wrap: wrap; width: 100%; }
  .camp-template-actions .camp-btn { flex: 1 1 180px; }
}

/* ═══════════════════════════════════════════════════════════════
   Contacts Page — redesign
   ═══════════════════════════════════════════════════════════════ */

.contacts-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--bg);
}

/* ── Header card ── */
.contacts-hdr {
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-dark) 65%, var(--brand-dark) 100%);
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.contacts-hdr-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.contacts-hdr-icon {
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.15);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.contacts-hdr-title {
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

.contacts-hdr-sub {
  color: rgba(255,255,255,0.65);
  font-size: 0.78rem;
  margin: 3px 0 0;
}

.btn-back-contacts {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 7px 14px;
  transition: background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-back-contacts:hover { background: rgba(255,255,255,0.22); }

.contacts-toolbar {
  position: relative;               /* ancla del popover de filtros */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Padding horizontal = el de .contacts-content (32px) para que la toolbar
     quede alineada con la tabla de abajo. Sin padding inferior: la separación
     con la tabla la pone .contacts-content y así queda en los 16px del resto
     de módulos (antes se sumaban los dos y daba 40px). */
  padding: 16px 32px 0;
}

/* ── TOOLBAR ESTÁNDAR ─────────────────────────────────────────────────────────
   Un solo dialecto para todos los módulos: barra de búsqueda redondeada con la
   lupa decorativa dentro, y a su derecha los iconos de acción SIN contenedor
   (filtros, limpiar filtros, refrescar). El hover levanta el icono, no pinta
   una caja detrás. Añadir un módulo = reusar estas clases, no crear otras. */
.contacts-search-form {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  max-width: 520px;
}

/* Botón de filtros (embudo) — ancla del contador de filtros activos */
.contacts-filter-btn { position: relative; }
.contacts-filter-btn.is-active { color: var(--brand); }
.contacts-filter-btn.is-active svg { transform: translateY(-2px); }
.contacts-filter-count {
  position: absolute; top: 0; right: 0;
  min-width: 15px; height: 15px; padding: 0 3px;
  background: var(--brand); color: #fff;
  border-radius: 8px; font-size: 0.6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}

/* Envoltorio del botón de limpiar: recibe el hover (y con él el tooltip y el
   cursor) cuando el botón está deshabilitado y no genera eventos propios. */
.tb-icon-wrap { display: inline-flex; }
.tb-icon-wrap.is-disabled { cursor: not-allowed; }

/* Popover de filtros (canal + estado) */
.contacts-filters-popover {
  position: absolute; top: 62px; left: 32px; z-index: 41;
  width: min(420px, calc(100% - 64px));
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px;
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}
.contacts-fpop-section { display: flex; flex-direction: column; gap: 8px; }
.contacts-fpop-title {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted-2);
}
/* Chips dentro del popover: sin banda propia, permiten envolver */
.contacts-filters-popover .contacts-channel-bar {
  background: transparent; border: none; padding: 0;
  flex-wrap: wrap; overflow: visible;
}
.contacts-filters-popover .contacts-sc-wrap { flex-wrap: wrap; }

/* Barra de búsqueda: pastilla redondeada. La lupa es decorativa y va DENTRO,
   pegada a la derecha, como background-image — así no hay que tocar el marcado
   de cada módulo. Es gris neutro a propósito: se lee igual en ambos temas. */
.contacts-search-input {
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: 999px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.875rem;
  outline: none;
  flex: 1;
  min-width: 0;
  padding: 10px 40px 10px 18px;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.contacts-search-input::placeholder { color: var(--muted-2); }
.contacts-search-input:focus {
  background-color: var(--control-bg-hover);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb),0.12);
}

/* Iconos de acción de la toolbar: sin caja. Solo el icono, y el hover lo
   levanta y lo tiñe de marca. Sirve para filtros, limpiar y refrescar. */
.contacts-refresh-btn {
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  height: 34px;
  width: 34px;
  justify-content: center;
  flex-shrink: 0;
}
.contacts-refresh-btn svg { transition: transform 0.15s ease, color 0.15s ease; }
.contacts-refresh-btn:hover:not(:disabled) { color: var(--brand); }
.contacts-refresh-btn:hover:not(:disabled) svg { transform: translateY(-2px); }
.contacts-refresh-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }
/* Deshabilitado: no captura el ratón, así el envoltorio muestra el tooltip. */
.contacts-refresh-btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

/* ── Channel chips bar ── */
.contacts-channel-bar {
  background: #0f172a;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 24px;
  scrollbar-width: none;
}
.contacts-channel-bar::-webkit-scrollbar { display: none; }

.ch-chip {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  gap: 6px;
  padding: 6px 14px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
}
.ch-chip:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--muted); }
.ch-chip--on {
  background: var(--brand-soft-bg);
  border-color: var(--brand);
  color: var(--brand-dark);
  font-weight: 600;
}
.ch-chip-icon {
  flex-shrink: 0;
  height: 16px;
  object-fit: contain;
  width: 16px;
}
.ch-chip-count {
  background: rgba(0,0,0,0.07);
  border-radius: 999px;
  color: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 7px;
}
.ch-chip--on .ch-chip-count { background: rgba(var(--brand-rgb),0.15); }

/* ── Status sub-bar ── */
.contacts-subbar {
  background: #0f172a;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
}

.contacts-sc-wrap {
  display: flex;
  gap: 6px;
}

.sc-chip {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 5px 14px;
  transition: all 0.15s;
}
.sc-chip:hover { border-color: var(--muted-2); color: var(--text); }
.sc-chip--on {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: white;
  font-weight: 600;
}

.contacts-count-label {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* ── Content wrapper ── */
.contacts-content {
  padding: 16px 32px 24px;
  flex: 1;
}

/* ── Table — contact cell ── */
.contact-cell {
  align-items: center;
  display: flex;
  gap: 12px;
}

.contact-avatar {
  align-items: center;
  border-radius: 50%;
  color: white;
  display: flex;
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 700;
  height: 38px;
  justify-content: center;
  letter-spacing: 0.02em;
  width: 38px;
}

.contact-avatar-pic {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Avatar color variants */
.av-indigo  { background: #4f46e5; }
.av-emerald { background: #059669; }
.av-violet  { background: #7c3aed; }
.av-amber   { background: #d97706; }
.av-rose    { background: #e11d48; }
.av-sky     { background: #0284c7; }

.contact-cell-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-cell-name {
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
}

.contact-cell-phone {
  color: var(--muted);
  font-size: 0.75rem;
}

/* ── Status badges (contacts) ── */
.contact-sbadge {
  border-radius: 999px;
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  white-space: nowrap;
}
.contact-sbadge--blocked  { background: rgba(239,68,68,0.1);  color: #dc2626; }
.contact-sbadge--verified { background: rgba(16,185,129,0.1); color: #059669; }
.contact-sbadge--pending  { background: var(--surface-2); color: var(--muted); }
.contact-sbadge--paused   { background: rgba(245,158,11,0.12); color: #d97706; }

.contact-estado-cell { display: flex; flex-direction: column; gap: 3px; }

/* ── Contracts / friendship / actions ── */
.contracts-count {
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 500;
}

.friendship-val {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  display: inline-flex;
  font-size: 0.84rem;
  font-weight: 600;
  justify-content: center;
  min-width: 32px;
  padding: 3px 8px;
}

/* Acciones de fila de Contactos: ver .pg-actions / .pg-btn. */

/* ── Campañas: plantilla row + vista previa ────────────────────────────────── */

.camp-template-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.camp-template-row .camp-select { flex: 1; }

.camp-btn--outline {
  background: transparent;
  border: 1.5px solid var(--brand);
  color: var(--brand);
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0 14px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.camp-btn--outline:hover:not(:disabled) {
  background: var(--brand);
  color: #fff;
}
.camp-btn--outline:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.camp-preview-label {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 10px;
}
.camp-preview-label code {
  background: var(--surface-2);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.78rem;
  color: #7c3aed;
}

.camp-preview-phone {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  max-width: 380px;
}

.camp-preview-bubble {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 12px 12px 12px 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  overflow: hidden;
  font-size: 0.88rem;
  color: var(--text);
}

.camp-preview-media {
  background: #d1fae5;
  color: #065f46;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 10px 14px;
  border-bottom: 1px solid #a7f3d0;
}

.camp-preview-header {
  background: var(--badge-success-bg);
  color: #14532d;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 10px 14px;
  border-bottom: 1px solid #bbf7d0;
}

.camp-preview-body {
  padding: 12px 14px;
  white-space: pre-wrap;
  line-height: 1.55;
  color: var(--text-strong);
}

.camp-preview-footer {
  padding: 6px 14px 10px;
  font-size: 0.77rem;
  color: var(--muted-2);
  border-top: 1px solid var(--border-soft);
}

.camp-preview-btns {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 2px;
}

/* ── Header multimedia: estado + subida ── */
.camp-hdr-media {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.camp-hdr-media-head { font-size: 0.85rem; color: var(--text); }
.camp-hdr-media-ok   { font-size: 0.82rem; color: var(--badge-success-fg); font-weight: 600; }
.camp-hdr-media-warn { font-size: 0.82rem; color: var(--badge-warn-fg); font-weight: 600; }
.camp-hdr-media-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.camp-hdr-media-msg  { font-size: 0.82rem; color: var(--muted); }

/* Mapeo de variables de plantilla → campo del CSV */
.camp-varmap { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface-2); }
.camp-varmap-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.camp-varmap-token {
  font-family: monospace; font-size: 0.82rem; font-weight: 700;
  color: var(--brand); background: var(--brand-soft-bg);
  padding: 3px 8px; border-radius: 6px; min-width: 72px; text-align: center;
}
.camp-varmap-arrow { color: var(--muted); }
.camp-varmap-select {
  flex: 1 1 220px; min-width: 180px; min-height: 36px;
  padding: 8px 10px; border: 1px solid var(--control-border); border-radius: 8px;
  background: var(--control-bg); color: var(--text); font-size: 0.86rem; font-family: inherit;
}
.camp-varmap-select:focus { outline: none; border-color: var(--brand-dark); }

/* Picker de archivo del storage para el header media de la campaña */
.camp-hdr-storage { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 8px; }
.camp-hdr-storage-title { font-size: 0.8rem; color: var(--muted); margin-bottom: 6px; text-align: center; }
.camp-hdr-storage-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.camp-hdr-storage-input {
  flex: 1 1 140px; min-width: 120px; min-height: 34px; padding: 7px 10px;
  border: 1px solid var(--control-border); border-radius: 8px;
  background: var(--control-bg); color: var(--text); font-size: 0.84rem; font-family: inherit;
}
.camp-hdr-storage-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; }
.camp-hdr-storage-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 0.84rem; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px;
}
.camp-hdr-storage-item--off { opacity: 0.55; }
.camp-hdr-storage-use { padding: 2px 10px; }
.camp-hdr-storage-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0; font-size: 0.82rem; }
.camp-crumb { background: none; border: none; color: var(--brand); cursor: pointer; padding: 0 2px; font: inherit; }
.camp-crumb:hover { text-decoration: underline; }
.camp-crumb-sep { color: var(--muted); }
.camp-hdr-storage-folder { cursor: pointer; }
.camp-hdr-storage-folder:hover { background: var(--control-bg-hover); }

.camp-preview-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--brand-dark);
  cursor: default;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 9px 14px;
  text-align: center;
}

.camp-preview-empty {
  color: var(--muted);
  font-size: 0.82rem;
  padding: 8px 0;
}

/* ── Campañas: carga de archivo CSV / Excel ────────────────────────────────── */

.camp-file-zone {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px dashed #cbd5e1;
  border-radius: 8px;
  padding: 14px 18px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--muted);
  transition: border-color 0.2s, background 0.2s;
  background: var(--surface-2);
  user-select: none;
}
.camp-file-zone:hover {
  border-color: var(--brand);
  background: var(--brand-soft-bg);
  color: var(--brand);
}
.camp-file-zone--has-file {
  border-color: #10b981;
  background: var(--badge-success-bg);
  color: #065f46;
  font-weight: 600;
}
.camp-file-icon {
  font-size: 1.1rem;
}

.camp-template-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.camp-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  color: var(--muted-2);
  font-size: 0.75rem;
}
.camp-divider::before,
.camp-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border);
}

/* ── Contact edit button (livechat panel) ── */
.btn-edit-contact {
  background: var(--surface-2);
  border: 1px solid var(--control-border);
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 6px;
  padding: 4px 12px;
  transition: background 0.15s;
}
.btn-edit-contact:hover { background: var(--control-bg-hover); }

/* ── Contact edit form (livechat panel) ── */
.contact-edit-form {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
  padding: 14px;
}
.edit-field-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.edit-field-row label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}
.edit-field-row input[type="text"],
.edit-field-row input[type="email"] {
  background: var(--surface);
  border: 1px solid var(--control-border);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.84rem;
  outline: none;
  padding: 6px 10px;
  transition: border-color 0.15s;
}
.edit-field-row input[type="text"]:focus,
.edit-field-row input[type="email"]:focus { border-color: #6366f1; }

.edit-field-row--check label {
  align-items: center;
  color: var(--text);
  display: flex;
  font-size: 0.84rem;
  font-weight: 500;
  gap: 6px;
}
.edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.btn-save-contact {
  background: #4f46e5;
  border: none;
  border-radius: 7px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 6px 18px;
  transition: background 0.15s;
}
.btn-save-contact:hover:not(:disabled) { background: #4338ca; }
.btn-save-contact:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-cancel-edit {
  background: var(--surface-2);
  border: 1px solid var(--control-border);
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 6px 14px;
  transition: background 0.15s;
}
.btn-cancel-edit:hover { background: var(--control-bg-hover); }

/* ── Badge paused in livechat contact panel ── */
.badge--paused { background: rgba(245,158,11,0.15); color: #b45309; }

/* ============================================================
   Ticket picker modal (livechat — Asignarme)
   ============================================================ */
.ticket-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ticket-picker-modal {
  background: var(--surface-overlay);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  width: 480px;
  max-width: 95vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ticket-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.ticket-picker-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0;
}

.btn-close-picker {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--muted-2);
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  transition: color 0.15s;
}
.btn-close-picker:hover { color: var(--text-strong); }

.ticket-picker-list {
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ticket-picker-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ticket-picker-item:hover {
  background: var(--brand-soft-bg);
  border-color: var(--brand);
}

.ticket-picker-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.ticket-picker-ref {
  font-size: 0.72rem;
  font-weight: 700;
  color: #6366f1;
  background: rgba(99,102,241,0.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
}

.ticket-picker-type {
  font-size: 0.72rem;
  color: var(--muted);
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
}

.ticket-picker-title {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-strong);
  margin-bottom: 6px;
  line-height: 1.3;
}

.ticket-picker-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ticket-picker-status {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
}
.tps--abierto  { background: rgba(59,130,246,0.1);  color: #2563eb; }
.tps--tomado   { background: rgba(245,158,11,0.1);  color: #d97706; }
.tps--en_proceso { background: rgba(139,92,246,0.1); color: #7c3aed; }

.ticket-picker-taken {
  font-size: 0.75rem;
  color: var(--muted);
}

.ticket-picker-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted-2);
  font-size: 0.875rem;
}

/* ============================================================
   Ticket detail inline panel (livechat — badge click)
   ============================================================ */
.badge--ticket-active {
  cursor: pointer;
  border: none;
  font-size: inherit;
  padding: 3px 10px;
  border-radius: 9999px;
  transition: background 0.15s;
}
.badge--ticket-active:hover { background: rgba(99,102,241,0.20); }
.badge--ticket-open { background: rgba(99,102,241,0.22); outline: 2px solid rgba(99,102,241,0.35); }

/* ── Modal cierre de ticket (livechat) ───────────────────────────────── */
.lc-close-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  z-index: 800;
}
.lc-close-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, 94vw);
  background: var(--surface-overlay);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.08);
  z-index: 801;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: lcModalIn 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes lcModalIn {
  from { opacity: 0; transform: translate(-50%, -52%) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.lc-close-modal-header {
  padding: 18px 46px 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  position: relative;
}
.lc-close-modal-ticket-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 6px;
}
.lc-close-modal-ticket-ref {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 700;
  color: #4f46e5;
}
.lc-close-modal-ticket-domain {
  font-size: 0.71rem;
  color: var(--muted);
  background: var(--control-bg-hover);
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.lc-close-modal-ticket-title {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.35;
}
.lc-close-modal-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: none;
  background: var(--control-bg-hover);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
  line-height: 1;
}
.lc-close-modal-x:hover { background: #cbd5e1; color: var(--text-strong); }

.lc-close-modal-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lc-close-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.lc-close-label {
  font-size: 0.71rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.lc-close-select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--control-border);
  border-radius: 7px;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text, #0f172a);
  background: var(--surface);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.lc-close-select:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
.lc-close-textarea {
  width: 100%;
  min-height: 82px;
  padding: 9px 10px;
  border: 1px solid var(--control-border);
  border-radius: 7px;
  font-family: inherit;
  font-size: 0.88rem;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  color: var(--text, #0f172a);
}
.lc-close-textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
.lc-close-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.btn-action--close-ticket {
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 8px 18px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.btn-action--close-ticket:hover:not(:disabled) { background: #b91c1c; }
.btn-action--close-ticket:disabled { opacity: 0.55; cursor: not-allowed; }

/* ============================================================
   Ticket detail modal
   ============================================================ */
.modal-card.modal-xl { max-width: 860px; }

.ticket-detail-modal .modal-header { align-items: flex-start; gap: 12px; }

.ticket-detail-title-block { flex: 1; min-width: 0; }

.ticket-detail-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.ticket-ref-badge {
  font-family: 'Roboto Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
}

.ticket-detail-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  word-break: break-word;
}

.ticket-detail-body {
  padding: 0 24px;
  overflow-y: auto;
  max-height: 62vh;
  display: flex;
  flex-direction: column;
}

.ticket-detail-section {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.ticket-detail-section:last-child { border-bottom: none; }

.ticket-detail-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 10px;
}

.ticket-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px 16px;
}

.ticket-detail-field { display: flex; flex-direction: column; gap: 3px; }

.tdl {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ticket-detail-text {
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.65;
  white-space: pre-wrap;
  background: var(--panel-2);
  border-radius: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  margin: 0;
}

/* Detalle simple clave→valor (modal de detalle de un tipo de ticket). */
.ticket-detail-body .detail-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.ticket-detail-body .detail-row:last-child { border-bottom: none; }
.detail-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.detail-value { font-size: 0.88rem; color: var(--text); line-height: 1.5; word-break: break-word; }
.detail-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-chip {
  display: inline-flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.78rem;
  color: var(--text);
}

/* Evidence */
.ticket-evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.evidence-item {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel-2);
  display: block;
  text-decoration: none;
  transition: box-shadow 0.15s;
}

.evidence-item:hover { box-shadow: var(--shadow-md); }

.evidence-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  transition: opacity 0.15s;
}

.evidence-img:hover { opacity: 0.88; }

.evidence-video {
  width: 100%;
  height: 150px;
  display: block;
  background: #000;
}

.evidence-item--audio {
  grid-column: 1 / -1;
  padding: 12px;
}

.evidence-item--audio audio { width: 100%; }

.evidence-item--file {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  color: var(--brand);
  font-size: 0.85rem;
  font-weight: 600;
}

.evidence-item--file:hover { background: var(--brand-soft-bg); }

.evidence-item--invalid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 80px;
  padding: 10px 12px;
  border: 1px dashed #fca5a5;
  background: var(--badge-danger-bg);
  color: #b91c1c;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
}
.evidence-invalid-icon { font-size: 1rem; line-height: 1; }

/* Ticket status badges (bandeja + detail) */
.status-abierto    { background: rgba(59,130,246,0.1);  color: #2563eb; }
.status-tomado     { background: rgba(139,92,246,0.1);  color: #7c3aed; }
.status-en_proceso { background: rgba(245,158,11,0.1);  color: #d97706; }
.status-escalado   { background: rgba(239,68,68,0.1);   color: #dc2626; }
.status-resuelto   { background: rgba(16,185,129,0.1);  color: #059669; }
.status-cerrado    { background: rgba(100,116,139,0.1); color: var(--muted); }

/* Priority badge */
.priority-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.priority-baja    { background: rgba(100,116,139,0.1); color: var(--muted); }
.priority-media   { background: rgba(59,130,246,0.1);  color: #2563eb; }
.priority-alta    { background: rgba(245,158,11,0.1);  color: #d97706; }
.priority-critica { background: rgba(239,68,68,0.1);   color: #dc2626; }

/* Ver button in ticket row */
.btn-detail { background: var(--brand-soft-bg); color: var(--brand-dark); border-color: #bfdbfe; }
.btn-detail:hover { background: #dbeafe; }

/* ============================================================
   Tutorial overlay
   ============================================================ */

/* Full-screen dark backdrop — blocks all pointer events on the page */
.tut-overlay {
  position: fixed;
  inset: 0;
  background: transparent;   /* en pasos con objetivo oscurece el propio elemento (spotlight) */
  z-index: 2000;
  pointer-events: all;
  transition: background 0.2s ease;
}

/* Pasos SIN objetivo: oscurecer toda la pantalla como modal */
.tut-overlay--dim {
  background: rgba(0, 0, 0, 0.68);
}

/* Elemento resaltado: "spotlight" por box-shadow gigante — oscurece todo a su
   alrededor y dibuja un anillo. No depende de ganarle el z-index a un backdrop
   opaco, así que funciona aunque el objetivo esté anidado en otro stacking
   context (el bug anterior: el resaltado quedaba invisible tras el backdrop). */
.tut-focused {
  position: relative !important;
  z-index: 2001 !important;
  pointer-events: none !important;   /* no interaction during tutorial */
  border-radius: 10px;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.68),      /* oscurece el resto de la página */
    0 0 0 4px rgba(var(--brand-rgb), 0.95) !important;  /* anillo azul del resaltado */
  animation: tut-pulse 1.6s ease-in-out infinite;
}

/* Keep sticky positioning for the header */
#tut-header.tut-focused {
  position: sticky !important;
}

/* El anillo "respira" → movimiento que atrae la mirada al elemento explicado */
@keyframes tut-pulse {
  0%, 100% {
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.68), 0 0 0 4px rgba(var(--brand-rgb), 0.95);
  }
  50% {
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.68), 0 0 0 9px rgba(var(--brand-rgb), 0.30);
  }
}

/* Tooltip card — sits above highlighted element */
.tut-card {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: min(480px, calc(100vw - 32px));
  background: var(--surface-overlay);   /* overlay flotante → casi opaco, no --surface (translúcido) */
  border-radius: 20px;
  padding: 28px 28px 24px;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(0, 0, 0, 0.06);
  z-index: 2002;
  animation: tut-slide-in 0.25s ease;
}

@keyframes tut-slide-in {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Header row: dots + counter */
.tut-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.tut-dots {
  display: flex;
  gap: 6px;
}

.tut-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--control-bg-hover);
  transition: background 0.2s, transform 0.2s;
}

.tut-dot--on {
  background: var(--brand);
  transform: scale(1.25);
}

.tut-counter {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-2);
  letter-spacing: 0.04em;
}

/* Icon */
.tut-icon {
  font-size: 2.25rem;
  margin-bottom: 12px;
  line-height: 1;
}

/* Title */
.tut-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

/* Body text */
.tut-body {
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Actions row */
.tut-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tut-btn-group {
  display: flex;
  gap: 8px;
}

.tut-btn-skip {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  font-family: inherit;
  transition: color 0.15s;
}
.tut-btn-skip:hover { color: var(--muted); }

.tut-btn-prev,
.tut-btn-next {
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
}

.tut-btn-prev {
  background: var(--surface-2);
  color: var(--muted);
}
.tut-btn-prev:hover { background: var(--control-bg-hover); }

.tut-btn-next {
  background: var(--brand);
  color: #fff;
}
.tut-btn-next:hover { background: var(--brand-dark); }

/* Modules wrapper (tutorial target) */
#tut-modules {
  /* No visual impact — only provides the highlight target id */
}

/* ============================================================
   BOTONES GLOBALES (btn-primary / btn-secondary / btn-danger)
   ============================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--brand-dark);
  color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--brand-dark-rgb),0.35); }
.btn-primary:active:not(:disabled) { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--control-bg-hover);
  color: var(--text-strong);
}
/* Hover en oscuro: aclarar levemente SIN perder el texto (antes #cbd5e1 dejaba
   texto claro sobre fondo claro = ilegible). En claro lo pisa el override de abajo. */
.btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-strong);
}
.btn-secondary:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(239,68,68,0.1);
  color: #dc2626;
  border: 1px solid rgba(239,68,68,0.25);
}
.btn-danger:hover:not(:disabled) { background: #ef4444; color: #fff; }
.btn-danger:disabled { opacity: 0.55; cursor: not-allowed; }

/* ============================================================
   PROFILE PAGE
   ============================================================ */

/* ── Layout ── */
.profile-page {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.profile-main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 28px 32px;
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── Tab nav ── */
.profile-tabs {
  display: flex;
  gap: 3px;
  margin-bottom: 24px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}

.profile-tab {
  appearance: none;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  padding: 8px 16px;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.profile-tab:hover { color: var(--text); background: var(--control-bg-hover); }
.profile-tab--active {
  background: var(--brand-dark) !important;
  color: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* ── Content area ── */
.profile-content {
  animation: fadeInUp 0.2s ease;
}

/* ── Card / form ── */
.profile-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 28px 28px;
  box-shadow: var(--shadow-md);
}

.profile-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}

/* ── Inputs scoped to profile ── */
.profile-form .form-field input,
.profile-form .form-field select,
.profile-form .form-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 9px;
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.profile-form .form-field input:focus,
.profile-form .form-field select:focus,
.profile-form .form-field textarea:focus {
  outline: none;
  border-color: var(--brand-dark);
  box-shadow: 0 0 0 3px rgba(var(--brand-dark-rgb),0.1);
  background: var(--surface);
}
.profile-form .form-field input:disabled,
.profile-form .form-field select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--surface-2);
}

/* ── Helpers ── */
.profile-hint {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0 0 18px;
  line-height: 1.5;
}
.profile-hint strong { color: var(--text); }

.profile-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* ── Info banner ── */
.info-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid rgba(var(--brand-rgb),0.3);
  background: rgba(var(--brand-rgb),0.07);
  color: var(--brand-dark);
  margin-bottom: 18px;
}

/* ── MFA ── */
.mfa-status {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 20px;
}
.mfa-status strong { color: var(--text); }

.mfa-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mfa-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── TOTP ── */
.totp-qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  padding: 20px;
  background: #fff; /* EXCEPCIÓN intencional: el QR necesita fondo claro para escanearse en ambos temas */
  border: 1.5px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}

.totp-qr-img {
  width: 200px;
  height: 200px;
  border-radius: 8px;
  display: block;
}

.totp-secret {
  display: block;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  word-break: break-all;
  color: var(--text);
  user-select: all;
}

/* ── Security questions ── */
.security-question-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .profile-main { padding: 16px; }
  .profile-tabs { width: 100%; overflow-x: auto; }
  .profile-form { padding: 18px 16px 22px; }
  .mfa-buttons { flex-direction: column; }
  .profile-row { flex-direction: column; align-items: stretch; }
  .profile-row .btn-primary,
  .profile-row .btn-secondary { width: 100%; justify-content: center; }
}

/* ── Monitor health cards ── */
.monitor-health-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.monitor-health-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  transition: box-shadow .15s;
}

.monitor-health-card:hover {
  box-shadow: 0 3px 8px rgba(0,0,0,.08);
}

.monitor-health-card-top {
  display: flex;
  align-items: center;
  gap: 7px;
}

.monitor-health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.monitor-health-dot--ok   { background: #22c55e; }
.monitor-health-dot--warn { background: #f59e0b; animation: campPulse 1.5s infinite; }
.monitor-health-dot--err  { background: #ef4444; }
.monitor-health-dot--conn { background: #94a3b8; animation: campPulse 1s infinite; }

.monitor-health-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-strong);
}

.monitor-health-status {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}

.monitor-health-latency {
  font-size: 0.68rem;
  color: var(--muted-2);
  font-family: 'JetBrains Mono', monospace;
}

/* Las barras de filtros propias de Monitor (.monitor-filters /
   .monitor-filter-field) se retiraron: las cuatro pestañas usan la toolbar
   estándar (.tickets-toolbar + embudo). */

.monitor-filter-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
}

.monitor-filter-check input {
  margin: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--brand-dark);
  cursor: pointer;
}

.monitor-filter-check span {
  line-height: 1;
  white-space: nowrap;
}

.monitor-click-row {
  cursor: pointer;
}

.monitor-detail-row td {
  background: var(--surface-2);
}

.monitor-detail-panel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 6px 0;
}

.monitor-detail-section {
  margin-bottom: 12px;
}

.monitor-detail-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}

.monitor-detail-text {
  display: block;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text-strong);
  font-size: 0.84rem;
}

.monitor-terminal {
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 14px 16px;
  min-height: 320px;
  max-height: 560px;
  overflow: auto;
}

.monitor-log-pre {
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Log entry lines — colored by level */
.monitor-log-entry {
  padding: 2px 0;
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.55;
  border-bottom: 1px solid rgba(148, 163, 184, 0.06);
}
.monitor-log-entry--debug   { color: var(--muted); }
.monitor-log-entry--info    { color: var(--muted-2); }
.monitor-log-entry--warning { color: #fbbf24; }
.monitor-log-entry--error   { color: #f87171; }
.monitor-log-entry--critical { color: #f43f5e; font-weight: 700; }

/* Conversaciones — chat bubbles */
.monitor-context-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 0;
  max-height: 620px;
  overflow-y: auto;
}

.monitor-msg {
  display: flex;
  flex-direction: column;
  max-width: 78%;
}
.monitor-msg--user  { align-self: flex-end;  align-items: flex-end; }
.monitor-msg--agent { align-self: flex-start; align-items: flex-start; }
.monitor-msg-role {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
  text-transform: capitalize;
}
.monitor-msg-content {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
  color: var(--text-strong);
  background: var(--surface);
}
.monitor-msg--user  .monitor-msg-content {
  background: var(--brand-soft-bg);
  border-color: #bfdbfe;
  color: #1e3a5f;
  border-radius: 12px 12px 4px 12px;
}
.monitor-msg--agent .monitor-msg-content {
  border-radius: 12px 12px 12px 4px;
}

.monitor-context-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}

.monitor-context-item pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── PAGINACIÓN ESTÁNDAR ──────────────────────────────────────────────────────
   Anterior / info / Siguiente centrados bajo la tabla. El de Pagos es el
   canónico; Monitor, Tickets, Contactos y Marketplace se cuelgan de aquí.
   Añadir un módulo = sumar su clase a estas listas, no crear otro pager.
   Centrado (no pegado a la derecha) para que el bloque quede simétrico con la
   tabla, que ocupa el ancho completo. */
.monitor-pagination,
.pg-pager,
.ticket-pagination,
.audit-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.monitor-page-info,
.pg-pager > span,
.ticket-pagination-info,
.ticket-pagination-page,
.audit-page-info {
  color: var(--muted);
  font-size: 0.82rem;
}

/* Los extremos se ven bloqueados, sin texto que lo explique. */
.monitor-pagination button:disabled,
.pg-pager button:disabled,
.ticket-pagination button:disabled,
.audit-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.monitor-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.monitor-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.monitor-channel-card {
  text-align: left;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.monitor-channel-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 14px 34px rgba(var(--brand-dark-rgb),0.18);
}

.monitor-channel-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.monitor-channel-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.monitor-channel-stats div {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.monitor-channel-stats span {
  font-size: 0.7rem;
  color: var(--muted-2);
  text-transform: uppercase;
}

.monitor-channel-stats strong {
  font-size: 0.95rem;
  color: var(--text-strong);
}

.monitor-channel-footer {
  margin-top: 12px;
  font-size: 0.76rem;
  color: var(--muted-2);
}

.monitor-exec-table td,
.monitor-exec-table th {
  white-space: nowrap;
}

.monitor-provider-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.monitor-provider-openrouter { background: var(--badge-info-bg); color: var(--badge-info-fg); }
.monitor-provider-gemini { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.monitor-provider-kimi { background: var(--badge-warn-bg); color: var(--badge-warn-fg); }
.monitor-provider-deepseek { background: var(--badge-purple-bg); color: var(--badge-purple-fg); }
.monitor-provider-other { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); }

.monitor-inline-flag {
  margin-left: 6px;
}

.monitor-row-error td { background: var(--badge-danger-bg); }
.monitor-row-timeout td { background: var(--surface)7ed; }
.monitor-row-running td { background: var(--brand-soft-bg); }
.monitor-row-tool-warn td { background: var(--surface)beb; }

/* ── Monitor detail v2: header bar ────────────────────────────────── */
.monitor-detail-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  margin-bottom: 12px;
}
.monitor-detail-meta-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.monitor-detail-meta-key {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted-2);
  letter-spacing: .04em;
}
.monitor-detail-meta-val {
  font-size: 0.82rem;
  color: var(--text-strong);
}
.monitor-detail-meta-val--bold { font-weight: 700; }

/* ── Token grid ────────────────────────────────────────────────────── */
.monitor-token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.monitor-token-grid--sm {
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
}
.monitor-token-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: center;
  gap: 4px;
  min-width: 0;
}
.monitor-token-cell--total {
  border-color: var(--brand);
  background: var(--brand-soft-bg);
}
.monitor-token-cell--prompt { border-color: var(--brand-soft-fg); background: var(--brand-soft-bg); }
.monitor-token-cell--compl  { border-color: #86efac; background: var(--badge-success-bg); }
.monitor-token-cell--think  { border-color: #d8b4fe; background: var(--badge-purple-bg); }
.monitor-token-cell-label {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: .04em;
}
.monitor-token-cell-val {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-strong);
}
.monitor-token-cell--total  .monitor-token-cell-val { color: var(--brand-dark); }
.monitor-token-cell--prompt .monitor-token-cell-val { color: var(--brand-dark); }
.monitor-token-cell--compl  .monitor-token-cell-val { color: #15803d; }
.monitor-token-cell--think  .monitor-token-cell-val { color: #7c3aed; }

/* ── Media analysis input block ───────────────────────────────────── */
.monitor-media-block {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--badge-warn-bg);
  border: 1px solid #fde68a;
  border-radius: 8px;
}
.monitor-media-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 0.83rem;
  color: #78350f;
  margin: 8px 0 0;
}
.monitor-media-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(253,230,138,0.5);
  border-radius: 5px;
}

/* ── Round accordion ──────────────────────────────────────────────── */
.monitor-round-accordion {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.monitor-round-accordion-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  background: var(--surface-2);
  transition: background 0.12s;
}
.monitor-round-accordion-header:hover { background: var(--surface-2); }
.monitor-round-toggle {
  font-size: 0.82rem;
  color: var(--muted);
  width: 14px;
  flex-shrink: 0;
}
.monitor-round-accordion-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-strong);
}
.monitor-round-accordion-meta {
  font-size: 0.78rem;
  color: var(--muted);
  margin-left: auto;
}
.monitor-round-accordion-body {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Thinking block ───────────────────────────────────────────────── */
.monitor-thinking-block {
  background: var(--badge-purple-bg);
  border: 1px solid #e9d5ff;
  border-radius: 8px;
  padding: 10px 12px;
}

/* ── Detail panel: prevent horizontal overflow inside scrollable table ── */
.monitor-detail-panel {
  min-width: 0;
  overflow-x: hidden;
}
pre.monitor-detail-text {
  overflow-x: auto;
  max-height: 260px;
}

/* ── Tool card header + I/O two-column ───────────────────────────── */
.monitor-tool-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  margin-bottom: 10px;
}
.monitor-tool-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-strong);
}
.monitor-tool-mcp {
  font-size: 0.76rem;
  color: #6366f1;
  background: var(--brand-soft-bg);
  padding: 2px 7px;
  border-radius: 5px;
  font-weight: 600;
}
.monitor-tool-ronda,
.monitor-tool-dur {
  font-size: 0.76rem;
  color: var(--muted);
}
.monitor-tool-io {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ── Agent output error state ────────────────────────────────────── */
.monitor-output-error {
  background: var(--badge-danger-bg);
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 12px 14px;
  color: #991b1b;
  font-size: 0.88rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Media output blocks ─────────────────────────────────────────── */
.monitor-media-out-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.monitor-media-out-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.84rem;
}
.monitor-media-out-type {
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--control-bg-hover);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ── Input preview in executions table ───────────────────────────── */
.monitor-exec-input-preview {
  color: var(--muted);
  font-size: 0.79rem;
  font-style: italic;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

@media (max-width: 900px) {
  .monitor-token-grid        { grid-template-columns: repeat(2, 1fr); }
  .monitor-token-grid--sm    { grid-template-columns: 1fr; }
  .monitor-tool-io           { grid-template-columns: 1fr; }
  .monitor-drawer            { width: 100vw; }
}

/* ── Drawer de detalle de ejecución ─────────────────────────────────── */
.monitor-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(2px);
  z-index: 900;
}
.monitor-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(700px, 92vw);
  background: var(--surface-overlay);
  z-index: 901;
  display: flex;
  flex-direction: column;
  box-shadow: -6px 0 32px rgba(0, 0, 0, 0.14);
  animation: drawerSlideIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes drawerSlideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.monitor-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
  gap: 12px;
}
.monitor-drawer-title {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--text-strong);
}
.monitor-drawer-subtitle {
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 2px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  letter-spacing: .03em;
}
.monitor-drawer-close {
  width: 34px;
  height: 34px;
  border: none;
  background: var(--control-bg-hover);
  border-radius: 7px;
  cursor: pointer;
  font-size: 1rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
  line-height: 1;
}
.monitor-drawer-close:hover {
  background: #cbd5e1;
  color: var(--text-strong);
}
.monitor-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.monitor-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.monitor-detail-section--full {
  grid-column: 1 / -1;
}

.monitor-rounds-list,
.monitor-tools-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.monitor-round-card,
.monitor-tool-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}

.monitor-round-title,
.monitor-tool-title {
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  .monitor-detail-grid {
    grid-template-columns: 1fr;
  }

  .monitor-detail-section--full {
    grid-column: auto;
  }
}

/* ============================================================
   Workflow Visualizer (logs en vivo — vista workflow)
   ============================================================ */

.wf-view-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.wf-toggle-btn {
  padding: 5px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.wf-toggle-btn.active {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: var(--text-strong);
}

/* Container */
.wf-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 72vh;
  overflow-y: auto;
  padding-right: 4px;
}

.wf-container::-webkit-scrollbar { width: 4px; }
.wf-container::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }

/* Empty state */
.wf-empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
  background: #0f172a;
  border-radius: 10px;
}

.wf-empty-icon { font-size: 36px; margin-bottom: 10px; }
.wf-empty-state p { font-size: 0.85rem; }

/* Execution card */
.wf-card {
  background: #1a1d27;
  border: 1px solid #2e3348;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
  flex-shrink: 0;
}

.wf-card--running { border-color: #4f6ef7; box-shadow: 0 0 0 1px rgba(79,110,247,0.15); }
.wf-card--done    { border-color: #22c55e; }
.wf-card--error   { border-color: #ef4444; }

/* Card header */
.wf-card-header {
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #22263a;
  border-bottom: 1px solid #2e3348;
  flex-wrap: wrap;
}

.wf-req    { font-family: monospace; font-size: 10px; color: var(--muted); flex-shrink: 0; }
.wf-user   { font-size: 11px; color: #06b6d4; }
.wf-canal  { font-size: 11px; color: #a855f7; }
.wf-time   { font-size: 11px; color: var(--muted); margin-left: auto; }

.wf-badge  { padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.wf-badge--running { background: rgba(79,110,247,0.2);  color: #6c8af7; }
.wf-badge--done    { background: rgba(34,197,94,0.15);  color: #22c55e; }
.wf-badge--error   { background: rgba(239,68,68,0.15);  color: #ef4444; }

/* Pipeline flow */
.wf-pipeline-flow {
  padding: 16px 14px 12px;
  display: flex;
  align-items: center;
  overflow-x: auto;
}

.wf-pipeline-flow::-webkit-scrollbar { height: 3px; }
.wf-pipeline-flow::-webkit-scrollbar-thumb { background: #2e3348; border-radius: 2px; }

/* Node */
.wf-node { flex-shrink: 0; }

.wf-node-box {
  width: 100px;
  background: #0f1117;
  border: 1.5px solid #2e3348;
  border-radius: 10px;
  padding: 9px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: all 0.25s;
  position: relative;
}

.wf-node-box.pending { opacity: 0.32; }

.wf-node-box.active {
  border-color: #4f6ef7;
  box-shadow: 0 0 0 3px rgba(79,110,247,0.25);
  background: rgba(79,110,247,0.04);
}

.wf-node-box.active::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 10px;
  border: 1.5px solid #4f6ef7;
  animation: wf-pulse-border 1.5s ease-out infinite;
  pointer-events: none;
}

@keyframes wf-pulse-border {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.07); }
}

.wf-node-box.done {
  border-color: #22c55e;
  box-shadow: 0 0 10px rgba(34,197,94,0.3);
  background: rgba(34,197,94,0.04);
}

.wf-node-box.error {
  border-color: #ef4444;
  background: rgba(239,68,68,0.05);
}

.wf-node-box.active .wf-node-label { color: #6c8af7; }
.wf-node-box.done   .wf-node-label { color: #22c55e; }
.wf-node-box.error  .wf-node-label { color: #ef4444; }

.wf-node-icon   { font-size: 18px; line-height: 1; }
.wf-node-label  { font-size: 10px; font-weight: 600; color: var(--muted-2); text-align: center; }
.wf-node-detail { font-size: 8px; color: var(--muted); text-align: center; max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Round dots inside agent node */
.wf-rounds-row { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; margin-top: 3px; }
.wf-round-dot  { width: 6px; height: 6px; border-radius: 50%; background: #2e3348; }
.wf-round-dot.tool  { background: #f97316; box-shadow: 0 0 4px rgba(249,115,22,0.5); }
.wf-round-dot.final { background: #22c55e; }

/* Edge connector */
.wf-edge { flex-shrink: 0; display: flex; align-items: center; width: 28px; }

.wf-edge-line {
  height: 2px;
  width: 100%;
  background: #2e3348;
  border-radius: 1px;
  transition: background 0.3s;
}

.wf-edge-line.lit {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.4);
}

/* Tool cluster */
.wf-tool-cluster {
  padding: 8px 14px 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid #2e3348;
}

.wf-mcp-bubble {
  background: #0f1117;
  border: 1px solid #2e3348;
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 70px;
}

.wf-mcp-label   { font-size: 8px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.wf-tool-pills  { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }

.wf-tool-pill {
  border-radius: 20px;
  padding: 2px 6px;
  font-size: 9px;
  border: 1px solid #2e3348;
  color: var(--muted-2);
  background: #22263a;
}

.wf-tool-pill.ok   { border-color: rgba(34,197,94,0.4);  color: #22c55e; }
.wf-tool-pill.fail { border-color: rgba(239,68,68,0.4);  color: #ef4444; }

/* Metrics bar */
.wf-metrics-bar {
  padding: 7px 14px 10px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid #2e3348;
}

.wf-metric       { display: flex; flex-direction: column; gap: 2px; }
.wf-metric-key   { font-size: 8px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.wf-metric-val   { font-size: 11px; font-weight: 600; color: #e2e8f0; font-family: monospace; }
.wf-metric-val.blue   { color: #06b6d4; }
.wf-metric-val.purple { color: #a855f7; }
.wf-metric-val.green  { color: #22c55e; }
.wf-metric-val.orange { color: #f97316; }

/* Log trail */
.wf-log-trail { padding: 0 14px 10px; border-top: 1px solid #2e3348; }

.wf-log-trail-toggle {
  font-size: 10px;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 0 2px;
  user-select: none;
  transition: color 0.15s;
}

.wf-log-trail-toggle:hover { color: var(--muted-2); }

.wf-log-list {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 140px;
  overflow-y: auto;
}

.wf-log-list::-webkit-scrollbar { width: 3px; }
.wf-log-list::-webkit-scrollbar-thumb { background: #2e3348; }

.wf-log-entry {
  font-family: monospace;
  font-size: 9px;
  color: var(--muted);
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 1.5;
}

.wf-log-entry:hover    { background: #22263a; color: var(--muted-2); }
.wf-log-entry.level-warn  { color: #eab308; }
.wf-log-entry.level-error { color: #ef4444; }

@media (max-width: 900px) {
  .wf-pipeline-flow { gap: 0; }
  .wf-node-box { width: 80px; }
  .wf-node-label { font-size: 9px; }
  .wf-edge { width: 18px; }
}

/* ============================================================
   Módulo Multimedia
   ============================================================ */
.mm-page { padding: 28px 32px; }
.mm-header { margin-bottom: 20px; }
.mm-title { font-size: 1.5rem; font-weight: 700; color: var(--text); margin: 10px 0 4px; }
.mm-subtitle { color: var(--muted); font-size: 0.88rem; margin: 0; }
.mm-banner {
  margin-bottom: 16px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(var(--brand-rgb), 0.30);
  background: rgba(var(--brand-rgb), 0.08);
  color: var(--brand-dark);
  font-size: 0.86rem;
}
.mm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  margin-bottom: 16px;
}
.mm-row,
.mm-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.mm-toolbar { margin-top: 14px; }
.mm-section-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.mm-helper { color: var(--muted); font-size: 0.82rem; }
.mm-buckets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.mm-bucket {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  display: grid;
  gap: 6px;
}
.mm-bucket:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand);
}
.mm-bucket--active {
  border-color: var(--brand);
  background: rgba(var(--brand-rgb), 0.06);
  box-shadow: 0 0 0 1px var(--brand) inset;
}
.mm-bucket span { color: var(--text); }
.mm-bucket small { color: var(--muted); font-size: 0.75rem; }
.mm-input,
.mm-select,
.mm-file {
  min-height: 40px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  padding: 9px 12px;
  background: var(--control-bg);
  color: var(--text);
  font-size: 0.88rem;
  font-family: inherit;
}
.mm-input:focus,
.mm-select:focus,
.mm-file:focus { outline: none; border-color: var(--brand); }
.mm-input { min-width: 240px; flex: 1 1 240px; }
.mm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mm-btn:hover { background: var(--panel-2); }
.mm-btn--sm { min-height: 32px; padding: 0 10px; font-size: 0.78rem; font-weight: 500; }
.mm-btn--ghost { background: transparent; border-color: transparent; color: var(--muted); }
.mm-btn--ghost:hover { background: var(--panel-2); color: var(--text); }
.mm-btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.mm-btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.mm-btn--danger {
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.35);
  background: var(--surface);
}
.mm-btn--danger:hover { background: rgba(239, 68, 68, 0.08); border-color: var(--danger); }
.mm-objects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.mm-object {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.mm-object:hover { box-shadow: var(--shadow-md); }
.mm-thumb {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
  background: var(--panel-2);
}
.mm-fileicon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 170px;
  background: linear-gradient(135deg, var(--panel-2) 0%, #e2e8f0 100%);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mm-object-info { padding: 14px; display: grid; gap: 8px; }
.mm-object-key {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-item-desc { color: var(--muted); font-size: 0.8rem; }
.mm-object-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mm-empty {
  margin-top: 14px;
  padding: 20px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  background: var(--panel-2);
  font-size: 0.86rem;
  text-align: center;
}

/* ── Discos: cabecera de fila con acciones ──────────────────── */
.mm-row-actions { display: flex; gap: 8px; align-items: center; }

/* ── Tarjeta de disco: nombre, barra de uso y etiquetas ─────── */
.mm-bucket-name { font-weight: 700; color: var(--text); }
.mm-usage { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.mm-usage-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.mm-usage-bar {
  height: 100%;
  border-radius: 999px;
  background: var(--brand);
  transition: width 0.3s ease;
}
.mm-usage-bar.full { background: var(--danger); }
.mm-usage-text { color: var(--muted); font-size: 0.78rem; }
.mm-bucket-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.mm-tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--border);
}

/* ── Breadcrumbs del explorador ─────────────────────────────── */
.mm-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin: 12px 0;
  padding: 8px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.mm-crumb-item { display: inline-flex; align-items: center; gap: 2px; }
.mm-crumb {
  background: none;
  border: none;
  color: var(--brand-dark);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  font-family: inherit;
  padding: 2px 6px;
  border-radius: 6px;
}
.mm-crumb:hover { background: rgba(var(--brand-rgb), 0.10); }
.mm-crumb-sep { color: var(--muted); padding: 0 1px; }

/* ── Barra de subida en el directorio actual ────────────────── */
.mm-uploadbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* ── Barra de búsqueda y filtros del explorador ─────────────── */
.mm-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.mm-filter-search {
  flex: 1 1 220px;
  min-width: 180px;
}
/* Los selects del explorador necesitan más ancho que los del modal "Crear disco". */
.mm-filters .mm-select {
  max-width: none;
  flex: 0 0 auto;
  min-width: 140px;
}
.mm-filter-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}
.mm-filters .mm-input--narrow {
  flex: 0 0 auto;
  width: auto;
  min-width: 130px;
  max-width: 150px;
}
.mm-filter-count {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .mm-filter-count { margin-left: 0; }
  .mm-filters .mm-select,
  .mm-filter-search { flex: 1 1 100%; }
}

/* ── Carpeta (tarjeta clicable) ─────────────────────────────── */
.mm-folder { cursor: pointer; }
.mm-folder:hover { border-color: var(--brand); }
.mm-foldericon {
  background: linear-gradient(135deg, rgba(var(--brand-rgb), 0.14), rgba(var(--brand-rgb), 0.05));
  color: var(--brand-dark);
  font-size: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Modal "Crear disco" ────────────────────────────────────── */
.mm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.mm-modal {
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.mm-modal .mm-section-title { margin-bottom: 2px; }
.mm-field-label {
  display: block;
  margin: 14px 0 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
}
.mm-field-row { display: flex; gap: 8px; align-items: center; }
.mm-field-inline { display: flex; gap: 6px; align-items: center; color: var(--text); font-size: 0.88rem; }
.mm-select { max-width: 90px; cursor: pointer; }
.mm-input--narrow { max-width: 80px; min-width: 0; flex: 0 0 80px; }
.mm-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
}
.mm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

@media (max-width: 900px) {
  .mm-page { padding: 22px 16px; }
  .mm-objects,
  .mm-buckets { grid-template-columns: 1fr; }
}

/* ============================================================
   Módulo QA — homogéneo con el resto del panel (mismos tokens)
   ============================================================ */
.qa-page { padding: 28px 32px; }
/* El PageHeader rompe el padding del root para quedar a ancho completo (igual
   que en .page-container), no constreñido por el contenido del módulo. */
.qa-page > .ph,
.mm-page > .ph,
.campaigns-page > .ph {
  margin: -28px -32px 18px;
}
.qa-header { margin-bottom: 20px; }
.qa-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 10px; }
.qa-title { font-size: 1.5rem; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.qa-subtitle { color: var(--muted); font-size: 0.88rem; margin: 0; }
.qa-actions { display: flex; gap: 8px; flex-shrink: 0; }

.qa-card { background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 12px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); margin-bottom: 16px; }
.qa-section-title { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0 0 12px; }

.qa-btn { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,0.06); color: var(--text); font-size: 0.85rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.15s; }
.qa-btn:hover:not(:disabled) { background: rgba(255,255,255,0.1); }
.qa-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.qa-btn--primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.qa-btn--primary:hover:not(:disabled) { background: var(--brand-dark); }
.qa-btn--danger { color: #dc2626; border-color: #fca5a5; }
.qa-btn--danger:hover:not(:disabled) { background: var(--badge-danger-bg); }
.qa-btn--sm { padding: 4px 10px; font-size: 0.78rem; font-weight: 500; }

.qa-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--muted); margin: 10px 0 4px; }
.qa-input, .qa-textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.88rem; font-family: inherit; box-sizing: border-box; color: var(--text); }
.qa-input:focus, .qa-textarea:focus { outline: none; border-color: var(--brand); }
.qa-textarea { resize: vertical; min-height: 90px; }
.qa-form-actions { display: flex; gap: 8px; margin-top: 14px; }

.qa-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; }
.qa-item-name { font-weight: 600; color: var(--text); }
.qa-item-id { color: var(--muted); font-size: 0.82rem; }
.qa-item-desc { color: var(--muted); font-size: 0.82rem; margin-top: 2px; }
.qa-item-actions { display: flex; gap: 6px; flex-shrink: 0; }

.qa-run { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; cursor: pointer; transition: background 0.15s; }
.qa-run:hover { background: var(--surface-2); }

.qa-banner { padding: 10px 16px; border-radius: 8px; font-size: 0.88rem; margin-bottom: 16px; background: var(--brand-soft-bg); color: var(--brand-dark); border: 1px solid #bfdbfe; }
.qa-empty { color: var(--muted); font-size: 0.88rem; padding: 8px 0; }

.qa-result { padding: 8px 0; border-bottom: 1px solid var(--border); }
.qa-tag { font-weight: 700; }
.qa-tag--pass { color: #16a34a; }
.qa-tag--fail { color: #dc2626; }

.qa-help { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; color: var(--muted); font-size: 0.82rem; margin-bottom: 16px; line-height: 1.5; }
.qa-assert { font-size: 0.82rem; margin: 3px 0; color: var(--text); }
.qa-assert-ev { color: var(--muted); }
.qa-transcript { margin-top: 8px; }
.qa-transcript summary { cursor: pointer; color: var(--muted); font-size: 0.8rem; }
.qa-msg { font-size: 0.82rem; padding: 4px 0; border-bottom: 1px solid var(--border); }
.qa-msg-role { font-weight: 600; color: var(--muted); margin-right: 6px; }

/* Impresión / PDF: aísla el detalle de la corrida */
@media print {
  body * { visibility: hidden; }
  .qa-print-area, .qa-print-area * { visibility: visible; }
  .qa-print-area { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none !important; border: none !important; }
  .qa-noprint { display: none !important; }
  .qa-transcript[open] summary { display: none; }
}

/* ── Colored action pill buttons (dark theme) ──────────────────────── */
.btn-detail  { background: rgba(var(--brand-dark-rgb),0.12);  color: var(--brand-soft-fg);  border-color: rgba(var(--brand-rgb),0.28); }
.btn-detail:hover:not(:disabled)  { background: rgba(var(--brand-dark-rgb),0.22);  border-color: rgba(var(--brand-rgb),0.45); }

/* Ticket missing utilities */

.btn-action--danger {
  background: rgba(239,68,68,0.12);
  color: #f87171;
  border: 1px solid rgba(239,68,68,0.25);
}
.btn-action--danger:hover:not(:disabled) {
  background: rgba(239,68,68,0.22);
  border-color: rgba(239,68,68,0.4);
}
.btn-action--danger:disabled { opacity: 0.45; cursor: not-allowed; }

.ticket-detail-field span:last-child {
  font-size: 0.875rem;
  color: #cbd5e1;
}

.form-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.input-req-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.input-req-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.input-req-row select,
.input-req-row input[type="text"] {
  flex: 1;
  min-width: 100px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: #e2e8f0;
  font: inherit;
  font-size: 0.82rem;
}

.input-req-row select option { background: #1e293b; color: #e2e8f0; }

.input-req-row select:focus,
.input-req-row input[type="text"]:focus {
  outline: none;
  border-color: rgba(99,102,241,0.5);
  background: rgba(255,255,255,0.08);
}

.input-req-row .btn-danger {
  background: rgba(239,68,68,0.12);
  color: #f87171;
  border-color: rgba(239,68,68,0.25);
}
.input-req-row .btn-danger:hover { background: rgba(239,68,68,0.2); }

/* ============================================================
   PAGE HEADER COMPONENT (.ph) — dark theme base styles
   ============================================================ */

.ph {
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  /* padding-left alineado con la columna de iconos de la sidebar
     (sidebar 10px + item 12px = 22px al borde del icono). */
  padding: 0 24px 0 22px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ── Left side ── */
.ph-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

/* Marca (izquierda del header en /home): logo + nombre del panel. */
.ph-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ph-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(148, 163, 184, 0.85);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  flex-shrink: 0;
}

.ph-back:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: #f8fafc;
}

.ph-divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.ph-icon {
  font-size: 1.1875rem;
  flex-shrink: 0;
  line-height: 1;
}
/* Un iconset provee un SVG monocromo → tamaño acorde al emoji del header
   (el emoji se dimensiona por font-size; hereda color via currentColor). */
.ph-icon svg { width: 1.1875rem; height: 1.1875rem; display: block; }

.ph-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ph-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ph-meta {
  font-size: 0.725rem;
  color: rgba(148, 163, 184, 0.65);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Right side ── */
.ph-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Module switcher */
.ph-switcher {
  position: relative;
}

.ph-switcher-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(203, 213, 225, 0.9);
  font-size: 0.8rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
}

.ph-switcher-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  color: #f8fafc;
}

.ph-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.ph-chevron--open {
  transform: rotate(180deg);
}

.ph-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
}

.ph-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  background: #1a2234;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 60;
  animation: phDropIn 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes phDropIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ph-dropdown-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: rgba(100, 116, 139, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 8px 8px;
  display: block;
}

.ph-dropdown-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ph-mod-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted-2);
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-align: left;
  width: 100%;
}

.ph-mod-item:hover:not(.ph-mod-item--maint) {
  background: rgba(var(--brand-rgb), 0.1);
  border-color: rgba(var(--brand-rgb), 0.18);
  color: var(--brand-soft-fg);
}

.ph-mod-item--maint {
  opacity: 0.4;
  cursor: not-allowed;
}

.ph-mod-icon {
  font-size: 0.9375rem;
  flex-shrink: 0;
  line-height: 1;
}

.ph-mod-name {
  flex: 1;
}

.ph-mod-maint-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f59e0b;
  flex-shrink: 0;
}

/* User chip */
.ph-user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.04);
  /* Clickeable → Mi Perfil. Reset de botón + mismo hover que los vecinos. */
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.18s, border-color 0.18s, transform 0.15s, box-shadow 0.18s;
}

.ph-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--brand) 0%, #6366f1 100%);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0;
}

.ph-user-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ph-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #f1f5f9;
  white-space: nowrap;
}

.ph-user-role {
  font-size: 0.6875rem;
  color: rgba(148, 163, 184, 0.65);
  font-weight: 500;
  white-space: nowrap;
}

/* Logout button */
.ph-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.06);
  color: rgba(252, 165, 165, 0.65);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s, box-shadow 0.18s;
  flex-shrink: 0;
}

.ph-logout:hover {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.32);
  color: #f87171;
}

/* THEME TOGGLE BUTTON */

/* Cuadrado, coherente con la campana de notificaciones (misma forma). */
.ph-theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(224,231,255,0.85);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.15s, box-shadow 0.18s;
  flex-shrink: 0;
}
.ph-theme-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
}

/* Hover unificado de los botones de la derecha del header (tema, campana, chip de
   usuario, salir): aumento de escala + leve iluminación. */
.ph-theme-btn:hover,
.ph-notif-btn:hover,
.ph-user-chip:hover,
.ph-logout:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 3px 12px rgba(0,0,0,0.28);
}
.ph-user-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}

/* ── Header con color del tema (switch de identidad visual, owner) ──────────
   La barra adopta el brand en vez de la superficie neutra; el contenido pasa a
   texto claro de alto contraste sobre la marca. */
.ph--themed {
  background: var(--brand);
  border-bottom-color: color-mix(in srgb, var(--brand) 70%, black 20%);
}
.ph--themed .ph-title,
.ph--themed .ph-user-name,
.ph--themed .app-title,
.ph--themed .ph-icon { color: #fff; }
.ph--themed .ph-meta,
.ph--themed .ph-user-role { color: rgba(255, 255, 255, 0.75); }
.ph--themed .ph-back,
.ph--themed .ph-theme-btn,
.ph--themed .ph-user-chip {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.ph--themed .ph-divider { background: rgba(255, 255, 255, 0.28); }
.ph--themed .ph-back:hover,
.ph--themed .ph-theme-btn:hover,
.ph--themed .ph-user-chip:hover { background: rgba(255, 255, 255, 0.22); }

/* LIGHT MODE OVERRIDES  (html.light-mode) */

/* ── Swap GLOBAL de tokens (CLARO). Global, NO scoped a .page-container, para
   que el login y CUALQUIER raíz adapten. Único lugar de la verdad del tema:
   migrar colores hardcodeados a estos tokens (ver tabla en el plan). ── */
html.light-mode {
  color-scheme: light;
  --bg:                #eef2f9;
  --bg-2:              #f1f5f9;
  --surface:           #ffffff;
  --surface-2:         #f8fafc;
  --surface-3:         #f1f5f9;
  --surface-overlay:   rgba(255,255,255,0.98);
  --panel:             rgba(255,255,255,0.96);
  --panel-2:           rgba(248,250,252,0.9);
  --control-bg:        #ffffff;
  --control-bg-hover:  #f1f5f9;
  --control-border:    rgba(0,0,0,0.12);
  --scrim:             rgba(15,23,42,0.45);
  --text:              #1e293b;
  --text-strong:       #0f172a;
  --muted:             rgba(71,85,105,0.9);
  --muted-2:           rgba(71,85,105,0.6);
  --border:            rgba(0,0,0,0.09);
  --border-soft:       rgba(0,0,0,0.05);
  --brand-soft-bg:     rgba(59,130,246,0.10);
  --brand-soft-fg:     #1d4ed8;
  --tooltip-bg:        #1e293b;
  --tooltip-fg:        #f1f5f9;
  --badge-success-bg:  #dcfce7; --badge-success-fg: #15803d;
  --badge-warn-bg:     #fef9c3; --badge-warn-fg:    #a16207;
  --badge-danger-bg:   #fef2f2; --badge-danger-fg:  #b91c1c;
  --badge-info-bg:     #dbeafe; --badge-info-fg:    #1d4ed8;
  --badge-neutral-bg:  #f1f5f9; --badge-neutral-fg: #475569;
  --badge-purple-bg:   #ede9fe; --badge-purple-fg:  #7c3aed;
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 25px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
}

html.light-mode body { background: var(--bg); }

/* La tarjeta de login es SIEMPRE clara (independiente del tema): fija un
   contexto de tokens claro para que su contenido sea legible en ambos temas. */
.login-card {
  /* La tarjeta es clara aun en tema oscuro → sus controles nativos (autofill,
     date/time, flecha de select) también deben renderizar en claro. */
  color-scheme: light;
  --text:           #1e293b;
  --text-strong:    #0f172a;
  --muted:          #475569;
  --muted-2:        #64748b;
  --border:         rgba(0,0,0,0.10);
  --border-soft:    rgba(0,0,0,0.06);
  --surface:        #ffffff;
  --surface-2:      #f8fafc;
  --control-bg:     #ffffff;
  --control-bg-hover: #f1f5f9;
  --control-border: rgba(0,0,0,0.12);
}

html.light-mode .page-container { background: var(--bg); }

html.light-mode .app-header {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

html.light-mode .app-header::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(99, 102, 241, 0.2) 25%,
    rgba(var(--brand-rgb), 0.28) 50%,
    rgba(99, 102, 241, 0.2) 75%,
    transparent 100%
  );
}

html.light-mode .app-title {
  color: var(--text-strong);
}

html.light-mode .home-container {
  background: #eef2f9;
}

html.light-mode .home-sidebar {
  background: rgba(255, 255, 255, 0.95);
  border-right-color: rgba(0, 0, 0, 0.07);
}

html.light-mode .home-sidebar-user {
  background: rgba(0, 0, 0, 0.03);
}

html.light-mode .home-sidebar-name {
  color: var(--text-strong);
}

html.light-mode .home-sidebar-role {
  color: var(--muted-2);
}

html.light-mode .home-sidebar-sep {
  background: rgba(0, 0, 0, 0.07);
}

html.light-mode .home-sidebar-item {
  color: var(--muted);
}

html.light-mode .home-sidebar-item:hover:not(.home-sidebar-item--maint) {
  background: rgba(var(--brand-rgb), 0.07);
  color: var(--brand-dark);
}

html.light-mode .home-welcome-title {
  color: var(--text-strong);
}

html.light-mode .home-welcome-sub {
  color: var(--muted);
}

html.light-mode .mod-card {
  background: var(--surface);
  border-color: rgba(226, 232, 240, 0.8);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
}
html.light-mode .mod-name { color: var(--text-strong); }

html.light-mode .ph {
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  backdrop-filter: blur(16px);
}
html.light-mode .ph-title  { color: var(--text-strong); }
html.light-mode .ph-meta   { color: var(--muted); }
html.light-mode .ph-icon   { color: #4f46e5; }
html.light-mode .ph-divider { background: rgba(0,0,0,0.1); }

html.light-mode .ph-back,
html.light-mode .ph-logout {
  color: var(--muted);
  border-color: rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.03);
}
html.light-mode .ph-back:hover,
html.light-mode .ph-logout:hover {
  color: var(--text-strong);
  background: rgba(0,0,0,0.07);
}

html.light-mode .ph-theme-btn {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.1);
  color: var(--muted);
}
html.light-mode .ph-theme-btn:hover {
  background: rgba(0,0,0,0.08);
}

html.light-mode .ph-switcher-btn {
  background: rgba(0,0,0,0.04);
  color: var(--text-strong);
  border-color: rgba(0,0,0,0.1);
}
html.light-mode .ph-switcher-btn:hover {
  background: rgba(0,0,0,0.07);
}
html.light-mode .ph-dropdown {
  background: var(--surface);
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
html.light-mode .ph-dropdown-label { color: var(--muted); }
html.light-mode .ph-mod-item {
  background: rgba(0,0,0,0.02);
  color: var(--text-strong);
  border-color: rgba(0,0,0,0.06);
}
html.light-mode .ph-mod-item:hover:not(.ph-mod-item--maint) {
  background: rgba(99,102,241,0.08);
  color: #4f46e5;
}

html.light-mode .ph-user-chip {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
}
html.light-mode .ph-user-name  { color: var(--text-strong); }
html.light-mode .ph-user-role  { color: var(--muted); }
html.light-mode .ph-user-avatar {
  background: rgba(99,102,241,0.15);
  color: #4f46e5;
}

html.light-mode .ticket-panel,
html.light-mode .camp-content,
html.light-mode .users-table-wrap,
html.light-mode .perms-table,
html.light-mode .control-form-panel,
html.light-mode .tools-card,
html.light-mode .table-wrapper,
html.light-mode .contact-detail-panel {
  background: rgba(255,255,255,0.96) !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

/* SEGMENTED en tema claro: misma bandeja para todas las barras de tabs. Si añades
   una barra nueva al bloque canónico, súmala también aquí. */
html.light-mode .ticket-tabs,
html.light-mode .camp-tabs,
html.light-mode .metrics-tabs,
html.light-mode .metrics-agent-tabs,
html.light-mode .control-tabs {
  background: rgba(255,255,255,0.75);
  border-color: rgba(0,0,0,0.08);
}
html.light-mode .ticket-tabs button,
html.light-mode .camp-tab,
html.light-mode .metrics-tab,
html.light-mode .metrics-subtab,
html.light-mode .control-tab { color: var(--muted); }

/* :not(...-active) obligatorio: sin él, pasar el ratón por el tab ACTIVO le pone
   texto oscuro encima del pill sólido de marca → texto invisible en claro. */
html.light-mode .ticket-tabs button:hover:not(.active),
html.light-mode .camp-tab:hover:not(.camp-tab--active),
html.light-mode .metrics-tab:hover:not(.active),
html.light-mode .metrics-subtab:hover:not(.active),
html.light-mode .control-tab:hover:not(.active) {
  background: rgba(0,0,0,0.04);
  color: var(--text-strong);
}
html.light-mode .control-tab.active {
  background: var(--brand-soft-bg) !important;
  color: var(--brand-dark) !important;
}

html.light-mode .contacts-table th {
  background: rgba(0,0,0,0.04);
  color: var(--muted);
  border-bottom-color: rgba(0,0,0,0.09);
}
html.light-mode .contacts-table td {
  color: var(--text-strong);
  border-bottom-color: rgba(0,0,0,0.05);
}
html.light-mode .contacts-table tr:hover td {
  background: rgba(99,102,241,0.04);
}
html.light-mode .contact-row:hover td {
  background: var(--brand-soft-bg);
}

html.light-mode .users-table th {
  background: rgba(0,0,0,0.04);
  color: var(--muted);
  border-bottom-color: rgba(0,0,0,0.09);
}
html.light-mode .users-table td {
  color: var(--text-strong);
  border-bottom-color: rgba(0,0,0,0.05);
}
html.light-mode .users-table tr:hover td {
  background: rgba(99,102,241,0.04);
}

html.light-mode .camp-table td {
  border-bottom-color: rgba(0,0,0,0.05);
}
html.light-mode .camp-table tr:hover td {
  background: rgba(99,102,241,0.04);
}

html.light-mode .perms-table th {
  background: rgba(0,0,0,0.04);
  color: var(--muted);
}
html.light-mode .perms-table td {
  border-bottom-color: rgba(0,0,0,0.05);
}
html.light-mode .perms-table tr:hover td {
  background: rgba(99,102,241,0.04);
}

html.light-mode input[type="text"],
html.light-mode input[type="email"],
html.light-mode input[type="password"],
html.light-mode input[type="number"],
html.light-mode input[type="search"],
html.light-mode input[type="tel"],
html.light-mode input[type="url"],
html.light-mode select,
html.light-mode textarea {
  background: rgba(255,255,255,0.9) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: var(--text-strong) !important;
}
html.light-mode select option {
  background: var(--surface);
  color: var(--text-strong);
}
html.light-mode input:focus,
html.light-mode select:focus,
html.light-mode textarea:focus {
  border-color: rgba(99,102,241,0.5) !important;
  background: var(--surface) !important;
}
html.light-mode input::placeholder,
html.light-mode textarea::placeholder {
  color: rgba(71,85,105,0.5) !important;
}

html.light-mode .filter-bar,
html.light-mode .contacts-filter-bar {
  background: rgba(255,255,255,0.9);
  border-color: rgba(0,0,0,0.08);
}

html.light-mode .section-title,
html.light-mode .contacts-title,
html.light-mode .users-title,
html.light-mode .control-title,
html.light-mode .panel-title,
html.light-mode .ticket-section-title { color: var(--text-strong); }

html.light-mode label               { color: var(--muted) !important; }
html.light-mode .form-section-title { color: var(--text-strong) !important; }

html.light-mode .home-card,
html.light-mode .mod-card {
  background: rgba(255,255,255,0.92);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
html.light-mode .home-card:hover,
html.light-mode .mod-card:hover {
  background: var(--surface);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
html.light-mode .mod-card-title,
html.light-mode .home-card-title { color: var(--text-strong); }
html.light-mode .mod-card-desc,
html.light-mode .home-card-desc  { color: var(--muted); }

html.light-mode ::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); }
html.light-mode ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
html.light-mode ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

/* ── Light-mode overrides for newly darkened module elements ── */
html.light-mode .page-container         { background: var(--surface-2); }
html.light-mode .livechat-layout        { background: var(--surface-2); }
html.light-mode .livechat-messages      { background: var(--surface); }
html.light-mode .livechat-empty         { background: var(--surface-2); }
html.light-mode .messages-header        { background: var(--surface); }
html.light-mode .livechat-contact-panel { background: var(--surface-2); }
html.light-mode .reply-box              { background: var(--surface); border-top-color: #e2e8f0; }
html.light-mode .reply-textarea         { background: var(--surface-2); border-color: var(--control-border); color: var(--text-strong); }
html.light-mode .reply-textarea::placeholder { color: var(--muted-2); }
html.light-mode .reply-textarea:focus   { background: var(--surface); border-color: var(--brand-dark); }
html.light-mode .messages-list          { background: var(--surface-2); }
html.light-mode .livechat-sidebar       { background: var(--surface); border-right-color: #e2e8f0; }
html.light-mode .livechat-filters       { border-bottom-color: #e2e8f0; }
html.light-mode .lc-topbar              { border-bottom-color: #e2e8f0; }
html.light-mode .livechat-filters select,
html.light-mode .lc-filters-popover select { background: var(--surface); border-color: var(--border); color: #374151; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
html.light-mode .livechat-filters select option,
html.light-mode .lc-filters-popover select option { background: var(--surface); }
html.light-mode .livechat-filters select:focus,
html.light-mode .lc-filters-popover select:focus  { border-color: var(--brand); background-color: var(--surface); }
html.light-mode .filter-pill            { background: var(--surface-2); border-color: var(--border); color: #6b7280; }
html.light-mode .filter-pill:hover      { background: var(--surface-2); color: #374151; }
html.light-mode .filter-pill--active    { background: rgba(var(--brand-rgb),0.1) !important; border-color: rgba(var(--brand-rgb),0.35) !important; color: var(--brand-dark) !important; }
html.light-mode .conv-item:hover        { background: var(--surface-2); }
html.light-mode .conv-item--selected    { background: rgba(var(--brand-rgb),0.08) !important; border-color: rgba(var(--brand-rgb),0.25); }
html.light-mode .conv-title             { color: var(--text-strong); }
html.light-mode .conv-last-msg          { color: var(--muted); }
html.light-mode .conv-time              { color: var(--muted-2); }
html.light-mode .ticket-summary-card    { background: var(--surface); }
html.light-mode .contacts-channel-bar   { background: var(--surface); }
html.light-mode .contacts-subbar        { background: var(--surface); }
html.light-mode .contacts-filters-popover .contacts-channel-bar { background: transparent; }
html.light-mode .ch-chip                { background: var(--surface-2); }
html.light-mode .ch-chip:hover          { background: var(--surface-2); border-color: var(--muted-2); }
html.light-mode .metrics-kpi-card       { background: var(--surface); }
html.light-mode .metrics-kpi-value      { color: var(--text-strong); }
html.light-mode .metrics-chart-card     { background: var(--surface); }
html.light-mode .metrics-chart-title    { color: var(--text-strong); }
html.light-mode .contact-card           { background: var(--surface); }
html.light-mode .monitor-health-card    { background: var(--surface); }
html.light-mode .qa-card                { background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
html.light-mode .qa-btn                 { background: var(--surface); }
html.light-mode .qa-btn:hover:not(:disabled) { background: var(--surface-2); }
html.light-mode .profile-page           { background: var(--surface-2); }
html.light-mode .search-input           { background: var(--surface); }

/* ── Phase-2: theme-adaptive overrides (tabs, ticket panel, pastel tags) ── */
/* .metrics-tabs / .metrics-tab: ver el grupo SEGMENTED de tema claro más arriba.
   Estaban duplicados aquí y, al ir después, se comían la bandeja unificada. */

html.light-mode .ticket-panel h3        { color: var(--text-strong); border-bottom-color: rgba(0,0,0,0.07); }
html.light-mode .ticket-panel-header    { border-bottom-color: rgba(0,0,0,0.07); }
html.light-mode .tickets-table td.tk-ref      { color: var(--muted); }
html.light-mode .tickets-table td.ticket-created { color: var(--muted); }
html.light-mode .ticket-toolbar button,
html.light-mode .ticket-toolbar-actions button { background: var(--surface); color: var(--text-strong); }

html.light-mode .badge-green  { background: var(--badge-success-bg); color: var(--badge-success-fg); }
html.light-mode .badge-yellow { background: #fef9c3; color: #a16207; }
html.light-mode .badge-red    { background: var(--badge-danger-bg); color: #b91c1c; }
html.light-mode .badge-blue   { background: var(--badge-info-bg); color: var(--badge-info-fg); }
html.light-mode .badge-gray   { background: var(--surface-2); color: var(--muted); }
html.light-mode .badge-type   { background: #ede9fe; color: #7c3aed; }
html.light-mode .chip-active  { background: var(--badge-success-bg); color: var(--badge-success-fg); }
html.light-mode .chip-off     { background: var(--badge-danger-bg); color: var(--badge-danger-fg); }

/* Controles translúcidos (diseñados sobre oscuro) que se camuflan en claro */
html.light-mode .btn-secondary {
  background: var(--surface);
  border-color: rgba(0,0,0,0.12);
  color: var(--text-strong);
}
html.light-mode .btn-secondary:hover:not(:disabled) { background: var(--surface-2); }
html.light-mode .metrics-refresh-btn {
  background: var(--surface);
  border-color: rgba(0,0,0,0.12);
  color: var(--text-strong);
}
html.light-mode .metrics-refresh-btn:hover { background: var(--surface-2); }
/* .contacts-refresh-btn y .contacts-search-input ya no necesitan excepción: la
   toolbar estándar se define con tokens. Y un `background` en corto aquí
   borraría la lupa del buscador, que va como background-image. */
html.light-mode .metrics-period-select {
  background-color: var(--surface);
  border-color: rgba(0,0,0,0.12);
  color: var(--text-strong);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
html.light-mode .kn-tipo-card           { background: var(--surface); border-color: var(--border); }
html.light-mode .kn-tipo-card:hover     { background: var(--surface-2); border-color: #a5b4fc; }
html.light-mode .kn-tipo-card.selected  { background: var(--surface-2); border-color: #4f46e5; }
html.light-mode .camp-preview-bubble    { background: var(--surface); color: #111827; border-color: var(--border); }

/* ── InfoTooltip component ───────────────────────────────────────────────── */
.info-tooltip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  vertical-align: middle;
  overflow: visible;
  outline: none;
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(99,102,241,0.15);
  color: var(--brand, #6366f1);
  font-size: 10px;
  font-style: normal;
  cursor: default;
  user-select: none;
  line-height: 1;
}

.info-tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  padding: 9px 11px;
  border-radius: 8px;
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  white-space: normal;
  z-index: 1200;
  pointer-events: none;
  transition: opacity 0.15s ease;
  box-shadow: var(--shadow-md);
}

.info-tooltip-text::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--tooltip-bg);
}

.info-tooltip-wrapper:hover .info-tooltip-text,
.info-tooltip-wrapper:focus .info-tooltip-text,
.info-tooltip-wrapper:focus-within .info-tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* ── Módulo Gestión de Pagos ───────────────────────────────────────────────── */
.pagos-page .page-content { background: var(--bg); max-width: 1440px; }
.pg-header { margin-bottom: 18px; }
.pg-title { font-size: 1.4rem; font-weight: 700; color: var(--text); margin: 10px 0 2px; }
.pg-subtitle { color: var(--muted); font-size: 0.9rem; margin: 0; }
.pg-banner { background: var(--badge-info-bg); border: 1px solid var(--badge-info-fg); color: var(--badge-info-fg); padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 0.88rem; }

.pg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 18px; }
.pg-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; box-shadow: var(--shadow-sm); }
.pg-card-n { font-size: 1.6rem; font-weight: 700; color: var(--text); line-height: 1.1; }
.pg-card-l { font-size: 0.78rem; color: var(--muted); margin-top: 4px; }
.pg-card--ok { border-color: rgba(16,185,129,0.45); background: var(--badge-success-bg); }

/* Pagos: KPIs de estado (clicables, filtran la tabla) separados por una divisoria
   del KPI de monto validado, que es solo lectura y va a la derecha. */
.pagos-page .pg-kpis { display: flex; align-items: stretch; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.pagos-page .pg-kpis > .pg-cards { flex: 1 1 480px; margin-bottom: 0; }
.pagos-page .pg-kpi-sep { flex: 0 0 1px; align-self: stretch; background: var(--border); }
.pagos-page .pg-kpi-total { flex: 0 0 auto; min-width: 190px; display: flex; flex-direction: column; justify-content: center; }
.pagos-page .pg-kpi-total-n { font-size: 1rem; }
/* Al envolver, la divisoria quedaría suelta como una línea de 1px: se oculta. */
@media (max-width: 720px) { .pagos-page .pg-kpi-sep { display: none; } }

.pg-input { padding: 8px 10px; border: 1px solid var(--control-border); border-radius: 8px; font-family: inherit; font-size: 0.85rem; background: var(--control-bg); color: var(--text); min-width: 140px; flex: 1 1 auto; }
.pg-input:focus { outline: 2px solid var(--brand-soft-fg); outline-offset: -1px; }

.pg-btn { padding: 7px 13px; border-radius: 8px; border: 1px solid var(--control-border); background: var(--control-bg); color: var(--text); font-size: 0.83rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.15s; }
.pg-btn:hover:not(:disabled) { background: var(--control-bg-hover); }
/* Deshabilitado: se ve bloqueado sin necesidad de texto que lo explique. */
.pg-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pg-btn--primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.pg-btn--primary:hover:not(:disabled) { background: var(--brand-dark); }
.pg-btn--danger { color: var(--badge-danger-fg); border-color: rgba(239,68,68,0.45); }
.pg-btn--danger:hover:not(:disabled) { background: var(--badge-danger-bg); }
.pg-btn--sm { padding: 4px 9px; font-size: 0.76rem; }

/* overflow-x:auto → en pantallas angostas la tabla (grid de ancho fijo) hace scroll
   horizontal DENTRO de su tarjeta en vez de recortar la columna de acciones. */
.pg-table { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; overflow-y: hidden; box-shadow: var(--shadow-sm); }
.pg-row { display: grid; grid-template-columns: 92px 1.2fr 110px 1.4fr 95px 1fr 110px 56px 272px; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 0.82rem; color: var(--text); align-items: center; min-width: 900px; }
.pg-row:last-child { border-bottom: none; }
.pg-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-row--head { font-weight: 700; background: var(--surface-2); color: var(--muted); text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.03em; }
/* Pagos: 8 columnas (sin la de SAE) y celda de acciones para 2 botones. */
.pagos-page .pg-row { grid-template-columns: 92px 1.2fr 110px 1.4fr 95px 1fr 110px 180px; min-width: 820px; }
/* La fila entera abre el detalle (la celda de acciones corta la propagación). */
.pagos-page .pg-row--click { cursor: pointer; }
.pagos-page .pg-row--click:hover { background: var(--control-bg-hover); }
/* E-commerce: tablas con columnas parejas (nº de columnas varía por tab, así que
   no se usa la grid fija de .pg-row global). Checkbox inline en el toolbar. */
.ecommerce-page .pg-row { display: flex; grid-template-columns: none; min-width: 720px; }
.ecommerce-page .pg-row > span { flex: 1 1 0; }
/* Preview de imagen dentro del drawer de producto (pane Imagen). */
.ec-img-preview { margin-top: 8px; max-width: 180px; max-height: 140px; border-radius: 8px; border: 1px solid var(--border); object-fit: cover; }

/* Título de un toggle (mir-switch-row) con su tooltip a la derecha. */
.ec-switch-title { display: inline-flex; align-items: center; gap: 6px; }

/* Bloque de imagen al inicio de la tab Datos: etiqueta + dropzone + preview apilados. */
.ec-img-block { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
/* Dropzone de imagen: borde punteado, hover con color de marca y leve escala. */
.ec-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 26px 18px; text-align: center; cursor: pointer;
    border: 2px dashed var(--border); border-radius: 12px; background: var(--surface-2);
    color: var(--muted); transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease; }
.ec-dropzone:hover { border-color: var(--brand); color: var(--text); background: var(--brand-soft-bg);
    transform: scale(1.02); box-shadow: var(--shadow-sm); }
.ec-dropzone.is-drag { border-color: var(--brand); background: var(--brand-soft-bg); color: var(--text); transform: scale(1.03); }
.ec-dropzone-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ec-dropzone-ic { width: 34px; height: 34px; color: var(--brand); }
.ec-dropzone-text { font-weight: 600; font-size: 0.9rem; }
.ec-dropzone-hint { font-size: 0.78rem; color: var(--muted-2); }

/* Miniatura en la celda de producto (config mostrar_miniaturas). */
.ec-prod-cell { display: inline-flex; align-items: center; gap: 8px; }
.ec-thumb { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border); flex: 0 0 auto; }
/* Hueco invisible del mismo tamaño que la miniatura: reserva el espacio para que
   todas las filas midan igual, pero SIN dibujar un cuadro (sin fondo ni borde). */
.ec-thumb--empty { background: transparent; border-color: transparent; }
/* Integración MIR (EM1): badge de producto externo, hint y card del enlace. */
.ec-badge { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px;
    font-size: 11px; font-weight: 600; line-height: 1.6; }
.ec-badge--ext { background: var(--badge-purple-bg); color: var(--badge-purple-fg); }
.ec-badge--ok  { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.ec-badge--warn { background: var(--badge-warn-bg); color: var(--badge-warn-fg); }
.ec-badge--danger { background: var(--badge-danger-bg); color: var(--badge-danger-fg); }
.ec-hint { color: var(--muted); font-size: 12px; margin: 6px 0; }
.ec-link-card { display: flex; flex-direction: column; gap: 6px; padding: 12px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
    grid-column: 1 / -1; }
.ec-link-card .pg-btn { align-self: flex-start; }
/* Tarjeta de estado de integración (Config › Integraciones, handshake §5.4). */
.ec-integ-card .ec-integ-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ec-resv-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* Editor de items al crear un pedido. */
.ec-items-editor { margin-top: 12px; }
.ec-items-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; }
.ec-item-del { color: var(--badge-danger-fg); }

/* Acción destructiva (botón de borrado en tarjetas y filas). */
.ec-danger { color: var(--badge-danger-fg); }
/* Detalle de pedido (drawer): tabla de items, totales, acciones y datos read-only. */
.ec-items { margin-bottom: 14px; }
/* E8-pesaje: input de cantidad real por item + acciones. */
.ec-real-input { width: 100%; max-width: 100%; box-sizing: border-box; padding: 2px 6px; font-size: 0.82rem; }
/* La celda que contiene el input no debe recortarlo (las de texto sí llevan ellipsis). */
.ec-items .pg-row > span:has(.ec-real-input) { overflow: visible; }
/* Semáforo de pesaje: el estado de cada línea se lee por el color de la fila, sin
   tener que comparar columnas. Rojo = falta pesar, amarillo = escrito pero sin
   guardar, verde = guardado. Tinte suave + barra lateral (el color solo no basta:
   se acompaña del propio valor de la columna «Real»). */
.ec-items .pg-row.ec-weigh-pend  { background: var(--badge-danger-bg);  box-shadow: inset 3px 0 0 var(--badge-danger-fg); }
.ec-items .pg-row.ec-weigh-dirty { background: var(--badge-warn-bg);    box-shadow: inset 3px 0 0 var(--badge-warn-fg); }
.ec-items .pg-row.ec-weigh-done  { background: var(--badge-success-bg); box-shadow: inset 3px 0 0 var(--badge-success-fg); }

/* Botón con cambios pendientes: se tiñe de aviso para que "hay algo sin guardar"
   se vea sin leer. Apagado = no hay diferencias respecto a lo guardado. */
.ec-btn-dirty {
  background: var(--badge-warn-bg) !important;
  border-color: var(--badge-warn-fg) !important;
  color: var(--badge-warn-fg) !important;
  font-weight: 600;
}
/* Acción destructiva/irreversible (cerrar como pagado, cancelar pedido). */
.ec-btn-danger {
  background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 600;
}
.ec-btn-danger:hover:not(:disabled) { filter: brightness(1.08); }
/* Acción de avance (listo para cobrar). */
.ec-btn-ok {
  background: var(--success); border-color: var(--success); color: #fff; font-weight: 600;
}
.ec-btn-ok:hover:not(:disabled) { filter: brightness(1.08); }
/* Iconos de acción coloreados en la fila (listo=verde, cancelar=rojo). Solo tiñen el
   icono; el fondo lo deja el .ec-icon-btn. Deshabilitados quedan en gris por :disabled. */
.ec-ic-ok:not(:disabled)     { color: var(--badge-success-fg); }
.ec-ic-danger:not(:disabled) { color: var(--badge-danger-fg); }

/* Cifras con signo: verde si sube, rojo si baja. */
.ec-num-up   { color: var(--badge-success-fg); }
.ec-num-down { color: var(--badge-danger-fg); }

/* Historial: fecha y hora en columnas propias y estrechas (el resto se reparte). */
.ec-hist .pg-row > span:nth-child(1) { flex: 0 0 104px; }
.ec-hist .pg-row > span:nth-child(2) { flex: 0 0 64px; }

/* Capa de cierre de popovers que viven DENTRO de un modal: `mir-pop-dismiss` (19)
   queda por debajo del backdrop del modal (100) y nunca recibía el clic. */
.ec-pop-dismiss { position: fixed; inset: 0; z-index: 2099; background: transparent; border: none; padding: 0; }

/* Confirmación sobre el detalle: no reemplaza al modal, se apila encima. */
.ec-confirm-backdrop {
  position: fixed; inset: 0; z-index: 2200; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(15,23,42,0.55); backdrop-filter: blur(3px);
}
.ec-confirm-card {
  width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 12px; padding: 20px;
  background: var(--surface-overlay); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
.ec-confirm-title { margin: 0; font-size: 1rem; color: var(--text-strong); }
.ec-confirm-card .ec-totals { margin: 0; }
.ec-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* Caja de mensaje al cliente dentro del modal de confirmación. */
.ec-confirm-msg-label { display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; color: var(--muted); }
.ec-confirm-msg-label textarea { resize: vertical; }

/* Footer del detalle con las acciones de flujo: resumen de asignados a la izquierda,
   botones a la derecha. Envuelve en pantallas chicas. */
.ec-order-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ec-actions-spacer { flex: 1 1 auto; }
.ec-assignees { font-size: 0.8rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
/* Aviso de que las notas van al cliente (bajo el textarea correspondiente). */
.ec-cli-note-hint { font-size: 0.72rem; color: var(--brand); margin-top: 2px; }
/* Bloque de pesaje: cabecera con botón "Guardar pesos" a la derecha (coherente con notas). */
.ec-weigh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
/* Cierre forzado: aparece solo si la diferencia supera la tolerancia (aviso + botón). */
.ec-settle-force { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.ec-totals { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 16px; padding: 12px 14px; background: var(--surface-2); border-radius: 10px; }
.ec-totals > div { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text); }
.ec-totals span { color: var(--muted); }
/* Equivalente en Bs (E8a): tasa de rates_service, separado de los totales base. */
.ec-bs-row { border-top: 1px dashed var(--border); margin-top: 2px; padding-top: 6px; }
/* `--accent` solo está definido en `:root` (tema oscuro) y vale #111827 — casi negro.
   Como no se redefine en `html.light-mode`, en OSCURO el equivalente en Bs quedaba
   negro sobre fondo oscuro, ilegible. Se usa el token de texto fuerte, que sí
   cambia con el tema. */
.ec-bs-row strong { color: var(--text-strong); }
.ec-bs { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
/* Cobro (E8b): cotización + pagos + cierre en el detalle del pedido. */
.ec-cobro { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.ec-cobro-head { display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 12px; background: var(--surface-2); border-radius: 10px; }
.ec-cobro-head > div { display: flex; flex-direction: column; }
.ec-cobro-head span { color: var(--muted); font-size: 0.78rem; }
.ec-cobro-cov { font-size: 0.9rem; color: var(--text); }
.ec-cobro-note { font-size: 0.75rem; color: var(--muted); margin-top: -2px; }
/* Misma razón que `.ec-bs-row strong`: `--accent` es casi negro y no cambia con el
   tema. Aquí además el par vigente/vencido se lee mejor como verde/rojo. */
.ec-credit { color: var(--badge-success-fg); font-weight: 600; }
.ec-loss { color: var(--badge-danger-fg); font-weight: 600; }
.ec-muted { color: var(--muted); }
/* Cabecera de sub-sección de cobro (Pagos / Cotizaciones) con acciones a la derecha. */
.ec-pays-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 10px 0 4px; }
.ec-pays-actions { display: flex; gap: 8px; flex-shrink: 0; }
.ec-inline-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
/* Notas del operador (detalle pedido): botón Guardar en la esquina superior derecha. */
.ec-notes-block { display: flex; flex-direction: column; gap: 6px; }
.ec-notes-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
/* Popover de cambio de estado rápido (tabla de pedidos): en Portal, position:fixed
   (escapa del overflow de la tabla). Se ancla a la derecha del botón vía `left` + transform. */
.ec-quick-pop {
  position: fixed; z-index: 2100; min-width: 190px; width: 210px; max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px); overflow-y: auto; overflow-x: hidden; box-sizing: border-box;
  background: var(--surface-overlay); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg); padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.ec-quick-pop label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--muted); }

/* Detalle (modal) solo-lectura: grid de campos etiqueta/valor. */
.ec-view-img { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 14px; }
.ec-view-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.ec-view-grid > div { min-width: 0; }
.ec-view-grid span { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); font-weight: 700; }
.ec-view-grid p { margin: 2px 0 0; color: var(--text); font-size: 0.9rem; word-break: break-word; }
.ec-view-full { grid-column: 1 / -1; }

/* Typeahead de cliente (buscar escribiendo). */
.ec-typeahead { position: relative; display: flex; flex-direction: column; }
.ec-typeahead-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 70; margin: 4px 0 0; padding: 4px;
  list-style: none; max-height: 240px; overflow-y: auto; background: var(--surface-overlay);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-md); }
.ec-typeahead-list li { padding: 8px 10px; border-radius: 7px; font-size: 0.86rem; color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-typeahead-list li:hover { background: var(--control-bg-hover); }

/* Items del pedido: filas compactas (sin scroll lateral, todo en el ancho del drawer). */
.ec-items-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 0.84rem; border: 1px dashed var(--border); border-radius: 10px; }
.ec-oi-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; margin-bottom: 8px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.ec-oi-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ec-oi-name { font-weight: 600; font-size: 0.88rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-oi-meta { font-size: 0.78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-oi-actions { display: flex; gap: 4px; flex: 0 0 auto; }

/* Pista de conversión en el modal de item. */
.ec-conv-hint { font-size: 0.82rem; color: var(--muted); background: var(--surface-2); border-radius: 8px; padding: 8px 10px; }
.ec-conv-hint strong { color: var(--text); }

/* ── Config del módulo: agrupación por contenedor ──────────────────────────────
   Cada bloque de ajustes va en su propia tarjeta con título. El "para qué sirve"
   vive SIEMPRE en el tooltip del título, nunca como párrafo suelto. Aplica a
   todas las secciones (general, productos, pedidos, integraciones). */
.ec-cfg-group { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
                padding: 18px 22px; display: flex; flex-direction: column; gap: 16px; }
.ec-cfg-group-title { font-weight: 700; font-size: 0.92rem; color: var(--text-strong);
                      display: inline-flex; align-items: center; gap: 6px; }
/* Las secciones con contenedores necesitan más ancho que el .mir-config-section
   base (460px), sobre todo la de avisos (editor + vista previa lado a lado).
   Se cualifica con `.mir-config-section` A PROPÓSITO: esa regla se define MÁS
   ABAJO en este archivo, así que con un solo selector de clase ganaba por orden
   y el ancho extra no se aplicaba nunca. Subir la especificidad lo hace inmune a
   dónde quede cada bloque. */
.mir-config-section.ec-cfg-wide { max-width: 1180px; }

/* ── Plantillas de avisos al cliente ───────────────────────────────────────── */
/* Botones de inserción de comodines: separados, no pegados. */
.ec-tpl-vars { display: flex; flex-wrap: wrap; gap: 8px; }
/* Editor a la izquierda, flecha al centro, vista previa a la derecha; apilados en
   pantallas chicas. La columna del medio es `auto`: solo ocupa lo que mide el icono. */
.ec-tpl-split { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
                gap: 18px; align-items: stretch; }
/* Apilado: la flecha pasa a apuntar hacia abajo, que es como fluye el contenido. */
@media (max-width: 760px) {
    .ec-tpl-split { grid-template-columns: 1fr; gap: 10px; }
    .ec-tpl-arrow { transform: rotate(90deg); padding: 0; }
}
.ec-tpl-pane { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ec-tpl-label { font-size: 12px; color: var(--muted); }
/* Se alinea con las cajas, no con las etiquetas: de ahí el padding superior, que
   compensa la altura de la fila de `.ec-tpl-label`. */
.ec-tpl-arrow { display: flex; align-items: center; justify-content: center;
                color: var(--muted-2); padding-top: 22px; }
.ec-tpl-preview { flex: 1; font-size: 0.85rem; color: var(--text); background: var(--surface-2);
                  border: 1px solid var(--border-soft); border-radius: 8px; padding: 12px 14px;
                  white-space: pre-wrap; overflow-wrap: anywhere; min-height: 96px;
                  line-height: 1.5; }
.ec-tpl-preview--default { color: var(--muted); font-style: italic; }
/* Comodín mal escrito: rojo, para que no pase desapercibido. */
.ec-tpl-warn { font-size: 0.82rem; color: var(--badge-danger-fg); background: var(--badge-danger-bg);
               border: 1px solid var(--badge-danger-bg); border-radius: 8px; padding: 8px 10px; }
/* Autocompletado mientras se escribe `{...`. Panel flotante → --surface-overlay. */
.ec-tpl-ac-wrap { position: relative; display: flex; flex-direction: column; gap: 6px; }
.ec-tpl-ac { position: absolute; top: 100%; left: 0; right: 0; z-index: 40; margin-top: 4px;
             background: var(--surface-overlay); border: 1px solid var(--border); border-radius: 10px;
             box-shadow: var(--shadow-lg); max-height: 190px; overflow-y: auto; padding: 4px; }
.ec-tpl-ac-item { display: block; width: 100%; text-align: left; padding: 7px 9px; border: 0;
                  border-radius: 7px; background: transparent; color: var(--text); cursor: pointer;
                  font-size: 0.85rem; }
.ec-tpl-ac-item:hover { background: var(--control-bg-hover); }
.ec-tpl-ac-key { font-weight: 700; color: var(--text-strong); }
.ec-tpl-ac-label { color: var(--muted); margin-left: 6px; }

.pg-empty { padding: 26px; text-align: center; color: var(--muted); }
/* Celda de acciones común a Pagos, Contactos y Tickets: botones inline, un solo
   clic, mismo tamaño en los tres módulos. flex-wrap evita que se desborden en
   columnas estrechas. */
.pg-actions { display: flex; gap: 4px; flex-wrap: wrap; white-space: nowrap; }

/* Acciones como iconos (Ver/Editar/Eliminar/Activar) en las tablas del ecommerce. */
.ec-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; }
.ec-ic { width: 15px; height: 15px; }

/* Tabs siempre montadas: la inactiva se oculta (no se desmonta → sin re-fetch/flicker). */
.ec-hidden { display: none; }

/* Toast minimalista fijo (reemplaza el banner que empujaba el layout). */
.ec-toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 2000;
  display: flex; align-items: center; gap: 10px;
  max-width: min(360px, 90vw); padding: 11px 14px;
  background: var(--surface-overlay); color: var(--text);
  border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: 10px; box-shadow: var(--shadow-lg); font-size: 0.85rem;
  animation: ecToastIn 0.25s ease;
}
.ec-toast-x { border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 0.9rem; line-height: 1; padding: 2px 4px; border-radius: 6px; flex: 0 0 auto; }
.ec-toast-x:hover { background: var(--control-bg-hover); color: var(--text); }
@keyframes ecToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Modales del ecommerce: tamaño fijo grande + scroll interno. No cambian de
   tamaño según el contenido ni al cambiar de tab; responsivos en móvil. */
.ecommerce-page .modal-card {
  width: 100%;
  max-width: min(920px, 95vw);
  height: min(85vh, 720px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ecommerce-page .modal-card > .modal-header,
.ecommerce-page .modal-card > .modal-footer { flex: 0 0 auto; }
.ecommerce-page .modal-card > div:not(.modal-header):not(.modal-footer) {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
@media (max-width: 640px) {
  .ecommerce-page .modal-card { height: 90vh; max-width: 100%; }
}
/* Excepción: modales pequeños (confirmaciones) vuelven a altura automática. */
.ecommerce-page .modal-card.ec-modal-auto { height: auto; max-height: 90vh; }
.ec-confirm-msg { color: var(--text); font-size: 0.9rem; line-height: 1.5; margin: 0; }
/* Fila clicable (pedidos del cliente → abre en la tab Pedidos). */

/* Columnas configurables (en Config): orden ↑/↓ + on/off. */
.ec-cols-config { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; max-width: 460px; }
.ec-cols-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.ec-cols-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; transition: opacity 0.15s ease; }
.ec-cols-row.is-off { opacity: 0.42; }
.ec-cols-ord { display: inline-flex; gap: 2px; }
.ec-cols-ord .ec-icon-btn { padding: 2px 7px; line-height: 1; }
.ec-cols-name { flex: 1 1 auto; font-size: 0.88rem; color: var(--text); }
.ec-cols-check { display: inline-flex; align-items: center; }
.ec-cols-check input[type="checkbox"] { width: auto; }
.ec-cols-check[title]:not([title=""]) { cursor: help; }

/* Columnas personalizadas (G2). */
.ec-cols-actions { display: inline-flex; gap: 2px; margin-left: 4px; }
.ec-cols-actions .ec-icon-btn { padding: 2px 7px; line-height: 1; }
.ec-col-badge { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--brand-soft-bg); color: var(--brand); vertical-align: middle; }
/* Fila "agregar columna": bordes punteados con hover de escala + color. */
.ec-cols-addrow { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px;
  padding: 9px 0; border: 1.5px dashed var(--border); border-radius: 10px; color: var(--muted);
  cursor: pointer; user-select: none; font-size: 0.86rem;
  transition: transform 0.12s ease, border-color 0.12s ease, color 0.12s ease, background 0.12s ease; }
.ec-cols-addrow:hover, .ec-cols-addrow:focus-visible { transform: scale(1.02); border-color: var(--brand);
  color: var(--brand); background: var(--brand-soft-bg); outline: none; }
.ec-cols-addrow-plus { font-size: 1.05rem; font-weight: 700; line-height: 1; }
/* Popover crear/editar columna adicional (en Portal, fixed). */
.ec-col-pop { position: fixed; z-index: 2100; min-width: 230px; width: 250px; max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px); overflow-y: auto; overflow-x: hidden; box-sizing: border-box;
  background: var(--surface-overlay); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
/* Dentro del popover el label del checkbox debe envolver (no nowrap → sin scroll horizontal). */
.ec-col-pop .ec-extra-req-chk, .ec-quick-pop .ec-extra-req-chk { white-space: normal; align-items: flex-start; }
.ec-col-pop .pg-input, .ec-quick-pop .pg-input { max-width: 100%; box-sizing: border-box; }
/* Descripción viva del rol de flujo seleccionado (bajo el selector en el popover). */
.ec-col-pop-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.ec-col-pop-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--muted); }
.ec-col-pop-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.ec-extra-req-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; color: var(--text); white-space: nowrap; }
.ec-extra-req-chk input[type="checkbox"] { width: auto; }
/* Bloque de campos personalizados en los formularios de crear/editar. */
.ec-extra-fields { margin-top: 6px; border-top: 1px dashed var(--border); padding-top: 10px; }
/* Aire entre el título de la sección y el primer campo (antes casi se tocaban). */
.ec-extra-fields .ec-cols-title { margin-bottom: 12px; }
.ec-req { color: var(--danger, #d33); font-weight: 700; }
/* Validación inline de campos obligatorios: borde rojo + aviso bajo el campo. */
.ec-field-err, .ec-field-err:focus { border-color: var(--danger) !important; }
.ec-req-msg { display: block; color: var(--danger); font-size: 0.72rem; margin-top: 3px; }

/* Toolbar estándar dentro de las tabs del módulo: reusa el dialecto de
   .tickets-toolbar, solo se le quita el margen de página (vive dentro de la tab). */
.ec-toolbar { margin-bottom: 14px; }
/* El "modo selección" es un interruptor, no una acción puntual: cuando está
   encendido se tiñe de marca igual que el embudo con filtros activos. */
.ec-toolbar .contacts-refresh-btn.is-active { color: var(--brand); }
.ec-toolbar .contacts-refresh-btn.is-active .mir-icon { transform: translateY(-2px); }

/* Fila clicable → abre el detalle (se eliminó la acción "Ver"). */
.pg-row.ec-row-click { cursor: pointer; }
.pg-row.ec-row-click:hover { background: var(--control-bg-hover); }

/* Selección múltiple (estilo MIR): fila clicable en modo selección + marcada. */
.pg-row.ec-selectmode { cursor: pointer; user-select: none; }
.pg-row.ec-selectmode:hover { background: var(--control-bg-hover); }
.pg-row.ec-row-sel { background: var(--brand-soft-bg); box-shadow: inset 3px 0 0 var(--brand); }
.pg-row.ec-row-sel:hover { background: var(--brand-soft-bg); }
/* Estilos de celda cuando .pg-table se usa sobre un <table> REAL (catálogo de
   órdenes SAE). Las demás .pg-table son grids de divs (.pg-row) → estas reglas,
   al apuntar a thead/th/td, NO las afectan. Sin esto la tabla SAE salía sin
   formato (HTML plano, celdas apretadas). */
/* width:auto + min-width:100% → la tabla llena el modal como mínimo pero CRECE con
   su contenido (celdas nowrap) en vez de comprimir 9 columnas en el ancho del modal.
   overflow:visible anula el overflow-x del .pg-table base: el scroll horizontal lo
   maneja SOLO .ticket-table-wrap (evita doble scroll y el apretado). */
table.pg-table { border-collapse: separate; border-spacing: 0; width: auto; min-width: 100%; overflow: visible; }
.pg-table thead th {
  text-align: left; padding: 11px 12px; white-space: nowrap;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--muted); background: var(--surface-2);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1;
}
.pg-table tbody td {
  padding: 9px 12px; font-size: 0.84rem; color: var(--text);
  border-bottom: 1px solid var(--border-soft); vertical-align: middle; white-space: nowrap;
}
.pg-table tbody tr:last-child td { border-bottom: none; }
.pg-table tbody tr:hover td { background: var(--surface-2); }
.pg-table th.pg-cell--center, .pg-table td.pg-cell--center { text-align: center; }
/* Anchos mínimos por columna para que la data no quede apretada (celdas nowrap ya
   evitan el corte; esto asegura columnas legibles y toggles con aire). */
.pg-table thead th, .pg-table tbody td { min-width: 5.5rem; }
.pg-table thead th:first-child, .pg-table tbody td:first-child { min-width: 12rem; }   /* Detalle */
.pg-table thead th:nth-child(2),  .pg-table tbody td:nth-child(2)  { min-width: 10rem; }   /* Tipo / grupo */
.pg-table th.pg-cell--center, .pg-table td.pg-cell--center { min-width: 6.5rem; }          /* toggles con aire */
/* Los controles de fila (select/input) heredan el ancho justo, no todo el td. */
.pg-table tbody td .pg-input { min-width: 8rem; }

.pg-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.pg-tag--registrado { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); }
.pg-tag--en_revision { background: var(--badge-warn-bg); color: var(--badge-warn-fg); }
.pg-tag--validado { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.pg-tag--rechazado { background: var(--badge-danger-bg); color: var(--badge-danger-fg); }
.pg-tag--cerrado { background: var(--badge-purple-bg); color: var(--badge-purple-fg); }

/* Layout en el bloque canónico (buscar "PAGINACIÓN ESTÁNDAR"). */

/* En móvil, los filtros de estos módulos ocupan el ancho completo (una columna)
   en vez de quedar apretados o desbordar. Las tablas anchas siguen con scroll-x
   dentro de su contenedor. */
@media (max-width: 640px) {
  .users-filter,
  .users-filter--text,
  .perms-filter { flex: 1 1 100%; min-width: 0; }
  .pg-input { flex: 1 1 100%; }
}

/* ── Modal de detalle del pago ─────────────────────────────────────────────── */
.pg-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--scrim);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 4vw, 24px);
}
.pg-modal {
  background: var(--surface-overlay);
  border-radius: 14px;
  width: min(680px, 100%);
  max-height: 88vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.pg-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.pg-modal-head h3 { margin: 0; font-size: 1.05rem; color: var(--text); }
.pg-modal-close {
  border: none; background: transparent; cursor: pointer;
  font-size: 1.1rem; color: var(--muted); line-height: 1; padding: 4px 8px; border-radius: 8px;
}
.pg-modal-close:hover { background: var(--control-bg-hover); color: var(--text); }
.pg-modal-body { padding: 18px 20px; overflow-y: auto; }
.pg-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 18px;
}
.pg-detail-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pg-detail-k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); font-weight: 600; }
.pg-detail-item > span:last-child { font-size: 0.9rem; color: var(--text); word-break: break-word; }
.pg-detail-section { margin-top: 16px; }
.pg-detail-notes {
  margin-top: 6px; padding: 10px 12px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 0.85rem; color: var(--text); white-space: pre-wrap; word-break: break-word;
}
.pg-proof { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pg-proof-img {
  max-width: 100%; max-height: 360px; border-radius: 10px;
  border: 1px solid var(--border); object-fit: contain; background: var(--surface-2);
}
.pg-proof-link { font-size: 0.82rem; color: var(--brand); text-decoration: none; }
.pg-proof-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   App shell + sidebar global de módulos (navegación unificada)
   Reemplaza el sidebar duplicado de home y el dropdown "Módulos".
   ═══════════════════════════════════════════════════════════════ */
/* Shell en COLUMNA: header global arriba a lo ancho, debajo la fila
   [sidebar | contenido]. El header (.ph) es sticky top:0 dentro del shell. */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.app-body { display: flex; align-items: stretch; flex: 1 1 auto; min-height: 0; }
.app-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.module-sidebar {
  flex: 0 0 auto;
  width: 224px;
  background: #131a2a;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  /* La sidebar ahora vive BAJO el header (60px): pega justo debajo. */
  top: 60px;
  align-self: flex-start;
  height: calc(100vh - 60px);
  overflow-y: auto;
  transition: width 0.18s ease;
  z-index: 30;
  /* Scrollbar overlay: reserva su propio carril (no pisa iconos) y se oculta
     hasta que el puntero entra a la sidebar. */
  scrollbar-gutter: stable;
  scrollbar-width: thin;                       /* Firefox */
  scrollbar-color: transparent transparent;
}
.module-sidebar:hover { scrollbar-color: rgba(255, 255, 255, 0.20) transparent; }
.module-sidebar::-webkit-scrollbar { width: 8px; }
.module-sidebar::-webkit-scrollbar-track { background: transparent; }
.module-sidebar::-webkit-scrollbar-thumb {
  background: transparent;
  border: 2px solid transparent;               /* inset → carril propio, no toca iconos */
  background-clip: padding-box;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}
.module-sidebar:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.20); background-clip: padding-box; }
.module-sidebar:hover::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.34); background-clip: padding-box; }
.module-sidebar--collapsed { width: 64px; }

.module-sidebar-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: transparent;
  color: #e2e8f0;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}
.module-sidebar-toggle:hover { background: rgba(255, 255, 255, 0.06); }
.module-sidebar-toggle-icon { font-size: 1rem; line-height: 1; width: 18px; text-align: center; }
.module-sidebar--collapsed .module-sidebar-toggle { justify-content: center; }
.module-sidebar--collapsed .module-sidebar-toggle-label { display: none; }

.module-sidebar-nav { display: flex; flex-direction: column; gap: 2px; }

.module-sidebar-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #cbd5e1;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}
.module-sidebar-item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.module-sidebar-item.is-active { background: var(--brand-dark); color: #fff; }
.module-sidebar-item.is-maint { opacity: 0.45; cursor: not-allowed; }
.module-sidebar-icon { font-size: 1.1rem; width: 22px; text-align: center; flex-shrink: 0; }
.module-sidebar-label { overflow: hidden; text-overflow: ellipsis; }
.module-sidebar-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #f59e0b; margin-left: auto; flex-shrink: 0;
}
.module-sidebar--collapsed .module-sidebar-item { justify-content: center; padding: 10px 0; }
.module-sidebar--collapsed .module-sidebar-label,
.module-sidebar--collapsed .module-sidebar-dot { display: none; }

/* Botón ☰ del header (toggle de la sidebar) */
.ph-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}
.ph-menu-toggle:hover { background: rgba(255, 255, 255, 0.06); }

/* Móvil: sidebar como overlay. Colapsada = riel de iconos (64px), NO oculta:
   el toggle vive dentro de la sidebar (ya no hay hamburguesa en el header), así
   que debe seguir alcanzable para poder re-expandirla. */
@media (max-width: 860px) {
  .module-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; height: 100vh;
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.4);
  }
  .module-sidebar--collapsed { width: 64px; }
}

/* ── Light mode: sidebar global ── */
html.light-mode .module-sidebar { background: var(--surface); border-right-color: #e6ebf2; }
html.light-mode .module-sidebar:hover { scrollbar-color: rgba(0, 0, 0, 0.22) transparent; }
html.light-mode .module-sidebar:hover::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); background-clip: padding-box; }
html.light-mode .module-sidebar:hover::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.30); background-clip: padding-box; }
html.light-mode .module-sidebar-toggle { color: var(--text-strong); border-color: var(--border); }
html.light-mode .module-sidebar-toggle:hover { background: var(--surface-2); }
html.light-mode .module-sidebar-item { color: var(--muted); }
html.light-mode .module-sidebar-item:hover { background: var(--surface-2); color: var(--text-strong); }
html.light-mode .module-sidebar-item.is-active { background: var(--brand-dark); color: #fff; }
html.light-mode .ph-menu-toggle { color: var(--text-strong); border-color: var(--border); }
html.light-mode .ph-menu-toggle:hover { background: var(--surface-2); }

/* ── Módulos MIR (Reservas) y Cinema (Cine) ──────────────────────────────── */
/* Tabs superiores estilo píldora (igual que módulo Tickets). */
.mir-tabs { display: flex; gap: 3px; margin-bottom: 20px; background: var(--surface-2);
  border-radius: 12px; padding: 5px; width: fit-content; max-width: 100%; overflow-x: auto; }
.mir-tab { appearance: none; border: 0; border-radius: 8px; background: transparent; color: var(--muted);
  cursor: pointer; font-family: inherit; font-size: 0.8125rem; font-weight: 600; padding: 8px 18px;
  white-space: nowrap; transition: all 0.15s; }
.mir-tab:not(.active):hover { background: var(--control-bg-hover); color: var(--text); }
.mir-tab.active { background: var(--brand-dark); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }

.mir-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.mir-toolbar .pg-input { min-width: 200px; }

.mir-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mir-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: var(--muted); }
.mir-form .mir-check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }
.mir-form .mir-check input { width: auto; }

.pg-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px;
  border-top: 1px solid var(--border); }

.mir-config-editor { width: 100%; min-height: 220px; font-family: ui-monospace, Menlo, monospace;
  font-size: 0.82rem; padding: 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); color: var(--text); box-sizing: border-box; margin-bottom: 12px; }

/* Config con selector lateral de secciones (estilo panel). */
.mir-config { display: flex; gap: 18px; align-items: flex-start; }
.mir-config-nav { flex: 0 0 190px; display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid var(--border-soft); padding-right: 12px; }
.mir-config-navitem { text-align: left; padding: 9px 12px; border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--text-1); font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.mir-config-navitem:hover { background: var(--surface-2); }
.mir-config-navitem.is-active { background: var(--brand-soft-bg); color: var(--brand-dark); border-color: var(--border-soft); }
.mir-config-content { flex: 1; min-width: 0; }
.mir-config-section { display: flex; flex-direction: column; gap: 18px; max-width: 460px; }
.mir-config-hint { color: var(--muted); font-size: 12px; margin: 0; }
.mir-config-row { display: flex; flex-direction: column; gap: 6px; }
.mir-config-rowhead { display: inline-flex; align-items: center; gap: 6px; }
.mir-config-rowtitle { font-weight: 700; font-size: 0.92rem; color: var(--text-strong); }
.mir-config-input { max-width: 200px; }
.mir-config-actions { display: flex; }

.mir-capacity { margin-bottom: 16px; }

/* Insignias por estado de reserva */
.mir-st--hold      { background: rgba(180,83,9,0.12);  color: #b45309; border: 1px solid rgba(180,83,9,0.25); }
.mir-st--confirmed { background: rgba(29,78,216,0.12); color: #1d4ed8; border: 1px solid rgba(29,78,216,0.25); }
.mir-st--completed { background: rgba(4,120,87,0.12);  color: #047857; border: 1px solid rgba(4,120,87,0.25); }
.mir-st--cancelled { background: rgba(185,28,28,0.12); color: #b91c1c; border: 1px solid rgba(185,28,28,0.25); }
.mir-st--expired   { background: rgba(71,85,105,0.12); color: #475569; border: 1px solid rgba(71,85,105,0.25); }

/* Cinema: salas */
.cinema-rooms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 18px; }
.cinema-room-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px; cursor: pointer; box-shadow: var(--shadow-sm); transition: box-shadow 0.15s; }
.cinema-room-card:hover { box-shadow: var(--shadow-md); border-color: var(--brand); }
.cinema-room-title { font-weight: 700; color: var(--text); margin-bottom: 6px; }
.cinema-room-meta { font-size: 0.8rem; color: var(--muted); }
.cinema-room-next { font-size: 0.8rem; color: var(--brand-dark); margin-top: 6px; }
.cinema-day { margin-top: 18px; }
.cinema-day h3 { font-size: 1rem; color: var(--text); margin: 0 0 10px; }

/* Cinema: mapa de asientos */
.cinema-seatmap { display: flex; flex-wrap: wrap; gap: 6px; }
.cinema-seat { display: inline-flex; align-items: center; justify-content: center; min-width: 38px;
  height: 32px; padding: 0 6px; border-radius: 6px; font-size: 0.72rem; font-weight: 600; border: 1px solid var(--border); }
.cinema-seat--free      { background: var(--control-bg); color: var(--muted); }
.cinema-seat--hold      { background: rgba(180,83,9,0.18);  color: #b45309; }
.cinema-seat--confirmed { background: rgba(29,78,216,0.18); color: #1d4ed8; }
.cinema-seat--completed { background: rgba(4,120,87,0.18);  color: #047857; }
.cinema-general { padding: 16px; background: var(--panel-2); border-radius: 8px; font-size: 0.95rem; color: var(--text); }
.cinema-uuid { font-family: ui-monospace, Menlo, monospace; font-size: 0.72rem; color: var(--muted); }

/* ── MIR/Cinema: Drawer lateral con tabs (forms) ─────────────────────────── */
.mir-drawer-backdrop { position: fixed; inset: 0; background: var(--scrim); z-index: 60;
  animation: mir-fade 0.15s ease; }
@keyframes mir-fade { from { opacity: 0; } to { opacity: 1; } }
.mir-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(460px, 94vw);
  background: var(--surface-overlay); border-left: 1px solid var(--border); z-index: 61;
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
  animation: mir-slide 0.2s ease; }
/* Tooltips del drawer: abren HACIA ABAJO para no cortarse contra la cabecera; por encima de todo. */
.mir-drawer .mir-tip-bubble { top: calc(100% + 10px); bottom: auto; transform: translateX(-50%) translateY(-4px); z-index: 90; }
.mir-drawer .mir-tip:hover .mir-tip-bubble,
.mir-drawer .mir-tip:focus-visible .mir-tip-bubble { transform: translateX(-50%) translateY(0); }
@keyframes mir-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }
.mir-drawer-backdrop.is-closing { animation: mir-fade-out 0.18s ease forwards; }
.mir-drawer.is-closing { animation: mir-slide-out 0.18s ease forwards; }
@keyframes mir-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes mir-slide-out { from { transform: translateX(0); } to { transform: translateX(100%); } }
.mir-drawer-header { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.mir-drawer-header h3 { margin: 0; font-size: 1.05rem; color: var(--text-strong); }
.mir-drawer-close { background: transparent; border: none; cursor: pointer; font-size: 1.2rem;
  color: var(--muted); line-height: 1; padding: 4px 8px; border-radius: 6px; }
.mir-drawer-close:hover { background: var(--control-bg-hover); color: var(--text); }
.mir-drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.mir-drawer-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px;
  border-top: 1px solid var(--border); flex-shrink: 0; }

/* Tabs internos del drawer: mismo lenguaje visual que las tabs principales. */
.mir-dtabs { display: inline-flex; gap: 3px; margin-bottom: 18px; padding: 5px;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 12px; flex-wrap: wrap; }
.mir-dtab { appearance: none; border: 0; border-radius: 8px; padding: 8px 16px; background: transparent;
  cursor: pointer; font-family: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--muted);
  white-space: nowrap; transition: all 0.15s; }
.mir-dtab:hover { background: var(--control-bg-hover); color: var(--text); }
.mir-dtab.active { background: var(--brand-dark); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }

/* Campos del drawer — apilados uno encima de otro (como el front viejo), no lado a lado */
.mir-form-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
.mir-form-grid label, .mir-form-full label { display: flex; flex-direction: column; gap: 4px;
  font-size: 0.82rem; color: var(--muted); }
.mir-form-full { display: block; margin-bottom: 12px; }
.mir-form-full > label { width: 100%; }
/* Toggle switch apilado: etiqueta arriba, switch debajo (coherente con los campos de texto). */
.mir-switch-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  font-size: 0.85rem; color: var(--text); padding: 6px 0; margin-bottom: 4px; }
.mir-switch-row > span { display: inline-flex; }
/* El fondo del interruptor se fuerza con !important: ningún estado (focus/active/hover)
   ni pintado nativo del navegador puede blanquearlo. Solo depende de checked. */
.mir-switch-row input[type="checkbox"] { appearance: none !important; -webkit-appearance: none !important; position: relative;
  width: 42px; height: 24px; min-width: 42px; border-radius: 999px; background: var(--switch-off, #cbd5e1) !important;
  border: 1px solid var(--border); cursor: pointer; transition: background 0.15s ease; flex: 0 0 auto; margin: 0; box-shadow: none; }
.mir-switch-row input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform 0.15s ease; }
.mir-switch-row input[type="checkbox"]:checked { background: var(--brand) !important; }
.mir-switch-row input[type="checkbox"]:checked::after { transform: translateX(18px); }
/* Focus/active: nunca cambian el fondo; solo un anillo accesible en teclado. */
.mir-switch-row input[type="checkbox"]:focus,
.mir-switch-row input[type="checkbox"]:active,
.mir-switch-row input[type="checkbox"]:hover { box-shadow: none; outline: none; }
.mir-switch-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mir-help-text { font-size: 0.8rem; color: var(--muted); margin: 0 0 12px; }
.mir-dpane-grid-full { grid-column: 1 / -1; }
.mir-inline-note { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border-soft); font-size: 0.82rem; }

/* ── Chips de días de la semana (tab Repetición del bloque de tiempo) ── */
.mir-wd-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mir-wd-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px;
  border: 1px solid var(--control-border); border-radius: 999px; background: var(--control-bg);
  cursor: pointer; font-size: 0.8rem; user-select: none; }
.mir-wd-chip:hover { background: var(--control-bg-hover); }
.mir-wd-chip input { accent-color: var(--brand); }

/* ── Tarjeta de integración compartida (colapsable, MIR + E-commerce) ── */
.integ-card { border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface);
  overflow: hidden; }
.integ-card-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px;
  background: var(--surface-2); border: 0; cursor: pointer; text-align: left; color: var(--text); }
.integ-card-head:hover { background: var(--control-bg-hover); }
.integ-card-title { font-weight: 700; color: var(--text-strong); flex: 1; }
.integ-card-chevron { color: var(--muted); font-size: 0.9rem; transition: transform 0.25s ease; }
.integ-card.is-open .integ-card-chevron { transform: rotate(180deg); }
/* Animación suave: grid-template-rows 0fr→1fr (no salta como max-height). */
.integ-card-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
.integ-card-body.is-open { grid-template-rows: 1fr; }
.integ-card-body-inner { overflow: hidden; display: flex; flex-direction: column; gap: 10px;
  padding: 0 14px; }
.integ-card-body.is-open .integ-card-body-inner { padding: 12px 14px; }
.integ-card-status { display: flex; flex-wrap: wrap; gap: 6px; }

.ec-integ-cell { display: inline-flex; align-items: center; gap: 6px; }
.ec-integ-mod { font-size: 0.75rem; color: var(--muted); }
.ec-integ-note { padding: 10px 12px; border-radius: 10px; background: var(--brand-soft-bg);
  color: var(--brand-soft-fg); font-size: 0.82rem; margin-bottom: 10px; }

/* ── Picker de slots de reserva (item de pedido, Fase 4) ── */
.ec-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.ec-slot { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 6px 10px; border: 1px solid var(--control-border); border-radius: 8px;
  background: var(--control-bg); cursor: pointer; color: var(--text); font-variant-numeric: tabular-nums; }
.ec-slot:hover:not(:disabled) { background: var(--control-bg-hover); border-color: var(--brand); }
.ec-slot.is-sel { border-color: var(--brand); background: var(--brand-soft-bg); color: var(--brand-soft-fg); }
.ec-slot:disabled { opacity: 0.45; cursor: not-allowed; }
.ec-slot-rem { font-size: 0.68rem; color: var(--muted); }

/* ── Crear recurso nuevo inline (par producto↔recurso, Fase 5) ── */

.mir-field-label { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 600; }
/* Validación de campos obligatorios (marca en rojo, sin usar el banner superior). */
.mir-req-star { color: var(--danger); font-weight: 700; margin-left: 2px; }
/* Spinner en línea para botones (Creando…/Guardando…). */
.mir-spinner { display: inline-block; width: 13px; height: 13px; vertical-align: -2px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: mir-spin 0.7s linear infinite; }
@keyframes mir-spin { to { transform: rotate(360deg); } }
.mir-field-err { display: block; color: var(--danger); font-size: 0.75rem; margin-top: 4px; }
/* Botón extra-pequeño (acciones inline: cambiar contacto, enlazar pago). */
.pg-btn--xs { padding: 3px 10px; font-size: 0.75rem; line-height: 1.2; }
/* Picker de titular (contacto obligatorio) en el form de reserva. */
.mir-contact-search { position: relative; }
.mir-contact-results { margin-top: 4px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); box-shadow: var(--shadow-md); max-height: 220px; overflow-y: auto; }
.mir-contact-result { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left; padding: 8px 12px; background: none; border: none; cursor: pointer;
  border-bottom: 1px solid var(--border-soft); color: var(--text-strong); }
.mir-contact-result:last-child { border-bottom: none; }
.mir-contact-result:hover { background: var(--control-bg-hover); }
.mir-contact-chip { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.mir-contact-chip-info { display: flex; flex-direction: column; gap: 2px; }
.mir-contact-chip-sub { color: var(--muted); font-size: 0.78rem; }
/* Sección Pago en el detalle de reserva. */
.mir-pago-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.mir-pago-title { margin: 0 0 6px; font-size: 0.9rem; color: var(--text-strong); }
.mir-pago-empty { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.mir-pago-warn { color: var(--badge-warn-fg); font-size: 0.82rem; }
.mir-pago-link { display: flex; flex-direction: column; gap: 8px; }
.mir-pago-cands { display: flex; flex-direction: column; gap: 4px; }
.mir-pago-cands-label { color: var(--muted); font-size: 0.78rem; font-weight: 600; }
.mir-pago-cand { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 0.82rem; padding: 4px 0; }
.mir-pago-manual { display: flex; gap: 8px; align-items: center; }
.mir-pago-manual .pg-input { flex: 1; }
/* Aviso suave (única fuente de cupos por rama). */
.mir-inline-warn { border-left: 3px solid var(--danger); background: var(--badge-danger-bg); color: var(--badge-danger-fg); }
/* Modales de detalle (recurso/bloque/reserva): filas etiqueta→valor. */
.mir-detail-modal { max-width: 460px; width: 100%; }
.mir-detail-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 0.88rem; }
.mir-detail-row:last-child { border-bottom: none; }
.mir-detail-k { color: var(--muted); font-weight: 600; flex: 0 0 auto; }
.mir-detail-v { color: var(--text-strong); text-align: right; word-break: break-word; }
/* Tarjeta de reserva: cabecera con título + botón de detalle. */
.mir-kcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.mir-kcard-top .mir-kcard-title { flex: 1 1 auto; }
/* Bloque en vista día: envoltura con botón de detalle. */
.mir-day-block-wrap { display: flex; align-items: stretch; gap: 4px; }
.mir-day-block-wrap .mir-day-block { flex: 1 1 auto; }
.mir-day-binfo { flex: 0 0 auto; align-self: center; }
.pg-input.is-err { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger) inset; }
.mir-dtp-err .mir-dtp-btn { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger) inset; }
.mir-icon { width: 16px; height: 16px; display: inline-block; flex: 0 0 auto; }
.mir-icon--xs { width: 14px; height: 14px; }
.mir-icon--lg { width: 26px; height: 26px; }
.mir-icon-placeholder { width: 16px; height: 16px; display: inline-block; }
.mir-tip { position: relative; display: inline-flex; align-items: center; color: var(--muted); }
.mir-tip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 999px; }
.mir-tip-ic { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); }
.mir-tip-bubble { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px);
  min-width: 180px; max-width: 260px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); font-size: 0.78rem; line-height: 1.4;
  opacity: 0; pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease; z-index: 30; font-weight: 500; }
.mir-tip:hover .mir-tip-bubble, .mir-tip:focus-visible .mir-tip-bubble { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Burbuja flotante fixed (nueva): sale de cualquier contenedor, aparece al instante. */
.mir-tip-pop { position: fixed; z-index: 9999; min-width: 160px; max-width: 260px; padding: 9px 11px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface-overlay); color: var(--text);
  box-shadow: var(--shadow-lg); font-size: 0.78rem; line-height: 1.4; font-weight: 500;
  pointer-events: none; white-space: normal; }

.mir-modal-shell { animation: mir-modal-in 0.18s ease forwards; }
.mir-modal-shell.is-closing { animation: mir-modal-out 0.18s ease forwards; }
/* Sin `forwards`: al terminar no conserva transform → los tooltips fixed escapan del modal. */
.mir-modal-shell .pg-modal { animation: mir-modal-panel-in 0.18s ease; transform-origin: center top; }
.mir-modal-shell.is-closing .pg-modal { animation: mir-modal-panel-out 0.18s ease forwards; }
@keyframes mir-modal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mir-modal-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes mir-modal-panel-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes mir-modal-panel-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(8px) scale(0.97); } }
.mir-modal-context { margin-bottom: 14px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text); }
.mir-modal-headerline { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.mir-modal-headerline-title { font-weight: 700; color: var(--text); }

/* ── MIR: modal chooser "¿qué crear?" ────────────────────────────────────── */
.mir-chooser { max-width: 560px; }
/* El cuerpo del modal permite scroll SOLO vertical (nunca lateral) si hay muchas cards. */
.mir-chooser .pg-modal-body { overflow-x: hidden; }
.mir-chooser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.mir-chooser-grid--triple { grid-template-columns: repeat(3, 1fr); }
/* Cards = cuadrados perfectos (aspect-ratio 1/1), contenido centrado. */
.mir-chooser-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; aspect-ratio: 1 / 1; padding: 18px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2);
  cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; font-family: inherit; }
.mir-chooser-card:hover { border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.mir-chooser-card.is-disabled, .mir-chooser-card:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
/* Icono dentro de una pastilla, como en el front original. */
.mir-chooser-card .mir-icon--lg { box-sizing: border-box; width: 52px; height: 52px; padding: 13px;
  border-radius: 14px; background: var(--brand-soft-bg); color: var(--brand); }
.mir-chooser-tip { position: absolute; top: 10px; right: 10px; }
/* La burbuja del tooltip abre HACIA ABAJO y anclada a la derecha para no cortarse
   contra el borde de la card ni forzar scroll lateral (fix imagen 3). */
.mir-chooser-tip .mir-tip-bubble { bottom: auto; top: calc(100% + 8px); left: auto; right: 0;
  transform: translateY(-4px); }
.mir-chooser-tip .mir-tip:hover .mir-tip-bubble,
.mir-chooser-tip .mir-tip:focus-visible .mir-tip-bubble { transform: translateY(0); }
.mir-chooser-title { font-weight: 700; color: var(--text-strong); font-size: 1rem; }
@media (max-width: 680px) { .mir-chooser-grid--triple { grid-template-columns: 1fr; } .mir-chooser-card { aspect-ratio: auto; } }
@media (max-width: 520px) { .mir-chooser-grid { grid-template-columns: 1fr; } .mir-chooser-card { aspect-ratio: auto; } }

/* ── MIR: schema fields del agente + sub-drawer ──────────────────────────── */
.mir-sf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 16px 0 6px; }
.mir-sf-head h4 { margin: 0; font-size: 0.9rem; color: var(--text-strong); }
.mir-sf-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.mir-sf-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.mir-sf-grp { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--brand-dark); background: var(--brand-soft-bg); padding: 2px 7px; border-radius: 999px; }
.mir-sf-lbl { font-weight: 600; color: var(--text); flex: 1; }
.mir-sf-type { font-size: 0.78rem; color: var(--muted); }
.mir-sf-req { font-size: 0.7rem; color: var(--badge-warn-fg); background: var(--badge-warn-bg);
  padding: 2px 7px; border-radius: 999px; }
.mir-sf-acts { display: flex; gap: 4px; }
/* sub-drawer (encima del drawer principal) */
.mir-subbackdrop { z-index: 62; }
/* Sub-drawer más angosto que el drawer de atrás → se ve su borde izquierdo. */
.mir-subdrawer { z-index: 63; width: min(400px, 88vw); }
/* Responsive prioritario: en móvil los drawers ocupan casi todo el ancho. */
@media (max-width: 560px) {
  .mir-drawer { width: 96vw; }
  .mir-subdrawer { width: 88vw; }
  .mir-drawer-body { padding: 14px; }
}

/* ── MIR: árbol de recursos ──────────────────────────────────────────────── */
.mir-tree { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.mir-tree-row { display: flex; align-items: stretch; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--border-soft); border-radius: 8px; background: var(--surface);
  animation: mir-tree-row-in 0.28s cubic-bezier(0.22, 0.9, 0.22, 1) both;
  animation-delay: calc(var(--mir-depth, 0) * 22ms); transform-origin: top center;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.mir-tree-row:hover { background: var(--surface-2); }
@keyframes mir-tree-row-in {
  from { opacity: 0; transform: translateY(-6px) scaleY(0.94); }
  60% { opacity: 1; transform: translateY(1px) scaleY(1.01); }
  to { opacity: 1; transform: none; }
}
.mir-tree-twirl { display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer; color: var(--muted);
  width: 22px; min-width: 22px; height: auto; padding: 0; border-radius: 6px; align-self: stretch; }
.mir-tree-twirl:hover { color: var(--text); background: var(--surface-2); }
.mir-tree-twirl .mir-icon { width: 15px; height: 15px; transition: transform 0.22s ease; margin: auto; }
.mir-tree-twirl.is-open .mir-icon { transform: rotate(90deg); }
.mir-tree-twirl--empty { cursor: default; }
/* Región clicable de la fila: al pulsarla se expande/colapsa (como el front viejo). */
.mir-tree-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; min-height: 40px; padding: 8px 4px; border-radius: 6px;
  transition: background-color 0.18s ease, transform 0.18s ease; }
.mir-tree-main.is-expandable { cursor: pointer; }
.mir-tree-main.is-expandable:hover { background: var(--surface-2); transform: translateX(1px); }
.mir-tree-icon { font-size: 1rem; flex: 0 0 auto; }
.mir-tree-label { font-weight: 600; color: var(--text); flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Indicador sutil de que la fila tiene hijos: nº de recursos hijos directos. */
.mir-tree-count { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.7rem; font-weight: 600; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 1px 8px; white-space: nowrap; }
.mir-tree-inv { font-size: 0.74rem; color: var(--muted); white-space: nowrap; }
.mir-tree-actions { display: flex; gap: 6px; margin-left: auto; align-items: center; }
/* Checkbox de selección múltiple: sutil, aparece al hover o si la fila está seleccionada. */
.mir-tree-check { flex: 0 0 auto; width: 15px; height: 15px; cursor: pointer; accent-color: var(--brand);
  opacity: 0; transition: opacity 0.12s ease; }
.mir-tree-row:hover .mir-tree-check, .mir-tree-row.is-selected .mir-tree-check { opacity: 1; }
.mir-tree-row.is-selected { background: var(--brand-soft-bg); border-color: var(--brand); }
/* Modo selección: toda la fila es seleccionable. */
.mir-tree-row.is-selectmode { cursor: pointer; user-select: none; }
.mir-tree-row.is-selectmode:hover { background: var(--control-bg-hover); }
.mir-tree-row.is-selectmode.is-selected:hover { background: var(--brand-soft-bg); }
.mir-tree-selbox { flex: 0 0 auto; align-self: center; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--border);
  background: var(--surface); position: relative; transition: all 0.12s ease; }
.mir-tree-selbox.is-on { background: var(--brand); border-color: var(--brand); }
.mir-tree-selbox.is-on::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mir-tree-pub-btn { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
.pg-input--sm { padding: 4px 8px; font-size: 0.8rem; }

/* Barra flotante de selección múltiple */
.mir-bulk-bar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 800;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); max-width: min(96vw, 1120px); }
.mir-bulk-bar-count { font-size: 0.85rem; color: var(--text); white-space: nowrap; font-weight: 600; }
.mir-bulk-bar-sep { width: 1px; height: 22px; background: var(--border); }

/* Modal de publicación / despublicación en cascada */
.mir-pub-box { width: min(620px, 100%); }
.mir-pub-intro { margin: 0 0 12px; font-size: 0.88rem; color: var(--muted); line-height: 1.45; }
.mir-pub-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.mir-pub-chip { padding: 3px 10px; border-radius: 99px; font-size: 0.74rem; font-weight: 700; border: 1px solid transparent; }
/* Colores por estado con tokens del panel (se adaptan a claro/oscuro). */
.mir-pub-chip.is-ready { color: var(--badge-success-fg); background: var(--badge-success-bg); border-color: var(--badge-success-bg); }
.mir-pub-chip.is-err { color: var(--badge-danger-fg); background: var(--badge-danger-bg); border-color: var(--badge-danger-bg); }
.mir-pub-chip.is-live { color: var(--badge-neutral-fg); background: var(--badge-neutral-bg); border-color: var(--badge-neutral-bg); }
.mir-pub-chip.is-warn { color: var(--badge-warn-fg); background: var(--badge-warn-bg); border-color: var(--badge-warn-bg); }
.mir-pub-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.mir-pub-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.mir-pub-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--muted); }
.mir-pub-row.is-ready .mir-pub-dot { background: var(--badge-success-fg); }
.mir-pub-row.is-live .mir-pub-dot { background: var(--badge-neutral-fg); }
.mir-pub-row.is-err .mir-pub-dot { background: var(--badge-danger-fg); }
.mir-pub-row.is-warn .mir-pub-dot { background: var(--badge-warn-fg); }
.mir-pub-row.is-off .mir-pub-dot { background: var(--muted); }
.mir-pub-row.is-ready { border-color: var(--badge-success-bg); background: var(--badge-success-bg); }
.mir-pub-row.is-err { border-color: var(--badge-danger-bg); background: var(--badge-danger-bg); }
.mir-pub-row.is-warn { border-color: var(--badge-warn-bg); background: var(--badge-warn-bg); }
.mir-pub-main { flex: 1; min-width: 0; }
.mir-pub-name { font-size: 0.9rem; color: var(--text); font-weight: 500; }
.mir-pub-state { font-size: 0.76rem; font-weight: 700; flex-shrink: 0; color: var(--muted); }
.mir-pub-row.is-ready .mir-pub-state { color: var(--badge-success-fg); }
.mir-pub-row.is-err .mir-pub-state { color: var(--badge-danger-fg); }
.mir-pub-row.is-warn .mir-pub-state { color: var(--badge-warn-fg); }
.mir-pub-progress { flex: 1; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface-2); color: var(--text); font-size: 0.85rem; font-weight: 600; min-width: 0; }
.mir-progress-track { position: relative; flex: 1; min-width: 120px; height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--control-bg); border: 1px solid var(--border-soft); }
.mir-progress-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-dark)); transition: width 0.18s ease; }
.mir-progress-label { white-space: nowrap; }
.mir-rstatus { font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.mir-rstatus--draft { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); }
.mir-rstatus--ready { background: var(--badge-info-bg); color: var(--badge-info-fg); }
.mir-rstatus--live { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.mir-rstatus--paused { background: var(--badge-warn-bg); color: var(--badge-warn-fg); }
.mir-rstatus--archived { background: var(--badge-neutral-bg); color: var(--muted); }

/* ── MIR: popovers de toolbar (filtros / ordenar) ────────────────────────── */
/* Ancho FIJO (no flex-grow) para que la barra de búsqueda sea idéntica en las 4
   tabs; antes flex:1 la hacía crecer distinto según los botones/spacer vecinos. */
.mir-toolbar-search { flex: 0 0 auto; width: 360px; max-width: 100%; }
.mir-pop-wrap { position: relative; display: inline-block; }
.mir-pop-dismiss { position: fixed; inset: 0; z-index: 19; background: transparent; border: none; padding: 0; }
.mir-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 220px;
  background: var(--surface-overlay); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.mir-pop label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--muted); }
.mir-pop--sort { min-width: 200px; padding: 6px; }
.mir-sort-opt { text-align: left; padding: 7px 10px; background: transparent; border: none;
  border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 0.85rem; color: var(--text); }
.mir-sort-opt:hover { background: var(--surface-2); }
.mir-sort-opt.is-active { background: var(--brand-soft-bg); color: var(--brand-dark); font-weight: 600; }
.pg-btn.is-active { border-color: var(--brand); color: var(--brand-dark); }
.mir-toolbar .pg-btn { display: inline-flex; align-items: center; gap: 6px; }
/* Empuja los botones de acción (limpiar / carga / nuevo) hacia la derecha. */
.mir-toolbar-spacer { flex: 1 1 auto; }
/* Botones solo-icono del módulo: conservar comportamiento general. */
.mir-icon-btn { position: relative; }
/* Descendiente (no `>`): el <Icon> envuelve el svg en spans display:contents. */
.mir-icon-btn .mir-icon { margin: 0; }
/* Ajuste SOLO para acciones de fila en recursos: cuatro iconos coherentes. */
.mir-tree-actions .mir-icon-btn { width: 36px; min-width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; }
.mir-tree-actions .mir-icon-btn .mir-icon { width: 16px; height: 16px; }
/* Contador de filtros activos sobre el botón solo-icono. */
.mir-btn-badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px;
  padding: 0 4px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 700; line-height: 1; color: #fff; background: var(--brand);
  border-radius: 999px; }

/* ── MIR: bloques (vista lista + agenda/calendario) ──────────────────────── */
.mir-viewswitch { display: inline-flex; gap: 2px; }
.mir-row--off { opacity: 0.55; }
.mir-agenda { display: flex; flex-direction: column; gap: 16px; }
.mir-agenda-date { font-weight: 700; color: var(--text-strong); font-size: 0.9rem;
  margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.mir-agenda-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px;
  border: 1px solid var(--border-soft); border-radius: 8px; background: var(--surface);
  cursor: pointer; margin-bottom: 4px; }
.mir-agenda-item:hover { background: var(--surface-2); }
.mir-agenda-time { font-weight: 600; color: var(--brand-dark); min-width: 48px; }
.mir-agenda-name { font-weight: 600; color: var(--text); flex: 1; }
.mir-agenda-res { font-size: 0.8rem; color: var(--muted); }

/* ── MIR: bloques — calendario por mes ───────────────────────────────────── */
/* Barra de mes: ‹ Junio 2026 › + Hoy */
.mir-cal-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.mir-cal-nav { border: 1px solid var(--border); background: var(--surface); color: var(--text);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 1.05rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.mir-cal-nav:hover { background: var(--control-bg-hover); }
.mir-cal-title { border: 1px solid transparent; background: transparent; cursor: pointer;
  font-weight: 700; color: var(--text-strong); font-size: 1.05rem; padding: 4px 10px; border-radius: 8px;
  min-width: 150px; text-align: center; }
.mir-cal-title:hover { background: var(--control-bg-hover); border-color: var(--border); }
.mir-cal-today { margin-left: 4px; }
/* Dropdown de mes/año */
.mir-cal-menu { min-width: 240px; padding: 10px; }
.mir-cal-menu-year { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mir-cal-menu-year > span { font-weight: 700; color: var(--text-strong); }
.mir-cal-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mir-cal-menu-m { border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 8px; padding: 8px 4px; cursor: pointer; text-transform: capitalize; font-size: 0.82rem; }
.mir-cal-menu-m:hover { background: var(--control-bg-hover); }
.mir-cal-menu-m.is-sel { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
/* Cabecera de días de la semana */
.mir-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 8px; }
.mir-cal-dow > span { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; }
/* Rejilla de días */
.mir-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.mir-cal-cell { position: relative; min-height: 92px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); padding: 6px 8px; cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease; display: flex; flex-direction: column; }
.mir-cal-cell:hover { border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.mir-cal-cell--empty { background: transparent; border: none; cursor: default; min-height: 0; }
.mir-cal-cell--empty:hover { box-shadow: none; transform: none; }
.mir-cal-cell.is-today { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.mir-cal-cell-top { display: flex; align-items: center; justify-content: space-between; }
.mir-cal-daynum { font-weight: 700; color: var(--text); font-size: 0.9rem; }
.mir-cal-cell.is-today .mir-cal-daynum { color: var(--brand-dark); }
.mir-cal-add { opacity: 0; border: 1px solid var(--border); background: var(--surface); color: var(--brand-dark);
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer; line-height: 1; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.12s ease; }
.mir-cal-cell:hover .mir-cal-add { opacity: 1; }
.mir-cal-add:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Señal sutil de "hay bloques" (no se pintan los bloques enteros) */
.mir-cal-hint { margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; color: var(--muted); font-weight: 600; }
.mir-cal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: 0 0 auto; }
@media (max-width: 640px) {
  .mir-cal-cell { min-height: 64px; padding: 4px 6px; }
  .mir-cal-cnt { display: none; }
  .mir-cal-add { opacity: 1; }
}

/* ── MIR: bloques — vista día (drill) con efecto hacia delante ────────────── */
.mir-day { animation: mir-day-in 0.22s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes mir-day-in { from { opacity: 0; transform: scale(0.96) translateX(14px); } to { opacity: 1; transform: none; } }
/* Salida: inversa a la entrada (se aleja hacia la derecha y desvanece). */
.mir-day.is-closing { animation: mir-day-out 0.2s cubic-bezier(0.4, 0, 1, 1) forwards; }
@keyframes mir-day-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.96) translateX(14px); } }
.mir-day-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mir-day-title { margin: 0; font-size: 1.02rem; color: var(--text-strong); flex: 1; text-transform: capitalize; }
/* Lista de horas contenida y con scroll (no se extiende indefinidamente). */
.mir-day-hours { display: flex; flex-direction: column; max-height: calc(100vh - 300px); min-height: 200px;
  overflow-y: auto; border: 1px solid var(--border-soft); border-radius: 10px; }
.mir-day-hour { display: flex; align-items: stretch; gap: 10px; border-top: 1px solid var(--border-soft);
  min-height: 44px; padding: 4px 0; }
.mir-day-hour:last-child { border-bottom: 1px solid var(--border-soft); }
.mir-day-hlabel { flex: 0 0 48px; font-size: 0.74rem; color: var(--muted); font-weight: 600; padding-top: 4px; }
.mir-day-hbody { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.mir-day-block { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px;
  border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: 8px;
  background: var(--surface); cursor: pointer; font-family: inherit; text-align: left; }
.mir-day-block:hover { background: var(--surface-2); }
.mir-day-btime { font-weight: 700; color: var(--brand-dark); font-size: 0.8rem; }
.mir-day-bname { font-weight: 600; color: var(--text); font-size: 0.84rem; }
.mir-day-bres { font-size: 0.76rem; color: var(--muted); }
.mir-day-hadd { opacity: 0; border: 1px dashed var(--border); background: transparent; color: var(--muted);
  width: 26px; height: 26px; border-radius: 6px; cursor: pointer; line-height: 1; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.12s ease; }
.mir-day-hour:hover .mir-day-hadd { opacity: 1; }
.mir-day-hadd:hover { border-style: solid; border-color: var(--brand); color: var(--brand-dark); background: var(--surface); }

/* ── MIR: selector fecha+hora propio (MirDateTime) ───────────────────────── */
.mir-dtp { position: relative; }
.mir-dtp-btn { width: 100%; text-align: left; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); border-radius: 8px; padding: 8px 10px; cursor: pointer; font-family: inherit; font-size: 0.86rem; }
.mir-dtp-btn:hover { border-color: var(--brand); }
.mir-dtp-btn.is-empty { color: var(--muted); }
.mir-dtp-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; width: 260px;
  background: var(--surface-overlay); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 10px; }
.mir-dtp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mir-dtp-title { font-weight: 700; color: var(--text-strong); font-size: 0.86rem; }
.mir-dtp-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.mir-dtp-dow > span { text-align: center; font-size: 0.66rem; font-weight: 700; color: var(--muted); }
.mir-dtp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mir-dtp-day { border: none; background: transparent; color: var(--text); border-radius: 7px;
  aspect-ratio: 1 / 1; cursor: pointer; font-size: 0.8rem; display: inline-flex; align-items: center; justify-content: center; }
.mir-dtp-day:hover { background: var(--control-bg-hover); }
.mir-dtp-day--empty { background: transparent; cursor: default; }
.mir-dtp-day--empty:hover { background: transparent; }
.mir-dtp-day.is-sel { background: var(--brand); color: #fff; font-weight: 700; }
.mir-dtp-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.mir-dtp-foot-lbl { font-size: 0.78rem; color: var(--muted); font-weight: 600; margin-right: 2px; }
.mir-dtp-sel { padding: 5px 6px; min-width: 62px; }
.mir-dtp-colon { color: var(--muted); font-weight: 700; }

/* ── Reservas: Tablero (kanban) ── */
/* Wrapper con barra de scroll horizontal ARRIBA (truco doble-flip vertical). */
.mir-kanban-wrap { transform: scaleY(-1); overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.mir-kanban { display: flex; gap: 12px; align-items: stretch; transform: scaleY(-1); }
/* Altura fija responsiva: cubre el alto de la pantalla actual; el cuerpo hace scroll interno. */
.mir-kcol { flex: 0 0 240px; min-width: 240px; background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: 12px; display: flex; flex-direction: column;
  height: calc(100vh - 250px); min-height: 420px; }
.mir-kcol.is-drop { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft-bg) inset; }
.mir-kcol-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft); border-radius: 12px 12px 0 0; }
.mir-kcol-name { font-weight: 700; font-size: 0.85rem; color: var(--text); flex: 1; }
/* Cabecera pintada del color de su estado. */
.mir-kcol-head[data-status="HOLD"]      { background: var(--badge-warn-bg); }
.mir-kcol-head[data-status="HOLD"] .mir-kcol-name      { color: var(--badge-warn-fg); }
.mir-kcol-head[data-status="CONFIRMED"] { background: var(--badge-info-bg); }
.mir-kcol-head[data-status="CONFIRMED"] .mir-kcol-name { color: var(--badge-info-fg); }
.mir-kcol-head[data-status="COMPLETED"] { background: var(--badge-success-bg); }
.mir-kcol-head[data-status="COMPLETED"] .mir-kcol-name { color: var(--badge-success-fg); }
.mir-kcol-head[data-status="CANCELLED"] { background: var(--badge-danger-bg); }
.mir-kcol-head[data-status="CANCELLED"] .mir-kcol-name { color: var(--badge-danger-fg); }
.mir-kcol-head[data-status="EXPIRED"]   { background: var(--badge-neutral-bg); }
.mir-kcol-head[data-status="EXPIRED"] .mir-kcol-name   { color: var(--badge-neutral-fg); }
.mir-kcol-count { font-size: 0.75rem; font-weight: 700; background: var(--control-bg); color: var(--muted);
  border-radius: 999px; padding: 1px 8px; min-width: 22px; text-align: center; }
.mir-kcol-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; }
.mir-kcolempty { font-size: 0.78rem; color: var(--muted); text-align: center; padding: 16px 4px; }
.mir-kcard { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 10px;
  padding: 10px; cursor: pointer; box-shadow: var(--shadow-sm); user-select: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.mir-kcard:active { cursor: pointer; }
.mir-kcard:hover { border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.mir-kcard.is-dragready, .mir-kcard.is-dragready:active { cursor: grab; }
.mir-kcard.is-dragready:hover { transform: translateY(-2px) scale(1.01); }
.mir-kcard-title { font-weight: 600; font-size: 0.85rem; color: var(--text); }
.mir-kcard-holder { font-size: 0.8rem; color: var(--text-1); margin-top: 2px; }
.mir-kcard-meta { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.mir-kcard-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }

/* ── Reservas / MIR: Tab Exportar ── */
.mir-export { padding: 4px 0; }
.mir-export-hint { font-size: 0.85rem; color: var(--muted); margin: 0 0 14px; }
.mir-export-cards { display: flex; flex-wrap: wrap; gap: 14px; }
.mir-export-card { flex: 0 0 240px; background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-sm); }
.mir-export-ico { font-size: 1.8rem; }
.mir-export-name { font-weight: 700; font-size: 0.95rem; color: var(--text); flex: 1;
  display: inline-flex; align-items: center; gap: 6px; }
.mir-export-card .pg-btn { margin-top: 6px; }

/* ── MIR: Carga masiva (importar CSV) ── */
.mir-bulk-modal { width: min(760px, 100%); }
.mir-bulk-actions { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.mir-bulk-filerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mir-bulk-filerow .mir-bulk-file { flex: 1 1 200px; margin-bottom: 0; }
.mir-bulk-file { display: flex; align-items: center; gap: 8px; border: 1.5px dashed var(--control-border);
  border-radius: 10px; padding: 12px; cursor: pointer; background: var(--control-bg); margin-bottom: 12px;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease; }
.mir-bulk-file:hover { transform: scale(1.015); border-color: var(--brand); background: var(--control-bg-hover); }
.mir-bulk-file.is-drag { transform: scale(1.03); border-color: var(--brand); border-style: solid;
  background: var(--brand-soft-bg); box-shadow: 0 0 0 3px var(--brand-soft-bg); }
.mir-bulk-file input[type="file"] { display: none; }
.mir-bulk-file span { font-size: 0.85rem; color: var(--text-1); }
.mir-bulk-empty { font-size: 0.82rem; color: var(--muted); padding: 6px 0; }
.mir-bulk-legend { border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface-2);
  padding: 10px 12px; margin-bottom: 12px; }
.mir-bulk-legend-title { font-weight: 700; font-size: 0.82rem; color: var(--text); margin-bottom: 6px; }
.mir-bulk-legend ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 3px; }
.mir-bulk-legend li { font-size: 0.78rem; color: var(--muted); line-height: 1.4; }
.mir-bulk-legend strong { color: var(--text); }
.mir-bulk-legend em { color: var(--badge-warn-fg); font-style: normal; font-weight: 600; }
.mir-bulk-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.mir-bulk-chip { font-size: 0.78rem; font-weight: 700; border-radius: 999px; padding: 3px 10px;
  background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); }
.mir-bulk-chip--new { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.mir-bulk-chip--edit { background: var(--badge-info-bg); color: var(--badge-info-fg); }
.mir-bulk-chip--del { background: var(--badge-danger-bg); color: var(--badge-danger-fg); }
.mir-bulk-warns { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.mir-bulk-warn { font-size: 0.78rem; color: var(--badge-warn-fg); background: var(--badge-warn-bg);
  border-radius: 8px; padding: 6px 10px; }
.mir-bulk-errors { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px;
  border: 1px solid var(--badge-danger-fg); border-radius: 10px; padding: 8px 10px; background: var(--badge-danger-bg); }
.mir-bulk-errors-title { font-size: 0.8rem; font-weight: 700; color: var(--badge-danger-fg); }
.mir-bulk-error { font-size: 0.78rem; color: var(--badge-danger-fg); }
.mir-bulk-lists { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.mir-bulk-group h4 { margin: 0 0 6px; font-size: 0.82rem; color: var(--muted); }
.mir-bulk-item { font-size: 0.82rem; color: var(--text); padding: 4px 8px; border-radius: 6px;
  background: var(--surface-2); margin-bottom: 3px; display: flex; align-items: baseline; gap: 8px;
  justify-content: space-between; }
.mir-bulk-item-name { font-weight: 600; }
.mir-bulk-item-meta { font-size: 0.75rem; color: var(--muted); text-align: right; }
.mir-bulk-item--del { color: var(--badge-danger-fg); text-decoration: line-through; }

.mir-delete-modal { width: min(620px, 100%); }
.mir-delete-lead { margin: 0 0 12px; color: var(--text); }
.mir-delete-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.mir-delete-stat { padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 0.84rem; }
.mir-delete-list { margin-top: 12px; }
.mir-delete-list h4 { margin: 0 0 8px; font-size: 0.82rem; color: var(--muted); }
.mir-delete-item { padding: 7px 10px; border-radius: 8px; background: var(--surface-2); color: var(--text); margin-bottom: 6px; font-size: 0.82rem; }
.mir-delete-loading { margin-top: 12px; color: var(--muted); font-size: 0.82rem; }
.mir-delete-arm { margin-top: 12px; padding: 12px; border-radius: 12px; background: rgba(220,38,38,0.08); color: var(--danger); border: 1px solid rgba(220,38,38,0.35); font-size: 0.84rem; }
.mir-res-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--border-soft); }
@media (max-width: 640px) { .mir-delete-summary { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   MARKETPLACE (pages/marketplace.rs) — tokens only, ver reglas de theming
   ═══════════════════════════════════════════════════════════════════════════ */

.mk-page { min-height: 100vh; background: var(--bg); }
.mk-body { padding: 20px 24px; max-width: 1100px; margin: 0 auto; }

.mk-install-card { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
.mk-install-title { margin: 0 0 4px; font-size: 0.95rem; color: var(--text-strong); }
.mk-install-hint { margin: 0; font-size: 0.8rem; color: var(--muted); max-width: 560px; }
.mk-install-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mk-force { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted);
  cursor: pointer; user-select: none; }
.mk-upload-btn { display: inline-flex; align-items: center; cursor: pointer; }
.mk-upload-btn.is-busy { opacity: 0.7; cursor: wait; }

.mk-banner { padding: 10px 14px; border-radius: 10px; font-size: 0.84rem; margin-bottom: 12px; }
.mk-banner--error { background: var(--badge-danger-bg); color: var(--badge-danger-fg); }
.mk-banner--ok { background: var(--badge-success-bg); color: var(--badge-success-fg); }

.mk-table { margin-bottom: 10px; }
.mk-row { display: grid; grid-template-columns: 1.6fr 110px 90px 1fr 130px 210px; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 0.83rem;
  color: var(--text); align-items: center; }
.mk-row:last-child { border-bottom: none; }
.mk-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-row--head { font-weight: 700; background: var(--surface-2); color: var(--muted);
  text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.03em; }
.mk-name { font-weight: 600; color: var(--text-strong); }
.mk-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; }
.mk-tag--theme { background: var(--badge-purple-bg); color: var(--badge-purple-fg); }
.mk-tag--module { background: var(--badge-info-bg); color: var(--badge-info-fg); }
.mk-footnote { font-size: 0.75rem; color: var(--muted-2); margin-top: 6px; }

/* ── Marketplace F4: tabs + catálogo + modal de publicación ─────────────── */
.mk-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border);
    margin-bottom: 18px; }
.mk-tab { appearance: none; border: none; background: transparent; cursor: pointer;
    padding: 10px 16px; font-size: 0.85rem; color: var(--muted); font-weight: 600;
    border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mk-tab:hover { color: var(--text); }
.mk-tab.active { color: var(--brand); border-bottom-color: var(--brand); }

.mk-catalog-bar { display: flex; justify-content: space-between; align-items: center;
    gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }

.mk-catalog-grid { display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.mk-card { display: flex; flex-direction: column; background: var(--surface);
    border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.mk-card-logo { height: 120px; display: flex; align-items: center; justify-content: center;
    background: var(--surface-2); border-bottom: 1px solid var(--border); }
.mk-card-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mk-card-logo-ph { font-size: 2.4rem; opacity: 0.7; }
.mk-card-body { padding: 14px 16px; flex: 1; }
.mk-card-head { display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 6px; }
.mk-card-title { margin: 0; font-size: 0.95rem; color: var(--text-strong);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-card-summary { margin: 0 0 10px; font-size: 0.82rem; color: var(--muted);
    line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; }
.mk-card-meta { display: flex; align-items: center; justify-content: space-between;
    gap: 8px; font-size: 0.76rem; color: var(--muted-2); }
.mk-card-pub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mk-chip { font-size: 0.7rem; padding: 2px 8px; border-radius: 999px;
    background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.mk-card-actions { padding: 12px 16px; border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end; }

.mk-modal-backdrop { position: fixed; inset: 0; background: var(--scrim);
    display: flex; align-items: flex-start; justify-content: center; z-index: 1000;
    padding: 5vh 20px; overflow-y: auto; }
.mk-modal { background: var(--surface-overlay); border: 1px solid var(--border);
    border-radius: 16px; box-shadow: var(--shadow-lg); width: 100%; max-width: 520px;
    max-height: 90vh; overflow-y: auto; padding: 22px 24px; margin: auto; }
/* Modal de formulario: sin recorte para que las tooltips salgan fuera del modal
   (el scroll pasa al backdrop). */
.mk-modal--form { overflow: visible; max-height: none; }
.mk-modal-head { display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 4px; }
.mk-modal-head h3 { margin: 0; font-size: 1.02rem; color: var(--text-strong); }
.mk-modal-x { appearance: none; border: none; background: transparent; cursor: pointer;
    font-size: 1rem; color: var(--muted); padding: 4px 8px; border-radius: 8px; }
.mk-modal-x:hover { background: var(--control-bg-hover); color: var(--text); }
.mk-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.mk-field > span { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.mk-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.mk-modal--sm { max-width: 420px; }
.mk-confirm-msg { margin: 4px 0 18px; font-size: 0.88rem; color: var(--muted); line-height: 1.5; }

/* ── Catálogo v2: cards compactas expandibles ──────────────────────────── */
.mk-cards { display: grid; gap: 14px; align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.mk-card2 { display: flex; background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; overflow: hidden; cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; }
.mk-card2:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg);
    border-color: var(--brand); }
.mk-card2-main { flex: 1 1 auto; min-width: 0; padding: 14px 16px;
    display: flex; flex-direction: column; gap: 8px; }
.mk-card2-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mk-card2-title { font-weight: 600; color: var(--text-strong);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-card2-sub { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--muted); }
.mk-card2-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.mk-push { margin-left: auto; }
.mk-update { background: var(--brand-soft-bg); color: var(--brand-soft-fg); }
.mk-update:hover { background: var(--brand-soft-bg); filter: brightness(1.08); }
/* Panel lateral que aparece al expandir la card hacia la derecha. */
.mk-card2-more { flex: 0 0 0; width: 0; overflow: hidden; opacity: 0;
    background: var(--surface-2); border-left: 0 solid var(--border);
    transition: width 0.2s ease, opacity 0.2s ease, padding 0.2s ease; }
.mk-card2.is-expanded { grid-column: span 2; border-color: var(--brand); }
.mk-card2.is-expanded .mk-card2-more { flex: 0 0 250px; width: 250px; opacity: 1;
    padding: 14px 16px; border-left: 1px solid var(--border); }
.mk-card2-logo { max-width: 100%; max-height: 90px; object-fit: contain; border-radius: 8px;
    margin-bottom: 10px; display: block; }
.mk-card2-summary { margin: 0 0 10px; font-size: 0.82rem; color: var(--text); line-height: 1.45; }
.mk-card2-kv { display: flex; justify-content: space-between; gap: 8px;
    font-size: 0.76rem; color: var(--muted-2); margin-bottom: 8px; }
.mk-card2-kv > span:last-child { color: var(--muted); }

/* ── Tab Subida: tabla técnica ─────────────────────────────────────────── */
.mk-up-table { margin-bottom: 10px; }
.mk-up-row { display: grid; grid-template-columns: 1.3fr 1.4fr 80px 90px 90px 190px; gap: 8px;
    align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.mk-up-row:last-child { border-bottom: none; }
.mk-up-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-up-row--head { font-weight: 700; background: var(--surface-2); color: var(--muted);
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.mk-up-tags { display: flex; flex-wrap: wrap; gap: 4px; white-space: normal; }
.mk-up-link { color: var(--brand); cursor: pointer; }
.mk-up-link:hover { text-decoration: underline; }
.mk-up-row .pg-actions { display: flex; gap: 6px; white-space: normal; }

/* ── Rejilla de CATEGORÍAS (primera vista del catálogo) ────────────────────── */
.mk-cat-grid { display: grid; gap: 18px; align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.mk-cat { appearance: none; cursor: pointer; text-align: left; display: flex;
    flex-direction: column; gap: 8px; padding: 22px 20px; border-radius: 16px;
    border: 1px solid var(--border);
    background: linear-gradient(150deg, var(--brand-soft-bg), var(--surface) 78%);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; }
.mk-cat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--brand); }
.mk-cat-emoji { font-size: 2.4rem; line-height: 1; color: var(--brand); display: inline-flex; }
/* Icono del iconset en la card de categoría (si hay iconset activo que lo cubra);
   si no, cae al emoji de fallback (texto) — de ahí el font-size de arriba. */
.mk-cat-emoji svg { width: 2.4rem; height: 2.4rem; display: block; }
.mk-cat-label { font-size: 1.15rem; font-weight: 700; color: var(--text-strong); }
.mk-cat-count { font-size: 0.8rem; color: var(--muted); }

/* ── Catálogo v3: cards CUADRADAS (imagen arriba) ──────────────────────────── */
.mk-grid { display: grid; gap: 16px; align-items: start; justify-content: start;
    grid-template-columns: repeat(auto-fill, minmax(180px, 200px)); }
/* Cuadro PERFECTO: la card entera es 1:1; la imagen ocupa el espacio restante
   sobre el cuerpo (nombre/versión/acciones). */
.mk-sq { display: flex; flex-direction: column; aspect-ratio: 1 / 1; background: var(--surface);
    border: 1px solid var(--border); border-radius: 14px; overflow: hidden; cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; }
.mk-sq:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--brand); }
.mk-sq-thumb { position: relative; flex: 1 1 auto; min-height: 0; background: var(--surface-2);
    display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mk-sq-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-sq-ph { font-size: 3rem; font-weight: 800; color: var(--muted-2); text-transform: uppercase; }
.mk-sq-ph--lg { font-size: 4.5rem; }
.mk-sq-type { position: absolute; top: 8px; left: 8px; }
.mk-sq-body { flex: 0 0 auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.mk-sq-name { font-weight: 600; color: var(--text-strong);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-sq-sub { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--muted); }
.mk-sq-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.mk-sq-actions .mk-push { margin-left: 0; }

/* ── Pantalla de detalle (tipo store) ──────────────────────────────────────── */
.mk-detail { display: flex; flex-direction: column; gap: 18px; }
.mk-back { align-self: flex-start; appearance: none; border: 1px solid var(--border);
    background: var(--control-bg); color: var(--text); cursor: pointer; font-weight: 600;
    padding: 7px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px;
    margin-bottom: 14px;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.mk-back:hover { background: var(--control-bg-hover); border-color: var(--brand); transform: translateX(-2px); }
.mk-back-arrow { font-size: 1.2rem; line-height: 1; }
.mk-detail-hero { display: flex; gap: 20px; align-items: center; }
.mk-detail-cover { flex: 0 0 140px; width: 140px; height: 140px; border-radius: 18px;
    overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.mk-detail-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-detail-headinfo { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mk-detail-title { margin: 0; font-size: 1.5rem; color: var(--text-strong); }
.mk-detail-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.85rem; color: var(--muted); }
.mk-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.mk-muted { color: var(--muted); }
.mk-detail-section { display: flex; flex-direction: column; gap: 10px; }
.mk-detail-section h3 { margin: 0; font-size: 0.95rem; color: var(--text-strong); }
.mk-detail-desc { margin: 0; font-size: 0.9rem; color: var(--text); line-height: 1.6; white-space: pre-wrap; }
.mk-vers { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.mk-ver-row { display: grid; grid-template-columns: 100px 1fr auto; gap: 10px; align-items: center;
    padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.mk-ver-row:last-child { border-bottom: none; }

/* Carrusel de imágenes de vista previa (scroll lateral). */
.mk-shots { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.mk-shot { flex: 0 0 auto; appearance: none; border: 1px solid var(--border); background: var(--surface-2);
    border-radius: 12px; overflow: hidden; cursor: pointer; padding: 0; scroll-snap-align: start;
    transition: border-color 0.15s ease, transform 0.15s ease; }
.mk-shot:hover { border-color: var(--brand); transform: translateY(-2px); }
.mk-shot img { height: 200px; width: auto; max-width: 360px; object-fit: cover; display: block; }

/* Lightbox (imagen ampliada en modal). */
.mk-lightbox { position: fixed; inset: 0; z-index: 1100; background: var(--scrim, rgba(0,0,0,0.8));
    display: flex; align-items: center; justify-content: center; padding: 32px; cursor: zoom-out; }
.mk-lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 10px;
    box-shadow: var(--shadow-lg); cursor: default; }
.mk-lightbox-x { position: absolute; top: 18px; right: 22px; appearance: none; border: none;
    background: rgba(0,0,0,0.5); color: #fff; font-size: 1.1rem; width: 40px; height: 40px;
    border-radius: 50%; cursor: pointer; }
.mk-lightbox-x:hover { background: rgba(0,0,0,0.75); }

/* ── Form de subida: tooltips, imagen centrada, chips de preview ───────────── */
.mk-flabel { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem;
    color: var(--muted); font-weight: 600; }
.mk-field--center { align-items: center; text-align: center; }
.mk-imgpick { position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    width: 120px; height: 120px; border: 2px dashed var(--border); border-radius: 16px; overflow: hidden;
    background: var(--surface-2); color: var(--muted); font-size: 0.78rem; text-align: center;
    padding: 8px; transition: border-color 0.15s ease, color 0.15s ease; }
.mk-imgpick:hover { border-color: var(--brand); color: var(--text); }
.mk-imgpick-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Miniaturas de imágenes de vista previa en el form. */
.mk-promo-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mk-promo-thumb { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--border); background: var(--surface-2); }
.mk-promo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-promo-thumb .mk-promo-x { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
    border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; border: none; cursor: pointer;
    font-size: 0.7rem; display: flex; align-items: center; justify-content: center; padding: 0; }
.mk-promo-thumb .mk-promo-x:hover { background: rgba(0,0,0,0.85); }

/* Modal ancho de tamaño FIJO (vista previa de la página del paquete): grande,
   responsivo y con scroll interno — no se adapta al contenido. */
.mk-modal--wide { width: min(920px, 94vw); max-width: none; height: 84vh; max-height: 84vh;
    overflow: hidden; display: flex; flex-direction: column; margin: 0 auto; }
.mk-modal-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
    margin-top: 12px; }
.mk-ph-tag { opacity: 0.7; }
.mk-ph-note { font-size: 0.72rem; color: var(--muted); align-self: center; }
.mk-back:disabled { cursor: default; opacity: 0.6; }
.mk-back:disabled:hover { transform: none; border-color: var(--border); background: var(--control-bg); }
.mk-tip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
    border-radius: 50%; background: var(--control-bg); color: var(--muted); border: 1px solid var(--border);
    font-size: 0.68rem; font-weight: 700; cursor: help; position: relative; }
.mk-tip:hover { color: var(--text); border-color: var(--brand); }
.mk-tip::after { content: attr(data-tip); position: absolute; bottom: 130%; left: 50%;
    transform: translateX(-50%); width: max-content; max-width: 240px; white-space: normal;
    background: var(--tooltip-bg); color: var(--tooltip-fg); font-size: 0.72rem; font-weight: 500;
    line-height: 1.4; padding: 7px 10px; border-radius: 8px; box-shadow: var(--shadow-md);
    opacity: 0; pointer-events: none; transition: opacity 0.15s ease; z-index: 50; }
.mk-tip:hover::after { opacity: 1; }
.mk-promo-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mk-promo-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 6px 3px 10px; }
.mk-promo-x { appearance: none; border: none; background: transparent; color: var(--muted);
    cursor: pointer; font-size: 0.72rem; padding: 2px 4px; border-radius: 50%; }
.mk-promo-x:hover { background: var(--control-bg-hover); color: var(--text); }

@media (max-width: 640px) {
    .mk-detail-hero { flex-direction: column; align-items: flex-start; }
}

/* ── Identidad Visual (F6.1) — selección de tema base ─────────────────────── */
.identity-theme-list { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.identity-theme-option { display: flex; align-items: center; gap: 12px; cursor: pointer;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--control-bg); transition: border-color .15s, background .15s; }
.identity-theme-option:hover { border-color: var(--brand); background: var(--control-bg-hover); }
.identity-theme-option.is-active { border-color: var(--brand); background: var(--brand-soft-bg); }
.identity-theme-option input[type="radio"] { accent-color: var(--brand); margin: 0; cursor: pointer; }
.identity-theme-option input:disabled { cursor: not-allowed; }
.identity-theme-name { font-weight: 600; color: var(--text-strong); }
.identity-theme-ver { margin-left: auto; font-size: 0.78rem; color: var(--muted); }

/* Escala de fuente (F6.3): botonera de valores discretos. */
.identity-scale-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.identity-scale-btn { padding: 8px 16px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--control-bg); color: var(--text); font-weight: 600; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s; }
.identity-scale-btn:hover:not(:disabled) { border-color: var(--brand); background: var(--control-bg-hover); }
.identity-scale-btn.is-active { border-color: var(--brand); background: var(--brand-soft-bg); color: var(--brand-soft-fg); }
.identity-scale-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.profile-subsection-title { margin: 0 0 12px; font-size: 0.95rem; font-weight: 700; color: var(--text-strong); }

/* Iconos de iconset (F6.4): el <span> contiene un <svg> reconstruido por el
   componente Icon. Se dimensiona al hueco y hereda el color del texto. */
.module-sidebar-icon svg { width: 1.25em; height: 1.25em; display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOTOR SDUI (src/sdui/) — tokens only; clases sdui-* para módulos instalados
   ═══════════════════════════════════════════════════════════════════════════ */

.sdui-page { min-height: 100vh; background: var(--bg); }
.sdui-page-body { padding: 20px 24px; max-width: 1200px; margin: 0 auto; }
.sdui-page-msg { padding: 40px; text-align: center; color: var(--muted); }
.sdui-view-title { font-size: 1.15rem; color: var(--text-strong); margin: 0 0 14px; }

.sdui-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; box-shadow: var(--shadow-sm); }
.sdui-placeholder { border: 1px dashed var(--border); border-radius: 8px; padding: 10px 12px;
  color: var(--muted-2); font-size: 0.8rem; background: var(--surface-2); }
.sdui-placeholder code { color: var(--muted); }

.sdui-heading { color: var(--text-strong); margin: 0; }
.sdui-text { color: var(--text); margin: 0; font-size: 0.88rem; }
.sdui-text--muted { color: var(--muted); }

.sdui-badge { display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; }
.sdui-badge--primary { background: var(--brand-soft-bg); color: var(--brand-soft-fg); }
.sdui-badge--info    { background: var(--badge-info-bg);    color: var(--badge-info-fg); }
.sdui-badge--success { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.sdui-badge--warning { background: var(--badge-warn-bg);    color: var(--badge-warn-fg); }
.sdui-badge--danger  { background: var(--badge-danger-bg);  color: var(--badge-danger-fg); }
.sdui-badge--gray    { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); }

.sdui-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border-radius: 10px; border: 1px solid var(--border-soft); font-size: 0.85rem; }
.sdui-alert--info    { background: var(--badge-info-bg);    color: var(--badge-info-fg); }
.sdui-alert--success { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.sdui-alert--warning { background: var(--badge-warn-bg);    color: var(--badge-warn-fg); }
.sdui-alert--danger  { background: var(--badge-danger-bg);  color: var(--badge-danger-fg); }
.sdui-alert-title { display: block; margin-bottom: 2px; }
.sdui-alert-body { flex: 1; }
.sdui-alert-close { background: none; border: none; cursor: pointer; color: inherit; font-size: 0.9rem; }

.sdui-divider { border: none; border-top: 1px solid var(--border); margin: 10px 0; }
.sdui-divider--labeled { display: flex; align-items: center; gap: 10px; color: var(--muted-2);
  font-size: 0.75rem; margin: 10px 0; }
.sdui-divider--labeled::before, .sdui-divider--labeled::after {
  content: ""; flex: 1; border-top: 1px solid var(--border); }

.sdui-empty { text-align: center; padding: 34px 16px; color: var(--muted); }
.sdui-empty-icon { font-size: 2rem; margin-bottom: 6px; }
.sdui-empty-title { font-weight: 600; color: var(--text-strong); margin-bottom: 4px; }
.sdui-empty-text { font-size: 0.83rem; margin-bottom: 12px; }

.sdui-kv { margin: 0; display: grid; gap: 6px; }
.sdui-kv-row { display: flex; gap: 12px; font-size: 0.85rem; }
.sdui-kv-row dt { color: var(--muted); min-width: 140px; }
.sdui-kv-row dd { margin: 0; color: var(--text); }

.sdui-tabs-header { display: flex; gap: 4px; border-bottom: 1px solid var(--border);
  margin-bottom: 14px; flex-wrap: wrap; }
.sdui-tab { padding: 8px 14px; border: none; background: none; cursor: pointer;
  color: var(--muted); font-size: 0.86rem; font-weight: 600; font-family: inherit;
  border-bottom: 2px solid transparent; }
.sdui-tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }

.sdui-modal-overlay { position: fixed; inset: 0; z-index: 1000; background: var(--scrim);
  backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; }
.sdui-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  width: min(480px, 92vw); max-height: 86vh; overflow: auto; box-shadow: var(--shadow-lg); }
.sdui-modal--lg { width: min(760px, 94vw); }
.sdui-modal-head { display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--border); }
.sdui-modal-head h3 { margin: 0; font-size: 0.95rem; color: var(--text-strong); }
.sdui-modal-close { background: none; border: none; cursor: pointer; color: var(--muted); }
.sdui-modal-body { padding: 16px 18px; }
.sdui-modal-footer { padding: 12px 18px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end; }

.sdui-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; box-shadow: var(--shadow-sm); }
.sdui-stat-head { display: flex; gap: 6px; align-items: center; color: var(--muted);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }
.sdui-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text-strong); margin: 4px 0 2px; }
.sdui-stat-sub { font-size: 0.76rem; color: var(--muted-2); }
.sdui-stat-sub--good { color: var(--badge-success-fg); }
.sdui-stat-sub--warn { color: var(--badge-warn-fg); }

.sdui-btn { padding: 7px 13px; border-radius: 8px; border: 1px solid var(--control-border);
  background: var(--control-bg); color: var(--text); font-size: 0.83rem; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all 0.15s; }
.sdui-btn:hover:not(:disabled) { background: var(--control-bg-hover); }
.sdui-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.sdui-btn--primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.sdui-btn--primary:hover:not(:disabled) { background: var(--brand-dark); }
.sdui-btn--danger { color: var(--badge-danger-fg); border-color: rgba(239,68,68,0.45); }
.sdui-btn--danger:hover:not(:disabled) { background: var(--badge-danger-bg); }
.sdui-btn--ghost { background: transparent; }

.sdui-field { display: flex; flex-direction: column; gap: 4px; }
.sdui-label { font-size: 0.76rem; color: var(--muted); font-weight: 600; }
.sdui-input { padding: 8px 10px; border: 1px solid var(--control-border); border-radius: 8px;
  font-family: inherit; font-size: 0.85rem; background: var(--control-bg); color: var(--text); }
.sdui-input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

.sdui-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 0.84rem; color: var(--text); user-select: none; }
.sdui-toggle input { display: none; }
.sdui-toggle-track { width: 34px; height: 19px; border-radius: 999px; background: var(--control-border);
  position: relative; transition: background 0.15s; flex-shrink: 0; }
.sdui-toggle input:checked + .sdui-toggle-track { background: var(--brand); }
/* knob blanco fijo en ambos temas (excepción intencional, igual que los toggles del panel) */
.sdui-toggle-knob { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; transition: left 0.15s; }
.sdui-toggle input:checked + .sdui-toggle-track .sdui-toggle-knob { left: 17px; }

.sdui-form { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }

.sdui-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  overflow-x: auto; box-shadow: var(--shadow-sm); }
.sdui-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.sdui-table th { padding: 10px 14px; background: var(--surface-2); color: var(--muted);
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; text-align: left; }
.sdui-table td { padding: 9px 14px; border-top: 1px solid var(--border); color: var(--text); }
.sdui-row--clickable { cursor: pointer; }
.sdui-row--clickable:hover td { background: var(--surface-2); }
.sdui-table-msg { text-align: center; color: var(--muted); padding: 24px !important; }
.sdui-table-msg--error { color: var(--badge-danger-fg); }
.sdui-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; }
.sdui-nowrap { white-space: nowrap; }

.sdui-spinner-wrap { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 14px; }
.sdui-spinner { border: 3px solid var(--border); border-top-color: var(--brand); border-radius: 50%;
  animation: sdui-spin 0.8s linear infinite; }
.sdui-spinner--sm { width: 14px; height: 14px; }
.sdui-spinner--md { width: 22px; height: 22px; }
.sdui-spinner--lg { width: 34px; height: 34px; }
.sdui-spinner-label { color: var(--muted); font-size: 0.83rem; }
@keyframes sdui-spin { to { transform: rotate(360deg); } }

.sdui-pagination { display: flex; gap: 12px; align-items: center; justify-content: center; }
.sdui-pagination-info { color: var(--muted); font-size: 0.83rem; }

.sdui-toast { position: fixed; bottom: 24px; right: 24px; z-index: 1100; padding: 12px 18px;
  border-radius: 10px; font-size: 0.86rem; font-weight: 600; box-shadow: var(--shadow-lg);
  background: var(--tooltip-bg); color: var(--tooltip-fg); }
.sdui-toast--success { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.sdui-toast--warning { background: var(--badge-warn-bg); color: var(--badge-warn-fg); }
.sdui-toast--danger  { background: var(--badge-danger-bg); color: var(--badge-danger-fg); }

.sdui-chart { width: 100%; }

/* ── SDUI · kanban (tablero por columnas con drag & drop) ── */
.sdui-kanban { width: 100%; }
.sdui-kanban-msg { text-align: center; color: var(--muted); padding: 24px; }
.sdui-kanban-msg--error { color: var(--badge-danger-fg); }
.sdui-kanban-cols { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px;
  align-items: flex-start; }
.sdui-kanban-col { flex: 0 0 288px; width: 288px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column;
  max-height: 100%; }
.sdui-kanban-col-head { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 12px; border-top: 3px solid var(--brand);
  border-top-left-radius: 12px; border-top-right-radius: 12px; }
.sdui-kanban-col-label { font-weight: 700; font-size: 0.84rem; color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdui-kanban-col-count { flex: 0 0 auto; min-width: 20px; text-align: center; padding: 1px 7px;
  border-radius: 999px; font-size: 0.7rem; font-weight: 700; color: var(--muted);
  background: var(--control-bg); border: 1px solid var(--border-soft); }
.sdui-kanban-col-body { display: flex; flex-direction: column; gap: 8px; padding: 10px;
  overflow-y: auto; min-height: 48px; }
.sdui-kanban-col-body.sdui-kanban-dragover { background: var(--brand-soft-bg); }
.sdui-kanban-col-empty { text-align: center; color: var(--muted-2); font-size: 0.78rem;
  padding: 14px 6px; }
.sdui-kanban-card { background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; cursor: grab; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 4px; }
.sdui-kanban-card:hover { border-color: var(--brand); }
.sdui-kanban-card:active { cursor: grabbing; }
.sdui-kanban-card[draggable="false"] { cursor: default; }
.sdui-kanban-card-title { font-weight: 600; font-size: 0.84rem; color: var(--text-strong); }
.sdui-kanban-card-sub { font-size: 0.78rem; color: var(--muted); }
.sdui-kanban-card-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.sdui-kanban-card-meta { font-size: 0.72rem; color: var(--muted-2); margin-top: 2px; }

/* ── SDUI · calendar (calendario mensual de eventos) ── */
.sdui-cal { width: 100%; }
.sdui-cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sdui-cal-title { font-weight: 700; font-size: 0.95rem; color: var(--text-strong);
  min-width: 150px; }
.sdui-cal-nav { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--control-bg); color: var(--text); cursor: pointer; font-size: 1rem; }
.sdui-cal-nav:hover { background: var(--control-bg-hover); }
.sdui-cal-today { padding: 5px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--control-bg); color: var(--text); cursor: pointer; font-size: 0.8rem; }
.sdui-cal-today:hover { background: var(--control-bg-hover); }
.sdui-cal-loading, .sdui-cal-error { font-size: 0.78rem; color: var(--muted); }
.sdui-cal-error { color: var(--badge-danger-fg); }
.sdui-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.sdui-cal-dow { text-align: center; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--muted); padding: 4px 0; font-weight: 600; }
.sdui-cal-cell { min-height: 92px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.sdui-cal-empty { background: transparent; border: 1px dashed var(--border-soft); }
.sdui-cal-today { }
.sdui-cal-cell.sdui-cal-today { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.sdui-cal-daynum { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-align: right;
  padding: 0 2px; }
.sdui-cal-events { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.sdui-cal-ev { font-size: 0.68rem; padding: 2px 5px; border-radius: 5px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid transparent; }
.sdui-cal-ev--vencido { background: var(--badge-danger-bg); color: var(--badge-danger-fg);
  border-left-color: var(--badge-danger-fg); }
.sdui-cal-ev--hoy { background: var(--badge-warn-bg); color: var(--badge-warn-fg);
  border-left-color: var(--badge-warn-fg); }
.sdui-cal-ev--proximo { background: var(--badge-info-bg); color: var(--badge-info-fg);
  border-left-color: var(--badge-info-fg); }
.sdui-cal-ev--done { background: var(--surface-2); color: var(--muted-2);
  border-left-color: var(--border); text-decoration: line-through; }

/* ── E-commerce · integración producto↔recurso (modal 2 cards + tab crear/enlazar) ── */
.ec-integ-tab { display: flex; flex-direction: column; gap: 12px; }
.ec-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border-soft); width: fit-content; }
.ec-seg-btn { appearance: none; border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: 7px 16px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; transition: background .15s, color .15s; }
.ec-seg-btn.active { background: var(--surface-overlay); color: var(--text-strong); box-shadow: var(--shadow-sm); }
.ec-integ-field { display: flex; flex-direction: column; gap: 6px; }
.ec-integ-unlink { align-self: flex-start; }

/* Dropdown de recurso: buscable + paginado (mismo patrón que el selector de cliente) */
.ec-res-picker { position: relative; }
.ec-res-picker-btn { width: 100%; text-align: left; cursor: pointer; }
/* Capa invisible que captura los clics fuera del dropdown de recursos para cerrarlo.
   z-index bajo el drop (40) y sobre el resto del contenido del drawer. */
.ec-res-dismiss { position: fixed; inset: 0; z-index: 39; background: transparent; border: none; padding: 0; cursor: default; }
.ec-res-drop { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface-overlay); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg); padding: 8px; }
.ec-res-search { width: 100%; margin-bottom: 6px; }
.ec-res-list { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; }
.ec-res-opt { appearance: none; border: 0; background: transparent; color: var(--text); cursor: pointer;
  text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 0.88rem; }
.ec-res-opt:hover { background: var(--control-bg-hover); }
.ec-res-more { appearance: none; border: 0; background: transparent; color: var(--brand); cursor: pointer;
  padding: 8px 10px; font-size: 0.82rem; font-weight: 600; }

/* Chips de día seleccionados (repetición de bloque L-V…) */
.mir-wd-chip.is-on { background: var(--brand-soft-bg); border-color: var(--brand); color: var(--brand-soft-fg); font-weight: 600; }

/* ── Popover tipo tooltip saliendo de una card (chooser) ──────────────────────── */
/* La celda envuelve la card y ancla el popover; la card llena la celda. */
.chooser-cell { position: relative; display: flex; }
.chooser-cell > .mir-chooser-card { width: 100%; }
.card-pop { position: absolute; z-index: 60; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%);
  min-width: 210px; background: var(--surface-overlay); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.card-pop::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--surface-overlay); }
.card-pop-title { font-size: 0.76rem; color: var(--muted); padding: 2px 6px 4px; }
.card-pop-opt { appearance: none; border: 1px solid var(--control-border); background: var(--control-bg); color: var(--text);
  cursor: pointer; text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 0.86rem; font-weight: 600; }
.card-pop-opt:hover { background: var(--control-bg-hover); border-color: var(--brand); }

/* Segmento de días — chips (reutilizado del bloque L-V) */
.mir-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border-soft); width: fit-content; margin-bottom: 8px; }
.mir-seg-btn { appearance: none; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 7px 16px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; }
.mir-seg-btn.is-on { background: var(--surface-overlay); color: var(--text-strong); box-shadow: var(--shadow-sm); }

/* El popover-tooltip del chooser debe poder salirse del cuerpo del modal (no recortar). */
.mir-chooser, .mir-chooser .pg-modal-body { overflow: visible; }

/* ============================================================================
   crm.css — Estilos del módulo CRM (Kanban de embudos + constructor + modales)

   Extraído de frontend/style.css del panel original. Al portar:
   · Opción A: pega este bloque al final de tu style.css.
   · Opción B: si tu bundler soporta @import, déjalo como archivo aparte.

   DEPENDE de los tokens semánticos de tema del panel (var(--brand), var(--surface),
   var(--text), var(--border), var(--badge-*), etc.). Si el proyecto destino NO tiene
   esos tokens, define equivalentes en :root o reemplaza los var(--token) por colores
   fijos. Ver la sección "Theming (tokens)" del CLAUDE.md del panel original.
   ============================================================================ */

/* ── CRM · Kanban de embudos ─────────────────────────────────────────────── */
.crm-wrap { padding: 16px 24px 32px; display: flex; flex-direction: column; gap: 16px; }
.crm-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.crm-embudo-select {
  background: var(--control-bg); color: var(--text);
  border: 1px solid var(--control-border); border-radius: 10px;
  padding: 8px 12px; font-size: 14px; min-width: 220px;
}
.crm-embudo-select:hover { background: var(--control-bg-hover); }
.crm-run-btn {
  background: var(--brand); color: #fff; border: none; border-radius: 10px;
  padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: var(--shadow-sm); transition: background .15s ease;
}
.crm-run-btn:hover { background: var(--brand-dark); }
.crm-loading-chip {
  font-size: 12px; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 10px;
}

.crm-board {
  display: flex; gap: 16px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 12px;
}
.crm-col {
  flex: 0 0 288px; min-width: 288px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 8px;
}
.crm-col-head { display: flex; align-items: center; justify-content: space-between; }
.crm-col-title { display: flex; align-items: center; gap: 8px; }
.crm-col-name { font-weight: 700; color: var(--text-strong); font-size: 15px; }
.crm-col-flag {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--badge-success-bg); color: var(--badge-success-fg);
}
.crm-col-count {
  font-size: 12px; font-weight: 600; color: var(--muted);
  background: var(--surface-2); border-radius: 999px; padding: 2px 9px; min-width: 24px; text-align: center;
}
.crm-col-obj { font-size: 12px; color: var(--muted); line-height: 1.35; min-height: 16px; }
.crm-col-body { display: flex; flex-direction: column; gap: 8px; }

.crm-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px;
}
.crm-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.crm-card-name { font-weight: 600; color: var(--text); font-size: 14px; }
.crm-card-lock { font-size: 12px; }
.crm-card-sub { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.crm-card-chan {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: var(--badge-info-bg); color: var(--badge-info-fg);
}
.crm-move-select {
  margin-top: 2px; width: 100%; font-size: 12px;
  background: var(--control-bg); color: var(--text);
  border: 1px solid var(--control-border); border-radius: 8px; padding: 5px 8px;
}
.crm-move-select:hover { background: var(--control-bg-hover); }
.crm-col-empty { font-size: 12px; color: var(--muted-2); text-align: center; padding: 10px 0; font-style: italic; }

/* ── CRM · Constructor + tabs + modales ──────────────────────────────────── */
.crm-viewtabs { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.crm-tab { background: transparent; color: var(--muted); border: none; border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.crm-tab.active { background: var(--brand); color: #fff; }
.crm-cons-actions { display: inline-flex; gap: 8px; }
.crm-btn-sec { background: var(--control-bg); color: var(--text); border: 1px solid var(--control-border); border-radius: 9px; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.crm-btn-sec:hover { background: var(--control-bg-hover); }
.crm-btn-danger { color: var(--danger, #ef4444); }

.crm-constructor { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }

/* Canvas / flujo horizontal del constructor */
.crm-canvas-viewport {
  position: relative; overflow: auto; border: 1px solid var(--border); border-radius: 16px;
  background:
    linear-gradient(90deg, var(--surface-2) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(var(--surface-2) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--bg-2, var(--bg));
  padding: 28px; min-height: 340px;
}
.crm-canvas-zoom {
  position: sticky; top: 10px; left: 10px; z-index: 5; display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-overlay, var(--panel-2)); border: 1px solid var(--border); border-radius: 10px;
  padding: 4px 6px; box-shadow: var(--shadow-sm); width: fit-content;
}
.crm-canvas-zoom-label { font-size: 12px; color: var(--muted); min-width: 38px; text-align: center; }
.crm-flow {
  display: flex; align-items: flex-start; gap: 0; width: max-content; margin-top: 10px;
  transition: transform .12s ease;
}
.crm-flow-item { display: flex; align-items: flex-start; flex: 0 0 auto; }
.crm-flow-node { flex: 0 0 auto; width: 268px; }
.crm-flow-arrow {
  flex: 0 0 auto; align-self: center; color: var(--muted-2); font-size: 20px; padding: 0 6px;
  transform: translateY(-2px);
}
.crm-flow-entry {
  display: flex; align-items: center; gap: 10px; background: var(--brand-soft-bg, var(--surface-2));
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.crm-flow-entry-ico { font-size: 18px; color: var(--brand); }
.crm-flow-entry strong { display: block; color: var(--text-strong); font-size: 14px; }
.crm-flow-entry span { display: block; color: var(--muted); font-size: 12px; }

.crm-fase-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-sm); }
.crm-fase-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.crm-fase-title { display: flex; align-items: center; gap: 9px; color: var(--text-strong); font-size: 15px; }
.crm-fase-orden { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; background: var(--brand-soft-bg, var(--surface-2)); color: var(--brand-soft-fg, var(--brand)); font-size: 12px; font-weight: 700; }
.crm-fase-tools { display: inline-flex; gap: 4px; }
.crm-icon-btn { background: var(--control-bg); border: 1px solid var(--control-border); border-radius: 7px; width: 28px; height: 28px; color: var(--text); cursor: pointer; font-size: 13px; line-height: 1; }
.crm-icon-btn:hover:not(:disabled) { background: var(--control-bg-hover); }
.crm-icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.crm-fase-obj { color: var(--muted); font-size: 12.5px; margin: 6px 0 10px; }
.crm-fase-sec { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.crm-fase-sec-title { font-size: 12px; font-weight: 600; color: var(--muted-2); text-transform: uppercase; letter-spacing: .03em; }
.crm-mini-btn { background: transparent; border: 1px dashed var(--border); border-radius: 8px; color: var(--brand); font-size: 12px; padding: 3px 10px; cursor: pointer; }
.crm-mini-btn:hover { background: var(--surface-2); }
.crm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.crm-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--badge-info-bg); color: var(--badge-info-fg); border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.crm-chip-action { background: var(--badge-purple-bg); color: var(--badge-purple-fg); }
.crm-chip-x { background: transparent; border: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; opacity: .7; padding: 0; }
.crm-chip-x:hover { opacity: 1; }
.crm-soft-empty { font-size: 12px; color: var(--muted-2); font-style: italic; }
.crm-entry-mode { font-size: 12.5px; font-weight: 600; color: var(--brand); background: var(--brand-soft-bg, var(--surface-2)); border: 1px solid var(--border-soft); border-radius: 8px; padding: 5px 10px; margin-top: 4px; }
.crm-add-fase {
  align-self: center; background: transparent; border: 1.5px dashed var(--brand); color: var(--brand);
  border-radius: 14px; padding: 18px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  min-height: 64px;
}
.crm-add-fase:hover { background: var(--brand-soft-bg, var(--surface-2)); }

.crm-modal-backdrop { position: fixed; inset: 0; background: var(--scrim, rgba(0,0,0,.5)); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.crm-modal { background: var(--surface-overlay, var(--panel-2)); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; }
.crm-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); color: var(--text-strong); font-size: 16px; }
.crm-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border); }
.crm-form { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; }
.crm-form label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 6px; }
.crm-input { background: var(--control-bg); color: var(--text); border: 1px solid var(--control-border); border-radius: 9px; padding: 8px 11px; font-size: 14px; width: 100%; box-sizing: border-box; }
.crm-textarea { min-height: 70px; resize: vertical; font-family: inherit; }
.crm-hint { font-size: 11.5px; color: var(--muted-2); margin-top: 4px; }

/* ── CRM · Detalle del lead (notas + historial) ──────────────────────────── */
.crm-card-name-link { cursor: pointer; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color .12s ease; }
.crm-card-name-link:hover { text-decoration-color: var(--brand); color: var(--brand); }

.crm-modal-lead { max-width: 520px; }
.crm-lead-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px 0; gap: 10px; }
.crm-lead-body { padding: 14px 18px 18px; }
.crm-lead-notas { display: flex; flex-direction: column; gap: 12px; }
.crm-note-form { display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.crm-note-tipo { width: auto; align-self: flex-start; }
.crm-lead-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.crm-note-item { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; }
.crm-note-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.crm-note-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--brand); }
.crm-note-date { font-size: 11px; color: var(--muted-2); }
.crm-note-text { font-size: 13.5px; color: var(--text); line-height: 1.4; }
.crm-hist-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.crm-hist-evento { font-size: 13px; color: var(--text); font-weight: 600; }

/* ── CRM · Ficha del cliente (contacto + actividades + cronología) ────────── */
.crm-lead-contact { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px 0; }
.crm-contact-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px; text-decoration: none;
}
.crm-contact-chip:hover { border-color: var(--brand); color: var(--brand); }
.crm-note-form-row { display: flex; gap: 8px; align-items: center; }
.crm-note-due { width: auto; flex: 0 0 auto; }
.crm-lead-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: 2px; }

/* Actividad pendiente (nota con vencimiento) */
.crm-activity-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-left-width: 3px;
  border-radius: 10px; padding: 9px 12px;
}
.crm-activity-item.crm-due-overdue { border-left-color: var(--badge-danger-fg); }
.crm-activity-item.crm-due-today   { border-left-color: var(--badge-warn-fg); }
.crm-activity-item.crm-due-soon    { border-left-color: var(--badge-success-fg); }
.crm-activity-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.crm-activity-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crm-activity-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.crm-due-badge { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.crm-due-badge.crm-due-overdue { background: var(--badge-danger-bg); color: var(--badge-danger-fg); }
.crm-due-badge.crm-due-today   { background: var(--badge-warn-bg); color: var(--badge-warn-fg); }
.crm-due-badge.crm-due-soon    { background: var(--badge-success-bg); color: var(--badge-success-fg); }

/* Cronología unificada */
.crm-timeline { position: relative; }
.crm-timeline-item { display: flex; gap: 10px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.crm-timeline-icon { font-size: 15px; flex: 0 0 auto; line-height: 1.5; }
.crm-timeline-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.crm-timeline-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ════════════════════════════════════════════════════════════════════════════
   CRM · Rediseño estilo Odoo (panel de control + vistas + tarjetas grandes)
   Estas reglas van DESPUÉS de las base → ganan por cascada (mismo specificity).
   ════════════════════════════════════════════════════════════════════════════ */

/* Más aire general */
.crm-wrap { padding: 0 0 32px; gap: 0; }

/* ── Panel de control (barra superior tipo Odoo) ─────────────────────────── */
.crm-cpanel {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 12px 24px; margin-bottom: 18px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.crm-cpanel-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crm-cpanel-right { display: flex; align-items: center; gap: 10px; }
.crm-embudo-select { min-width: 200px; }

/* Conmutador de vistas (iconos, derecha) */
.crm-viewswitch { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.crm-viewbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 30px; padding: 0 8px; font-size: 15px; line-height: 1;
  background: transparent; color: var(--muted); border: none; border-radius: 8px; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.crm-viewbtn:hover { background: var(--control-bg-hover); color: var(--text); }
.crm-viewbtn.active { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
/* El botón Constructor (⚙) va suelto a la derecha del grupo */
.crm-cpanel-right > .crm-viewbtn { border: 1px solid var(--border); background: var(--surface-2); }
.crm-cpanel-right > .crm-viewbtn.active { border-color: var(--brand); background: var(--brand); }

/* Buscador (centro del panel) */
.crm-cpanel-search { flex: 1 1 240px; max-width: 480px; position: relative; display: flex; align-items: center; }
.crm-search-ico { position: absolute; left: 13px; font-size: 13px; opacity: .55; pointer-events: none; }
.crm-search-input {
  width: 100%; background: var(--control-bg); color: var(--text);
  border: 1px solid var(--control-border); border-radius: 999px;
  padding: 9px 34px 9px 36px; font-size: 13.5px; box-sizing: border-box;
}
.crm-search-input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-soft-bg, transparent); }
.crm-search-clear {
  position: absolute; right: 8px; width: 22px; height: 22px; border: none; background: transparent;
  color: var(--muted); cursor: pointer; font-size: 17px; line-height: 1; border-radius: 50%;
}
.crm-search-clear:hover { background: var(--surface-2); color: var(--text); }

/* Botón "+" de alta manual por fase */
.crm-col-head-actions { display: flex; align-items: center; gap: 6px; }
.crm-col-add {
  width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface); color: var(--brand); font-size: 17px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.crm-col-add:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Board sin scrollbars internos por columna: la página entera scrollea */
.crm-col { max-height: none; }
.crm-col-body { overflow-y: visible; }
.crm-board { padding-bottom: 24px; }

/* ── Ficha completa del lead (/crm/lead/:embudo/:user) ───────────────────── */
.crm-lead-page { padding: 18px 24px 48px; display: flex; flex-direction: column; gap: 18px; max-width: 1100px; margin: 0 auto; }
.crm-lp-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.crm-lp-title { display: flex; flex-direction: column; gap: 2px; }
.crm-lp-title h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--text-strong); }
.crm-lp-id { font-size: 11.5px; color: var(--muted-2); font-family: ui-monospace, monospace; }
.crm-lp-stepper { display: flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.crm-lp-step { flex: 1 1 auto; min-width: 96px; padding: 11px 14px; border: none; border-right: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .12s ease, color .12s ease; }
.crm-lp-step:last-child { border-right: none; }
.crm-lp-step:hover:not(:disabled) { background: var(--surface-3, var(--surface)); color: var(--text); }
.crm-lp-step.active { background: var(--brand); color: #fff; }
.crm-lp-step:disabled { cursor: default; opacity: .9; }
.crm-lp-body { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 18px; align-items: start; }
.crm-lp-main { display: flex; flex-direction: column; gap: 14px; }
.crm-lp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: var(--shadow-sm); }
.crm-lp-card-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 10px; }
.crm-lp-card-title--sep { margin-top: 14px; }
.crm-lp-field { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); padding: 5px 0; }
.crm-lp-field > span:first-child { width: 18px; text-align: center; flex: 0 0 auto; }
.crm-lp-field a { color: var(--brand); text-decoration: none; }
.crm-lp-field a:hover { text-decoration: underline; }
.crm-lp-chatter { display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: var(--shadow-sm); }
@media (max-width: 860px) { .crm-lp-body { grid-template-columns: 1fr; } }

/* ── Ficha del lead v2 — split-screen alta densidad (estilo Odoo clásico) ─── */
.crm-lp2-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 20px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.crm-lp2-btn { padding: 7px 14px; font-size: 13px; font-weight: 600; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 4px; cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.crm-lp2-btn:hover:not(:disabled) { background: var(--surface-3, var(--surface-2)); border-color: var(--brand); }
.crm-lp2-btn--won { background: var(--brand); color: #fff; border-color: var(--brand); }
.crm-lp2-btn--won:hover:not(:disabled) { background: var(--brand-dark, var(--brand)); }
.crm-lp2-btn:disabled { opacity: .5; cursor: default; }

.crm-lp2 { display: flex; align-items: stretch; }
.crm-lp2-left { flex: 1 1 60%; min-width: 0; padding: 20px 26px; border-right: 1px solid var(--border); }
.crm-lp2-right { flex: 1 1 40%; min-width: 0; padding: 16px 20px; background: var(--bg-2, var(--surface-2)); }

.crm-lp2-headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.crm-lp2-titlewrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crm-lp2-title { margin: 0; font-size: 26px; font-weight: 800; color: var(--text-strong); line-height: 1.1; }

/* Breadcrumb con chevrons (arriba-derecha) */
.crm-lp2-breadcrumb { display: inline-flex; }
.crm-lp2-step {
  border: none; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 700;
  padding: 8px 14px 8px 22px; cursor: pointer; white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%);
  margin-left: -10px;
}
.crm-lp2-step:first-child { margin-left: 0; padding-left: 14px; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%); }
.crm-lp2-step:hover:not(:disabled):not(.active) { background: var(--surface-3, var(--surface)); color: var(--text); }
.crm-lp2-step.active { background: var(--brand); color: #fff; }
.crm-lp2-step:disabled { cursor: default; }

/* Grid etiqueta-valor en DOS columnas de pares (aprovecha el ancho, con aire) */
.crm-lp2-grid { display: grid; grid-template-columns: 118px minmax(0, 1fr) 118px minmax(0, 1fr); gap: 14px 24px; align-items: baseline; font-size: 13.5px; }
.crm-lp2-lbl { color: var(--muted); font-weight: 600; padding: 1px 0; }
.crm-lp2-val { color: var(--text); padding: 1px 0; min-width: 0; word-break: break-word; }
.crm-lp2-val a { color: var(--brand); text-decoration: none; }
.crm-lp2-val a:hover { text-decoration: underline; }
.crm-lp2-money { font-size: 20px; font-weight: 800; color: var(--text-strong); }
.crm-lp2-empty { color: var(--muted-2); }
.crm-lp2-grid--info { margin-top: 2px; grid-template-columns: 118px minmax(0, 1fr); gap: 12px 20px; }
@media (max-width: 620px) { .crm-lp2-grid { grid-template-columns: 110px minmax(0, 1fr); } }

/* Tabs inferiores izquierda */
.crm-lp2-subtabs { display: flex; border-bottom: 1px solid var(--border); margin-top: 22px; }
.crm-lp2-subtab { padding: 9px 16px; border: none; background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.crm-lp2-subtab:hover { color: var(--text); }
.crm-lp2-subtab.active { color: var(--brand); border-bottom-color: var(--brand); }
.crm-lp2-subtabbody { padding: 14px 0; }
.crm-lp2-notelist { display: flex; flex-direction: column; gap: 10px; }
.crm-lp2-noteitem { border-bottom: 1px solid var(--border-soft, var(--border)); padding-bottom: 8px; }
.crm-lp2-noteitem:last-child { border-bottom: none; }
.crm-lp2-noteitem-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 3px; }

/* Chatter derecha */
.crm-lp2-chattertabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.crm-lp2-ctab { padding: 8px 14px; border: none; background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 700; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.crm-lp2-ctab:hover { color: var(--text); }
.crm-lp2-ctab.active { color: var(--brand); border-bottom-color: var(--brand); }
.crm-lp2-chatterform { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.crm-lp2-tl-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 16px 0 8px; }
.crm-lp2-act { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 0 8px 10px; border-left: 3px solid var(--border); margin-bottom: 4px; }
.crm-lp2-act.crm-due-overdue { border-left-color: var(--badge-danger-fg); }
.crm-lp2-act.crm-due-today { border-left-color: var(--badge-warn-fg); }
.crm-lp2-act.crm-due-soon { border-left-color: var(--badge-success-fg); }
.crm-lp2-act-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.crm-lp2-timeline { display: flex; flex-direction: column; }
.crm-lp2-tl-item { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-soft, var(--border)); }
.crm-lp2-tl-item:last-child { border-bottom: none; }
.crm-lp2-tl-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; margin-top: 6px; background: var(--muted-2); }
.crm-tl-move { background: var(--brand); }
.crm-tl-note { background: var(--badge-success-fg); }
.crm-tl-system { background: var(--muted-2); }
.crm-lp2-tl-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.crm-lp2-tl-line1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.crm-lp2-tl-who { font-weight: 700; color: var(--text-strong); font-size: 13px; }
.crm-lp2-tl-what { font-size: 12.5px; color: var(--muted); }
.crm-lp2-tl-detail { font-size: 13px; color: var(--text); margin-top: 3px; line-height: 1.4; }

@media (max-width: 900px) {
  .crm-lp2 { flex-direction: column; }
  .crm-lp2-left { border-right: none; border-bottom: 1px solid var(--border); flex-basis: auto; }
  .crm-lp2-headrow { flex-direction: column; }
}

/* ── Ficha del lead v2 — fuentes más grandes + modales (etiquetas / actividad) ─ */
.crm-lp2-title { font-size: 28px; }
.crm-lp2-grid { font-size: 15px; }
.crm-lp2-lbl { font-size: 13.5px; }
.crm-lp2-val { font-size: 15px; }
.crm-lp2-money { font-size: 22px; }
.crm-lp2-left .crm-note-text, .crm-lp2-right .crm-note-text { font-size: 14px; }
.crm-lp2-tl-who { font-size: 14.5px; }
.crm-lp2-tl-what { font-size: 13.5px; }
.crm-lp2-tl-detail { font-size: 14px; }
.crm-lp2-tl-title { font-size: 12px; }
.crm-lp2-noteitem-head .crm-note-tag, .crm-lp2-act .crm-note-tag { font-size: 12.5px; }

/* Modal actividad — selector de tipo */
.crm-actmodal-types { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.crm-actmodal-type { padding: 8px 13px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.crm-actmodal-type:hover { border-color: var(--brand); }
.crm-actmodal-type.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Modal etiquetas — catálogo con color */
.crm-tagmodal-list { display: flex; flex-wrap: wrap; gap: 8px; min-height: 20px; }
.crm-tagchip { display: inline-flex; align-items: center; gap: 2px; border: 1.5px solid; border-radius: 999px; padding: 3px 4px 3px 11px; font-size: 13px; font-weight: 600; background: transparent; }
.crm-tagchip.on { box-shadow: 0 0 0 2px rgba(0,0,0,.06) inset; }
.crm-tagchip-lbl { cursor: pointer; }
.crm-tagchip-del { border: none; background: transparent; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; opacity: .55; padding: 0 3px; }
.crm-tagchip-del:hover { opacity: 1; }
.crm-tagmodal-create { display: flex; gap: 8px; align-items: center; }
.crm-tagmodal-create .crm-input { flex: 1 1 auto; }
.crm-tagmodal-color { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--control-bg); cursor: pointer; flex: 0 0 auto; }

/* Vista Actividades — barra de filtros + estado hecho + quién */
.crm-acts-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.crm-act-who { font-size: 12px; color: var(--muted-2); margin-top: 3px; }
.crm-act-done { opacity: .72; }
.crm-act-done.crm-act-item { border-left-color: var(--muted-2); }
.crm-act-done .crm-note-text { text-decoration: line-through; }
.crm-act-group-title:not(.crm-due-overdue):not(.crm-due-today):not(.crm-due-soon) { color: var(--muted); }

/* Constructor — form amigable de condición/regla + drag de fases */
.crm-cond-fields { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 4px 0 2px; }
.crm-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text); cursor: pointer; }
.crm-check input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--brand); }
.crm-fase-card[draggable="true"] { cursor: grab; }
.crm-fase-card[draggable="true"]:active { cursor: grabbing; }

/* ── Kanban más grande, vibrante y aireado (estilo Odoo, colores de marca) ── */
.crm-board { gap: 16px; padding: 0 24px 18px; }
.crm-col {
  flex: 0 0 340px; min-width: 340px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 14px; padding: 0; box-shadow: none; gap: 0;
  max-height: calc(100vh - 180px);
  transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.crm-col-head {
  padding: 14px 16px 10px; border-top: 4px solid var(--brand); border-radius: 14px 14px 0 0;
  align-items: flex-start;
  background: linear-gradient(var(--brand-soft-bg, transparent), transparent);
}
.crm-col-name { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.crm-col-count { font-size: 12.5px; }
.crm-col-obj { padding: 0 16px; }
.crm-col-body { padding: 12px 14px 16px; gap: 12px; overflow-y: auto; min-height: 60px; }
/* Resaltado al arrastrar sobre la columna */
.crm-col-drop { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand) inset; background: var(--brand-soft-bg, var(--surface-3)); }
.crm-col-drophint { border: 1.5px dashed var(--border); border-radius: 10px; }

.crm-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 15px; gap: 10px; box-shadow: var(--shadow-sm);
  cursor: grab; transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease;
}
.crm-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--brand); }
.crm-card:active { cursor: grabbing; }
.crm-card-name { font-size: 15.5px; font-weight: 700; color: var(--text-strong); }
.crm-card-sub { font-size: 12.5px; }

/* Etiquetas (tags) */
.crm-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-tag {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 600;
  background: var(--badge-info-bg); color: var(--badge-info-fg);
  border-radius: 6px; padding: 2px 8px;
}
.crm-tag-add { background: transparent; color: var(--muted); border: 1px dashed var(--border); cursor: pointer; }
.crm-tag-add:hover { color: var(--brand); border-color: var(--brand); }

.crm-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
/* Estrellas de prioridad (0-3) */
.crm-card-stars { display: inline-flex; gap: 1px; }
.crm-star { font-size: 16px; line-height: 1; color: var(--border); cursor: pointer; transition: color .1s ease, transform .1s ease; }
.crm-star:hover { transform: scale(1.2); }
.crm-star.on { color: #f5b301; }
.crm-card-activity {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.crm-card-activity.crm-due-overdue { background: var(--badge-danger-bg); color: var(--badge-danger-fg); }
.crm-card-activity.crm-due-today   { background: var(--badge-warn-bg); color: var(--badge-warn-fg); }
.crm-card-activity.crm-due-soon    { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.crm-card-avatar {
  margin-left: auto; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
  background: var(--brand); color: #fff;
}

/* ── Vista Lista ─────────────────────────────────────────────────────────── */
.crm-list-wrap { margin: 0 24px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.crm-list-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.crm-list-table thead th {
  text-align: left; padding: 11px 14px; font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.crm-list-table td { padding: 11px 14px; border-bottom: 1px solid var(--border-soft, var(--border)); color: var(--text); }
.crm-list-row { cursor: pointer; transition: background .1s ease; }
.crm-list-row:hover { background: var(--surface-2); }
.crm-list-row:last-child td { border-bottom: none; }
.crm-list-name { font-weight: 600; color: var(--text-strong); }
.crm-pill {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 600;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 10px;
}
.crm-estado-activo { background: var(--badge-success-bg); color: var(--badge-success-fg); border-color: transparent; }
.crm-estado-pausado { background: var(--badge-warn-bg); color: var(--badge-warn-fg); border-color: transparent; }
.crm-estado-completado { background: var(--badge-info-bg); color: var(--badge-info-fg); border-color: transparent; }

/* ── Vista Actividades ───────────────────────────────────────────────────── */
.crm-acts { display: flex; flex-direction: column; gap: 18px; padding: 0 24px; max-width: 900px; }
.crm-act-group { display: flex; flex-direction: column; gap: 8px; }
.crm-act-group-title { font-size: 13px; font-weight: 700; padding: 4px 2px; }
.crm-act-group-title.crm-due-overdue { color: var(--badge-danger-fg); }
.crm-act-group-title.crm-due-today   { color: var(--badge-warn-fg); }
.crm-act-group-title.crm-due-soon    { color: var(--badge-success-fg); }
.crm-act-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-left-width: 3px;
  border-radius: 10px; padding: 11px 14px;
}
.crm-act-item.crm-due-overdue { border-left-color: var(--badge-danger-fg); }
.crm-act-item.crm-due-today   { border-left-color: var(--badge-warn-fg); }
.crm-act-item.crm-due-soon    { border-left-color: var(--badge-success-fg); }
.crm-act-main { display: flex; flex-direction: column; gap: 5px; cursor: pointer; min-width: 0; flex: 1 1 auto; }
.crm-act-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Vista Calendario ────────────────────────────────────────────────────── */
.crm-cal { padding: 0 24px; }
.crm-cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.crm-cal-title { font-size: 17px; font-weight: 700; color: var(--text-strong); min-width: 160px; }
.crm-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.crm-cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 4px 0; }
.crm-cal-cell {
  min-height: 108px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 6px; display: flex; flex-direction: column; gap: 4px;
}
.crm-cal-empty { background: transparent; border-color: transparent; }
.crm-cal-today { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.crm-cal-daynum { font-size: 12px; font-weight: 700; color: var(--muted); align-self: flex-end; }
.crm-cal-today .crm-cal-daynum { color: var(--brand); }
.crm-cal-events { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.crm-cal-ev {
  font-size: 11px; font-weight: 600; border-radius: 6px; padding: 2px 6px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crm-cal-ev.crm-due-overdue { background: var(--badge-danger-bg); color: var(--badge-danger-fg); }
.crm-cal-ev.crm-due-today   { background: var(--badge-warn-bg); color: var(--badge-warn-fg); }
.crm-cal-ev.crm-due-soon    { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.crm-cal-ev.crm-cal-done    { background: var(--surface-2); color: var(--muted-2); text-decoration: line-through; }

@media (max-width: 720px) {
  .crm-cal-cell { min-height: 74px; }
  .crm-cpanel { padding: 10px 14px; }
  .crm-board, .crm-acts, .crm-cal, .crm-list-wrap { padding-left: 14px; padding-right: 14px; }
  .crm-list-wrap { margin: 0 14px; }
}

/* ── CRM · Entrada del flujo (con reglas de inscripción) ─────────────────── */
.crm-flow-entry-card { background: var(--brand-soft-bg, var(--surface-2)); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-sm); }
.crm-flow-entry-ico { font-size: 16px; color: var(--brand); }

/* ── CRM · Plantillas / Import / Export ──────────────────────────────────── */
.crm-modal-wide { max-width: 640px; }
.crm-template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; padding: 16px 18px; }
.crm-template-card {
  display: flex; flex-direction: column; gap: 6px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 12px; padding: 14px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.crm-template-card:hover { border-color: var(--brand); background: var(--brand-soft-bg, var(--surface)); }
.crm-template-icon { font-size: 22px; }
.crm-template-card strong { color: var(--text-strong); font-size: 14px; }
.crm-template-resumen { color: var(--muted); font-size: 12px; line-height: 1.4; }
.crm-textarea-lg { min-height: 220px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* ── Pill deslizante en barras de tabs (segmented controls) ──────────────────
   El resaltado del tab activo (fondo brand-dark) se DESLIZA entre pestañas en vez
   de saltar. Es 100% global: un listener en index.html marca cada contenedor de
   tabs con `.slide-tabs` y escribe las variables `--pill-*` a partir del botón
   activo (detectado por su clase: .active / .is-active / *--active). No hay que
   tocar la lógica de cada tab. Los tabs de SUBRAYADO (ticket-monitor-subtabs,
   notif) NO se incluyen (usan border-bottom, no un fondo). La lista de
   contenedores vive en el JS de index.html. Ver docs/frontend/tabs_pill_deslizante.md */
.slide-tabs { position: relative; }
.slide-tabs > button { position: relative; z-index: 1; }
.slide-tabs::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: var(--pill-w, 0);
  height: var(--pill-h, 0);
  transform: translate(var(--pill-x, 0), var(--pill-y, 0));
  background: var(--brand-dark);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
  opacity: var(--pill-o, 0);
  z-index: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1),
              width     0.4s cubic-bezier(0.65, 0, 0.35, 1),
              height    0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
/* Primer posicionamiento sin animación (evita que el pill "crezca" desde 0,0). */
.slide-tabs.slide-tabs--no-anim::after { transition: none; }

/* El botón activo deja de pintar su propio fondo: el pill es el único resaltado.
   (Gana en especificidad al `.active { background: !important }` global y a los
   `*--active` de cada módulo.) El color del texto lo mantiene cada módulo. */
.slide-tabs > .active,
.slide-tabs > .is-active,
.slide-tabs > [class*="--active"] {
  background: transparent !important;
  box-shadow: none !important;
}

/* TEMA CLARO: los overrides `html.light-mode .<modulo>-tab.active` (0,3,1) le ganaban a
   la regla de arriba (0,2,0) y repintaban un fondo propio translúcido + texto de MARCA.
   Como el pill de detrás es un sólido de marca, quedaba texto de marca sobre fondo de
   marca = invisible (bug: tabs del centro de control y de tickets en claro). El pill es
   el único resaltado, así que sobre él el texto va blanco en AMBOS temas, igual que en
   oscuro. La clase se repite (.slide-tabs.slide-tabs) para mantener la especificidad
   en 0,4,1 y ganarle a esos overrides sin depender del orden del archivo.
   Ya no hay excepciones: camp-tabs tenía un pill claro propio y se unificó con el
   resto al estandarizar el segmented control. */
html.light-mode .slide-tabs.slide-tabs > .active,
html.light-mode .slide-tabs.slide-tabs > .is-active,
html.light-mode .slide-tabs.slide-tabs > [class*="--active"] {
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
}

/* camp-tabs usa un pill claro (var(--surface)) en vez de brand-dark. */
.slide-tabs.camp-tabs::after {
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .slide-tabs::after { transition: none; }
}

/* ── Medidor de fortaleza de contraseña ──────────────────────────────────────
   Segmentos que se llenan según el score 0..4 (util::password::password_score),
   alineado con la política de contraseñas del backend. Colores por tokens. */
.pw-meter { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.pw-meter--hidden { display: none; }

.meter { display: flex; gap: 5px; }
.meter span {
  flex: 1; height: 5px; border-radius: 3px;
  background: var(--control-bg);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
}
.meter[data-score="1"] span:nth-child(-n+1),
.meter[data-score="2"] span:nth-child(-n+2),
.meter[data-score="3"] span:nth-child(-n+3),
.meter[data-score="4"] span { transform: scaleX(1); }

.meter[data-score="1"] span { background: var(--badge-danger-fg); }
.meter[data-score="2"] span { background: var(--badge-warn-fg); }
.meter[data-score="3"] span,
.meter[data-score="4"] span { background: var(--badge-success-fg); }

.pw-meter__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pw-meter__label { font-size: 12px; font-weight: 600; white-space: nowrap; }
.pw-meter__label[data-score="1"] { color: var(--badge-danger-fg); }
.pw-meter__label[data-score="2"] { color: var(--badge-warn-fg); }
.pw-meter__label[data-score="3"],
.pw-meter__label[data-score="4"] { color: var(--badge-success-fg); }
.pw-meter__hint { font-size: 11.5px; color: var(--muted); text-align: right; }

/* ── Feedback al presionar un botón ──────────────────────────────────────────
   Indica visualmente que el click se registró. Aplica a TODOS los botones (micro
   escala al presionar); el ripple va en los botones de acción principales.
   `:disabled` no reacciona (los botones en curso ya se bloquean — anti doble envío). */
button { transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1); }
button:active:not(:disabled) {
  transform: scale(0.96);
  transition: transform 0.07s ease-out;
}

/* Ripple: onda desde el punto de click en los CTA principales. El <span.ripple> lo
   inyecta un listener delegado en index.html. Requiere overflow:hidden en el host. */
.btn-primary, .btn-login, .btn-danger, .btn-create, .camp-btn {
  position: relative;
  overflow: hidden;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple-out 0.6s ease-out;
  pointer-events: none;
}
@keyframes ripple-out {
  to { transform: scale(3); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Notificaciones internas — campana del header + página + preferencias
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Campana en el header ── */
.ph-notif { position: relative; display: flex; align-items: center; }
.ph-notif-btn {
  position: relative;
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: 10px;
  width: 38px; height: 38px;
  font-size: 1.05rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  transition: background .15s, transform 0.15s, box-shadow 0.18s;
}
.ph-notif-btn:hover { background: var(--control-bg-hover); }
.ph-notif-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: #ff8a00; color: #fff;
  border-radius: 9px; font-size: 0.66rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  z-index: 1;
}
/* Halo pulsante detrás del badge mientras haya no-leídas (solo se renderiza el
   badge cuando unread > 0, así que la animación solo corre cuando corresponde). */
.ph-notif-badge::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #ff8a00;
  z-index: -1;
  animation: notif-pulse 1.8s ease-out infinite;
}
@keyframes notif-pulse {
  0%        { transform: scale(1);   opacity: 0.7; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}
.ph-notif-backdrop {
  position: fixed; inset: 0; z-index: 40;
}
.ph-notif-menu {
  position: absolute; top: 46px; right: 0; z-index: 41;
  width: 340px; max-width: 90vw;
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.ph-notif-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  font-weight: 600; color: var(--text-strong);
  font-size: 0.9rem;
}
.ph-notif-all {
  background: none; border: none; cursor: pointer;
  color: var(--brand); font-size: 0.8rem; font-weight: 600;
}
.ph-notif-menu-list { max-height: 380px; overflow-y: auto; }
.ph-notif-empty { padding: 24px; text-align: center; color: var(--muted); font-size: 0.85rem; }
.ph-notif-row {
  padding: 10px 14px; border-bottom: 1px solid var(--border-soft);
}
.ph-notif-row:last-child { border-bottom: none; }
.ph-notif-row--unread { background: var(--brand-soft-bg); }
.ph-notif-row-title { font-size: 0.85rem; font-weight: 600; color: var(--text-strong); }
.ph-notif-row-body {
  font-size: 0.78rem; color: var(--muted); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════
   Esqueletos de carga (shimmer) — LiveChat: lista, chat y ficha de contacto
   ══════════════════════════════════════════════════════════════════════════ */
/* Tokens: :root = tema oscuro (base); html.light-mode = claro. */
:root { --skel-base: #232326; --skel-hi: #34343a; }
html.light-mode { --skel-base: #e5e8ee; --skel-hi: #f3f5f9; }

.skel {
  background: linear-gradient(90deg, var(--skel-base) 25%, var(--skel-hi) 50%, var(--skel-base) 75%);
  background-size: 200% 100%;
  animation: shimmer-sweep 1.4s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes shimmer-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* formas base */
.skel-avatar    { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.skel-avatar-lg { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 6px; }
.skel-bar       { height: 11px; }
.skel-line      { height: 12px; }
.skel-bubble    { height: 34px; border-radius: 14px; }

/* lista de conversaciones */
.conv-skel-list { list-style: none; margin: 0; padding: 0; }
.conv-skel {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--border-soft);
}
.conv-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }

/* chat */
.chat-skel { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; }
.msg-skel { display: flex; }
.msg-skel--in  { justify-content: flex-start; }
.msg-skel--out { justify-content: flex-end; }
.msg-skel .skel-bubble { min-width: 120px; }

/* ficha de contacto */
.contact-skel { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.contact-skel-field { display: flex; flex-direction: column; gap: 6px; }

/* ── Toasts (notificaciones emergentes) ── */
.toast-host {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column; gap: 10px;
  align-items: center; pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 11px;
  min-width: 280px; max-width: 92vw;
  padding: 12px 18px;
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  color: var(--text-strong); font-size: 0.9rem; font-weight: 600;
  animation: toast-in 0.55s cubic-bezier(0.18, 1.25, 0.4, 1) both;
}
.toast--info    { border-left-color: var(--badge-info-fg, #3b82f6); }
.toast--ok      { border-left-color: var(--badge-success-fg, #22c55e); }
.toast--warn    { border-left-color: #ff8a00; }
.toast--danger  { border-left-color: var(--badge-danger-fg, #ef4444); }
.toast-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: currentColor;
}
.toast--info   .toast-dot { color: var(--badge-info-fg, #3b82f6); }
.toast--ok     .toast-dot { color: var(--badge-success-fg, #22c55e); }
.toast--warn   .toast-dot { color: #ff8a00; }
.toast--danger .toast-dot { color: var(--badge-danger-fg, #ef4444); }
.toast-title { line-height: 1.3; }
@keyframes toast-in {
  from { transform: translateY(-160%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}

/* ── Página de notificaciones ── */
.notif-tabs { display: flex; gap: 6px; margin: 0 0 16px; flex-wrap: wrap; }
.notif-tabs button {
  padding: 8px 16px; border-radius: 8px;
  background: var(--control-bg); border: 1px solid var(--control-border);
  color: var(--text); cursor: pointer; font-size: 0.88rem; font-weight: 500;
}
.notif-tabs button:hover { background: var(--control-bg-hover); }
.notif-tabs button.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.notif-empty { text-align: center; color: var(--muted); padding: 36px 0; font-size: 0.9rem; }

.notif-inbox-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.notif-check { font-size: 0.85rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }

.notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.notif-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 10px;
}
.notif-item--unread { border-left: 3px solid var(--brand); background: var(--surface-2); }
.notif-item-main { min-width: 0; flex: 1; }
.notif-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notif-item-title { font-weight: 600; color: var(--text-strong); font-size: 0.9rem; }
.notif-item-body {
  font-size: 0.83rem; color: var(--muted); margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-item-meta { font-size: 0.74rem; color: var(--muted-2); margin-top: 6px; }
.notif-item-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }

/* fila completa clicable (abre el detalle) */
.notif-item-btn {
  flex: 1; min-width: 0; width: 100%;
  background: none; border: none; margin: 0; padding: 0;
  text-align: left; cursor: pointer; color: inherit; font: inherit;
  display: flex; flex-direction: column; gap: 4px;
}
.notif-item-btn:hover .notif-item-title { color: var(--brand); }
.notif-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); flex-shrink: 0;
}

/* modal de detalle */
.notif-detail-backdrop {
  position: fixed; inset: 0; z-index: 60; background: var(--scrim, rgba(0,0,0,0.5));
}
.notif-detail {
  position: fixed; z-index: 61; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 780px; max-width: 94vw; max-height: 88vh; overflow-y: auto;
  background: var(--surface-overlay); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-lg); padding: 24px 28px;
}
.notif-detail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.notif-detail-close {
  background: none; border: none; cursor: pointer; font-size: 1.05rem;
  color: var(--muted); line-height: 1; padding: 4px;
}
.notif-detail-title { margin: 0 0 10px; font-size: 1.1rem; color: var(--text-strong); text-wrap: balance; }
.notif-detail-body { margin: 0 0 16px; font-size: 0.92rem; color: var(--text); line-height: 1.6; white-space: pre-wrap; }
.notif-detail-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.notif-detail-meta > div { display: flex; gap: 10px; font-size: 0.85rem; color: var(--text); }
.notif-detail-k {
  min-width: 52px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.03em; font-size: 0.72rem; padding-top: 2px;
}
.notif-detail-go { display: inline-block; text-decoration: none; }
.notif-detail-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.notif-detail-foot .camp-btn { text-decoration: none; }
.notif-detail-hist {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--brand); font: inherit; font-size: 0.85rem; font-weight: 600;
}

/* enlace con subrayado animado (hover) */
.underline-link {
  position: relative;
  text-decoration: none;
}
.underline-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.underline-link:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .underline-link::after { transition: none; }
}

/* cuerpo markdown en el detalle */
.notif-md { line-height: 1.6; }
.notif-md > *:first-child { margin-top: 0; }
.notif-md > *:last-child { margin-bottom: 0; }
.notif-md p { margin: 0 0 10px; }
.notif-md h1, .notif-md h2, .notif-md h3, .notif-md h4 {
  margin: 14px 0 8px; color: var(--text-strong); line-height: 1.3;
}
.notif-md h1 { font-size: 1.15rem; }
.notif-md h2 { font-size: 1.05rem; }
.notif-md h3 { font-size: 0.98rem; }
.notif-md ul, .notif-md ol { margin: 0 0 10px; padding-left: 22px; }
.notif-md li { margin: 3px 0; }
.notif-md a { color: var(--brand); text-decoration: underline; }
.notif-md code {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: 5px; padding: 1px 5px; font-size: 0.86em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.notif-md pre {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 12px 14px; overflow-x: auto; margin: 0 0 10px;
}
.notif-md pre code { background: none; border: none; padding: 0; }
.notif-md blockquote {
  margin: 0 0 10px; padding: 4px 14px; border-left: 3px solid var(--border);
  color: var(--muted);
}
.notif-md table { border-collapse: collapse; width: 100%; margin: 0 0 10px; font-size: 0.86rem; }
.notif-md th, .notif-md td { border: 1px solid var(--border-soft); padding: 6px 9px; text-align: left; }
.notif-md hr { border: none; border-top: 1px solid var(--border-soft); margin: 12px 0; }

/* ── Historial de enviados: filtros + paginación ── */
.notif-sent-filters {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px;
}
.notif-sent-filters select,
.notif-sent-filters input {
  background: var(--control-bg); border: 1px solid var(--control-border);
  border-radius: 8px; padding: 8px 10px; color: var(--text); font-size: 0.85rem;
}
.notif-sent-filters .notif-search { min-width: 200px; flex: 1; }
.notif-pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 12px;
}
.notif-pager-info { font-size: 0.82rem; color: var(--muted); }
.notif-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.notif-table-scroll .camp-table { min-width: 520px; }

/* ── Responsive: pantallas pequeñas ── */
@media (max-width: 640px) {
  .notif-page { padding-left: 12px; padding-right: 12px; }
  .notif-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .notif-tabs button { white-space: nowrap; }
  .notif-sent-filters { flex-direction: column; align-items: stretch; }
  .notif-sent-filters select,
  .notif-sent-filters input,
  .notif-sent-filters .notif-search { width: 100%; min-width: 0; }
  .notif-pager { flex-wrap: wrap; gap: 8px; }
  .notif-item { flex-direction: column; align-items: stretch; }
  .notif-detail { width: 96vw; max-height: 90vh; padding: 16px 16px; }
  .notif-detail-foot { flex-direction: column; align-items: stretch; }
  .notif-inbox-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .ph-notif-menu { width: 94vw; right: -6px; }
}

/* ── Compositor ── */
.notif-compose, .notif-inbox { max-width: 720px; }
.notif-sent { max-width: 960px; }
.notif-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.notif-field > label { font-size: 0.8rem; font-weight: 600; color: var(--text-strong); }
.notif-field input[type=text], .notif-field textarea, .notif-field select {
  background: var(--control-bg); border: 1px solid var(--control-border);
  border-radius: 8px; padding: 9px 11px; color: var(--text); font-size: 0.88rem;
  width: 100%;
}
.notif-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 14px; }
.notif-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 20px;
  background: var(--control-bg); border: 1px solid var(--control-border);
  font-size: 0.83rem; color: var(--text); cursor: pointer;
}
.notif-banner { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 0.86rem; }
.notif-banner--ok  { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.notif-banner--err { background: var(--badge-danger-bg);  color: var(--badge-danger-fg); }

/* ── Preferencias / ajustes (tablas de checkboxes) ── */
.notif-master { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text-strong); font-weight: 600; margin-bottom: 8px; }
.notif-prefs-hint { font-size: 0.8rem; color: var(--muted); margin: 0 0 14px; }
.notif-prefs-table th:not(:first-child), .cc-notif-settings .camp-table th:not(:first-child) { width: 90px; text-align: center; }
.notif-prefs-table td:not(:first-child), .cc-notif-settings .camp-table td:not(:first-child) { text-align: center; }
.notif-lock { font-size: 0.75rem; }
.notif-recipients { margin-top: 18px; border-top: 1px solid var(--border-soft); padding-top: 14px; }
.notif-recipients-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.notif-recipients-head h4 { margin: 0; font-size: 0.9rem; color: var(--text-strong); }

/* ============================================================
   Identidad Visual / Personalización de perfil — filas + dropdown
   con búsqueda + barra Guardar fija. Sin líneas separadoras.
   ============================================================ */
.idv-panel {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 560px;
  padding-bottom: 88px; /* deja aire para la barra fija de Guardar */
}
.idv-row { display: flex; flex-direction: column; gap: 8px; }
.idv-row-head { display: flex; align-items: center; gap: 6px; }
.idv-row-title { font-size: 0.9rem; font-weight: 600; color: var(--text-strong); }
.idv-row-control { max-width: 100%; }
.idv-name-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text);
  font-size: 0.875rem;
  font-family: inherit;
}
.idv-name-input:focus { outline: none; border-color: var(--brand); }
.idv-name-input:disabled { opacity: 0.55; cursor: not-allowed; }

/* Dropdown con búsqueda (componente IdvSelect) */
.idv-select { position: relative; width: 100%; }
.idv-select-field {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text);
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.idv-select-field:hover:not(:disabled) { background: var(--control-bg-hover); }
.idv-select-field:disabled { opacity: 0.55; cursor: not-allowed; }
.idv-select.is-open .idv-select-field { border-color: var(--brand); }
.idv-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idv-select-caret { color: var(--muted); font-size: 0.7rem; flex-shrink: 0; }

.idv-select-backdrop { position: fixed; inset: 0; z-index: 60; }
.idv-select-panel {
  position: absolute;
  z-index: 61;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.idv-select-search {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
}
.idv-select-search:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.idv-select-list {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.idv-select-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s;
}
.idv-select-opt:hover { background: var(--control-bg-hover); }
.idv-select-opt.is-active {
  background: var(--brand-soft-bg);
  color: var(--brand-soft-fg);
  font-weight: 600;
}
.idv-opt-label { flex: 1; }
.idv-opt-sub { font-size: 0.75rem; color: var(--muted); }
.idv-select-opt.is-active .idv-opt-sub { color: var(--brand-soft-fg); }
.idv-select-empty { padding: 10px 12px; font-size: 0.8rem; color: var(--muted); text-align: center; }

/* Barra Guardar — fija en la esquina inferior derecha (siempre visible al hacer scroll) */
.idv-savebar {
  position: fixed;
  right: 32px;
  bottom: 24px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}
.idv-saved { font-size: 0.82rem; color: var(--badge-success-fg); font-weight: 600; }
.idv-save-btn { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   FLUJOS DE TRABAJO — sistema propio `flx-*` (tokens, claro + oscuro).
   Flujo de trabajo del constructor: (izq) lista de flujos configurados →
   (der) ① disparadores → ② embudo de fases (drag & drop) → ③ revisión.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Layout de 2 columnas: sidebar de flujos + canvas del flujo seleccionado. */
.flx-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) { .flx-layout { grid-template-columns: 1fr; } }

/* ── Sidebar: lista de flujos configurados ─────────────────────────────────── */
.flx-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  position: sticky;
  top: 14px;
  box-shadow: var(--shadow-sm);
}
.flx-sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.flx-sidebar-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted-2);
}
.flx-flow-list { display: flex; flex-direction: column; gap: 8px; }
.flx-flow-card {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: 12px; padding: 11px 13px;
  transition: border-color .15s ease, background .15s ease, transform .05s ease;
}
.flx-flow-card:hover { background: var(--control-bg-hover); border-color: var(--border-soft); }
.flx-flow-card:active { transform: translateY(1px); }
.flx-flow-card.active {
  border-color: var(--brand); border-left-color: var(--brand);
  background: var(--brand-soft-bg, var(--surface-2));
}
.flx-flow-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.flx-flow-card-name { font-size: 14px; font-weight: 600; color: var(--text-strong); line-height: 1.25; }
.flx-flow-card-meta { font-size: 11.5px; color: var(--muted); }
.flx-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--muted-2); }
.flx-dot.on { background: var(--badge-success-fg, #10b981); box-shadow: 0 0 0 3px var(--badge-success-bg); }

/* ── Canvas del flujo ──────────────────────────────────────────────────────── */
.flx-canvas { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.flx-flow-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-sm);
}
.flx-flow-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.flx-flow-title { font-size: 18px; font-weight: 700; color: var(--text-strong); margin: 0; }
.flx-flow-obj { font-size: 13px; color: var(--muted); margin: 6px 0 0; line-height: 1.45; max-width: 60ch; }
.flx-flow-header-actions { display: inline-flex; gap: 6px; flex: 0 0 auto; }

.flx-status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 3px 9px; border-radius: 999px;
}
.flx-status-badge.on { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.flx-status-badge.off { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); }

/* Botones del canvas */
.flx-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--control-bg); color: var(--text);
  border: 1px solid var(--control-border); border-radius: 9px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.flx-btn:hover { background: var(--control-bg-hover); }
.flx-btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.flx-btn-primary:hover { background: var(--brand-dark, var(--brand)); }
.flx-btn-danger { color: var(--danger, #ef4444); border-color: var(--control-border); }
.flx-btn-danger:hover { background: var(--badge-danger-bg); border-color: var(--badge-danger-fg); }
.flx-btn-add {
  background: transparent; border: 1px dashed var(--brand); color: var(--brand);
  border-radius: 9px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.flx-btn-add:hover { background: var(--brand-soft-bg, var(--surface-2)); }
.flx-icon-btn {
  background: var(--control-bg); border: 1px solid var(--control-border); border-radius: 8px;
  width: 30px; height: 30px; color: var(--text); cursor: pointer; font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.flx-icon-btn:hover:not(:disabled) { background: var(--control-bg-hover); }
.flx-icon-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ── Barra de etapas (①→②→③) ──────────────────────────────────────────────── */
.flx-stagebar { display: flex; align-items: center; gap: 6px; padding: 2px 2px 0; flex-wrap: wrap; }
.flx-stagebar-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--muted); font-weight: 600;
  padding: 5px 12px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border);
}
.flx-stagebar-item .flx-stage-badge {
  width: 20px; height: 20px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
  background: var(--control-bg); color: var(--muted-2);
}
.flx-stagebar-item.done { color: var(--brand); border-color: var(--brand); }
.flx-stagebar-item.done .flx-stage-badge { background: var(--brand); color: #fff; }
.flx-stagebar-arrow { color: var(--muted-2); font-size: 14px; }

/* ── Secciones del canvas ──────────────────────────────────────────────────── */
.flx-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-sm);
}
.flx-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}
.flx-section-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 700; color: var(--text-strong);
}
.flx-section-title .flx-num {
  width: 22px; height: 22px; border-radius: 7px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  background: var(--brand-soft-bg, var(--surface-2)); color: var(--brand-soft-fg, var(--brand));
}
.flx-section-hint { font-size: 12px; color: var(--muted-2); margin: -6px 0 12px; }

/* ── Chips (disparadores / condiciones) ────────────────────────────────────── */
.flx-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.flx-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--badge-info-bg); color: var(--badge-info-fg);
  border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 500;
}
.flx-chip.purple { background: var(--badge-purple-bg); color: var(--badge-purple-fg); }
.flx-chip-x {
  background: transparent; border: none; color: inherit; cursor: pointer;
  font-size: 15px; line-height: 1; opacity: .6; padding: 0;
}
.flx-chip-x:hover { opacity: 1; }
.flx-empty { font-size: 12.5px; color: var(--muted-2); font-style: italic; }

/* ── Embudo de fases (drag & drop) ─────────────────────────────────────────── */
.flx-funnel { display: flex; flex-direction: column; align-items: center; gap: 0; }
.flx-stage {
  width: 100%;
  display: flex; align-items: stretch; gap: 0;
  transition: transform .08s ease, opacity .12s ease;
}
.flx-stage.dragging { opacity: .45; }
.flx-stage.over .flx-stage-body { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft-bg, var(--surface-2)) inset; }

/* Riel numerado + conector vertical (metáfora de embudo). */
.flx-stage-rail { display: flex; flex-direction: column; align-items: center; flex: 0 0 44px; }
.flx-stage-num {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex: 0 0 auto;
  background: var(--brand); color: #fff; box-shadow: 0 0 0 4px var(--brand-soft-bg, var(--surface-2));
}
.flx-stage-line { width: 2px; flex: 1 1 auto; min-height: 18px; background: var(--border); margin: 4px 0; }
.flx-stage.terminal .flx-stage-num { background: var(--muted-2); }

.flx-stage-body {
  flex: 1 1 auto; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 14px; padding: 13px 15px; margin-bottom: 14px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.flx-stage-head { display: flex; align-items: center; gap: 9px; }
.flx-drag-handle {
  cursor: grab; color: var(--muted-2); font-size: 15px; user-select: none;
  padding: 2px 4px; border-radius: 6px; flex: 0 0 auto;
}
.flx-drag-handle:hover { color: var(--text); background: var(--control-bg); }
.flx-drag-handle:active { cursor: grabbing; }
.flx-stage-name { font-size: 14.5px; font-weight: 600; color: var(--text-strong); flex: 1 1 auto; min-width: 0; }
.flx-stage-tags { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.flx-tag {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 6px; background: var(--badge-neutral-bg); color: var(--badge-neutral-fg);
}
.flx-tag.mode { background: var(--badge-info-bg); color: var(--badge-info-fg); }
.flx-tag.warn { background: var(--badge-warn-bg); color: var(--badge-warn-fg); }
.flx-stage-actions { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.flx-stage-obj { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; line-height: 1.4; }
.flx-stage-rules {
  font-size: 12px; color: var(--muted-2); margin: 8px 0 0; padding-left: 14px;
  display: flex; flex-direction: column; gap: 3px;
}
.flx-stage-rules li { list-style: disc; }
.flx-stage-cond { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.flx-stage-cond-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-2); margin-bottom: 6px; }

.flx-add-stage {
  width: 100%; background: transparent; border: 1.5px dashed var(--brand); color: var(--brand);
  border-radius: 14px; padding: 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .12s ease;
}
.flx-add-stage:hover { background: var(--brand-soft-bg, var(--surface-2)); }

/* ── Revisión de cambios ───────────────────────────────────────────────────── */
.flx-review-grid { display: flex; flex-direction: column; gap: 9px; }
.flx-check {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--text); padding: 9px 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
}
.flx-check-ico { width: 20px; height: 20px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; border-radius: 50%; }
.flx-check.ok .flx-check-ico { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.flx-check.no .flx-check-ico { background: var(--badge-danger-bg); color: var(--badge-danger-fg); }
.flx-check.warn .flx-check-ico { background: var(--badge-warn-bg); color: var(--badge-warn-fg); }
.flx-review-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.flx-review-note { font-size: 12px; color: var(--muted-2); }

/* ── Objetivos: editor (wizard) + display (tarjeta de fase) ────────────────── */
.flx-wizard-hint { font-size: 12px; color: var(--muted); line-height: 1.45; margin: 0 0 12px; }
.flx-obj-editor { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.flx-obj-row { display: flex; align-items: flex-start; gap: 8px; }
.flx-obj-fields { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.flx-obj-desc-input { min-height: 54px; resize: vertical; font-family: inherit; }

.flx-stage-objectives { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.flx-obj-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.flx-obj-item { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; flex-wrap: wrap; }
.flx-obj-check { color: var(--brand); font-size: 11px; flex: 0 0 auto; }
.flx-obj-name { font-weight: 600; color: var(--text-strong); }
.flx-obj-desc { color: var(--muted); }
.flx-obj-desc::before { content: "— "; color: var(--muted-2); }

/* Empty state grande cuando no hay flujo seleccionado */
.flx-blank {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 60px 24px;
  background: var(--surface); border: 1px dashed var(--border); border-radius: 16px;
  color: var(--muted);
}
.flx-blank-ico { font-size: 40px; opacity: .5; }
/* ── Módulo Mapa Interactivo (owner-only) ─────────────────────────────────── */
.mapa-page { display: flex; flex-direction: column; gap: 14px; padding: 18px; height: 100%; box-sizing: border-box; }
/* El PageHeader rompe el padding del root para quedar a ancho completo (igual que
   en los demás módulos). Sin esto la barra superior queda embutida y se ve mal. */
.mapa-page > .ph { margin: -18px -18px 0; }
.mapa-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mapa-title { margin: 0; font-size: 1.4rem; color: var(--text-strong); }
.mapa-subtitle { margin: 2px 0 0; color: var(--muted); font-size: 0.9rem; }
.mapa-mode-tabs { display: flex; gap: 8px; }
.mapa-tab { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--control-border);
    background: var(--control-bg); color: var(--text); cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.mapa-tab:hover { background: var(--control-bg-hover); }
.mapa-tab.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

.mapa-alert { padding: 10px 14px; border-radius: 10px; font-size: 0.88rem; }
.mapa-alert--err { background: var(--badge-danger-bg); color: var(--badge-danger-fg); }
.mapa-alert--ok { background: var(--badge-success-bg); color: var(--badge-success-fg); }

/* Altura FIJA basada en viewport → el mapa no crece con la lista; ambas columnas
   tienen scroll interno propio. */
.mapa-body { display: flex; gap: 14px; height: calc(100dvh - 210px); min-height: 460px; }
.mapa-controls { width: 330px; flex-shrink: 0; height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.mapa-control-block { display: flex; flex-direction: column; }
.mapa-label { font-size: 0.78rem; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
.mapa-select, .mapa-input { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px;
    border: 1px solid var(--control-border); background: var(--control-bg); color: var(--text); font-size: 0.88rem; }
.mapa-input { margin-bottom: 8px; }

.mapa-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.mapa-stat { background: var(--surface-2); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; }
.mapa-stat span { font-size: 0.72rem; color: var(--muted); }
.mapa-stat b { font-size: 1.15rem; color: var(--text-strong); }

.mapa-offices-actions { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.mapa-btn { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--control-border);
    background: var(--control-bg); color: var(--text); cursor: pointer; font-size: 0.85rem; font-weight: 600; }
.mapa-btn:hover { background: var(--control-bg-hover); }
.mapa-btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.mapa-btn--danger { background: var(--badge-danger-bg); color: var(--badge-danger-fg); border-color: transparent; }
.mapa-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.mapa-editor { background: var(--surface-2); border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.mapa-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -2px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
.mapa-editor-title { font-weight: 600; color: var(--text-strong); font-size: 0.95rem; }
.mapa-editor-close { background: var(--control-bg); border: 1px solid var(--control-border); color: var(--muted); border-radius: 8px; width: 28px; height: 28px; line-height: 1; cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; }
.mapa-editor-close:hover { background: var(--control-bg-hover); color: var(--text-strong); }
.mapa-editor-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.mapa-coord-row { display: flex; gap: 8px; }
.mapa-coord-row .mapa-input { flex: 1; min-width: 0; }

.mapa-office-list { display: flex; flex-direction: column; gap: 12px; }
.mapa-office-group { display: flex; flex-direction: column; }
.mapa-office-estado { font-size: 0.8rem; font-weight: 700; color: var(--text-strong); text-transform: uppercase;
    letter-spacing: 0.4px; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; width: 100%;
    background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 7px 10px;
    cursor: pointer; text-align: left; }
.mapa-office-estado:hover { background: var(--control-bg-hover); }
.mapa-acc-chevron { display: inline-block; transition: transform 0.15s; color: var(--muted); font-size: 0.75rem; }
.mapa-acc-chevron.is-open { transform: rotate(90deg); }
.mapa-office-estado .mapa-office-count { margin-left: auto; }
.mapa-office-group-body { display: flex; flex-direction: column; padding: 4px 0 2px; }
.mapa-office-count { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); border-radius: 999px;
    padding: 0 7px; font-size: 0.7rem; font-weight: 700; }
.mapa-office-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
    padding: 7px 10px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text);
    cursor: pointer; text-align: left; font-size: 0.86rem; }
.mapa-office-row:hover { background: var(--control-bg-hover); border-color: var(--border-soft); }
.mapa-office-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapa-office-flags { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mapa-badge { border-radius: 999px; padding: 1px 8px; font-size: 0.68rem; font-weight: 700; }
.mapa-badge--warn { background: var(--badge-warn-bg); color: var(--badge-warn-fg); }
.mapa-pin--miss { color: var(--badge-warn-fg); }

/* z-index:0 aísla el stacking context de Leaflet (sus panes/controles usan
   z-index hasta ~1000). Sin esto el mapa se pinta sobre overlays de la barra
   superior (p. ej. el desplegable de notificaciones, z-index 41). */
.mapa-canvas-wrap { flex: 1; position: relative; z-index: 0; min-width: 0; height: 100%; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--border); }
.mapa-canvas { width: 100%; height: 100%; }
/* Toggle de vista de cobertura (calor / puntos / zonas) */
.mapa-view-toggle { display: flex; gap: 4px; }
.mapa-view-btn { flex: 1; padding: 6px 4px; font-size: 0.75rem; border: 1px solid var(--control-border);
    background: var(--control-bg); color: var(--muted); border-radius: 8px; cursor: pointer; white-space: nowrap; }
.mapa-view-btn:hover { background: var(--control-bg-hover); }
.mapa-view-btn.is-active { background: var(--brand-soft-bg); color: var(--brand-soft-fg); border-color: var(--brand); font-weight: 600; }
/* divIcons de cobertura (Leaflet inyecta estos className) */
.mapa-pin-ico { background: none; border: none; font-size: 20px; line-height: 1; text-align: center;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.mapa-cluster-label { background: none; border: none; display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: #fff; font-size: 0.82rem; text-shadow: 0 1px 3px rgba(0,0,0,0.7); pointer-events: none; }
.mapa-place-hint { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 500;
    background: var(--brand); color: #fff; padding: 8px 16px; border-radius: 999px; font-size: 0.85rem;
    font-weight: 600; box-shadow: var(--shadow-md); }

/* Estilo "midnight": tiñe de azul los tiles oscuros (CARTO dark_all no es azul
   nativo; sin API key no hay raster midnight, así que se logra por filtro CSS
   solo sobre el pane de tiles → no afecta marcadores/heatmap ni popups). */
.mapa-midnight .leaflet-tile-pane {
    filter: sepia(0.7) hue-rotate(178deg) saturate(2.2) brightness(0.78) contrast(1.05);
}

/* Leaflet popups en tema oscuro/claro */
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface-overlay); color: var(--text); }
.leaflet-popup-content { font-size: 0.85rem; }
.leaflet-container { background: var(--surface-2); font: inherit; }

@media (max-width: 860px) {
    .mapa-body { flex-direction: column; }
    .mapa-controls { width: 100%; max-height: 340px; }
    .mapa-canvas-wrap { min-height: 420px; }
}

/* ── Buscador de modelos OpenRouter (modal LLM/Multimedia) ─────────────────── */
.model-picker-modal {
  max-width: min(1180px, 96vw);
  width: 96%;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden; /* solo el área de scroll interna scrollea (no doble scroll) */
}
.model-picker-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.model-picker-filters select,
.model-picker-filters input {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text);
  font-size: 0.9rem;
}
.model-picker-filters .model-picker-search { flex: 1 1 240px; min-width: 200px; }
.model-picker-filters input[type="number"] { width: 200px; }
.model-picker-scroll {
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0; /* imprescindible para que un hijo flex pueda scrollear */
  border: 1px solid var(--border);
  border-radius: 12px;
}
.model-picker-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.model-picker-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--text-strong);
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.model-picker-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
  white-space: nowrap;
}
.model-picker-table tbody tr:hover { background: var(--surface-2); }
.model-picker-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.model-picker-name { white-space: normal; min-width: 240px; max-width: 380px; }
.model-picker-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.model-picker-model { font-weight: 600; color: var(--text-strong); }
.model-picker-name code { font-size: 0.72rem; color: var(--muted); word-break: break-all; }
.model-picker-caps { font-size: 0.78rem; color: var(--muted); white-space: normal; max-width: 170px; }
.model-picker-free {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  padding: 1px 7px; border-radius: 999px;
  background: var(--badge-success-bg); color: var(--badge-success-fg);
}
.model-picker-warn {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  background: var(--badge-warn-bg); color: var(--badge-warn-fg);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 12px; font-size: 0.85rem; line-height: 1.4;
}
.model-picker-warn button { flex: 0 0 auto; }
@media (max-width: 640px) {
  .model-picker-filters .model-picker-search,
  .model-picker-filters input[type="number"] { flex: 1 1 100%; width: 100%; }
}

/* ── Step-up de desactivar 2FA: tabs contraseña / código ────────────────────── */
.mfa-stepup { margin-top: 4px; }
.mfa-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.mfa-tab {
  flex: 1;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mfa-tab:hover { background: var(--control-bg-hover); }
.mfa-tab.active {
  background: var(--brand-soft-bg);
  color: var(--brand-soft-fg);
  border-color: var(--brand);
}

/* Auditor del system prompt (Personalidad > Auditar) */
.prompt-audit-legend { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; padding:10px 12px; margin-bottom:12px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; }
.prompt-audit-total { display:flex; flex-direction:column; margin-right:6px; padding-right:14px; border-right:1px solid var(--border); }
.prompt-audit-total-num { font-size:1.25rem; font-weight:700; color:var(--text-strong); font-variant-numeric:tabular-nums; line-height:1.1; }
.prompt-audit-total-lbl { font-size:0.72rem; color:var(--muted); }
.prompt-audit-chip { display:flex; align-items:center; gap:6px; font-size:0.78rem; }
.prompt-audit-dot { width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
.prompt-audit-chip-lbl { color:var(--muted); }
.prompt-audit-chip-tok { color:var(--text-strong); font-variant-numeric:tabular-nums; font-weight:600; }
.prompt-audit-scroll { overflow:auto; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:10px; padding-right:4px; }
.prompt-audit-seg { border-left:4px solid #94a3b8; background:var(--surface-2); border-radius:0 8px 8px 0; padding:10px 14px; }
.prompt-audit-seg-head { display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.prompt-audit-seg-title { font-weight:700; color:var(--text-strong); font-size:0.9rem; }
.prompt-audit-seg-src { font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.02em; }
.prompt-audit-seg-tok { margin-left:auto; font-size:0.75rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.prompt-audit-seg-text { margin:0; white-space:pre-wrap; word-break:break-word; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:0.8rem; line-height:1.5; color:var(--text); background:var(--bg); border:1px solid var(--border-soft); border-radius:6px; padding:8px 10px; max-height:300px; overflow:auto; }
.prompt-audit-tools-head { display:flex; align-items:center; gap:10px; margin:16px 0 2px; padding-top:12px; border-top:1px solid var(--border); }
.prompt-audit-tools-head .prompt-audit-seg-tok { margin-left:auto; }
.prompt-audit-tool { padding:6px 0; border-top:1px solid var(--border-soft); }
.prompt-audit-tool:first-child { border-top:none; }
.prompt-audit-tool-head { display:flex; align-items:center; gap:8px; }
.prompt-audit-tool-head .prompt-audit-seg-tok { margin-left:auto; }
.prompt-audit-tool-name { font-weight:600; color:var(--text-strong); font-size:0.82rem; }
.prompt-audit-tool-desc { font-size:0.78rem; color:var(--muted); white-space:pre-wrap; margin-top:2px; line-height:1.45; }

/* ═══════════════════════════════════════════════════════════════════════════
   Centro de Comunicaciones — asistente de líneas
   Solo tokens semánticos (tema claro/oscuro). El modal flota → --surface-overlay.
   ═══════════════════════════════════════════════════════════════════════════ */

.comms-page { padding: 0 4px; }

.comms-alert {
  padding: 12px 16px; border-radius: 10px; margin: 12px 0;
  font-size: 0.9rem; border: 1px solid var(--border);
}
.comms-alert--error { background: var(--badge-danger-bg); color: var(--badge-danger-fg); border-color: transparent; }
.comms-alert--info  { background: var(--badge-info-bg);   color: var(--badge-info-fg);   border-color: transparent; }

.comms-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 16px 0 20px; flex-wrap: wrap;
}
.comms-h2 { margin: 0; font-size: 1.15rem; color: var(--text-strong); }
.comms-sub { margin: 4px 0 0; font-size: 0.85rem; color: var(--muted); }
.comms-hint { margin: 6px 0 0; font-size: 0.78rem; color: var(--muted-2); line-height: 1.45; }

.comms-empty {
  text-align: center; padding: 48px 24px; color: var(--muted);
  background: var(--surface-2); border-radius: 14px; border: 1px dashed var(--border);
}
.comms-empty__icon { font-size: 2.4rem; margin-bottom: 8px; }

/* ── Lista de líneas ── */
.comms-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.comms-line-card {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.comms-line-card__main { flex: 1; min-width: 0; }
.comms-line-card__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.comms-line-phone { font-weight: 700; font-size: 1.05rem; color: var(--text-strong); }
.comms-line-name { font-size: 0.85rem; color: var(--muted); margin-top: 2px; }
.comms-line-stage { font-size: 0.75rem; color: var(--muted-2); }

/* ── Badges que faltaban (solo tokens) ── */
.badge-success { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.badge-warn    { background: var(--badge-warn-bg);    color: var(--badge-warn-fg); }
.badge-info    { background: var(--badge-info-bg);    color: var(--badge-info-fg); }
.badge-neutral { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); }

/* ── Botón fantasma / select (faltaban) ── */
.btn-ghost {
  background: transparent; color: var(--muted); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 0.85rem;
}
.btn-ghost:hover:not(:disabled) { background: var(--control-bg-hover); color: var(--text); }
.form-select {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  background: var(--control-bg); color: var(--text); border: 1px solid var(--control-border);
  font-size: 0.9rem;
}
.form-select:focus { outline: none; border-color: var(--brand); }

/* ── Modal del asistente (flota → --surface-overlay) ── */
.comms-modal-backdrop {
  position: fixed; inset: 0; background: var(--scrim);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px;
}
.comms-modal {
  background: var(--surface-overlay); border: 1px solid var(--border);
  border-radius: 16px; width: 100%; max-width: 560px; max-height: 90vh;
  overflow-y: auto; box-shadow: var(--shadow-lg);
}
.comms-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
}
.comms-modal__head h3 { margin: 0; font-size: 1.05rem; color: var(--text-strong); }
.comms-modal__close {
  background: none; border: none; font-size: 1.2rem; color: var(--muted);
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.comms-modal__close:hover { background: var(--control-bg-hover); color: var(--text); }
.comms-modal__body { padding: 24px 22px; }

/* ── Pasos ── */
.comms-step { text-align: center; }
.comms-step__num {
  width: 34px; height: 34px; border-radius: 50%; margin: 0 auto 12px;
  background: var(--brand-soft-bg); color: var(--brand-soft-fg);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.comms-step h4 { margin: 0 0 6px; color: var(--text-strong); font-size: 1.05rem; }
.comms-field { text-align: left; margin: 18px 0; }
.comms-field--muted { padding: 14px; background: var(--surface-2); border-radius: 10px; }

/* ── Selección de número ── */
.comms-numeros { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.comms-numero-opt {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  background: var(--surface); transition: border-color 0.15s;
}
.comms-numero-opt:hover { border-color: var(--brand); }
.comms-numero-phone { font-weight: 600; color: var(--text-strong); }
.comms-numero-costo { margin-left: auto; font-size: 0.8rem; color: var(--muted); }

/* ── Progreso en vivo ── */
.comms-progreso { text-align: center; padding: 12px 0; }
.comms-progreso h4 { margin: 14px 0 6px; color: var(--text-strong); }
.comms-progress-bar {
  height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin-bottom: 20px;
}
.comms-progress-fill {
  height: 100%; background: var(--brand); border-radius: 999px; transition: width 0.6s ease;
}
.comms-spinner {
  width: 40px; height: 40px; margin: 0 auto; border-radius: 50%;
  border: 4px solid var(--surface-3); border-top-color: var(--brand);
  animation: comms-spin 0.8s linear infinite;
}
@keyframes comms-spin { to { transform: rotate(360deg); } }
.comms-check {
  width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 50%;
  background: var(--badge-success-bg); color: var(--badge-success-fg);
  display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700;
}
.comms-warn-icon {
  width: 56px; height: 56px; margin: 0 auto 8px; border-radius: 50%;
  background: var(--badge-warn-bg); color: var(--badge-warn-fg);
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
}
.comms-progreso--ok .comms-line-phone { margin: 10px 0 18px; font-size: 1.3rem; }
.comms-error-msg { color: var(--muted); font-size: 0.9rem; margin: 8px 0 16px; line-height: 1.5; }
.comms-recover { display: flex; flex-direction: column; gap: 12px; align-items: center; }