/* ══════════════════════════════════════════════════════
   JESHUA RESIDENCIAL — Premium CRM ISP
   Diseño: minimalista, profundo, operativo
   ══════════════════════════════════════════════════════ */


:root {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "cv11","ss01";

  /* ── Superficies ── */
  --surface:        #ffffff;
  --surface-raised: #f7f9fc;
  --surface-hover:  #f0f4fa;
  --border:         rgba(15,28,50,0.08);
  --border-hover:   rgba(15,28,50,0.14);

  /* ── Marca ── */
  --primary:        #3b82f6;
  --primary-dark:   #2563eb;
  --primary-dim:    #1d4ed8;
  --primary-light:  #eff6ff;
  --primary-glow:   rgba(59,130,246,0.22);

  /* ── Semánticos de cola ── */
  --col-blue:    #2563eb;
  --col-indigo:  #6366f1;
  --col-teal:    #0d9488;
  --col-sky:     #0284c7;
  --col-amber:   #d97706;
  --col-violet:  #7c3aed;
  --col-rose:    #dc2626;
  --col-emerald: #059669;
  --col-orange:  #b45309;

  /* ── Severidad ── */
  --sev-rojo:       #ef4444;
  --sev-naranja:    #f97316;
  --sev-amarillo:   #eab308;
  --sev-proximo:    #3b82f6;
  --sev-suspendido: #a855f7;
  --sev-ticket:     #64748b;
  --success:        #22c55e;
  --warning:        #f59e0b;
  --danger:         #ef4444;

  /* ── Sistema de sombras — más livianas, menos pesadas ── */
  --shadow-xs:   0 1px 2px rgba(15,23,42,0.05);
  --shadow-sm:   0 2px 6px rgba(15,23,42,0.07), 0 1px 2px rgba(15,23,42,0.03);
  --shadow-md:   0 4px 14px rgba(15,23,42,0.09), 0 1px 3px rgba(15,23,42,0.04);
  --shadow-card: 0 4px 20px rgba(0,0,0,0.32), 0 1px 0 rgba(255,255,255,0.07);
  --shadow-card-hover: 0 10px 32px rgba(0,0,0,0.42), 0 1px 0 rgba(255,255,255,0.09);

  /* ── Radios ── */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  14px;
  --r-xl:  18px;
  --r-2xl: 22px;

  /* ── Transición ── */
  --t: all 0.17s cubic-bezier(0.4,0,0.2,1);
  --t-fast: all 0.12s ease;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: #0f1e32;
  background:
    radial-gradient(ellipse at 8% 0%,    rgba(59,130,246,0.16) 0%,  transparent 44%),
    radial-gradient(ellipse at 92% 95%,  rgba(99,102,241,0.11) 0%,  transparent 40%),
    radial-gradient(ellipse at 50% 50%,  rgba(13,148,136,0.06) 0%,  transparent 55%),
    #07101f;
}

button, input, select, textarea { font: inherit; }
button { border: none; cursor: pointer; }

/* ══════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════ */

.app-shell {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 100vh;
}

/* ══════════════════════════════════════════════════════
   SIDEBAR — panel oscuro premium
   ══════════════════════════════════════════════════════ */

.sidebar {
  background: linear-gradient(180deg, #0f2040 0%, #091628 100%);
  padding: 20px 14px;
  border-right: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
}

/* Brand */
.brand { display: flex; align-items: center; gap: 11px; margin-bottom: 28px; }

.brand__logo {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px;
  display: grid; place-items: center; color: white;
  background: linear-gradient(145deg, #3b82f6 0%, #6366f1 100%);
  font-weight: 900; font-size: 0.95rem;
  box-shadow: 0 4px 14px rgba(59,130,246,0.40), 0 1px 0 rgba(255,255,255,0.12) inset;
  letter-spacing: -0.02em;
}

.brand h1, .brand p { margin: 0; }
.brand h1 { font-size: 0.85rem; line-height: 1.25; color: #e2e8f0; font-weight: 700; letter-spacing: -0.01em; }
.brand p  { color: rgba(255,255,255,0.30); font-size: 0.72rem; margin-top: 1px; }

/* Nav */
.nav-menu { display: grid; gap: 2px; }

.nav-item {
  background: transparent;
  color: rgba(255,255,255,0.42);
  padding: 10px 13px;
  border-radius: var(--r-sm);
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
  border-left: 2px solid transparent;
  transition: var(--t);
  position: relative;
}
.nav-item:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.78);
  border-left-color: rgba(255,255,255,0.15);
  transform: translateX(1px);
}
.nav-item.active {
  background: rgba(59,130,246,0.18);
  color: #93c5fd;
  border-left-color: #60a5fa;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(59,130,246,0.14);
}

/* Icono del nav */
.nav-icon {
  font-size: 0.95rem;
  margin-right: 2px;
  vertical-align: -1px;
}

/* ══════════════════════════════════════════════════════
   MAIN PANEL
   ══════════════════════════════════════════════════════ */

.main-panel { padding: 22px 28px 18px; min-width: 0; overflow-x: hidden; }

/* Topbar */
.topbar {
  display: flex; justify-content: space-between;
  align-items: center; gap: 12px; margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.topbar h2 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 800;
  color: #e2e8f0;
  letter-spacing: -0.02em;
}
.subtitle {
  margin: 2px 0 0;
  color: rgba(255,255,255,0.36);
  font-size: 0.80rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px;
}

.menu-toggle {
  display: none; width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.13);
  color: #e2e8f0; font-size: 1.1rem; cursor: pointer;
  place-items: center; flex-shrink: 0;
}

.sidebar-overlay { display: none; }
.user-info { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

.user-badge {
  border-radius: 999px; padding: 7px 15px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #e2e8f0; font-size: 0.84rem; font-weight: 600;
  letter-spacing: -0.01em;
}

#ticket-bell {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #e2e8f0;
  box-shadow: none;
}
#ticket-bell.ping { animation: pulse 1s infinite; }
@keyframes pulse { 0%{transform:scale(1)}50%{transform:scale(1.07)}100%{transform:scale(1)} }

/* ══════════════════════════════════════════════════════
   BOTONES — sistema unificado
   ══════════════════════════════════════════════════════ */

.btn-primary {
  padding: 10px 20px; border-radius: 10px; font-weight: 700;
  color: white;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 2px 10px rgba(59,130,246,0.38), 0 1px 0 rgba(255,255,255,0.1) inset;
  transition: var(--t);
  letter-spacing: -0.01em;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #4f93ff 0%, #3070f0 100%);
  box-shadow: 0 4px 18px rgba(59,130,246,0.48);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 6px rgba(59,130,246,0.30); }

.btn-secondary {
  padding: 10px 20px; border-radius: 10px; font-weight: 600;
  background: rgba(255,255,255,0.09);
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,0.14);
  transition: var(--t);
  backdrop-filter: blur(4px);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.20);
}
/* btn-secondary sobre fondos blancos (panel-card, modals, forms) */
.panel-card .btn-secondary,
.modal-body .btn-secondary,
.modal-footer .btn-secondary,
.c360-form-collapse .btn-secondary,
.tk-info-section .btn-secondary,
.inv-item-form-card .btn-secondary,
.billing-header .btn-secondary {
  background: #f1f5f9; color: #374151;
  border: 1px solid #cbd5e1;
}
.panel-card .btn-secondary:hover,
.modal-body .btn-secondary:hover,
.modal-footer .btn-secondary:hover,
.c360-form-collapse .btn-secondary:hover,
.tk-info-section .btn-secondary:hover,
.inv-item-form-card .btn-secondary:hover,
.billing-header .btn-secondary:hover {
  background: #e2e8f0; border-color: #94a3b8;
}

.content { width: 100%; }

/* ══════════════════════════════════════════════════════
   METRIC PILLS — indicadores de cabecera
   ══════════════════════════════════════════════════════ */

.metrics-bar { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }

.metric-pill {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px; padding: 7px 16px; white-space: nowrap;
  backdrop-filter: blur(6px);
  transition: var(--t);
}
.metric-pill:hover { background: rgba(255,255,255,0.10); }
.mp-label { color: rgba(255,255,255,0.40); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.01em; }
.mp-value { font-size: 1rem; font-weight: 800; color: #f1f5f9; letter-spacing: -0.02em; }
.mp-sub   { color: rgba(255,255,255,0.24); font-size: 0.72rem; }

.mp--danger  { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.28); }
.mp--danger  .mp-value { color: #fca5a5; }
.mp--warning { background: rgba(245,158,11,0.13); border-color: rgba(245,158,11,0.26); }
.mp--warning .mp-value { color: #fcd34d; }
.mp--muted   { background: rgba(167,139,250,0.13); border-color: rgba(167,139,250,0.26); }
.mp--muted   .mp-value { color: #c4b5fd; }
.mp--balance { background: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.28); }
.mp--balance .mp-value { color: #93c5fd; }
.mp--info    { background: rgba(56,189,248,0.13); border-color: rgba(56,189,248,0.26); }
.mp--info    .mp-value { color: #7dd3fc; }
.mp--success { background: rgba(34,197,94,0.14); border-color: rgba(34,197,94,0.28); }
.mp--success .mp-value { color: #86efac; }

/* ══════════════════════════════════════════════════════
   OP-CARDS — tarjetas operativas (blancas sobre fondo oscuro)
   ══════════════════════════════════════════════════════ */

.op-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px; margin-bottom: 22px;
}

.op-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.09);
  border-top: 3px solid transparent;
  border-radius: var(--r-xl);
  padding: 17px 16px 15px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s ease;
}
.op-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-card-hover);
}
.op-card.active {
  box-shadow: 0 0 0 2px var(--primary), var(--shadow-card-hover) !important;
}

.op-card__label {
  font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: #64748b; margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.op-card__count {
  font-size: 2.1rem; font-weight: 900;
  margin: 4px 0 7px; line-height: 1; letter-spacing: -0.04em;
}

/* Fila de puntos agrupados por severidad */
.op-card__sev-row {
  display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center;
  min-height: 22px;
}
.sev-group {
  display: inline-flex; align-items: center; gap: 4px;
}
.sev-group__n {
  font-size: 0.75rem; font-weight: 700; color: #374151; line-height: 1;
}
.op-card__empty {
  font-size: 0.68rem; color: #94a3b8; opacity: 0.7;
}

