/* Tema "Flux" de OPTICOM: oscuro violeta por defecto, con variante clara.
   Implementación propia inspirada en la estética de paneles tipo Flux; no
   contiene código ni recursos de terceros. El color principal sigue la marca
   blanca (--green lo fija Integraciones → Identidad visual). */

:root{
  --fx-primary:var(--green,#8b6cff);
  --fx-accent:#1ea7ff;
  --fx-gradient:linear-gradient(90deg,var(--fx-primary),var(--fx-accent));
  --fx-radius:14px;
  --fx-radius-sm:10px;
  --fx-success:#22c07a;
  --fx-warning:#f2b233;
  --fx-danger:#ef5b5b;
  --fx-font:Inter,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
}
/* Claro: superficies limpias con el mismo lenguaje de tarjetas. */
:root,html[data-theme="light"]{
  --fx-bg:#f5f4fa;--fx-sidebar:#ffffff;--fx-surface:#ffffff;--fx-surface-2:#f7f6fc;--fx-elevated:#ffffff;
  --fx-border:#e6e3f0;--fx-border-strong:#d6d2e6;--fx-text:#18161f;--fx-muted:#6f6a82;--fx-soft:color-mix(in srgb,var(--fx-primary) 10%,transparent);
  --fx-shadow:0 1px 2px rgba(20,16,40,.04),0 8px 24px rgba(20,16,40,.06);--fx-nav-text:#5f5a73;--fx-nav-active:#18161f;
  --fx-msg-in:#ffffff;--fx-msg-out:color-mix(in srgb,var(--fx-primary) 14%,#ffffff);--fx-chat-bg:#f1f0f7;
}
/* Oscuro (predeterminado). */
html[data-theme="dark"]{
  --fx-bg:#07060d;--fx-sidebar:#0d0b15;--fx-surface:#13111c;--fx-surface-2:#1a1826;--fx-elevated:#1f1c2c;
  --fx-border:#262334;--fx-border-strong:#343046;--fx-text:#e8e6f0;--fx-muted:#8a85a0;--fx-soft:color-mix(in srgb,var(--fx-primary) 16%,transparent);
  --fx-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px rgba(0,0,0,.35);--fx-nav-text:#9c97b3;--fx-nav-active:#ffffff;
  --fx-msg-in:#1f1c2c;--fx-msg-out:color-mix(in srgb,var(--fx-primary) 28%,#15131f);--fx-chat-bg:#0f0d17;
  color-scheme:dark;
  /* Los estilos heredados usan estas variables: se alinean con el tema. */
  --ink:var(--fx-text);--muted:var(--fx-muted);--line:var(--fx-border);--panel:var(--fx-surface);--green-pale:var(--fx-soft);
}

/* ---------------- Base ---------------- */
html,body{font-family:var(--fx-font);background:var(--fx-bg);color:var(--fx-text)}
.app-shell{background:var(--fx-bg)}
main{background:var(--fx-bg);color:var(--fx-text)}
::selection{background:color-mix(in srgb,var(--fx-primary) 35%,transparent)}
*{scrollbar-color:var(--fx-border-strong) transparent}

/* ---------------- Barra lateral ---------------- */
.sidebar{background:var(--fx-sidebar)!important;color:var(--fx-nav-text);border-right:1px solid var(--fx-border)}
.sidebar .brand,.sidebar .brand span{color:var(--fx-nav-active)}
.brand-mark{background:var(--fx-gradient)!important;color:#fff!important;border-radius:11px!important;box-shadow:0 6px 18px color-mix(in srgb,var(--fx-primary) 35%,transparent)}
.nav-section{display:block;margin:16px 13px 6px;color:var(--fx-muted);font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
.nav-section:first-child{margin-top:0}
.sidebar nav button{position:relative;color:var(--fx-nav-text)!important;border-radius:var(--fx-radius-sm)!important;min-height:40px!important;transition:background .15s,color .15s}
.sidebar nav button:hover{background:var(--fx-soft)!important;color:var(--fx-nav-active)!important}
.sidebar nav button.active{background:var(--fx-soft)!important;color:var(--fx-primary)!important;font-weight:600}
.sidebar nav button.active::before{content:"";position:absolute;left:-18px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--fx-gradient)}
.sidebar nav button i{background:var(--fx-gradient)!important}
.sidebar-status{background:var(--fx-surface-2)!important;border:1px solid var(--fx-border)!important;color:var(--fx-text)!important;border-radius:var(--fx-radius-sm)!important}
.sidebar-status small{color:var(--fx-muted)!important}
.profile,.profile *{color:var(--fx-text)}
.logout,.theme-toggle{color:var(--fx-muted)!important;background:transparent;border:0;text-align:left;padding:6px 0}
.logout:hover,.theme-toggle:hover{color:var(--fx-text)!important}
.theme-toggle{display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer}
.theme-toggle span{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--fx-surface-2);border:1px solid var(--fx-border)}

/* ---------------- Encabezados ---------------- */
.page-header h1{color:var(--fx-text);font-weight:700;letter-spacing:-.6px}
.page-header p{color:var(--fx-muted)}
.eyebrow,.eyebrow.green{color:var(--fx-primary)!important;background:var(--fx-soft)!important;border:0!important;border-radius:999px!important;padding:4px 10px!important;letter-spacing:1px!important}

/* Portada del resumen: degradado con tarjetas translúcidas. */
.fx-hero{position:relative;overflow:hidden;margin-bottom:22px;padding:30px 30px 26px;border-radius:22px;border:1px solid color-mix(in srgb,var(--fx-primary) 30%,transparent);
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--fx-primary) 45%,transparent) 0%,transparent 55%),radial-gradient(120% 140% at 100% 100%,color-mix(in srgb,var(--fx-accent) 40%,transparent) 0%,transparent 55%),var(--fx-surface)}
.fx-hero .page-header{margin-bottom:22px}
.fx-hero .page-header h1{font-size:30px}
.fx-hero .stats article{background:color-mix(in srgb,var(--fx-surface) 55%,transparent)!important;backdrop-filter:blur(10px);border-color:color-mix(in srgb,var(--fx-text) 10%,transparent)!important;box-shadow:none!important}
html[data-theme="light"] .fx-hero .stats article{background:rgba(255,255,255,.7)!important}