/* Colores semánticos */
.op-card--notif-c30   { border-top-color: #2563eb; }
.op-card--notif-c30   .op-card__count { color: #2563eb; }
.op-card--notif-c30   .op-card__label { color: #1d4ed8; }
.op-card--notif-c30:hover { box-shadow: 0 10px 30px rgba(37,99,235,0.22); }

.op-card--notif-c15   { border-top-color: #6366f1; }
.op-card--notif-c15   .op-card__count { color: #4f46e5; }
.op-card--notif-c15   .op-card__label { color: #4338ca; }
.op-card--notif-c15:hover { box-shadow: 0 10px 30px rgba(99,102,241,0.22); }

.op-card--regular-c30 { border-top-color: #0d9488; }
.op-card--regular-c30 .op-card__count { color: #0d9488; }
.op-card--regular-c30 .op-card__label { color: #0f766e; }
.op-card--regular-c30:hover { box-shadow: 0 10px 30px rgba(13,148,136,0.18); }

.op-card--regular-c15 { border-top-color: #0284c7; }
.op-card--regular-c15 .op-card__count { color: #0284c7; }
.op-card--regular-c15 .op-card__label { color: #0369a1; }
.op-card--regular-c15:hover { box-shadow: 0 10px 30px rgba(2,132,199,0.18); }

.op-card--mis-dia     { border-top-color: #d97706; }
.op-card--mis-dia     .op-card__count { color: #d97706; }
.op-card--mis-dia     .op-card__label { color: #b45309; }
.op-card--mis-dia:hover { box-shadow: 0 10px 30px rgba(217,119,6,0.20); }

.op-card--suspendidos { border-top-color: #a855f7; }
.op-card--suspendidos .op-card__count { color: #9333ea; }
.op-card--suspendidos .op-card__label { color: #7c3aed; }
.op-card--suspendidos:hover { box-shadow: 0 10px 30px rgba(168,85,247,0.20); }

.op-card--acuerdos    { border-top-color: #ef4444; }
.op-card--acuerdos    .op-card__count { color: #dc2626; }
.op-card--acuerdos    .op-card__label { color: #b91c1c; }
.op-card--acuerdos:hover { box-shadow: 0 10px 30px rgba(239,68,68,0.20); }

.op-card--mis-asignados { border-top-color: #8b5cf6; }
.op-card--mis-asignados .op-card__count { color: #7c3aed; }
.op-card--mis-asignados .op-card__label { color: #6d28d9; }
.op-card--mis-asignados:hover { box-shadow: 0 10px 30px rgba(139,92,246,0.20); }

.op-card--pendiente-inst { border-top-color: #22c55e; }
.op-card--pendiente-inst .op-card__count { color: #16a34a; }
.op-card--pendiente-inst .op-card__label { color: #15803d; }
.op-card--pendiente-inst:hover { box-shadow: 0 10px 30px rgba(34,197,94,0.18); }

.op-card--prorrateadas { border-top-color: #f59e0b; }
.op-card--prorrateadas .op-card__count { color: #b45309; }
.op-card--prorrateadas .op-card__label { color: #92400e; }
.op-card--prorrateadas:hover { box-shadow: 0 10px 30px rgba(245,158,11,0.18); }

.op-card--coming-soon {
  opacity: 0.30; cursor: default;
  border-style: dashed; border-top-style: dashed;
  background: rgba(255,255,255,0.03); box-shadow: none;
}
.op-card--coming-soon:hover { transform: none; box-shadow: none; }

.op-card__desc { font-size: 0.70rem; color: #94a3b8; margin-top: 4px; line-height: 1.45; }
.op-card__count--muted { color: #94a3b8; }

/* Dots de severidad */
.sev-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sev-dot--rojo       { background: var(--sev-rojo); }
.sev-dot--naranja    { background: var(--sev-naranja); }
.sev-dot--amarillo   { background: var(--sev-amarillo); }
.sev-dot--proximo    { background: var(--sev-proximo); }
.sev-dot--suspendido { background: var(--sev-suspendido); }
.sev-dot--ticket     { background: var(--sev-ticket); }
.sev-dot--normal     { background: var(--success); }

.severity-amarillo { background: var(--sev-amarillo); }
.severity-naranja  { background: var(--sev-naranja); }
.severity-rojo     { background: var(--sev-rojo); }
.severity-normal   { background: var(--success); }

/* Barra de progreso */
.op-card__progress { height: 3px; background: rgba(0,0,0,0.06); border-radius: 2px; margin-top: 9px; overflow: hidden; }
.op-card__progress-bar { height: 100%; background: var(--success); border-radius: 2px; transition: width 0.4s ease; min-width: 2px; }

/* ══════════════════════════════════════════════════════
   CAROUSEL
   ══════════════════════════════════════════════════════ */

.carousel-section { overflow: hidden; }
.carousel-controls { display: flex; align-items: center; gap: 10px; }

.carousel-nav {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: #e2e8f0; font-size: 1.3rem; cursor: pointer;
  display: grid; place-items: center;
  transition: var(--t);
}
.carousel-nav:hover {
  background: rgba(255,255,255,0.13);
  transform: scale(1.06);
}

.carousel-pos { font-size: 0.79rem; color: rgba(255,255,255,0.40); min-width: 56px; text-align: center; }

.carousel-viewport { overflow: hidden; width: 100%; }
.carousel-track {
  display: flex; gap: 12px;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Tarjeta de carrusel */
.carousel-card {
  max-width: 480px;
  flex: 0 0 calc((100% - 24px) / 3);
  border-radius: var(--r-xl); padding: 16px 18px 14px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 4px solid #64748b;
  display: grid; gap: 5px;
  min-width: 0; box-sizing: border-box;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s ease;
}
.carousel-card:hover {
  transform: translateY(-4px) scale(1.005);
  box-shadow: var(--shadow-card-hover);
}

.carousel-card[data-sev="rojo"]       { border-left-color: #ef4444; }
.carousel-card[data-sev="naranja"]    { border-left-color: #f97316; }
.carousel-card[data-sev="amarillo"]   { border-left-color: #eab308; }
.carousel-card[data-sev="proximo"]    { border-left-color: #3b82f6; }
.carousel-card[data-sev="suspendido"] { border-left-color: #a855f7; }
.carousel-card[data-sev="ticket"]     { border-left-color: #64748b; }

.cc-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.cc-badge {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; padding: 2px 8px; border-radius: 999px;
}
/* Badges más suaves — cada uno diferenciado sin competir */
.cc-badge--rojo       { background: #fef2f2; color: #c53030; border: 1px solid #fecaca; }
.cc-badge--naranja    { background: #fff8f0; color: #b84f17; border: 1px solid #fed7aa; }
.cc-badge--amarillo   { background: #fefce8; color: #7a5c00; border: 1px solid #fde68a; }
.cc-badge--proximo    { background: #eff6ff; color: #1e50b3; border: 1px solid #bfdbfe; }
.cc-badge--suspendido { background: #faf5ff; color: #6b32a3; border: 1px solid #e9d5ff; }
.cc-badge--ticket     { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }
.cc-badge--pagada     { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.cc-badge--anulada    { background: #f8fafc; color: #94a3b8; border: 1px solid #e2e8f0; text-decoration: line-through; }

.cc-days    { font-size: 0.74rem; color: #8696a0; white-space: nowrap; }
.cc-name    { font-weight: 700; font-size: 0.96rem; color: #0f1e32; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.cc-meta    { font-size: 0.79rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-balance { font-size: 1.18rem; font-weight: 900; color: #0f1e32; letter-spacing: -0.03em; margin: 1px 0; }
.cc-desc    { font-size: 0.78rem; color: #64748b; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; }
.cc-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 9px;
  border-top: 1px solid rgba(15,28,50,0.07);
}

@media (max-width: 900px) { .carousel-card { flex: 0 0 calc((100% - 12px) / 2); } }
@media (max-width: 560px) { .carousel-card { flex: 0 0 100%; } }

.carousel-title-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.carousel-queue-progress {
  font-size: 0.76rem; color: #4ade80;
  background: rgba(34,197,94,0.11);
  border: 1px solid rgba(34,197,94,0.22);
  border-radius: 999px; padding: 2px 10px;
}

/* ══════════════════════════════════════════════════════
   PANEL CARDS — secciones blancas flotantes
   ══════════════════════════════════════════════════════ */

.stat-card,
.panel-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-2xl); padding: 20px;
  box-shadow: var(--shadow-card);
}

.stat-card { display: grid; gap: 10px; }
.stat-card span { color: #64748b; }
.stat-card strong { font-size: 1.9rem; color: #0f1e32; letter-spacing: -0.03em; }

.panel-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.panel-card__header h3 { margin: 0; font-size: 0.95rem; font-weight: 700; color: #0f1e32; letter-spacing: -0.01em; }

/* Listas en paneles */
.ticket-list, .table-scroll, .invoice-list { display: grid; gap: 10px; }

.ticket-card, .client-card, .invoice-item, .ticket-row {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 14px 16px;
  transition: var(--t);
}
.ticket-card:hover, .client-card:hover { border-color: var(--border-hover); }
.ticket-card h4, .client-card h4 { margin: 0 0 5px; color: #0f1e32; font-size: 0.93rem; }
.ticket-card p, .client-card p, .invoice-item p { margin: 5px 0 0; color: #475569; font-size: 0.84rem; }

.ticket-card__actions {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  flex-wrap: wrap;
}
.ticket-card__actions select,
.ticket-card__actions input {
  font-size: 0.81rem; padding: 6px 9px; border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--surface-raised); color: #374151;
}
.ticket-card__actions select { min-width: 110px; }
.ticket-card__actions input { width: 130px; }
.ticket-card--closed { opacity: 0.6; }

/* ══════════════════════════════════════════════════════
   BOTONES PEQUEÑOS — sistema unificado
   ══════════════════════════════════════════════════════ */

.btn-small {
  padding: 7px 13px; border-radius: var(--r-sm); font-weight: 600;
  background: var(--surface-raised); color: #374151;
  border: 1px solid var(--border); cursor: pointer;
  text-decoration: none; display: inline-flex;
  align-items: center; gap: 6px; font-size: 0.81rem;
  transition: var(--t);
  box-shadow: var(--shadow-xs);
  letter-spacing: -0.01em;
}
.btn-small:hover {
  background: var(--surface-hover);
  border-color: var(--border-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn-small:active { transform: translateY(0); }

.btn-copy-wa  {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff; border-color: transparent;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(22,163,74,0.32);
}
.btn-copy-wa:hover { background: linear-gradient(135deg, #18b84f, #16a34a); box-shadow: 0 4px 14px rgba(22,163,74,0.42); }

.btn-copy-msg {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; border-color: transparent;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(59,130,246,0.32);
}
.btn-copy-msg:hover { background: linear-gradient(135deg, #4f93ff, #3070f0); box-shadow: 0 4px 14px rgba(59,130,246,0.42); }

.btn-wa { background: #16a34a !important; color: #fff !important; border-color: transparent !important; }

.badge {
  background: var(--danger); color: white;
  border-radius: 999px; padding: 1px 6px;
  font-size: 0.70rem; font-weight: 700;
  margin-left: 4px;
}
.badge.hidden { display: none !important; }

/* ══════════════════════════════════════════════════════
   BÚSQUEDA
   ══════════════════════════════════════════════════════ */

.search-panel { display: flex; gap: 12px; margin-bottom: 16px; }
.search-panel input {
  flex: 1; padding: 10px 15px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface); color: #1a2332;
  transition: var(--t);
  box-shadow: var(--shadow-xs);
}
.search-panel input::placeholder { color: #94a3b8; }
.search-panel input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.search-panel button { min-width: 130px; }

/* ══════════════════════════════════════════════════════
   TARJETA CLIENTE
   ══════════════════════════════════════════════════════ */

.client-card { display: grid; gap: 5px; cursor: pointer; transition: var(--t); }
.client-card:hover {
  background: var(--primary-light);
  border-color: rgba(59,130,246,0.22);
  transform: translateX(2px);
}
.client-card strong { display: block; font-size: 0.97rem; color: #0f1e32; letter-spacing: -0.01em; }
.client-card .tag {
  display: inline-flex; padding: 3px 9px;
  border-radius: 999px; font-size: 0.76rem;
  background: rgba(59,130,246,0.08); color: var(--primary);
}

/* ══════════════════════════════════════════════════════
   CLIENTE 360
   ══════════════════════════════════════════════════════ */

.c360-topbar { margin-bottom: 12px; }

.c360-header { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: start; margin-bottom: 4px; }
.c360-header-main { display: flex; gap: 14px; align-items: center; }

.c360-avatar {
  width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
  display: grid; place-items: center;
  font-size: 1rem; font-weight: 800; color: white; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(59,130,246,0.28);
}

.c360-identity h2 { margin: 0 0 4px; font-size: 1.08rem; color: #0f1e32; letter-spacing: -0.02em; }
.c360-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; }
.c360-meta { margin: 0; font-size: 0.78rem; color: #64748b; }
.c360-header-stats { display: flex; gap: 20px; align-items: center; }
.c360-stat-item { display: flex; flex-direction: column; gap: 2px; }
.c360-stat-item > span { font-size: 0.70rem; color: #64748b; white-space: nowrap; }
.c360-stat-item > strong { font-size: 0.95rem; color: #0f1e32; letter-spacing: -0.01em; }
.c360-balance-val { color: var(--danger) !important; }
.c360-balance-val[data-zero="true"] { color: var(--success) !important; }
.c360-header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

.c360-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--border); margin: 16px 0 12px; }
.c360-tab {
  padding: 9px 18px; background: transparent; border: none; cursor: pointer;
  color: #64748b; font: inherit; font-size: 0.86rem;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: var(--t);
}
.c360-tab:hover { color: #374151; }
.c360-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

.c360-form-collapse { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; margin-bottom: 14px; }
.c360-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; margin-bottom: 10px; }
.c360-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.c360-form-collapse label { display: block; font-size: 0.74rem; color: #64748b; margin-bottom: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.c360-form-collapse input,
.c360-form-collapse select,
.c360-form-collapse textarea {
  width: 100%; padding: 9px 11px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface);
  color: #1a2332; font: inherit; font-size: 0.86rem; box-sizing: border-box;
  transition: var(--t);
}
.c360-form-collapse input:focus,
.c360-form-collapse select:focus,
.c360-form-collapse textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
}

.c360-inv-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); }
.c360-inv-row:last-child { border-bottom: none; }
.c360-inv-num { font-size: 0.82rem; font-weight: 700; font-family: 'SF Mono', 'Fira Code', monospace; letter-spacing: .02em; margin-bottom: 3px; color: #0f1e32; }
.c360-inv-info p { margin: 2px 0; font-size: 0.79rem; color: #64748b; }
.c360-inv-amount { text-align: right; font-weight: 800; color: #0f1e32; letter-spacing: -0.01em; }
.c360-inv-amount small { display: block; font-size: 0.72rem; color: #94a3b8; font-weight: normal; }

.c360-pay-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.c360-pay-row:last-child { border-bottom: none; }
.c360-pay-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--primary-light); display: grid; place-items: center; font-size: 0.95rem; }
.c360-pay-info strong { font-size: 0.87rem; color: #0f1e32; }
.c360-pay-info p { margin: 2px 0; font-size: 0.77rem; color: #64748b; }
.c360-pay-amount { font-weight: 800; font-size: 0.95rem; color: var(--success); white-space: nowrap; letter-spacing: -0.01em; }

.c360-agr-row { padding: 11px 0; border-bottom: 1px solid var(--border); }
.c360-agr-row:last-child { border-bottom: none; }
.c360-agr-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 3px; }
.c360-agr-head strong { color: #0f1e32; font-size: 0.88rem; }
.c360-agr-info { font-size: 0.79rem; color: #64748b; }

.c360-note-form { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; margin-bottom: 16px; }
.c360-note-type-sel { padding: 9px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: #1a2332; font: inherit; font-size: 0.86rem; }
.c360-note-form textarea { padding: 9px 11px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: #1a2332; font: inherit; font-size: 0.86rem; resize: vertical; }
.c360-note-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.c360-note-row:last-child { border-bottom: none; }
.c360-note-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-raised); display: grid; place-items: center; font-size: 0.82rem; flex-shrink: 0; margin-top: 2px; }
.c360-note-body p { margin: 0 0 2px; font-size: 0.86rem; color: #0f1e32; }
.c360-note-body small { font-size: 0.72rem; color: #94a3b8; }

@media (max-width: 700px) {
  .c360-header { grid-template-columns: 1fr; }
  .c360-header-stats { flex-wrap: wrap; gap: 10px; }
  .c360-header-actions { flex-wrap: wrap; }
  .c360-form-row { grid-template-columns: 1fr; }
  .c360-note-form { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   GESTIONAR / CONTACTADO
   ══════════════════════════════════════════════════════ */

.cc-message {
  font-size: 0.74rem; color: #475569;
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 10px; margin: 5px 0 2px;
  line-height: 1.55; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; cursor: pointer; transition: var(--t);
}
.cc-message:hover { background: var(--primary-light); border-color: rgba(59,130,246,0.18); }

.carousel-card--contacted { opacity: 0.48; border-left-color: var(--success) !important; }
.cc-gestioned { font-size: 0.70rem; color: #22c55e; display: flex; align-items: center; gap: 4px; white-space: nowrap; }

.btn-gestionar {
  background: rgba(34,197,94,0.09);
  color: #16a34a;
  border: 1px solid rgba(34,197,94,0.22);
  transition: var(--t);
}
.btn-gestionar:hover { background: rgba(34,197,94,0.16); }
.btn-gestionar:disabled { opacity: 0.4; cursor: default; }

/* ══════════════════════════════════════════════════════
   LOGIN
   ══════════════════════════════════════════════════════ */

.login-overlay {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: rgba(7,16,31,0.90); backdrop-filter: blur(12px); z-index: 1000;
}
.login-card {
  width: min(440px, calc(100vw - 40px)); padding: 38px; border-radius: 24px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 32px 80px rgba(0,0,0,0.65);
}
.login-card h2 { margin: 0 0 20px; color: #0f1e32; letter-spacing: -0.02em; }
.login-card input {
  width: 100%; margin-bottom: 12px; padding: 12px 15px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface-raised); color: #1a2332;
  transition: var(--t);
}
.login-card input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.login-error { min-height: 22px; color: var(--danger); margin-bottom: 12px; font-size: 0.86rem; }

/* ══════════════════════════════════════════════════════
   MISC
   ══════════════════════════════════════════════════════ */

.hidden { display: none !important; }

.invoice-item { display: grid; gap: 5px; }
.invoice-item strong { display: block; }
.table-scroll { max-height: 420px; overflow: auto; }
.wide-card { grid-column: span 2; }

.worklist-grid { display: grid; grid-template-columns: repeat(3, minmax(200px, 1fr)); gap: 14px; }
.work-item {
  background: var(--surface-raised); border-radius: var(--r-xl);
  padding: 16px; border: 1px solid var(--border); display: grid; gap: 7px;
  transition: var(--t);
}
.work-item:hover { box-shadow: var(--shadow-sm); }
.work-item h4 { margin: 0; color: #0f1e32; }
.work-item p  { margin: 0; color: #475569; }
.work-item--danger  { border-color: rgba(239,68,68,0.20); }
.work-item--warning { border-color: rgba(245,158,11,0.20); }
.work-item--muted   { border-color: rgba(99,102,241,0.16); }
.work-actions { display: flex; gap: 8px; margin-top: 6px; }

.client-detail-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 16px; margin-bottom: 16px; }
.invoice-grid { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 16px; }
.invoice-panel { background: var(--surface-raised); border-radius: var(--r-xl); padding: 16px; border: 1px solid var(--border); }
.invoice-panel h4 { margin-top: 0; color: #0f1e32; }
.invoice-panel label { display: block; margin: 14px 0 5px; color: #64748b; font-size: 0.84rem; }
.invoice-panel input { width: 100%; padding: 10px 13px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); color: #1a2332; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; left: -210px; height: 100vh; width: 200px;
    z-index: 300; transition: left 0.25s ease; box-shadow: 4px 0 40px rgba(0,0,0,0.5);
  }
  .sidebar.open { left: 0; }
  .sidebar-overlay { position: fixed; inset: 0; background: rgba(7,16,31,0.62); z-index: 299; display: none; backdrop-filter: blur(3px); }
  .sidebar-overlay.visible { display: block; }
  .menu-toggle { display: grid; }
  .main-panel { padding: 12px 14px; }
  .op-cards-row { grid-template-columns: repeat(3, 1fr); }
  .carousel-card { flex: 0 0 100%; }
}

@media (max-width: 480px) {
  .op-cards-row { grid-template-columns: repeat(2, 1fr); }
  .op-card { padding: 10px 12px; }
  .op-card__count { font-size: 1.6rem; }
  .metric-pill { padding: 5px 11px; }
  .mp-value { font-size: 0.92rem; }
  .client-detail-grid, .invoice-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   WORKSPACE — estilo WhatsApp premium
   Paleta: #202c33 nav · #ffffff lista · #efeae2 chat
   ══════════════════════════════════════════════════════ */

.workspace {
  display: flex;
  height: clamp(480px, calc(100vh - 510px), 920px);
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  margin-top: 18px;
}

/* ── Col 1: Nav vertical ── */
.ws-nav {
  width: 72px;
  flex-shrink: 0;
  background: #202c33;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  gap: 3px;
}

.ws-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 11px;
  background: transparent;
  color: rgba(255,255,255,0.36);
  font-size: 0.58rem;
  font-weight: 600;
  width: 60px;
  cursor: pointer;
  transition: var(--t);
  letter-spacing: .02em;
}
.ws-nav-btn:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.76); }
.ws-nav-btn.active {
  background: rgba(0,168,132,0.18);
  color: #00a884;
  box-shadow: 0 0 0 1px rgba(0,168,132,0.25) inset;
}
.ws-nav-icon { font-size: 1.2rem; }
.ws-nav-icon-wrap { position: relative; display: inline-flex; }
.ws-nav-badge {
  position: absolute; top: -5px; right: -7px;
  background: #ef4444; color: #fff;
  font-size: 0.56rem; font-weight: 800;
  min-width: 16px; height: 16px; border-radius: 999px;
  display: grid; place-items: center; padding: 0 3px;
  border: 2px solid #202c33;
}
.ws-nav-spacer { flex: 1; }

/* ── Col 2: Lista de conversaciones ── */
.ws-list {
  width: 360px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e8ecef;
  background: #ffffff;
}

.ws-list-header {
  padding: 12px 12px 0;
  background: #f0f2f5;
  border-bottom: 1px solid #e8ecef;
  flex-shrink: 0;
}

.ws-list-search {
  width: 100%;
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  background: #ffffff;
  color: #111b21;
  font: inherit;
  font-size: 0.83rem;
  margin-bottom: 10px;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  transition: var(--t);
}
.ws-list-search::placeholder { color: #8696a0; }
.ws-list-search:focus { outline: none; box-shadow: 0 0 0 2px rgba(0,168,132,0.28); }

/* Fila search + botón nuevo chat */
.ws-list-search-row { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.ws-list-search-row .ws-list-search { margin-bottom: 0; flex: 1; }
.ws-new-chat-btn {
  width: 34px; height: 34px; flex-shrink: 0;
  background: #00a884; color: #fff; border: none; border-radius: 50%;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,168,132,0.35);
  transition: background .13s, transform .13s;
}
.ws-new-chat-btn:hover { background: #008f72; transform: scale(1.08); }

/* Modal nuevo chat */
.ws-modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
}
.ws-modal-overlay.hidden { display: none; }
.ws-modal {
  background: #fff; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.22);
  width: 420px; max-width: 95vw;
  display: flex; flex-direction: column; overflow: hidden;
  animation: modalIn .18s ease;
}
@keyframes modalIn { from { opacity:0; transform:scale(0.96) translateY(8px); } to { opacity:1; transform:none; } }
.ws-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #f0f2f5;
}
.ws-modal-title { font-size: 0.95rem; font-weight: 700; color: #111b21; }
.ws-modal-close {
  background: none; border: none; font-size: 1.3rem; color: #8696a0;
  cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.ws-modal-close:hover { background: #f0f2f5; color: #374151; }
.ws-modal-body { padding: 16px 20px; }
.ws-modal-search {
  width: 100%; padding: 10px 14px; border-radius: 10px;
  border: 1px solid #e2e8f0; font: inherit; font-size: 0.86rem;
  color: #111b21; background: #f8fafc; box-sizing: border-box;
  transition: var(--t);
}
.ws-modal-search:focus { outline: none; border-color: #00a884; box-shadow: 0 0 0 3px rgba(0,168,132,0.15); background: #fff; }
.ws-newchat-results { margin-top: 12px; max-height: 300px; overflow-y: auto; }
.ws-newchat-hint { font-size: 0.82rem; color: #94a3b8; text-align: center; margin: 16px 0; }
.ws-newchat-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  transition: background .12s;
}
.ws-newchat-item:hover { background: #f4f8ff; }
.ws-newchat-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #00a884, #25d366);
  display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 700; color: #fff;
}
.ws-newchat-info { flex: 1; min-width: 0; }
.ws-newchat-name { font-size: 0.87rem; font-weight: 600; color: #111b21; }
.ws-newchat-phone { font-size: 0.74rem; color: #64748b; margin-top: 1px; }
.ws-newchat-status {
  font-size: 0.68rem; font-weight: 700; padding: 2px 7px;
  border-radius: 20px; background: #f0f2f5; color: #374151;
}
.ws-newchat-noresult {
  padding: 14px 12px; font-size: 0.82rem; color: #64748b; text-align: center;
}

.ws-list-tabs { display: flex; margin-bottom: -1px; }
.ws-list-tab {
  flex: 1;
  padding: 7px 4px;
  background: transparent; border: none;
  border-bottom: 2px solid transparent;
  color: #54656f;
  font: inherit; font-size: 0.76rem; cursor: pointer;
  transition: var(--t);
}
.ws-list-tab:hover { color: #111b21; }
.ws-list-tab.active { color: #00a884; border-bottom-color: #00a884; font-weight: 600; }

.ws-conversations { flex: 1; overflow-y: auto; background: #ffffff; }

/* Ítem de conversación */
.ws-conv-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f0f2f5;
  border-left: 3px solid transparent;
  transition: background 0.13s, border-color 0.13s;
  align-items: center;
}
.ws-conv-item:hover  { background: #f4f6f8; border-left-color: rgba(0,168,132,0.25); }
.ws-conv-item.active { background: #eef1f4; border-left-color: #00a884; }

.ws-conv-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(140deg, #00a884 0%, #25d366 100%);
  display: grid; place-items: center;
  font-size: 0.9rem; font-weight: 700; color: white; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,168,132,0.22);
}
.ws-conv-body    { flex: 1; min-width: 0; }
.ws-conv-name    { font-size: 0.91rem; font-weight: 600; color: #111b21; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.ws-conv-preview { font-size: 0.78rem; color: #667781; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ws-conv-right   { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.ws-conv-time    { font-size: 0.69rem; color: #8696a0; }
.ws-conv-badge   { background: #25d366; color: #fff; border-radius: 999px; font-size: 0.65rem; font-weight: 700; padding: 2px 7px; min-width: 20px; text-align: center; }
.ws-conv-dot     { width: 8px; height: 8px; border-radius: 50%; }
.ws-conv-dot--espera   { background: #f97316; }
.ws-conv-dot--activo   { background: #25d366; }
.ws-conv-dot--resuelto { background: #8696a0; }

/* ── Col 3: Área de chat (fondo beige) ── */
.ws-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #f5f2ed;
  position: relative;
  overflow: hidden;
}

.ws-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 100%; gap: 12px;
  background: #f8f9fa;
}
.ws-empty-icon { font-size: 2.8rem; opacity: 0.30; }
.ws-empty-text { font-size: 0.85rem; color: #54656f; margin: 0; }

/* ── Banner de alertas (F7) ── */
.ws-alert-banner {
  display: flex; flex-direction: column; gap: 4px;
  padding: 7px 14px; background: #fef9c3;
  border-bottom: 1px solid #fde047; flex-shrink: 0;
}
.ws-alert-banner.hidden { display: none; }
.ws-alert-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; color: #713f12; font-weight: 500;
}
.ws-alert-item span { flex: 1; }
.ws-alert-item button {
  background: rgba(0,0,0,0.08); border: none; border-radius: 4px;
  font-size: 0.7rem; padding: 2px 7px; cursor: pointer; color: #713f12;
  white-space: nowrap;
}
.ws-alert-item button:hover { background: rgba(0,0,0,0.15); }

/* Chat — flex row para alojar panel derecho (F8) */
.ws-chat { display: flex; flex-direction: row; height: 100%; overflow: hidden; }
.ws-chat-left { display: flex; flex-direction: column; flex: 1; min-width: 0; }

/* Panel derecho mini-ficha (F8) */
.ws-chat-right {
  width: 270px; flex-shrink: 0;
  border-left: 1px solid #e8ecef;
  background: #ffffff; overflow-y: auto;
  display: flex; flex-direction: column;
}
.ws-cr-header {
  padding: 14px 14px 10px; border-bottom: 1px solid #f0f2f5;
  display: flex; align-items: center; gap: 10px;
}
.ws-cr-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #00a884, #25d366);
  display: grid; place-items: center;
  font-size: 0.82rem; font-weight: 700; color: #fff;
}
.ws-cr-name { font-size: 0.88rem; font-weight: 700; color: #111b21; line-height: 1.2; }
.ws-cr-phone { font-size: 0.72rem; color: #54656f; margin-top: 1px; }
.ws-cr-body { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.ws-cr-row {
  background: #f4f8ff; border-radius: 8px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 1px;
}
.ws-cr-row-label { font-size: 0.67rem; color: #64748b; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }
.ws-cr-row-value { font-size: 0.87rem; font-weight: 700; color: #111b21; }
.ws-cr-row-value.red   { color: #ef4444; }
.ws-cr-row-value.green { color: #16a34a; }
.ws-cr-actions { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.ws-cr-btn {
  width: 100%; padding: 8px; border: 1px solid #e2e8f0;
  border-radius: 8px; background: #fff; color: #374151;
  font: inherit; font-size: 0.79rem; font-weight: 600;
  cursor: pointer; text-align: left; transition: background .13s, border-color .13s;
}
.ws-cr-btn:hover { background: #f0f9ff; border-color: #00a884; color: #00a884; }
.ws-cr-btn.primary { background: #00a884; color: #fff; border-color: #00a884; }
.ws-cr-btn.primary:hover { background: #008f72; }
.ws-cr-assigned {
  margin: 8px 14px 0; padding: 6px 10px; border-radius: 7px;
  background: #f0fdf4; border: 1px solid #bbf7d0;
  font-size: 0.73rem; color: #166534;
}
.ws-cr-unknown {
  padding: 20px 14px; text-align: center;
  font-size: 0.82rem; color: #94a3b8;
}

/* Botón Aceptar en ítem de conversación (F2) */
.ws-conv-accept {
  font-size: 0.68rem; font-weight: 700; padding: 3px 9px;
  background: #00a884; color: #fff; border: none; border-radius: 20px;
  cursor: pointer; transition: background .13s; white-space: nowrap; flex-shrink: 0;
}
.ws-conv-accept:hover { background: #008f72; }
.ws-conv-item--espera { border-left-color: #f97316 !important; }

/* Topbar acciones: botón Resolver + dropdown (F3) */
.ws-resolver-wrap { position: relative; display: flex; align-items: center; gap: 0; }
.ws-resolver-btn {
  padding: 6px 13px; background: #16a34a; color: #fff;
  border: none; border-radius: 7px 0 0 7px;
  font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer;
  transition: background .13s;
}
.ws-resolver-btn:hover { background: #15803d; }
.ws-resolver-chevron {
  padding: 6px 8px; background: #16a34a; color: #fff;
  border: none; border-left: 1px solid rgba(255,255,255,0.25);
  border-radius: 0 7px 7px 0;
  font: inherit; font-size: 0.72rem; cursor: pointer;
  transition: background .13s;
}
.ws-resolver-chevron:hover { background: #15803d; }
.ws-resolver-dropdown {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,0.13);
  min-width: 190px; z-index: 200; overflow: hidden;
  animation: dropIn .12s ease;
}
@keyframes dropIn { from { opacity:0; transform: translateY(-4px); } to { opacity:1; transform:none; } }
.ws-resolver-dropdown.hidden { display: none; }
.ws-dd-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px; font: inherit; font-size: 0.81rem; color: #374151;
  background: none; border: none; width: 100%; text-align: left;
  cursor: pointer; transition: background .1s;
}
.ws-dd-item:hover { background: #f4f6f8; }
.ws-dd-item.danger { color: #dc2626; }
.ws-dd-item.danger:hover { background: #fef2f2; }
.ws-dd-sep { height: 1px; background: #f0f2f5; margin: 3px 0; }

.ws-chat-topbar {
  padding: 10px 16px;
  background: #f0f2f5;
  border-bottom: 1px solid #e8ecef;
  display: flex; align-items: center; gap: 14px; flex-shrink: 0;
}
.ws-chat-topbar-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(140deg, #00a884, #25d366);
  display: grid; place-items: center;
  font-size: 0.85rem; font-weight: 700; color: white; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,168,132,0.22);
}
.ws-chat-topbar-info    { flex: 1; min-width: 0; }
.ws-chat-topbar-name    { font-size: 0.94rem; font-weight: 700; color: #111b21; letter-spacing: -0.01em; }
.ws-chat-topbar-sub     { font-size: 0.74rem; color: #54656f; }
.ws-chat-topbar-actions { display: flex; gap: 4px; flex-shrink: 0; }
.ws-chat-topbar-actions .btn-small {
  background: transparent; border-color: transparent;
  box-shadow: none; color: #54656f;
}
.ws-chat-topbar-actions .btn-small:hover {
  background: rgba(0,0,0,0.05); border-color: transparent;
  color: #111b21; transform: none; box-shadow: none;
}

/* Área de mensajes — fondo patrón WhatsApp */
.ws-messages {
  flex: 1; overflow-y: auto; padding: 14px 18px;
  display: flex; flex-direction: column; gap: 3px;
  background-color: #efeae2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23d4c9ba' stroke-width='0.8' opacity='0.55'%3E%3Cpath d='M0 30 Q15 15 30 30 Q45 45 60 30'/%3E%3Cpath d='M0 0 Q15 15 30 0 Q45 -15 60 0'/%3E%3Cpath d='M0 60 Q15 75 30 60 Q45 45 60 60'/%3E%3Ccircle cx='0'  cy='30' r='2.5' fill='%23c9bdb0' stroke='none'/%3E%3Ccircle cx='30' cy='0'  r='2.5' fill='%23c9bdb0' stroke='none'/%3E%3Ccircle cx='60' cy='30' r='2.5' fill='%23c9bdb0' stroke='none'/%3E%3Ccircle cx='30' cy='60' r='2.5' fill='%23c9bdb0' stroke='none'/%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%23c9bdb0' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
}

.ws-msg-wrap { display: flex; flex-direction: column; max-width: 70%; margin-bottom: 3px; }
.ws-msg-wrap--client { align-self: flex-start; }
.ws-msg-wrap--right  { align-self: flex-end; }

.ws-msg {
  padding: 8px 12px 6px; border-radius: 10px;
  font-size: 0.875rem; line-height: 1.52;
  box-shadow: 0 1px 3px rgba(0,0,0,0.09);
  position: relative;
}
.ws-msg--client {
  background: #ffffff; color: #111b21;
  border-top-left-radius: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}
.ws-msg--agent {
  background: #d9fdd3; color: #111b21;
  border-top-right-radius: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}
.ws-msg--ai {
  background: #d9fdd3; color: #111b21;
  border-top-right-radius: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}
.ws-msg-time  { font-size: 0.64rem; color: #8696a0; margin-top: 4px; text-align: right; }
.ws-msg-label { font-size: 0.67rem; font-weight: 700; color: #00a884; margin-bottom: 2px; }

/* Input row */
.ws-input-row {
  padding: 8px 14px;
  background: #f0f2f5;
  border-top: 1px solid #e8ecef;
  display: flex; gap: 8px; align-items: center; flex-shrink: 0;
}
.ws-msg-input {
  flex: 1; padding: 10px 16px; border-radius: 26px;
  border: none; background: #ffffff;
  color: #111b21; font: inherit; font-size: 0.875rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transition: var(--t);
}
.ws-msg-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,168,132,0.30);
}
.ws-send-btn {
  padding: 9px 20px; flex-shrink: 0;
  background: linear-gradient(135deg, #00a884, #00917a);
  color: #fff; border: none; border-radius: 26px;
  font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
  transition: var(--t);
  box-shadow: 0 2px 8px rgba(0,168,132,0.30);
  letter-spacing: -0.01em;
}
.ws-send-btn:hover {
  background: linear-gradient(135deg, #00ba94, #00a884);
  box-shadow: 0 4px 14px rgba(0,168,132,0.40);
  transform: translateY(-1px);
}

/* ── SKILL-01 Fase 2: send status badges ─────────────────────────────────── */
.ws-send-badge {
  display: inline-block; font-size: 0.62rem; font-weight: 700;
  border-radius: 4px; padding: 1px 5px; margin-left: 6px;
  vertical-align: middle; letter-spacing: 0.01em;
}
.ws-send-badge--real  { background: #d9fdd3; color: #15803d; }
.ws-send-badge--sim   { background: #f1f5f9; color: #64748b; }
.ws-send-badge--err   { background: #fee2e2; color: #b91c1c; }
.ws-msg--send-error   { background: #fff7f7 !important; border: 1.5px solid #fca5a5 !important; }

/* ── Template picker ─────────────────────────────────────────────────────── */
.ws-tpl-wrap { position: relative; flex-shrink: 0; }
.ws-tpl-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: #f0f2f5; cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.ws-tpl-btn:hover { background: #e2e6ea; }
.ws-tpl-dropdown {
  position: absolute; bottom: calc(100% + 8px); left: 0;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 200;
  min-width: 240px; max-width: 320px; overflow: hidden;
}
.ws-tpl-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; cursor: pointer; gap: 8px;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.12s;
}
.ws-tpl-item:last-child { border-bottom: none; }
.ws-tpl-item:hover { background: #f0fdf4; }
.ws-tpl-item-name { font-size: 0.82rem; font-weight: 600; color: #1e293b; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-tpl-item-cat  { font-size: 0.67rem; font-weight: 700; border-radius: 4px; padding: 2px 6px; flex-shrink: 0; }
.ws-tpl-empty     { padding: 14px; font-size: 0.8rem; color: #94a3b8; text-align: center; }

/* ── Config panel form ───────────────────────────────────────────────────── */
.ws-cfg-form-section {
  background: #fff; border-radius: 10px; border: 1px solid #e5e7eb;
  padding: 18px; margin-top: 14px;
}
.ws-cfg-form-title  { font-size: 0.83rem; font-weight: 800; color: #111b21; margin-bottom: 14px; letter-spacing: -0.01em; }
.ws-cfg-form-warn   { background: #fef9c3; border: 1px solid #fcd34d; border-radius: 6px; padding: 10px 12px; font-size: 0.77rem; color: #713f12; margin-bottom: 12px; }
.ws-cfg-label       { display: flex; flex-direction: column; gap: 4px; font-size: 0.77rem; font-weight: 600; color: #374151; margin-bottom: 10px; }
.ws-cfg-input       { padding: 8px 12px; border-radius: 7px; border: 1px solid #d1d5db; font: inherit; font-size: 0.82rem; color: #111b21; background: #f9fafb; transition: border-color 0.15s; }
.ws-cfg-input:focus { outline: none; border-color: #00a884; background: #fff; }
.ws-cfg-textarea    { resize: vertical; min-height: 80px; }
.ws-cfg-key-hint    { font-size: 0.68rem; font-weight: 400; color: #94a3b8; }
.ws-cfg-vars-hint   { font-size: 0.68rem; font-weight: 400; color: #94a3b8; font-family: monospace; }
.ws-cfg-toggle-row  { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.ws-cfg-toggle-label { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; color: #374151; cursor: pointer; }
.ws-cfg-actions     { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.ws-cfg-test-btn    { font-size: 0.78rem; }
.ws-cfg-save-btn    { font-size: 0.78rem; }
.ws-cfg-test-result { margin-top: 10px; padding: 9px 12px; border-radius: 7px; font-size: 0.78rem; font-weight: 600; }
.ws-cfg-test-ok     { background: #d9fdd3; color: #15803d; }
.ws-cfg-test-fail   { background: #fee2e2; color: #b91c1c; }
.ws-cfg-tpl-empty   { font-size: 0.78rem; color: #94a3b8; padding: 8px 0; }
.ws-cfg-tpl-item    { border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.ws-cfg-tpl-item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ws-cfg-tpl-name    { font-size: 0.82rem; font-weight: 700; color: #1e293b; flex: 1; }
.ws-cfg-tpl-cat     { font-size: 0.67rem; font-weight: 700; border-radius: 4px; padding: 2px 6px; }
.ws-cfg-tpl-body    { font-size: 0.74rem; color: #64748b; white-space: pre-wrap; word-break: break-word; }
.ws-cfg-tpl-del     { margin-left: auto; background: none; border: none; cursor: pointer; color: #94a3b8; font-size: 0.85rem; padding: 2px 4px; border-radius: 4px; flex-shrink: 0; }
.ws-cfg-tpl-del:hover { color: #dc2626; background: #fee2e2; }
.ws-cfg-new-tpl-btn { font-size: 0.78rem; margin-top: 10px; }
.ws-cfg-tpl-form    { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e5e7eb; }
.ws-cfg-cat-cobranza    { background: #fee2e2; color: #b91c1c; }
.ws-cfg-cat-recordatorio { background: #fef9c3; color: #713f12; }
.ws-cfg-cat-bienvenida  { background: #d9fdd3; color: #15803d; }
.ws-cfg-cat-general     { background: #ede9fe; color: #5b21b6; }

/* ── Bulk WA modal ───────────────────────────────────────────────────────── */
.bulk-wa-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1500;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.bulk-wa-modal {
  background: #fff; border-radius: 14px; width: 100%; max-width: 680px;
  max-height: 90vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.20);
}
.bulk-wa-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid #e5e7eb; flex-shrink: 0;
}
.bulk-wa-header strong { font-size: 0.92rem; color: #111b21; }
.bulk-wa-close { background: none; border: none; cursor: pointer; font-size: 1rem; color: #94a3b8; padding: 4px 8px; border-radius: 6px; }
.bulk-wa-close:hover { background: #f1f5f9; color: #374151; }
.bulk-wa-body   { padding: 20px; overflow-y: auto; flex: 1; }
.bulk-wa-label  { font-size: 0.8rem; font-weight: 700; color: #374151; margin-bottom: 8px; }
.bulk-wa-clients-count { font-size: 0.78rem; color: #64748b; margin-top: 8px; }
.bulk-wa-warn-count    { display: inline-block; margin-left: 8px; background: #fef9c3; color: #713f12; border: 1px solid #fcd34d; border-radius: 5px; padding: 2px 8px; font-size: 0.73rem; font-weight: 700; }
.bulk-wa-preview-box  { margin-top: 12px; padding: 10px 14px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; }
.bulk-wa-preview-label { font-size: 0.7rem; font-weight: 700; color: #15803d; margin-bottom: 4px; }
.bulk-wa-preview-text  { font-size: 0.78rem; color: #1e293b; white-space: pre-wrap; }
.bulk-wa-step2-title   { font-size: 0.83rem; font-weight: 700; color: #111b21; margin-bottom: 12px; }
.bulk-wa-table-wrap    { overflow-x: auto; max-height: 340px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 12px; }
.bulk-wa-table         { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.bulk-wa-table th      { padding: 8px 10px; background: #f8f9fa; font-weight: 700; color: #374151; text-align: left; position: sticky; top: 0; border-bottom: 1px solid #e5e7eb; }
.bulk-wa-table td      { padding: 8px 10px; border-bottom: 1px solid #f3f4f6; color: #1e293b; vertical-align: top; }
.bulk-wa-table tr:last-child td { border-bottom: none; }
.bulk-wa-msg-cell      { font-size: 0.73rem; max-width: 280px; white-space: pre-wrap; word-break: break-word; }
.bulk-wa-row-skip      { opacity: 0.5; }
.bulk-wa-summary { font-size: 0.82rem; margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bulk-res-ok   { color: #15803d; font-weight: 700; }
.bulk-res-sim  { color: #64748b; font-weight: 700; }
.bulk-res-err  { color: #b91c1c; font-weight: 700; }
.bulk-res-skip { color: #94a3b8; font-weight: 700; }

/* C360 embed */
.ws-c360-embed { flex: 1; overflow-y: auto; padding: 16px; background: #f8f9fa; }
.ws-c360-back-row { margin-bottom: 12px; }
.ws-c360-embed .btn-secondary {
  background: #ffffff; color: #374151;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
.ws-c360-embed .btn-secondary:hover { background: #f8f9fa; }

/* ── Panel Agente ── */
.ws-agente {
  flex: 1; overflow-y: auto; background: #f8f9fa;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 28px 18px;
}
.ws-info-panel {
  background: #ffffff; border-radius: 16px; padding: 26px;
  max-width: 480px; width: 100%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border: 1px solid #e8ecef;
}
.ws-info-icon { font-size: 2rem; margin-bottom: 12px; }
.ws-info-title { font-size: 0.97rem; font-weight: 800; color: #111b21; margin: 0 0 8px; letter-spacing: -0.01em; }
.ws-info-desc { font-size: 0.83rem; color: #54656f; line-height: 1.6; margin: 0 0 22px; }
.ws-info-steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.ws-info-step { display: flex; gap: 12px; align-items: flex-start; }
.ws-info-step-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #00a884, #00917a);
  color: #fff; font-size: 0.76rem; font-weight: 800;
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,168,132,0.28);
}
.ws-info-step strong { font-size: 0.84rem; color: #111b21; display: block; margin-bottom: 2px; }
.ws-info-step p { font-size: 0.78rem; color: #667781; margin: 0; line-height: 1.45; }
.ws-info-cost {
  background: #f8f9fa; border-radius: 11px; padding: 13px 16px;
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid #e8ecef;
}
.ws-info-cost-label { font-size: 0.66rem; font-weight: 700; color: #8696a0; text-transform: uppercase; letter-spacing: .06em; }
.ws-info-cost-value { font-size: 1.18rem; font-weight: 900; color: #00a884; letter-spacing: -0.02em; }
.ws-info-cost-sub { font-size: 0.72rem; color: #667781; }

/* ── Panel Config ── */
.ws-config { flex: 1; overflow-y: auto; background: #f8f9fa; padding: 22px; }
.ws-config-header { margin-bottom: 18px; }
.ws-config-header h3 { font-size: 0.95rem; font-weight: 800; color: #111b21; margin: 0 0 4px; letter-spacing: -0.01em; }
.ws-config-header p { font-size: 0.80rem; color: #667781; margin: 0; }
.ws-config-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 16px; border-radius: 12px; background: #ffffff;
  margin-bottom: 8px; font-size: 0.84rem; color: #111b21;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  border: 1px solid #e8ecef;
  transition: var(--t);
}
.ws-config-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.ws-config-item strong { display: block; font-size: 0.84rem; color: #111b21; font-weight: 600; }
.ws-config-sub { font-size: 0.72rem; color: #8696a0; margin-top: 1px; }
.ws-config-badge { padding: 3px 10px; border-radius: 999px; font-size: 0.69rem; font-weight: 700; flex-shrink: 0; }
.ws-config-badge--off { background: #fee2e2; color: #b91c1c; }
.ws-config-badge--on  { background: #d9fdd3; color: #15803d; }

/* ── Col 4: Panel derecho — premium ── */
.ws-detail {
  width: 0; overflow: hidden;
  transition: width 0.25s cubic-bezier(0.4,0,0.2,1);
  flex-shrink: 0;
  background: #ffffff;
  border-left: 1px solid #e8ecef;
  display: flex; flex-direction: column;
}
.ws-detail.open { width: 380px; }

.ws-detail-header {
  padding: 13px 16px; border-bottom: 1px solid #e8ecef;
  background: #f8f9fa;
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0; overflow: hidden;
}
.ws-detail-header strong {
  font-size: 0.87rem; font-weight: 700; color: #111b21;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: -0.01em;
}
.ws-detail-close {
  background: transparent; border: none; color: #8696a0; cursor: pointer;
  font-size: 1rem; padding: 2px 7px; border-radius: 7px; flex-shrink: 0;
  transition: var(--t);
}
.ws-detail-close:hover { background: #e8ecef; color: #111b21; }

.ws-detail-body {
  flex: 1; overflow-y: auto; padding: 14px 12px;
  display: flex; flex-direction: column; gap: 10px;
  background: #f8f9fa;
}

/* Sección con bloque visual propio */
.ws-detail-section {
  display: flex; flex-direction: column; gap: 5px;
  background: #ffffff;
  border: 1px solid #edf0f3;
  border-radius: 11px;
  padding: 12px 13px;
}
.ws-detail-section-title {
  font-size: 0.60rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .11em; color: #9aa5b1; margin-bottom: 6px;
}
.ws-detail-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.80rem; padding: 2px 0;
}
.ws-detail-row span   { color: #54656f; }
.ws-detail-row strong { color: #111b21; font-weight: 600; letter-spacing: -0.01em; }
.ws-detail-balance    { font-size: 1.1rem; font-weight: 900; color: var(--danger); letter-spacing: -0.02em; }
.ws-detail-balance[data-zero="true"] { color: var(--success); }
.ws-detail-actions { display: flex; flex-direction: column; gap: 7px; }
.ws-detail-actions .btn-small { justify-content: center; text-align: center; width: 100%; box-sizing: border-box; }

/* ── Alertas de deuda/estado ── */
.ws-alert-debt {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #fff1f2, #fee2e2);
  border: 1px solid #fecaca; border-radius: 12px; padding: 11px 14px;
}
.ws-alert-icon { font-size: 1.1rem; flex-shrink: 0; }
.ws-alert-label { font-size: 0.66rem; font-weight: 800; color: #991b1b; text-transform: uppercase; letter-spacing: .06em; }
.ws-alert-amount { font-size: 1.12rem; font-weight: 900; color: #b91c1c; letter-spacing: -0.02em; }
.ws-alert-ok {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 1px solid #bbf7d0; border-radius: 12px;
  padding: 10px 14px; font-size: 0.83rem; font-weight: 700; color: #15803d;
}

/* ── Acciones rápidas — botones grandes ── */
.ws-qa-row { display: flex; gap: 8px; }
.ws-qa-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 13px 6px; border-radius: 13px; border: none; cursor: pointer;
  font: inherit; font-size: 0.71rem; font-weight: 700; letter-spacing: .01em;
  transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.15s ease;
}
.ws-qa-btn:hover {
  transform: translateY(-3px) scale(1.02);
}
.ws-qa-btn:active { transform: translateY(0) scale(0.98); }
.ws-qa-btn-icon { font-size: 1.35rem; }
.ws-qa-btn--pago {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #065f46;
  box-shadow: 0 2px 8px rgba(16,185,129,0.18);
}
.ws-qa-btn--pago:hover { box-shadow: 0 6px 18px rgba(16,185,129,0.28); }
.ws-qa-btn--ticket {
  background: linear-gradient(135deg, #fff7ed, #fed7aa);
  color: #7c2d12;
  box-shadow: 0 2px 8px rgba(249,115,22,0.16);
}
.ws-qa-btn--ticket:hover { box-shadow: 0 6px 18px rgba(249,115,22,0.26); }

/* ── Mini formularios ── */
.ws-qa-form {
  background: #f8f9fa; border: 1px solid #e8ecef; border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; gap: 8px;
}
.ws-qa-form-title {
  font-size: 0.83rem; font-weight: 800; color: #111b21; margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.ws-qa-label {
  font-size: 0.64rem; font-weight: 700; color: #54656f;
  text-transform: uppercase; letter-spacing: .07em;
}
.ws-qa-input {
  width: 100%; padding: 9px 12px; border-radius: 9px;
  border: 1px solid #e0e4ea; background: #ffffff;
  color: #111b21; font: inherit; font-size: 0.83rem; box-sizing: border-box;
  transition: var(--t);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.ws-qa-input:focus {
  outline: none;
  border-color: #00a884;
  box-shadow: 0 0 0 3px rgba(0,168,132,0.14);
}
.ws-qa-textarea { resize: none; }

/* ── Pills de método ── */
.ws-method-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.ws-method-pill {
  padding: 5px 11px; border-radius: 20px; border: 1px solid #e0e4ea;
  background: #ffffff; color: #54656f; font: inherit; font-size: 0.73rem;
  cursor: pointer; transition: var(--t);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.ws-method-pill:hover { border-color: #00a884; color: #00a884; background: #f0fdf9; }
.ws-method-pill.active {
  background: #00a884; color: #ffffff; border-color: #00a884;
  box-shadow: 0 2px 6px rgba(0,168,132,0.28);
}

/* ── Pills de prioridad ── */
.ws-prio-pills { display: flex; gap: 4px; }
.ws-prio-pill {
  flex: 1; padding: 6px 2px; border-radius: 8px; border: 1px solid #e0e4ea;
  background: #f8f9fa; color: #54656f; font: inherit; font-size: 0.70rem;
  font-weight: 600; cursor: pointer; text-align: center;
  transition: var(--t);
}
.ws-prio-pill:hover { border-color: #94a3b8; background: #f0f2f5; }
.ws-prio-pill[data-prio="Baja"].ws-prio-active    { background: #22c55e; color: #fff; border-color: #22c55e; box-shadow: 0 2px 6px rgba(34,197,94,0.30); }
.ws-prio-pill[data-prio="Media"].ws-prio-active   { background: #3b82f6; color: #fff; border-color: #3b82f6; box-shadow: 0 2px 6px rgba(59,130,246,0.30); }
.ws-prio-pill[data-prio="Alta"].ws-prio-active    { background: #f97316; color: #fff; border-color: #f97316; box-shadow: 0 2px 6px rgba(249,115,22,0.30); }
.ws-prio-pill[data-prio="Crítica"].ws-prio-active { background: #ef4444; color: #fff; border-color: #ef4444; box-shadow: 0 2px 6px rgba(239,68,68,0.30); }

/* ── Botones de submit ── */
.ws-qa-submit {
  width: 100%; padding: 11px; border-radius: 10px; border: none;
  font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
  transition: var(--t);
  margin-top: 2px;
  letter-spacing: -0.01em;
}
.ws-qa-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.ws-qa-submit:active:not(:disabled) { transform: translateY(0); }
.ws-qa-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.ws-qa-submit--pago {
  background: linear-gradient(135deg, #00a884, #008f70);
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(0,168,132,0.32);
}
.ws-qa-submit--ticket {
  background: linear-gradient(135deg, #f97316, #ea6b0f);
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(249,115,22,0.30);
}
.ws-qa-feedback {
  text-align: center; font-size: 0.80rem; color: #15803d;
  font-weight: 600; padding: 4px 0;
}

/* ── Suggestion panel ── */
.ws-suggest-panel {
  display: flex; flex-direction: column; gap: 8px;
  background: #1f2c33;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.07);
  padding: 12px 11px 10px;
  margin-top: 6px;
}
.ws-suggest-header {
  display: flex; align-items: center; justify-content: space-between;
}
.ws-suggest-label {
  font-size: 0.68rem; font-weight: 700; color: #8696a0;
  text-transform: uppercase; letter-spacing: .05em;
}
.ws-suggest-regen {
  background: rgba(134,150,160,.12); border: 1px solid rgba(134,150,160,.22);
  color: #8696a0; border-radius: 6px; width: 24px; height: 22px; cursor: pointer;
  font-size: 0.8rem; display: grid; place-items: center; transition: all .15s;
}
.ws-suggest-regen:hover { color: #00a884; border-color: #00a884; transform: rotate(90deg); }
.ws-suggest-pills {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.ws-scenario-pill {
  font-size: 0.67rem; font-weight: 600; padding: 3px 9px; border-radius: 20px;
  border: 1px solid rgba(134,150,160,.25); background: rgba(255,255,255,.05);
  color: #aebac1; cursor: pointer; transition: all .12s; white-space: nowrap;
}
.ws-scenario-pill:hover { border-color: #00a884; color: #00a884; background: rgba(0,168,132,.08); }
.ws-scenario-pill.ws-scenario-active {
  background: #00a884; border-color: #00a884; color: #fff; font-weight: 700;
}
.ws-suggest-text {
  width: 100%; box-sizing: border-box;
  background: #2a3942;
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: #e9edef;
  font-size: 0.8rem; line-height: 1.6;
  padding: 10px 11px;
  resize: vertical; font-family: inherit; outline: none;
  transition: border-color .15s;
  min-height: 100px;
}
.ws-suggest-text:focus { border-color: #00a884; }
.ws-suggest-text::placeholder { color: #8696a0; }
.ws-suggest-send-row {
  display: flex; gap: 6px;
}
.ws-suggest-copy {
  flex: 1; padding: 9px 8px; border-radius: 9px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #e9edef; font-size: 0.8rem; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
.ws-suggest-copy:hover { background: rgba(255,255,255,.15); }
.ws-suggest-use {
  flex: 1.6; padding: 9px 8px; border-radius: 9px; border: none;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff; font-size: 0.8rem; font-weight: 700; cursor: pointer;
  letter-spacing: -0.01em; transition: opacity .15s, transform .12s;
}
.ws-suggest-use:hover { opacity: .88; transform: translateY(-1px); }

/* ── WhatsApp button + ficha link (legacy, kept for reference) ── */
.ws-wa-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #25d366, #1ebe5d);
  color: #ffffff;
  font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
  transition: var(--t);
  box-shadow: 0 3px 10px rgba(37,211,102,0.28);
  letter-spacing: -0.01em;
}
.ws-wa-btn:hover {
  background: linear-gradient(135deg, #2de370, #25d366);
  box-shadow: 0 5px 18px rgba(37,211,102,0.38);
  transform: translateY(-1px);
}
.ws-ficha-link {
  display: block; text-align: center; font-size: 0.74rem; color: #8696a0;
  text-decoration: none; padding: 5px 0;
  transition: var(--t);
}
.ws-ficha-link:hover { color: #00a884; }

/* ══════════════════════════════════════════════════════
   WORKSPACE RESPONSIVE
   ══════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .workspace { height: auto; flex-direction: column; }
  .ws-nav { width: 100%; flex-direction: row; height: 54px; padding: 0 10px; }
  .ws-nav-spacer { display: none; }
  .ws-list { width: 100%; height: 200px; border-right: none; border-bottom: 1px solid #e8ecef; }
  .ws-main { min-height: 280px; }
  .ws-detail.open { width: 100%; border-left: none; border-top: 1px solid #e8ecef; }
}

/* ══════════════════════════════════════════════════════
   C360 — EXTENSIONES: COLAS, ACTIVIDAD, ACCIONES
   ══════════════════════════════════════════════════════ */

/* Header actions row */
.c360-action-row {
  display: flex; gap: 7px; flex-wrap: wrap; align-items: center;
}

/* Queue chips in header */
.c360-queue-chips {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 9px;
}
.c360-queue-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: .03em;
  border: 1px solid transparent;
}
.c360-queue-chip--rojo       { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.c360-queue-chip--naranja     { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.c360-queue-chip--amarillo    { background: #fefce8; color: #854d0e; border-color: #fde68a; }
.c360-queue-chip--proximo     { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.c360-queue-chip--suspendido  { background: #faf5ff; color: #7e22ce; border-color: #e9d5ff; }
.c360-queue-chip--normal      { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.c360-queue-chip--ticket      { background: #f0f9ff; color: #0369a1; border-color: #bae6fd; }
.c360-queue-chip--ok          { background: #f8fafc; color: #94a3b8; border-color: #e2e8f0; font-weight: 400; }

/* Status change dropdown */
.c360-status-wrap { position: relative; }
.btn-status-toggle {
  background: #f1f5f9; color: #374151;
  border: 1px solid #e2e8f0;
}
.btn-status-toggle:hover { background: #e2e8f0; }
.c360-status-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 200;
  background: #ffffff; border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 28px rgba(0,0,0,0.14);
  min-width: 170px; overflow: hidden;
}
.c360-status-opt {
  display: block; width: 100%;
  padding: 10px 14px; text-align: left;
  background: none; border: none;
  font: inherit; font-size: 0.84rem; color: #374151; cursor: pointer;
  transition: background .12s;
}
.c360-status-opt:hover { background: #f8fafc; }

/* Panel subtitle */
.c360-panel-sub {
  font-size: 0.73rem; color: #94a3b8; font-weight: 400;
  margin-left: 6px;
}

/* Empty state inside panels */
.c360-empty-state {
  color: #94a3b8; font-size: 0.84rem; padding: 16px 0; text-align: center;
}

/* Colas list */
.c360-queue-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 4px; border-bottom: 1px solid #f1f5f9;
  transition: background .12s;
}
.c360-queue-row:last-child { border-bottom: none; }
.c360-queue-row:hover { background: #f8fafc; border-radius: 8px; }
.c360-queue-info { flex: 1; min-width: 0; }
.c360-queue-info strong { display: block; font-size: 0.84rem; color: #0f1e32; font-weight: 700; }
.c360-queue-info span { font-size: 0.73rem; color: #64748b; }
.c360-queue-open-btn { flex-shrink: 0; }

/* Audit log */
.c360-audit-row {
  padding: 11px 0; border-bottom: 1px solid #f1f5f9;
}
.c360-audit-row:last-child { border-bottom: none; }
.c360-audit-label { font-size: 0.83rem; font-weight: 700; color: #0f1e32; margin-bottom: 2px; }
.c360-audit-summary { font-size: 0.78rem; color: #475569; margin: 2px 0; }
.c360-audit-meta { font-size: 0.70rem; color: #94a3b8; margin-top: 2px; }

/* WS send toast (WhatsApp quick action after send) */
.ws-send-toast {
  position: fixed; bottom: 28px; right: 24px; z-index: 9999;
  background: #1f2937; color: #f9fafb;
  padding: 11px 16px; border-radius: 12px;
  font-size: 0.84rem; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.32);
  animation: slideUp .2s ease;
}
.ws-send-toast-wa {
  background: #25d366; color: #fff; border: none;
  padding: 5px 12px; border-radius: 999px;
  font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.ws-send-toast-wa:hover { background: #2de370; }
@keyframes slideUp {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ══════════════════════════════════════════════════════
   MODAL CLIENTE
   ══════════════════════════════════════════════════════ */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10, 18, 30, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(3px);
  animation: fadeIn .18s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  background: #ffffff; border-radius: 18px;
  width: 100%; max-width: 580px; max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.28), 0 1px 0 rgba(255,255,255,0.08);
  animation: modalIn .2s cubic-bezier(0.34,1.56,0.64,1);
  overflow: hidden;
}
@keyframes modalIn {
  from { transform: translateY(18px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)     scale(1);    opacity: 1; }
}

.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px 14px;
  border-bottom: 1px solid #e9eef6;
  flex-shrink: 0;
}
.modal-header h3 {
  margin: 0; font-size: 1rem; font-weight: 800;
  color: #0f1e32; letter-spacing: -0.02em;
}
.modal-close {
  background: #f1f5f9; border: none; border-radius: 8px;
  width: 30px; height: 30px; font-size: 0.85rem;
  cursor: pointer; color: #64748b; transition: var(--t);
  display: grid; place-items: center;
}
.modal-close:hover { background: #e2e8f0; color: #0f1e32; }

.modal-body {
  padding: 20px 22px; overflow-y: auto; flex: 1;
}

.modal-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.modal-field { display: flex; flex-direction: column; gap: 5px; }
.modal-field--full { grid-column: 1 / -1; }
.modal-field label {
  font-size: 0.72rem; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .06em;
}
.modal-field .req { color: #ef4444; }
.modal-field-hint { font-size: 0.68rem; color: #94a3b8; text-transform: none; font-weight: 400; }
.modal-field input,
.modal-field select {
  padding: 9px 12px; border-radius: 10px;
  border: 1.5px solid #e2e8f0; background: #f8fafc;
  font: inherit; font-size: 0.86rem; color: #0f1e32;
  transition: border-color .15s, box-shadow .15s;
}
.modal-field input:focus,
.modal-field select:focus {
  outline: none; border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
  background: #ffffff;
}

.modal-pill-row { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 2px; }
.modal-pill {
  padding: 6px 13px; border-radius: 999px;
  border: 1.5px solid #e2e8f0; background: #f8fafc;
  font: inherit; font-size: 0.78rem; font-weight: 600;
  color: #475569; cursor: pointer; transition: var(--t);
}
.modal-pill:hover { border-color: #c7d2fe; background: #eef2ff; color: #4338ca; }
.modal-pill.active {
  background: #6366f1; border-color: #6366f1;
  color: #ffffff; box-shadow: 0 2px 8px rgba(99,102,241,0.28);
}

.modal-error {
  margin-top: 12px; padding: 10px 14px; border-radius: 10px;
  background: #fef2f2; border: 1px solid #fecaca;
  color: #b91c1c; font-size: 0.82rem; font-weight: 600;
}

.modal-footer {
  padding: 14px 22px; border-top: 1px solid #e9eef6;
  display: flex; justify-content: flex-end; gap: 9px;
  flex-shrink: 0;
}

/* ── Quick payment modal ── */
.qp-client-row { display: flex; justify-content: space-between; align-items: baseline; }
.qp-badge {
  padding: 7px 14px; border-radius: 20px; font-size: 13px; font-weight: 600;
  text-align: center; margin: 10px 0 6px;
}
.qp-badge--total   { background: #e8f5e9; color: #2e7d32; }
.qp-badge--parcial { background: #fff8e1; color: #f57f17; }
.qp-badge--credito { background: #e8eaf6; color: #3949ab; }

/* ── Botón nuevo cliente (search panel) ── */
.btn-new-client {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff; border: none; font-weight: 700;
  box-shadow: 0 2px 8px rgba(99,102,241,0.28);
}
.btn-new-client:hover {
  background: linear-gradient(135deg, #818cf8, #6366f1);
  box-shadow: 0 4px 14px rgba(99,102,241,0.36);
}

/* ── Lista de clientes mejorada ── */
.client-list-row {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 8px; border-bottom: 1px solid #f1f5f9;
  cursor: pointer; transition: background .12s;
}
.client-list-row:last-child { border-bottom: none; }
.client-list-row:hover { background: #f8fafc; border-radius: 10px; }
.client-list-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff; font-size: 0.78rem; font-weight: 800;
  display: grid; place-items: center; letter-spacing: -.01em;
}
.client-list-info { flex: 1; min-width: 0; }
.client-list-name { font-size: 0.88rem; font-weight: 700; color: #0f1e32; }
.client-list-meta { font-size: 0.73rem; color: #64748b; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-list-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.client-list-bal { font-size: 0.78rem; font-weight: 700; color: #ef4444; }
.client-list-ok  { font-size: 0.73rem; color: #22c55e; font-weight: 600; }
.client-list-actions { display: flex; gap: 5px; flex-shrink: 0; }

/* ── Morosos: cartera vencida ──────────────────────────────────────────── */

/* Stats strip */
.morosos-stats {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px;
}
.morosos-stat {
  flex: 1; min-width: 110px; background: #fff; border-radius: 12px;
  border: 1.5px solid #e2e8f0; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.morosos-stat__val { font-size: 1.45rem; font-weight: 900; color: #0f1e32; line-height: 1; }
.morosos-stat__label { font-size: 0.7rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.morosos-stat--money .morosos-stat__val { color: #dc2626; }
.morosos-stat--red .morosos-stat__val { color: #dc2626; }
.morosos-stat--orange .morosos-stat__val { color: #ea580c; }
.morosos-stat--yellow .morosos-stat__val { color: #ca8a04; }

/* Filter bar */
.morosos-filters { margin-bottom: 14px; padding: 14px 18px; }
.morosos-filters__row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.mor-filter-sel {
  height: 34px; padding: 0 10px; border: 1.5px solid #e2e8f0; border-radius: 8px;
  font-size: 0.83rem; color: #0f1e32; background: #f8fafc; outline: none;
  min-width: 170px; cursor: pointer;
}
.mor-filter-sel:focus { border-color: #6366f1; }
.mor-filter-btn { height: 34px; padding: 0 16px; font-size: 0.83rem; }

/* Table card header */
.morosos-table-title { display: flex; align-items: center; gap: 10px; }
.morosos-table-title input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.morosos-selected-label {
  font-size: 0.78rem; font-weight: 700; color: #6366f1;
  background: #eef2ff; border-radius: 6px; padding: 3px 9px;
}

/* Table */
.morosos-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.morosos-table thead tr { background: #f8fafc; }
.morosos-table th {
  text-align: left; padding: 8px 10px;
  font-size: 0.72rem; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .03em;
  border-bottom: 1.5px solid #e2e8f0; white-space: nowrap;
}
.mor-th-check { width: 36px; }
.morosos-table td { padding: 10px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.morosos-table tr:last-child td { border-bottom: none; }

/* Severity row highlighting */
.mor-sev-rojo   { background: linear-gradient(90deg, rgba(254,226,226,.55) 0%, transparent 18px); }
.mor-sev-naranja{ background: linear-gradient(90deg, rgba(255,237,213,.55) 0%, transparent 18px); }
.mor-sev-amarillo{ background: linear-gradient(90deg, rgba(254,249,195,.55) 0%, transparent 18px); }
.mor-sev-normal { }
.morosos-table .mor-row:hover td { background: rgba(99,102,241,.04); }

/* Client cell */
.mor-client-name { font-weight: 700; color: #0f1e32; font-size: 0.84rem; }
.mor-client-wa { font-size: 0.72rem; color: #64748b; margin-top: 1px; }

/* Balance */
.mor-td-balance { font-weight: 800; color: #dc2626; white-space: nowrap; }

/* Days badge */
.mor-days-badge {
  display: inline-block; font-size: 0.75rem; font-weight: 800;
  padding: 3px 8px; border-radius: 7px; white-space: nowrap;
}
.mor-days-badge--rojo    { background: #fee2e2; color: #b91c1c; }
.mor-days-badge--naranja { background: #ffedd5; color: #c2410c; }
.mor-days-badge--amarillo{ background: #fef9c3; color: #a16207; }
.mor-days-badge--normal  { background: #f1f5f9; color: #475569; }

/* Sector / cycle cells */
.mor-td-sector, .mor-td-cycle { font-size: 0.78rem; color: #64748b; white-space: nowrap; }

/* Action buttons per row */
.mor-td-actions { display: flex; gap: 5px; align-items: center; }
.mor-btn-copy, .mor-btn-wa, .mor-btn-managed, .mor-btn-ficha {
  width: 30px; height: 28px; padding: 0; display: grid; place-items: center;
  font-size: 0.85rem; border-radius: 7px; border: 1.5px solid #e2e8f0;
  background: #f8fafc; cursor: pointer; transition: background .12s, border-color .12s;
}
.mor-btn-copy:hover    { background: #e0e7ff; border-color: #6366f1; }
.mor-btn-wa:hover      { background: #dcfce7; border-color: #16a34a; }
.mor-btn-managed:hover { background: #d1fae5; border-color: #059669; }
.mor-btn-ficha:hover   { background: #f0f9ff; border-color: #0ea5e9; }

/* Bulk action bar */
.mor-bulk-bar {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: #1e293b; color: #fff; border-radius: 14px;
  padding: 12px 20px; display: flex; align-items: center; gap: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.32); z-index: 800;
  animation: slideUp .22s cubic-bezier(.34,1.56,.64,1);
}
.mor-bulk-count { font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
.mor-bulk-actions { display: flex; gap: 8px; }
.mor-bulk-btn {
  height: 34px; padding: 0 14px; border-radius: 8px; border: none;
  font-weight: 700; font-size: 0.82rem; cursor: pointer; transition: opacity .15s;
}
.mor-bulk-btn:hover { opacity: .85; }

/* Empty state */
.morosos-empty {
  text-align: center; color: #94a3b8; font-size: 0.88rem;
  padding: 32px 10px !important;
}
.morosos-empty--err { color: #dc2626; }

/* ── Facturación por ciclo ─────────────────────────────────────────────── */
.billing-header {
  margin-bottom: 18px;
}
.billing-header h2 { font-size: 1.2rem; font-weight: 800; color: #0f1e32; margin: 0 0 2px; }
.billing-header .subtitle { margin: 0 0 18px; color: #64748b; font-size: 0.85rem; }
.billing-controls {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 28px;
}
.billing-ctrl-label {
  display: block; font-size: 0.73rem; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
}
.billing-cycle-group { display: flex; flex-direction: column; }
.billing-date-group { display: flex; flex-wrap: wrap; gap: 12px; }
.billing-field { display: flex; flex-direction: column; }
.billing-field input {
  height: 36px; padding: 0 10px; border: 1.5px solid #e2e8f0; border-radius: 8px;
  font-size: 0.85rem; color: #0f1e32; background: #f8fafc;
  transition: border .15s; outline: none;
}
.billing-field input:focus { border-color: #6366f1; background: #fff; }
.billing-preview-btn {
  height: 36px; padding: 0 20px; align-self: flex-end;
  background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff;
  border: none; border-radius: 8px; font-weight: 700; font-size: 0.85rem;
  cursor: pointer; transition: opacity .15s;
}
.billing-preview-btn:hover { opacity: .88; }
.billing-preview-btn:disabled { opacity: .55; cursor: default; }
.billing-msg {
  margin-top: 12px; padding: 9px 14px; border-radius: 8px;
  font-size: 0.82rem; font-weight: 600;
}
.billing-msg--error { background: #fee2e2; color: #b91c1c; }
.billing-msg--success { background: #dcfce7; color: #15803d; }

/* Preview card */
.billing-preview-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.billing-count-label { font-size: 0.78rem; color: #64748b; font-weight: 600; }
.billing-table-wrap { overflow-x: auto; margin-top: 4px; }
.billing-table {
  width: 100%; border-collapse: collapse; font-size: 0.82rem;
}
.billing-table thead tr { background: #f8fafc; }
.billing-table th {
  text-align: left; padding: 8px 10px;
  font-size: 0.72rem; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .03em;
  border-bottom: 1.5px solid #e2e8f0; white-space: nowrap;
}
.billing-th-check, .billing-td-check { width: 36px; text-align: center; }
.billing-th-amount, .billing-td-amount { width: 130px; }
.billing-td-prev { color: #64748b; }
.billing-table td {
  padding: 9px 10px; border-bottom: 1px solid #f1f5f9;
  vertical-align: middle; color: #0f1e32;
}
.billing-table tr:last-child td { border-bottom: none; }
.billing-table tr:hover td { background: #fafbff; }
.billing-row--done td { opacity: 0.5; }
.billing-client-name { font-weight: 700; font-size: 0.83rem; }
.billing-client-wa { font-size: 0.72rem; color: #64748b; }
.billing-amount-input {
  width: 110px; height: 30px; padding: 0 8px;
  border: 1.5px solid #e2e8f0; border-radius: 7px;
  font-size: 0.83rem; font-weight: 700; color: #0f1e32;
  text-align: right; outline: none; transition: border .15s;
}
.billing-amount-input:focus { border-color: #6366f1; background: #fff; }
.billing-already-tag {
  font-size: 0.72rem; font-weight: 700; color: #22c55e;
  background: #dcfce7; border-radius: 6px; padding: 2px 7px;
}
.billing-charge-badge {
  font-size: 0.75rem; font-weight: 700; color: #92400e;
  background: #fef3c7; border-radius: 6px; padding: 2px 7px; white-space: nowrap;
}
.billing-charge-badge small { font-weight: 400; opacity: .8; }
.billing-svc-badge {
  font-size: 0.75rem; font-weight: 700; color: #1d4ed8;
  background: #dbeafe; border-radius: 6px; padding: 2px 7px; white-space: nowrap;
}

/* Confirmation overlay */
.billing-confirm-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(15,30,50,.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.billing-confirm-card {
  background: #fff; border-radius: 16px; padding: 28px 32px;
  max-width: 460px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.22);
}
.billing-confirm-card h3 { font-size: 1.05rem; font-weight: 800; color: #0f1e32; margin: 0 0 10px; }
.billing-confirm-card p { font-size: 0.85rem; color: #475569; margin: 0 0 22px; line-height: 1.55; }
.billing-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.btn-danger {
  height: 36px; padding: 0 18px; border-radius: 8px; border: none;
  background: #dc2626; color: #fff; font-weight: 700; font-size: 0.85rem;
  cursor: pointer; transition: background .15s;
}
.btn-danger:hover { background: #b91c1c; }
.btn-danger:disabled { opacity: .55; cursor: default; }

/* ── Billing status cards (auto cut panel) ──────────────────────────────── */

.billing-status-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; margin-bottom: 16px;
}
.billing-status-card {
  background: #fff; border-radius: 14px; padding: 18px 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07); border: 1.5px solid #e2e8f0;
}
.billing-status-card--alert { border-color: #fde68a; background: #fffbeb; }
.billing-status-card.bsc--today {
  border-color: #22c55e; background: #f0fdf4;
}
.bsc-label { font-size: 0.72rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.bsc-date { font-size: 1.35rem; font-weight: 800; color: #0f1e32; line-height: 1.1; }
.billing-status-card.bsc--today .bsc-date { color: #15803d; }
.billing-status-card--alert .bsc-date { color: #b45309; font-size: 2rem; }
.bsc-sub { font-size: 0.75rem; color: #64748b; margin-top: 4px; }
.billing-status-card.bsc--today .bsc-sub { color: #15803d; font-weight: 600; }

/* Billing run log rows */
.billing-run-row {
  padding: 12px 16px; border-bottom: 1px solid #f1f5f9; display: flex;
  flex-direction: column; gap: 6px;
}
.billing-run-row:last-child { border-bottom: none; }
.billing-run-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.billing-run-cycle {
  font-weight: 700; font-size: 0.82rem; background: #0f1e32; color: #fff;
  border-radius: 6px; padding: 2px 8px;
}
.billing-run-date { font-size: 0.82rem; color: #475569; font-weight: 600; }
.billing-run-period { font-size: 0.82rem; color: #64748b; }
.billing-run-by { font-size: 0.75rem; color: #94a3b8; font-style: italic; }
.billing-run-stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.billing-run-stat {
  font-size: 0.75rem; border-radius: 5px; padding: 2px 8px; background: #f1f5f9; color: #475569;
}
.billing-run-stat--ok { background: #dcfce7; color: #15803d; font-weight: 700; }
.billing-run-stat--dup { background: #f1f5f9; color: #64748b; }
.billing-run-stat--warn { background: #fef3c7; color: #b45309; font-weight: 700; }

/* Incomplete clients list */
.billing-incomplete-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  border-bottom: 1px solid #f8fafc; flex-wrap: wrap;
}
.billing-incomplete-row:last-child { border-bottom: none; }
.billing-incomplete-name { font-weight: 600; font-size: 0.85rem; color: #0f1e32; }
.billing-incomplete-wa { font-size: 0.78rem; color: #64748b; }
.billing-incomplete-inline { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.billing-incomplete-chip {
  font-size: 0.73rem; background: #fef3c7; color: #92400e;
  border-radius: 5px; padding: 2px 8px; font-weight: 600;
}

/* Badge variants for billing table */
.badge-blue { background: #dbeafe; color: #1d4ed8; }
.badge-gray { background: #f1f5f9; color: #475569; }
.billing-credit-tag {
  font-size: 0.75rem; font-weight: 700; color: #15803d;
  background: #dcfce7; border-radius: 6px; padding: 2px 7px; white-space: nowrap;
}

/* ── CSAT / Ratings ─────────────────────────────────────────────────────── */

/* Dashboard CSAT widget */
.csat-widget {
  display: flex; align-items: center; gap: 28px; padding: 18px 22px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.csat-widget__left { display: flex; flex-direction: column; align-items: center; min-width: 90px; }
.csat-stars { font-size: 1.5rem; color: #f59e0b; letter-spacing: 2px; line-height: 1; }
.csat-avg { font-size: 1.6rem; font-weight: 900; color: #0f1e32; margin-top: 2px; }
.csat-label { font-size: 0.68rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.csat-widget__bars { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 5px; }
.csat-bar-row { display: flex; align-items: center; gap: 7px; }
.csat-bar-star { font-size: 0.72rem; color: #94a3b8; width: 20px; text-align: right; flex-shrink: 0; }
.csat-bar-track { flex: 1; height: 8px; background: #f1f5f9; border-radius: 4px; overflow: hidden; }
.csat-bar-fill { height: 100%; border-radius: 4px; transition: width .4s ease; }
.bar-green  { background: #22c55e; }
.bar-yellow { background: #f59e0b; }
.bar-red    { background: #ef4444; }
.csat-bar-count { font-size: 0.68rem; color: #64748b; width: 18px; flex-shrink: 0; }
.csat-no-data { font-size: 0.78rem; color: #94a3b8; text-align: center; padding: 8px; }
.csat-widget__right { display: flex; flex-direction: column; align-items: center; min-width: 80px; }
.csat-nps-val { font-size: 2rem; font-weight: 900; color: #6366f1; line-height: 1; }
.csat-nps-label { font-size: 0.68rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
.csat-total { font-size: 0.7rem; color: #94a3b8; margin-top: 6px; }

/* Rating modal stars */
.rating-modal-card { max-width: 420px; }
.rating-modal-client { font-size: 0.88rem; color: #64748b; margin: 0 0 16px; font-weight: 600; }
.rating-stars-row {
  display: flex; gap: 8px; justify-content: center; margin-bottom: 8px;
}
.rating-star-btn {
  font-size: 2.4rem; background: none; border: none; cursor: pointer;
  color: #d1d5db; transition: color .12s, transform .1s;
  line-height: 1; padding: 0;
}
.rating-star-btn:hover, .rating-star-btn.active { color: #f59e0b; transform: scale(1.15); }
.rating-score-label {
  text-align: center; font-size: 0.88rem; font-weight: 700; color: #64748b;
  min-height: 22px; margin-bottom: 4px;
}
textarea#rating-comment {
  width: 100%; padding: 9px 10px; border: 1.5px solid #e2e8f0; border-radius: 8px;
  font-size: 0.85rem; resize: vertical; outline: none; font-family: inherit;
  transition: border .15s;
}
textarea#rating-comment:focus { border-color: #6366f1; }
.btn-rating-request {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff; border: none; font-weight: 700;
}
.btn-rating-request:hover { opacity: .88; }

/* C360 ratings tab */
.c360-rating-avg {
  font-size: 0.85rem; font-weight: 700; color: #f59e0b;
}
.c360-rating-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 8px; border-bottom: 1px solid #f1f5f9;
}
.c360-rating-row:last-child { border-bottom: none; }
.c360-rating-stars {
  font-size: 1.1rem; letter-spacing: 1px; flex-shrink: 0; min-width: 80px;
}
.rating-score-green { color: #16a34a; }
.rating-score-yellow { color: #ca8a04; }
.rating-score-red { color: #dc2626; }
.c360-rating-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.c360-rating-label { font-size: 0.83rem; font-weight: 700; color: #0f1e32; }
.c360-rating-context { font-size: 0.72rem; color: #94a3b8; }
.c360-rating-comment { font-size: 0.78rem; color: #475569; font-style: italic; margin-top: 2px; }
.rating-google-tag {
  font-size: 0.68rem; font-weight: 800; color: #fff;
  background: #4285f4; border-radius: 5px; padding: 2px 6px; flex-shrink: 0;
  align-self: flex-start;
}

/* Google review modal */
.google-review-badge {
  display: flex; align-items: center; gap: 14px;
  background: #fefce8; border: 1.5px solid #fef08a; border-radius: 10px;
  padding: 14px 16px; margin-bottom: 16px;
}
.google-review-score { font-size: 2rem; color: #f59e0b; }
.google-review-text { font-size: 0.83rem; color: #713f12; line-height: 1.5; }
.google-review-hint { font-size: 0.83rem; color: #64748b; margin: 0 0 10px; font-weight: 600; }
.google-review-msg-box {
  background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 8px;
  padding: 12px 14px; font-size: 0.83rem; color: #0f1e32; line-height: 1.6;
  white-space: pre-wrap; margin-bottom: 14px;
}
.rating-config-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
  border-top: 1px solid #f1f5f9; padding-top: 12px; margin-top: 4px;
}
.rating-config-row input {
  flex: 1; min-width: 200px; height: 34px; padding: 0 10px;
  border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: 0.83rem;
  outline: none; transition: border .15s;
}
.rating-config-row input:focus { border-color: #6366f1; }

/* ── WhatsApp agent mode panel ── */
.ws-mode-panel { background: #fff; border-radius: 14px; padding: 18px 20px; margin: 18px; max-width: 460px; box-shadow: 0 1px 8px rgba(0,0,0,.07); }
.ws-mode-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; gap: 10px; }
.ws-mode-title { font-size: .82rem; font-weight: 700; color: #0f1e32; }
.ws-mode-status { font-size: .71rem; color: #64748b; margin-top: 2px; }
.ws-mode-badge { padding: 3px 11px; border-radius: 999px; font-size: .71rem; font-weight: 700; white-space: nowrap; background: #e2e8f0; color: #475569; flex-shrink: 0; }
.ws-mode-badge--manual  { background: #dbeafe; color: #1d4ed8; }
.ws-mode-badge--auto    { background: #d9fdd3; color: #15803d; }
.ws-mode-badge--fmanual { background: #f3e8ff; color: #7e22ce; }
.ws-mode-btns { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.ws-mode-btn { padding: 6px 14px; border-radius: 20px; border: 1.5px solid #e2e8f0; background: #f8fafc; color: #475569; font-size: .78rem; font-weight: 600; cursor: pointer; transition: all .15s; }
.ws-mode-btn:hover:not(:disabled) { border-color: #94a3b8; background: #f1f5f9; }
.ws-mode-btn:disabled { opacity: .45; cursor: not-allowed; }
.ws-mode-btn--active      { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.ws-mode-btn--active:hover { background: #1e40af; }
.ws-mode-btn--active-auto { background: #15803d; border-color: #15803d; color: #fff; }
.ws-mode-btn--active-auto:hover { background: #166534; }
.ws-mode-note { font-size: .72rem; color: #64748b; padding: 8px 10px; background: #f8fafc; border-radius: 8px; min-height: 24px; line-height: 1.5; }

/* ── Message approval actions ── */
.ws-msg--pending { border: 1.5px solid #fbbf24 !important; background: #fef9ef !important; }
.ws-msg--rejected { background: #fee2e2 !important; color: #991b1b !important; opacity: .75; }
.ws-msg-actions { display: flex; gap: 6px; margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,.08); }
.ws-msg-approve { background: #16a34a; color: #fff; border: none; border-radius: 6px; padding: 5px 13px; font-size: .73rem; font-weight: 700; cursor: pointer; transition: background .15s; }
.ws-msg-approve:hover { background: #15803d; }
.ws-msg-approve:disabled { opacity: .6; cursor: not-allowed; }
.ws-msg-reject  { background: #dc2626; color: #fff; border: none; border-radius: 6px; padding: 5px 13px; font-size: .73rem; font-weight: 700; cursor: pointer; transition: background .15s; }
.ws-msg-reject:hover  { background: #b91c1c; }
/* Location message card */
.ws-msg-location { display: flex; align-items: flex-start; gap: 10px; padding: 2px 0; }
.ws-msg-location-icon { font-size: 22px; line-height: 1.2; flex-shrink: 0; }
.ws-msg-location-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-msg-location-name { font-weight: 600; font-size: .82rem; color: #1e293b; }
.ws-msg-location-addr { font-size: .75rem; color: #64748b; }
.ws-msg-location-link { font-size: .75rem; color: #1d4ed8; text-decoration: none; margin-top: 5px; display: inline-block; font-weight: 600; }
.ws-msg-location-link:hover { text-decoration: underline; }
.ws-msg--client .ws-msg-location-link { color: #1d4ed8; }

/* ── MikroTik Queue view ────────────────────────────────────────────────────── */
.mk-filter-select { padding: 6px 10px; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: .83rem; background: #fff; cursor: pointer; }
.mk-queue-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.07); margin-bottom: 10px; padding: 14px 16px; border-left: 4px solid #e2e8f0; }
.mk-qc-pending  { border-left-color: #f59e0b; }
.mk-qc-done     { border-left-color: #16a34a; }
.mk-qc-failed   { border-left-color: #dc2626; }
.mk-qc-cancelled{ border-left-color: #94a3b8; }
.mk-qc-executing{ border-left-color: #3b82f6; }
.mk-card-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.mk-op-label { font-weight: 700; font-size: .88rem; color: #1e293b; }
.mk-card-meta { font-size: .76rem; color: #64748b; }
.mk-badge-status { font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; }
.mk-s-pending   { background: #fef3c7; color: #92400e; }
.mk-s-executing { background: #dbeafe; color: #1e40af; }
.mk-s-done      { background: #dcfce7; color: #14532d; }
.mk-s-failed    { background: #fee2e2; color: #991b1b; }
.mk-s-cancelled { background: #f1f5f9; color: #475569; }
.mk-dry-run { margin-top: 10px; background: #f8fafc; border-radius: 8px; padding: 8px 10px; font-size: .76rem; line-height: 1.7; border: 1px solid #e2e8f0; }
.mk-dry-kv { display: block; }
.mk-op-result { margin-top: 8px; font-size: .78rem; color: #334155; background: #f0fdf4; border-radius: 7px; padding: 7px 10px; }
.mk-op-result--fail { background: #fef2f2; color: #991b1b; }
.mk-card-actions { display: flex; gap: 10px; margin-top: 12px; }
.mk-execute-btn { background: #16a34a; color: #fff; border: none; border-radius: 8px; padding: 7px 16px; font-size: .82rem; font-weight: 700; cursor: pointer; transition: background .15s; }
.mk-execute-btn:hover { background: #15803d; }
.mk-cancel-btn  { background: #f1f5f9; color: #475569; border: 1.5px solid #cbd5e1; border-radius: 8px; padding: 7px 14px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.mk-cancel-btn:hover { background: #e2e8f0; }
/* Config form */
.mk-config-grid { display: grid; grid-template-columns: 160px 1fr; gap: 10px 14px; align-items: center; }
.mk-label { font-size: .83rem; font-weight: 600; color: #475569; }
.mk-input { padding: 7px 11px; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: .85rem; width: 100%; box-sizing: border-box; }
.mk-input:focus { outline: none; border-color: #3b82f6; }
.mk-toggle-label { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: #334155; cursor: pointer; }
.mk-test-result { margin-top: 14px; padding: 9px 14px; border-radius: 8px; font-size: .83rem; font-weight: 600; }
.mk-test-ok   { background: #dcfce7; color: #14532d; }
.mk-test-fail { background: #fee2e2; color: #991b1b; }
/* nav badge */
.mk-badge { display: inline-flex; align-items: center; justify-content: center; background: #f59e0b; color: #fff; border-radius: 99px; font-size: .65rem; font-weight: 800; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 5px; vertical-align: middle; }

/* ── SKILL-05 Fase 2: Tickets / Órdenes técnicas ──────────────────────────── */

/* Layout 2 columnas */
.tk-layout { display: flex; gap: 0; height: calc(100vh - 120px); min-height: 500px; overflow: hidden; }
.tk-list-col { width: 340px; min-width: 280px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid #e2e8f0; background: #f8fafc; }
.tk-detail-col { flex: 1; overflow-y: auto; background: #fff; padding: 0; }

/* Filters header */
.tk-list-header { padding: 10px 10px 8px; border-bottom: 1px solid #e2e8f0; background: #fff; }
.tk-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tk-filter-sel { padding: 5px 8px; border: 1.5px solid #e2e8f0; border-radius: 7px; font-size: .78rem; background: #fff; }
.tk-view-toggle { display: flex; gap: 4px; padding: 8px 10px 6px; border-bottom: 1px solid #e2e8f0; }
.tk-view-tab { padding: 4px 14px; border: 1.5px solid #e2e8f0; border-radius: 6px; font-size: .78rem; background: #fff; cursor: pointer; color: #64748b; font-weight: 500; }
.tk-view-tab.active { border-color: #3b82f6; background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.tk-date-filters { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding: 6px 10px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.tk-date-pill { padding: 3px 10px; border: 1.5px solid #e2e8f0; border-radius: 20px; font-size: .75rem; background: #fff; cursor: pointer; color: #475569; white-space: nowrap; }
.tk-date-pill.active { border-color: #3b82f6; background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.tk-date-sep { color: #94a3b8; font-size: .85rem; }
.tk-cl-pppoe { font-size: .72rem; color: #64748b; background: #f1f5f9; border-radius: 4px; padding: 1px 5px; margin-left: 3px; }
.btn-primary:disabled, .btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; }
.tk-charge-pay-form { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; margin-top: 6px; }
.tk-dash-section { border-bottom: 1px solid #f1f5f9; }
.tk-dash-hdr { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #f8fafc; font-size: .8rem; font-weight: 600; color: #475569; border-bottom: 1px solid #e2e8f0; }
.tk-dash-count { background: #e2e8f0; color: #64748b; border-radius: 10px; padding: 1px 7px; font-size: .75rem; font-weight: 700; }
.tk-dash-count--has { background: #3b82f6; color: #fff; }
.tk-dash-item { padding: 9px 12px; border-bottom: 1px solid #f1f5f9; cursor: pointer; font-size: .82rem; }
.tk-dash-item:hover { background: #f1f5f9; }
.tk-dash-item-meta { display: flex; gap: 8px; align-items: center; margin-top: 3px; font-size: .77rem; color: #64748b; }
.tk-dash-empty { padding: 8px 12px; color: #94a3b8; font-size: .8rem; }
.tk-hist-list { padding: 8px 12px; }
.tk-hist-item { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f1f5f9; }
.tk-hist-item:last-child { border-bottom: none; }
.tk-hist-icon { font-size: 1rem; padding-top: 1px; min-width: 20px; text-align: center; }
.tk-hist-body { flex: 1; min-width: 0; }
.tk-hist-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tk-hist-label { font-size: .82rem; font-weight: 600; color: #1e293b; }
.tk-hist-ts { font-size: .72rem; color: #94a3b8; white-space: nowrap; }
.tk-hist-detail { font-size: .79rem; color: #475569; margin-top: 2px; }
.tk-hist-by { font-size: .72rem; color: #94a3b8; margin-top: 2px; }

/* List body */
.tk-list-body { flex: 1; overflow-y: auto; }
.tk-empty { padding: 16px; color: #94a3b8; font-size: .84rem; }
.tk-list-item { padding: 11px 12px; border-bottom: 1px solid #f1f5f9; cursor: pointer; transition: background .12s; }
.tk-list-item:hover { background: #f1f5f9; }
.tk-list-item--active { background: #eff6ff !important; border-right: 3px solid #3b82f6; }
.tk-list-item--closed { opacity: .65; }
.tk-li-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.tk-li-icon { font-size: 1rem; flex-shrink: 0; }
.tk-li-title { font-weight: 600; font-size: .84rem; color: #1e293b; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-li-status { font-size: .68rem; font-weight: 700; color: #fff; border-radius: 99px; padding: 2px 8px; flex-shrink: 0; }
.tk-li-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .72rem; color: #64748b; align-items: center; }

/* Detail panel */
.tk-detail-empty { display: flex; align-items: center; justify-content: center; height: 300px; color: #94a3b8; font-size: .9rem; }
.tk-detail-body { padding: 0 0 40px; }
.tk-detail-head { padding: 16px 18px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.tk-head-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.tk-head-icon { font-size: 1.6rem; flex-shrink: 0; margin-top: 2px; }
.tk-head-main { flex: 1; min-width: 0; }
.tk-head-title { font-size: 1.02rem; font-weight: 700; color: #1e293b; margin-bottom: 4px; }
.tk-head-ids { display: flex; gap: 8px; flex-wrap: wrap; }
.tk-id-badge { font-size: .68rem; font-weight: 700; background: #e2e8f0; color: #475569; border-radius: 6px; padding: 2px 8px; }
.tk-id-client { background: #dbeafe; color: #1d4ed8; }
.tk-head-status { font-size: .78rem; font-weight: 700; color: #fff; border-radius: 99px; padding: 4px 12px; flex-shrink: 0; align-self: flex-start; }
.tk-head-client { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; color: #475569; margin-bottom: 8px; padding: 8px 0; border-bottom: 1px solid #e2e8f0; }
.tk-head-client b { color: #1e293b; font-size: .84rem; }
.tk-head-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .76rem; color: #64748b; }

/* Detail tabs */
.tk-detail-tabs { display: flex; gap: 0; border-bottom: 2px solid #e2e8f0; background: #fff; padding: 0 12px; }
.tk-dtab { background: none; border: none; border-bottom: 2.5px solid transparent; padding: 10px 14px; font-size: .82rem; font-weight: 600; color: #64748b; cursor: pointer; margin-bottom: -2px; transition: color .15s, border-color .15s; }
.tk-dtab:hover { color: #1e293b; }
.tk-dtab.active { color: #2563eb; border-bottom-color: #2563eb; }
.tk-dtab-panel { padding: 16px 18px; }

/* Info sections */
.tk-info-grid { display: flex; flex-direction: column; gap: 16px; }
.tk-info-section { background: #f8fafc; border-radius: 10px; padding: 12px 14px; }
.tk-info-label { font-size: .74rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.tk-info-val { font-size: .86rem; color: #1e293b; line-height: 1.5; }
.tk-info-meta { font-size: .75rem; color: #64748b; margin-top: 4px; }
.tk-info-actions { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; }

/* Cita card */
.tk-cita-card { background: #eff6ff; border: 1.5px solid #bfdbfe; border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: .84rem; }
.tk-badge-ss { font-size: .7rem; font-weight: 700; color: #fff; border-radius: 99px; padding: 2px 10px; display: inline-block; }
.tk-rs-error { margin-top: 8px; padding: 8px 12px; background: #fee2e2; color: #991b1b; border-radius: 7px; font-size: .8rem; }

/* Provisioning grid */
.tk-prov-grid { display: grid; grid-template-columns: 110px 1fr; gap: 4px 10px; font-size: .8rem; margin: 6px 0; }
.tk-prov-grid span:nth-child(odd) { color: #64748b; font-weight: 600; }

/* Charges */
.tk-charge-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.tk-charge-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tk-charge-type { font-weight: 700; font-size: .82rem; color: #1e293b; text-transform: capitalize; }
.tk-charge-amounts { display: flex; gap: 12px; font-size: .78rem; color: #475569; flex-wrap: wrap; }
.tk-bill-flag { font-size: .7rem; background: #fef3c7; color: #92400e; border-radius: 6px; padding: 2px 8px; font-weight: 700; }

/* Vencidas */
.tk-vencida-badge { font-size: .62rem; font-weight: 800; background: #ef4444; color: #fff; border-radius: 5px; padding: 1px 6px; letter-spacing: .04em; flex-shrink: 0; }
.tk-list-item--vencida { background: #fff5f5; }
.tk-list-item--vencida:hover { background: #fee2e2; }
.tk-dash-section--urgent { background: #fff5f5; }
.tk-dash-hdr--urgent { background: #fee2e2; color: #991b1b; border-bottom-color: #fca5a5; }
.tk-dash-count--urgent { background: #ef4444 !important; color: #fff !important; }
.tk-dash-item--vencida { background: #fff5f5; }
.tk-dash-item--vencida:hover { background: #fee2e2; }
.tk-vencidas-count { font-size: .64rem; font-weight: 800; background: #ef4444; color: #fff; border-radius: 99px; padding: 1px 7px; min-width: 18px; text-align: center; margin-left: 2px; align-self: center; }

/* RouterOS provisioning notice */
.tk-prov-routeros-notice { background: #eff6ff; border: 1.5px solid #93c5fd; border-radius: 8px; padding: 8px 12px; font-size: .78rem; color: #1d4ed8; margin-bottom: 8px; line-height: 1.5; }
.tk-prov-routeros-notice--ok { background: #f0fdf4; border-color: #86efac; color: #15803d; }

/* Ticket post-creation message panel */
.tk-msg-panel { padding: 16px 20px; border-top: 1px solid #e2e8f0; }
.tk-msg-success { font-weight: 700; color: #16a34a; font-size: .95rem; margin-bottom: 10px; }
.tk-msg-label { font-size: .75rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.tk-msg-box { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 12px 14px; font-size: .85rem; line-height: 1.55; color: #1e293b; white-space: pre-wrap; margin-bottom: 10px; }
.tk-msg-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tk-msg-copy-btn { font-size: .8rem; }
.btn-wa-open {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 16px; border-radius: 10px;
  background: #25d366; color: #fff; font-weight: 700; font-size: .82rem;
  text-decoration: none; cursor: pointer; transition: background .15s;
  border: none; white-space: nowrap;
}
.btn-wa-open:hover { background: #1ebe5d; }
.btn-wa-open.hidden { display: none; }

/* New ticket modal */
.tk-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1100; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.tk-modal { background: #fff; border-radius: 14px; width: 100%; max-width: 640px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.tk-modal-hdr { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e2e8f0; }
.tk-modal-title { font-weight: 700; font-size: 1rem; color: #1e293b; }
.tk-modal-body { padding: 18px 20px; max-height: 65vh; overflow-y: auto; }
.tk-section-label { font-size: .78rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .05em; display: block; padding: 10px 0 6px; border-top: 1px solid #e2e8f0; margin-top: 4px; }
.tk-client-results { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 8px; margin-top: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.1); max-height: 180px; overflow-y: auto; }
.tk-client-opt { padding: 8px 12px; cursor: pointer; font-size: .82rem; display: flex; gap: 8px; align-items: center; }
.tk-client-opt:hover { background: #f1f5f9; }
.tk-cl-plan { color: #64748b; font-size: .74rem; margin-left: auto; }
.tk-client-selected { font-size: .78rem; color: #1d4ed8; background: #dbeafe; border-radius: 6px; padding: 4px 10px; margin-top: 4px; }

/* Client modal install section */
.cm-install-section { border-top: 1px solid #e2e8f0; margin-top: 14px; padding-top: 12px; }
.cm-install-label { font-size: .74rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.cm-install-fields { background: #f8fafc; border-radius: 10px; padding: 10px 12px; border: 1px solid #e2e8f0; }

/* Responsive: collapse detail to bottom on small screens */
@media (max-width: 700px) {
  .tk-layout { flex-direction: column; height: auto; }
  .tk-list-col { width: 100%; min-width: 0; border-right: none; border-bottom: 1px solid #e2e8f0; max-height: 300px; }
}

/* ── WhatsApp Workspace UI improvements ────────────────────────────────────── */

/* F1: Botón Aceptar rediseñado */
.ws-conv-accept {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 5px 11px;
  font-size: .73rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .1s;
  letter-spacing: .02em;
  box-shadow: 0 2px 6px rgba(37,99,235,.35);
}
.ws-conv-accept:hover { background: #1d4ed8; transform: scale(1.04); }
.ws-conv-accept:active { transform: scale(.97); }

/* F2: Badge de mensajes entrantes */
.ws-conv-badge--inbound {
  background: #16a34a;
  color: #fff;
  border-radius: 99px;
  font-size: .68rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
.ws-conv-badge--dot {
  background: #3b82f6;
  color: #fff;
  border-radius: 99px;
  font-size: .55rem;
  min-width: 10px;
  height: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* F3: Foto de perfil */
.ws-conv-avatar--img {
  padding: 0;
  overflow: hidden;
  background: #e2e8f0;
}
.ws-conv-avatar--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Assigned label inline */
.ws-conv-assigned {
  font-size: .68rem;
  color: #00a884;
  margin-right: 4px;
}

/* F4: Mini botones de acción rápida */
.ws-conv-actions {
  display: none;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  gap: 3px;
  align-items: center;
  background: rgba(248,250,252,.95);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 3px 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
  z-index: 10;
}
.ws-conv-item { position: relative; }
.ws-conv-item:hover .ws-conv-actions { display: flex; }
.ws-conv-item:hover .ws-conv-right { opacity: 0; pointer-events: none; }
.ws-ca-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .82rem;
  padding: 3px 5px;
  border-radius: 5px;
  color: #475569;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background .12s;
  line-height: 1;
}
.ws-ca-btn:hover { background: #e2e8f0; }
.ws-ca-wa { color: #25d366; }
.ws-ca-wa:hover { background: #dcfce7; }

/* F5: Preview popover */
.ws-preview-popover {
  position: absolute;
  z-index: 9999;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  width: 280px;
  max-height: 320px;
  overflow-y: auto;
  padding: 10px;
}
.ws-preview-title {
  font-size: .72rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f1f5f9;
}
.ws-preview-loading,
.ws-preview-empty { font-size: .8rem; color: #94a3b8; padding: 8px 4px; text-align: center; }
.ws-preview-msg { display: flex; gap: 6px; align-items: flex-end; margin-bottom: 6px; }
.ws-preview-msg--in  { flex-direction: row; }
.ws-preview-msg--out { flex-direction: row-reverse; }
.ws-preview-bubble {
  font-size: .76rem;
  line-height: 1.4;
  padding: 5px 9px;
  border-radius: 10px;
  max-width: 85%;
  word-break: break-word;
}
.ws-preview-msg--in  .ws-preview-bubble { background: #f1f5f9; color: #1e293b; border-bottom-left-radius: 3px; }
.ws-preview-msg--out .ws-preview-bubble { background: #dcfce7; color: #14532d; border-bottom-right-radius: 3px; }
.ws-preview-time { font-size: .62rem; color: #94a3b8; flex-shrink: 0; }

/* ── SKILL-10: Inventory ────────────────────────────────────────────────── */
.inv-items-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin-top: 14px;
}
.inv-item-card {
  background: #fff; border-radius: 12px; border: 1px solid #e2e8f0;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow .15s;
}
.inv-item-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.inv-item-card--low { border-color: #fca5a5; background: #fff5f5; }
.inv-item-header { display: flex; align-items: center; gap: 10px; }
.inv-item-icon { font-size: 1.3rem; flex-shrink: 0; }
.inv-item-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inv-item-name { font-weight: 700; color: #1e293b; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-item-sku { font-size: .7rem; color: #94a3b8; font-family: monospace; }
.inv-item-actions { display: flex; flex-direction: row; gap: 4px; flex-shrink: 0; }
.inv-item-stats {
  display: flex; gap: 16px; flex-wrap: nowrap;
  padding-top: 8px; border-top: 1px solid #f1f5f9;
}
.inv-stat { display: flex; flex-direction: column; align-items: flex-start; }
.inv-stat-val { font-weight: 700; color: #1e293b; font-size: .95rem; }
.inv-stat-val.inv-stat-low { color: #dc2626; }
.inv-stat-label { font-size: .7rem; color: #94a3b8; margin-top: 1px; }
.inv-low-alert {
  font-size: .74rem; font-weight: 600; color: #dc2626;
  background: #fee2e2; border-radius: 6px; padding: 4px 8px;
}

/* ── SKILL-10: C360 Servicios adicionales ───────────────────────────────── */
.c360-svc-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
}
.c360-svc-row:last-child { border-bottom: none; }
.c360-svc-icon { font-size: 1.3rem; flex-shrink: 0; }
.c360-svc-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.c360-svc-name { font-weight: 700; color: #1e293b; font-size: .88rem; }
.c360-svc-cat { font-size: .73rem; color: #64748b; }
.c360-svc-notes { font-size: .73rem; color: #94a3b8; font-style: italic; }
.c360-svc-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.c360-svc-price { font-weight: 700; color: #0f1e32; font-size: .85rem; }
.c360-svc-section-label {
  font-size: .72rem; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .06em; padding: 8px 0 4px;
}
.badge-gray { background: #f1f5f9; color: #64748b; }
.btn-danger-light {
  height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid #fca5a5;
  background: #fff5f5; color: #dc2626; font-size: .72rem; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.btn-danger-light:hover { background: #fee2e2; }

/* Metadata streaming en form */
.c360-service-meta {
  margin-top: 12px; padding: 12px 14px; background: #f8fafc;
  border-radius: 10px; border: 1px solid #e2e8f0;
}
.c360-svc-meta-label {
  font-size: .72rem; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px;
}

/* Chips de metadata en lista de servicios */
.svc-meta-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.svc-meta-chip {
  font-size: .72rem; color: #1d4ed8; background: #dbeafe;
  border-radius: 5px; padding: 2px 7px; white-space: nowrap;
}

/* ── WaTplPicker: modal compartido de envío WA individual ─────────────── */
.wa-picker-overlay {
  position: fixed; inset: 0; z-index: 8500;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.wa-picker-overlay.hidden { display: none; }
.wa-picker-modal {
  background: #fff; border-radius: 14px;
  width: 100%; max-width: 520px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden;
}
.wa-picker-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px 18px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}
.wa-picker-title { font-size: .95rem; font-weight: 700; color: #0f172a; }
.wa-picker-phone { font-size: .78rem; color: #64748b; margin-top: 2px; }
.wa-picker-close {
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; color: #64748b; padding: 2px 6px; border-radius: 6px;
  line-height: 1;
}
.wa-picker-close:hover { background: #f1f5f9; color: #0f172a; }
.wa-picker-body { padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.wa-picker-evo-warn {
  font-size: .8rem; background: #fef9c3; color: #854d0e;
  border: 1px solid #fde68a; border-radius: 7px;
  padding: 8px 12px; margin-top: 8px;
}
.wa-picker-evo-warn.hidden { display: none; }
.wa-picker-actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap;
}
.wa-picker-status {
  margin-top: 12px; padding: 10px 14px;
  border-radius: 8px; font-size: .85rem; font-weight: 600; text-align: center;
}
.wa-picker-status.hidden { display: none; }
.wa-picker-status--ok  { background: #dcfce7; color: #15803d; }
.wa-picker-status--sim { background: #f1f5f9; color: #475569; }
.wa-picker-status--err { background: #fee2e2; color: #dc2626; }

/* Catálogo de servicios (SKILL-10) */
.panel-card .subtitle { margin: 3px 0 0; color: #64748b; font-size: 0.85rem; }