/* ---------------- Tarjetas y paneles ---------------- */
.stats article,.team,.table-wrap,.panel,.metric-panel,.integration-card,.integration-help,.flow-canvas,.flow-settings,.course-panel,.simulator-state,.simulator-phone,.campaign-card,.channel-card,.setup-step,.flow-test-card,.user-table-wrap{
  background:var(--fx-surface)!important;border:1px solid var(--fx-border)!important;border-radius:var(--fx-radius)!important;box-shadow:var(--fx-shadow)!important;color:var(--fx-text)}
.stats article strong{color:var(--fx-text);font-weight:700}
.stats article small,.stats article p{color:var(--fx-muted)!important}
[class*="stat-icon"]{background:var(--fx-soft)!important;color:var(--fx-primary)!important;border-radius:10px!important}
.section-title span,.integration-title span{color:var(--fx-muted)!important}
.integration-card>p,.integration-help li{color:var(--fx-muted)}
.integration-logo:not(.telegram-logo):not(.gchat-logo):not(.social-logo):not(.brand-preview){background:var(--fx-gradient)!important}
.security-note{background:var(--fx-surface-2)!important;border:1px solid var(--fx-border)!important;border-radius:var(--fx-radius-sm)!important;color:var(--fx-muted)}
.security-note b{color:var(--fx-text)}
.credential-status{background:var(--fx-surface-2)!important;border:1px solid var(--fx-border)!important;border-radius:var(--fx-radius-sm)!important}
.credential-status small{color:var(--fx-muted)}
.setup-pill{background:var(--fx-surface-2)!important;border:1px solid var(--fx-border)!important;color:var(--fx-muted)!important;border-radius:999px!important}
.setup-pill.ready{color:var(--fx-success)!important}
.bar,.campaign-card>div{background:var(--fx-surface-2)!important}
.bar i,.campaign-card i{background:var(--fx-gradient)!important}

/* ---------------- Tablas ---------------- */
table{color:var(--fx-text)}
th{background:var(--fx-surface-2)!important;color:var(--fx-muted)!important;border-color:var(--fx-border)!important;font-weight:600}
td{border-color:var(--fx-border)!important}
tbody tr:hover td{background:color-mix(in srgb,var(--fx-primary) 5%,transparent)}
.badge,.ticket-status{background:var(--fx-soft)!important;color:var(--fx-primary)!important;border:0!important;border-radius:999px!important}

/* ---------------- Formularios ---------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea,.search{
  background:var(--fx-surface-2)!important;color:var(--fx-text)!important;border:1px solid var(--fx-border)!important;border-radius:var(--fx-radius-sm)!important}
input::placeholder,textarea::placeholder{color:var(--fx-muted)!important;opacity:.8}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--fx-primary)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--fx-primary) 22%,transparent)!important}
.search input{border:0!important;background:transparent!important;box-shadow:none!important}
label{color:var(--fx-text)}
.primary-button{background:var(--fx-gradient)!important;color:#fff!important;border:0!important;border-radius:var(--fx-radius-sm)!important;font-weight:600;box-shadow:0 6px 20px color-mix(in srgb,var(--fx-primary) 30%,transparent)}
.primary-button:hover{filter:brightness(1.08)}
.secondary-action,.integration-actions button:not(.primary-button),.filters button,.details button,.user-table button,.flow-zoom button,.step-action button,.close-chat,.flow-inspector button{
  background:var(--fx-surface-2)!important;color:var(--fx-text)!important;border:1px solid var(--fx-border)!important;border-radius:var(--fx-radius-sm)!important}
.filters button.active,.filters button:hover{background:var(--fx-soft)!important;color:var(--fx-primary)!important;border-color:color-mix(in srgb,var(--fx-primary) 40%,transparent)!important}
.user-table .user-delete{color:var(--fx-danger)!important}
.integration-message.success{color:var(--fx-success)!important}
.integration-message.error,.form-error{color:var(--fx-danger)!important;background:transparent!important}

/* ---------------- Bandeja ---------------- */
.chat-list,.thread,.details{background:var(--fx-surface)!important;border-color:var(--fx-border)!important}
.list-header,.thread-head,.compose{background:var(--fx-surface)!important;border-color:var(--fx-border)!important}
.thread-head b,.contact b{color:var(--fx-text)}
.thread-head small,.contact small{color:var(--fx-muted)!important}
.contact{border-color:var(--fx-border)!important}
.contact:before{background:var(--fx-soft)!important;color:var(--fx-primary)!important}
.contact:hover,.contact.selected{background:color-mix(in srgb,var(--fx-primary) 8%,transparent)!important}
.contact.selected:after{background:var(--fx-gradient)!important}
.contact .unread{background:var(--fx-gradient)!important}
.messages{background:var(--fx-chat-bg)!important}
.msg{background:var(--fx-msg-in)!important;color:var(--fx-text)!important;border-radius:14px 14px 14px 4px!important;box-shadow:none!important;border:1px solid var(--fx-border)}
.msg.out{background:var(--fx-msg-out)!important;border-radius:14px 14px 4px 14px!important;border-color:transparent}
.msg time,.msg>small{color:var(--fx-muted)!important}
.details dt{color:var(--fx-muted)}
.details dd{color:var(--fx-text)}
.handoff-state{border-radius:var(--fx-radius-sm)!important}
.scroll-bottom{background:var(--fx-elevated)!important;color:var(--fx-text)!important;border:1px solid var(--fx-border)!important}
.empty-state,.empty-state p{color:var(--fx-muted)!important}
.empty-state h3{color:var(--fx-text)!important}
.empty-icon{background:var(--fx-soft)!important;color:var(--fx-primary)!important}
.channel-badge{color:#fff!important}
.channel-badge.messenger{background:#0866ff!important}.channel-badge.instagram{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)!important}
.channel-badge.telegram{background:#229ed9!important}.channel-badge.googlechat{background:#1e8e3e!important}

/* ---------------- Probador y guía ---------------- */
.simulator-chat{background:var(--fx-chat-bg)!important}
.sim-bubble.bot{background:var(--fx-msg-in)!important;color:var(--fx-text)!important}
.sim-bubble.aviso{background:var(--fx-surface-2)!important;color:var(--fx-muted)!important}
.sim-option{background:var(--fx-soft)!important;color:var(--fx-primary)!important;border-color:transparent!important}
.simulator-input,.simulator-options{background:var(--fx-surface)!important;border-color:var(--fx-border)!important}
.lesson-head,.lesson-number,.step-marker,.enlace-fila,.flow-legend{background:var(--fx-surface-2)!important;color:var(--fx-text)!important;border-color:var(--fx-border)!important}
.lesson-head:hover{background:var(--fx-soft)!important}

/* ---------------- Inicio de sesión ---------------- */
.login-page{background:var(--fx-bg)!important}
.login-brand{background:radial-gradient(90% 80% at 10% 10%,color-mix(in srgb,var(--fx-primary) 55%,transparent),transparent 60%),radial-gradient(90% 80% at 90% 90%,color-mix(in srgb,var(--fx-accent) 45%,transparent),transparent 60%),#0b0913!important}
.login-panel{background:var(--fx-bg)}
.login-card h2{color:var(--fx-text)}
.login-card>p,.login-card label{color:var(--fx-muted)}

/* ---------------- Diagrama del flujo (estilo pr-lens) ---------------- */
.flow-canvas{background:radial-gradient(circle,var(--fx-border) 1px,transparent 1px) 0 0/22px 22px,var(--fx-surface)!important}
.flow-node-shadow{fill:rgba(0,0,0,.18)}
html[data-theme="light"] .flow-node-shadow{fill:rgba(40,30,90,.07)}
.flow-node-box{fill:var(--fx-elevated);stroke:var(--fx-border-strong);stroke-width:1.2;transition:stroke .15s}
.flow-node-chip{fill:var(--fx-node-color,var(--fx-primary));fill-opacity:.16;stroke:var(--fx-node-color,var(--fx-primary));stroke-opacity:.35}
.flow-node-icon{fill:var(--fx-node-color,var(--fx-primary));font-size:17px;text-anchor:middle}
.flow-node-g.start{--fx-node-color:#22c07a}
.flow-node-g.decision{--fx-node-color:#f2b233}
.flow-node-g.action{--fx-node-color:#1ea7ff}
.flow-node-g.department{--fx-node-color:var(--fx-primary)}
.flow-node-g.end{--fx-node-color:#ef6ca8}
.flow-node-label{fill:var(--fx-text);font-size:13.5px;font-weight:650}
.flow-node-type{fill:var(--fx-muted);font-size:10.5px;font-weight:500}
.flow-node-badge rect{fill:var(--fx-primary)}
.flow-node-count{fill:#fff;font-size:11px;font-weight:700;text-anchor:middle}
.flow-node-g.empty .flow-node-badge rect{fill:var(--fx-surface-2);stroke:var(--fx-border)}
.flow-node-g.empty .flow-node-count{fill:var(--fx-muted)}
.flow-node-g:hover .flow-node-box{stroke:color-mix(in srgb,var(--fx-node-color,var(--fx-primary)) 70%,transparent)}
.flow-node-g.selected .flow-node-box{stroke:var(--fx-primary);stroke-width:2.2}
.flow-node-g:focus-visible .flow-node-box{stroke:var(--fx-accent);stroke-width:2.6}
.flow-edge{fill:none;stroke:var(--fx-border-strong);stroke-width:1.8}
.flow-edge-glow{fill:none;stroke:var(--fx-primary);stroke-width:7;opacity:0;filter:url(#flow-glow);transition:opacity .2s}
.flow-arrow-head{fill:var(--fx-border-strong)}
.flow-pulse{fill:var(--fx-primary);opacity:.75}
.flow-edge-g.active .flow-edge{stroke:var(--fx-primary);stroke-width:2.4}
.flow-edge-g.active .flow-edge-glow{opacity:.35}
.flow-edge-g.active .flow-pulse{fill:var(--fx-accent);opacity:1}
.flow-edge-g.dim{opacity:.25}
.flow-inspector,.flow-settings{color:var(--fx-text)}
.flow-inspector .chip,.flow-counts div{background:var(--fx-surface-2)!important;border-color:var(--fx-border)!important;color:var(--fx-text)!important}

@media (prefers-reduced-motion:reduce){.flow-pulse{display:none}}

/* Barra lateral compacta (solo iconos): se ocultan etiquetas y textos. */
@media (max-width:760px){
  .nav-section,.theme-toggle b{display:none}
  .theme-toggle{justify-content:center}
  .sidebar nav button.active::before{left:-9px}
  .fx-hero{padding:20px 16px;border-radius:18px}
  .fx-hero .page-header h1{font-size:24px}
}

/* ---------------- Variables de refresh.css alineadas al tema oscuro ---------------- */
html[data-theme="dark"]{
  --tinta-fuerte:var(--fx-text);--tinta-media:var(--fx-muted);--linea-suave:var(--fx-border);
  --verde-texto:var(--fx-primary);--sombra-suave:var(--fx-shadow);--sombra-hover:0 14px 36px rgba(0,0,0,.45);
}
html[data-theme="dark"] main :is(h2,h3){color:var(--fx-text)}
html[data-theme="dark"] .token-steps li,html[data-theme="dark"] .token-steps i{color:var(--fx-muted)}
.switch-row{background:var(--fx-surface-2)!important;border-color:var(--fx-border)!important}
.switch-row b{color:var(--fx-text)}
.panel-alerta{border-color:color-mix(in srgb,var(--fx-warning) 45%,transparent)!important}
.enlace-fila{background:color-mix(in srgb,var(--fx-warning) 9%,var(--fx-surface-2))!important;border-color:color-mix(in srgb,var(--fx-warning) 25%,transparent)!important}
.enlace-quien b{color:var(--fx-text)!important}
.enlace-quien small{color:var(--fx-muted)!important}
html[data-theme="dark"] .enlace-espera{color:var(--fx-warning)!important}
/* Tonos de marca un poco más oscuros para que el texto blanco se lea bien. */
.telegram-logo,.channel-badge.telegram{background:#1a7fb5!important}

/* refresh.css pinta los textos internos de la barra lateral: que hereden el tema. */
.sidebar nav button b,.sidebar nav button span{color:inherit!important}
.sidebar .profile b{color:var(--fx-text)!important}
.sidebar .profile small{color:var(--fx-muted)!important}
html[data-theme="light"] .setup-pill.ready{color:#12804f!important}
.flow-inspector{background:var(--fx-surface-2)!important;border:1px solid var(--fx-border)!important;border-radius:var(--fx-radius-sm)!important;color:var(--fx-text)!important}
.flow-inspector:empty{display:none}
.sidebar-status b{color:var(--fx-text)!important}
/* El canal va debajo del último mensaje: antes se encimaba con el área. */
.contact .channel-badge{position:static!important;display:inline-block;margin:7px 0 0!important;max-width:none}
.msg{overflow-wrap:anywhere}
.handoff-state{background:var(--fx-surface-2)!important;border:1px solid var(--fx-border)!important}
.handoff-state.bot{color:var(--fx-success)!important}
.handoff-state.human{color:var(--fx-primary)!important}
.brand-mark{flex:0 0 auto;width:30px!important;height:30px!important;aspect-ratio:1}

/* ================= Etapas: verde agente, amarillo bot, rojo esperando ================= */
:root{--st-agente:#16a34a;--st-bot:#eab308;--st-espera:#e5484d;--st-cerrada:#6b7280}
.stage-timer{display:inline-flex;align-items:center;gap:5px;margin-top:7px;padding:3px 9px 3px 7px;border-radius:999px;font:700 11px/1.4 ui-monospace,"Cascadia Mono",Consolas,monospace;font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap;vertical-align:middle}
.stage-timer i{font-style:normal;font-size:12px;line-height:1}
.stage-timer em{font:600 11px var(--fx-font);font-style:normal;margin-left:3px;padding-left:7px;border-left:1px solid rgba(255,255,255,.35)}
.stage-timer.agente{background:var(--st-agente)}
.stage-timer.bot{background:var(--st-bot);color:#1f1500}
.stage-timer.bot em{border-left-color:rgba(0,0,0,.25)}
.stage-timer.espera{background:var(--st-espera);animation:stage-pulse 2s ease-in-out infinite}
@keyframes stage-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--st-espera) 55%,transparent)}50%{box-shadow:0 0 0 5px transparent}}
@media (prefers-reduced-motion:reduce){.stage-timer.espera{animation:none}}
.contact .stage-timer{margin-right:6px}
/* Franja lateral del contacto con el color de su etapa. */
.contact:has(.stage-timer.agente){box-shadow:inset 3px 0 0 var(--st-agente)}
.contact:has(.stage-timer.bot){box-shadow:inset 3px 0 0 var(--st-bot)}
.contact:has(.stage-timer.espera){box-shadow:inset 3px 0 0 var(--st-espera)}

.close-reason{display:inline-flex;align-items:center;margin-top:7px;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--st-cerrada) 18%,transparent);color:var(--fx-text);font-size:11px;font-weight:600}
.close-note{display:block;margin-top:4px;color:var(--fx-muted);font-size:11px;line-height:1.4;max-width:280px}

/* Pestañas Activas / Cerradas y leyenda. */
.inbox-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:9px;padding:4px;border-radius:var(--fx-radius-sm);background:var(--fx-surface-2);border:1px solid var(--fx-border)}
.inbox-tabs button{display:flex;align-items:center;justify-content:center;gap:6px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--fx-muted);font-size:12px;font-weight:600}
.inbox-tabs button b{min-width:20px;padding:1px 6px;border-radius:999px;background:var(--fx-border);color:var(--fx-text);font-size:10px}
.inbox-tabs button.active{background:var(--fx-surface);color:var(--fx-text);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.inbox-tabs button.active b{background:var(--fx-gradient);color:#fff}
.stage-legend{display:flex;gap:10px;margin:0 2px 9px;color:var(--fx-muted);font-size:10.5px}
.stage-legend .leg::before{content:"";display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:50%;vertical-align:0}
.leg.agente::before{background:var(--st-agente)}.leg.bot::before{background:var(--st-bot)}.leg.espera::before{background:var(--st-espera)}

/* Encabezado del chat con el contador. */
.thread-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.thread-title .stage-timer,.thread-title .close-reason{margin-top:0}
.thread-head{height:auto!important;min-height:67px}

/* Resumen del cierre en el panel del cliente. */
.closed-summary{margin-top:14px;padding:12px;border-radius:var(--fx-radius-sm);background:var(--fx-surface-2);border:1px solid var(--fx-border)}
.closed-summary b{color:var(--fx-text)}
.closed-summary p{margin:6px 0;color:var(--fx-text);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.closed-summary small{color:var(--fx-muted);font-size:11px}

/* Diálogo de cierre. */
.close-dialog{width:min(480px,calc(100vw - 32px));padding:0;border:1px solid var(--fx-border);border-radius:18px;background:var(--fx-surface);color:var(--fx-text);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.close-dialog::backdrop{background:rgba(5,4,12,.6);backdrop-filter:blur(3px)}
.close-dialog form{display:grid;gap:8px;padding:24px}
.close-dialog h2{margin:6px 0 0;font-size:20px}
.close-dialog p{margin:0 0 6px;color:var(--fx-muted);font-size:13px;line-height:1.5}
.close-dialog label{margin-top:6px;font-size:12px;font-weight:600}
.close-dialog select{height:42px;padding:0 10px}
.close-dialog textarea{padding:10px;font:inherit;font-size:13px;resize:vertical}
.close-dialog .eyebrow{justify-self:start}
.close-count{justify-self:end;color:var(--fx-muted);font-size:11px}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.dialog-actions .primary-button{width:auto;height:42px;margin:0;padding:0 18px}
.dialog-actions .secondary-action{height:42px}

/* Aviso flotante. */
.toast{position:fixed;right:22px;bottom:22px;z-index:50;max-width:min(380px,calc(100vw - 32px));padding:12px 16px;border-radius:12px;background:var(--fx-elevated);color:var(--fx-text);border:1px solid color-mix(in srgb,var(--st-agente) 50%,transparent);box-shadow:0 14px 40px rgba(0,0,0,.35);font-size:13px}

/* Menú: alerta roja cuando hay clientes esperando. */
.sidebar nav button i.nav-alerta{background:var(--st-espera)!important}

/* ================= Vista de seguimiento ================= */
.tracking-totals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.stage-tile{position:relative;overflow:hidden;padding:18px 20px;border-radius:var(--fx-radius);background:var(--fx-surface);border:1px solid var(--fx-border);box-shadow:var(--fx-shadow)}
.stage-tile::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--c)}
.stage-tile small{color:var(--fx-muted);font-size:10px;font-weight:700;letter-spacing:1px}
.stage-tile strong{display:block;margin-top:8px;font-size:32px;color:var(--fx-text)}
.stage-tile p{margin:2px 0 0;color:var(--fx-muted);font-size:12px}
.stage-tile p b{color:var(--st-espera);font-variant-numeric:tabular-nums}
.stage-tile.espera,.stage-col.espera{--c:var(--st-espera)}
.stage-tile.bot,.stage-col.bot{--c:var(--st-bot)}
.stage-tile.agente,.stage-col.agente{--c:var(--st-agente)}
.stage-tile.cerrada{--c:var(--st-cerrada)}
.tracking-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}
.stage-col{display:flex;flex-direction:column;min-height:260px;max-height:560px;border-radius:var(--fx-radius);background:var(--fx-surface);border:1px solid var(--fx-border);border-top:3px solid var(--c);box-shadow:var(--fx-shadow)}
.stage-col>header{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--fx-border)}
.stage-col>header h2{margin:0;font-size:14px;color:var(--fx-text)}
.stage-col>header b{margin-left:auto;min-width:26px;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--fx-text);font-size:12px;text-align:center}
.stage-dot{width:10px;height:10px;border-radius:50%;background:var(--c)}
.stage-list{display:grid;align-content:start;gap:8px;padding:12px;overflow:auto}
.stage-card{position:relative;display:grid;gap:4px;width:100%;padding:11px 12px;border-radius:12px;background:var(--fx-surface-2);border:1px solid var(--fx-border);border-left:3px solid var(--c);color:var(--fx-text);text-align:left;cursor:pointer;transition:border-color .15s,transform .15s}
.stage-card.espera{--c:var(--st-espera)}.stage-card.bot{--c:var(--st-bot)}.stage-card.agente{--c:var(--st-agente)}
.stage-card:hover{border-color:color-mix(in srgb,var(--c) 60%,transparent);transform:translateY(-1px)}
.stage-card:focus-visible{outline:2px solid var(--fx-accent);outline-offset:2px}
.stage-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.stage-card-top b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.stage-card-top .stage-timer{margin-top:0;flex:0 0 auto}
.stage-card small{color:var(--fx-muted);font-size:11px}
.stage-ticket{justify-self:start;padding:2px 8px;border-radius:6px;background:var(--fx-soft);color:var(--fx-primary);font-size:10.5px;font-weight:700}
.stage-card .unread{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--fx-gradient);color:#fff;font-size:9px;font-style:normal}
.stage-empty{margin:18px 6px;color:var(--fx-muted);font-size:12px;text-align:center}
.tracking-bottom{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}
.tracking-bottom td .stage-timer{margin-top:0}
.closed-list{display:grid;gap:8px;max-height:360px;overflow:auto}
.closed-item{padding:10px 12px;border-radius:10px;background:var(--fx-surface-2);border:1px solid var(--fx-border)}
.closed-item>div{display:flex;align-items:center;justify-content:space-between;gap:8px}
.closed-item .close-reason{margin-top:0}
.closed-item p{margin:6px 0 4px;color:var(--fx-text);font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.closed-item small{color:var(--fx-muted);font-size:11px}
@media (max-width:1100px){.tracking-board{grid-template-columns:1fr}.stage-col{max-height:none}.tracking-bottom{grid-template-columns:1fr}}
@media (max-width:760px){.tracking-totals{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ================= Fila de atención en la bandeja ================= */
.queue-box{margin-bottom:9px;padding:10px 11px;border-radius:var(--fx-radius-sm);background:var(--fx-surface-2);border:1px solid var(--fx-border)}
.queue-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;color:var(--fx-muted);font-size:11.5px;font-weight:600}
.queue-head b{color:var(--fx-text);font-size:13px;font-variant-numeric:tabular-nums}
.queue-head strong{font-size:18px;color:var(--fx-text)}
.queue-box.hay-fila .queue-head strong{color:var(--st-espera)}
.queue-bar{height:6px;margin:7px 0 8px;overflow:hidden;border-radius:4px;background:color-mix(in srgb,var(--st-agente) 22%,var(--fx-border))}
.queue-bar i{display:block;width:0;height:100%;border-radius:4px;background:var(--st-espera);transition:width .4s ease}
.queue-box .stage-legend{margin:0;flex-wrap:wrap}
.stage-legend b{color:var(--fx-text);font-variant-numeric:tabular-nums}
.queue-agents{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.queue-agents:empty{display:none}
.queue-agent{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;background:var(--fx-surface);border:1px solid var(--fx-border);color:var(--fx-muted);font-size:11px}
.queue-agent i{width:7px;height:7px;border-radius:50%;background:var(--st-cerrada)}
.queue-agent.online i{background:var(--st-agente)}
.queue-agent b{color:var(--fx-text);font-variant-numeric:tabular-nums}
.queue-agent.lleno{border-color:color-mix(in srgb,var(--st-bot) 60%,transparent)}
.queue-agent.lleno b{color:var(--st-bot)}