/* ══════════════════════════════════════════════════════
   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; }

html, body { height: 100%; }

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  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;
  height: 100dvh;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════
   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;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 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: clamp(10px,1.4vh,22px) clamp(14px,1.7vw,28px) clamp(8px,1vh,18px);
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

/* Topbar */
.topbar {
  display: flex; justify-content: space-between;
  align-items: center; gap: 12px;
  margin-bottom: clamp(10px,1.2vh,22px);
  padding-bottom: clamp(8px,1vh,18px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}

#user-modal-backdrop .modal,
#user-pw-modal-backdrop .modal {
  background: #ffffff;
  color: #0f1e32;
}
#user-modal-backdrop .modal-body,
#user-pw-modal-backdrop .modal-body {
  background: #ffffff;
}
#user-modal-backdrop .modal-field label,
#user-pw-modal-backdrop .modal-field label,
#user-modal-backdrop p {
  color: #334155 !important;
}
#user-modal-backdrop .modal-field input,
#user-modal-backdrop .modal-field select,
#user-pw-modal-backdrop .modal-field input {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}
#user-modal-backdrop .modal-field input::placeholder,
#user-pw-modal-backdrop .modal-field input::placeholder {
  color: #94a3b8;
}
#user-modal-backdrop .perm-check {
  color: #1e293b !important;
  font-weight: 600;
}
#user-modal-backdrop .perm-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  accent-color: #2563eb;
}
#user-modal-backdrop #um-perms-grid {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
}
#user-modal-backdrop #um-photo-section input[type="file"] {
  color: #334155;
}
.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,
.modal-actions .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,
.modal-actions .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;
}

.schedule-next-btn {
  flex: 0 0 54px;
  min-width: 54px;
  width: 54px;
  padding: 8px 0 !important;
  border-color: #2563eb !important;
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(37,99,235,.18);
}
.schedule-next-btn:hover:not(:disabled) {
  background: #bfdbfe !important;
  border-color: #1d4ed8 !important;
  color: #1e40af !important;
}
.schedule-next-btn:disabled {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #64748b !important;
  opacity: .8;
}

.content {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Dashboard: sin scroll exterior — workspace llena el resto */
#view-dashboard {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
#view-dashboard .metrics-bar  { flex-shrink: 0; }
#view-dashboard .op-cards-row { flex-shrink: 0; }
#view-dashboard .carousel-section { flex-shrink: 0; }
#view-dashboard .workspace { flex: 1; min-height: 0; height: auto; }

#view-clients {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

#view-clients .search-panel {
  flex-shrink: 0;
}

.clients-results-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
}

.clients-results-card .panel-card__header {
  flex-shrink: 0;
  margin-bottom: 8px;
}

.client-results-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}

.clients-results-card .pagination-bar {
  flex-shrink: 0;
  margin-top: auto;
}

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

.metrics-bar { display: flex; flex-wrap: wrap; gap: clamp(4px,0.4vw,7px); margin-bottom: clamp(8px,1vh,20px); }

.metric-pill {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px; padding: clamp(5px,0.6vh,7px) clamp(10px,0.9vw,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)
   ══════════════════════════════════════════════════════ */

/* ── Tarjetas dinámicas — cuadrícula ────────────────────────────────────── */
.op-cards-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: clamp(4px,0.5vh,10px);
}
@media (min-width: 1800px) {
  .op-cards-row { grid-template-columns: repeat(10, 1fr); }
}

/* ── Dash-card: ícono dominante en esquina superior derecha ──────────────── */
.dash-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(135deg, #111c2e 0%, #0c1422 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-bottom: 2px solid var(--card-color, #3b82f6);
  border-radius: 12px;
  padding: clamp(10px,1vh,14px) clamp(10px,0.9vw,14px) clamp(8px,0.8vh,12px);
  cursor: pointer;
  min-height: 90px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.15s ease;
  position: relative;
  overflow: hidden;
}
/* glow ambiental del color de la tarjeta, esquina inferior izquierda */
.dash-card::before {
  content: '';
  position: absolute;
  bottom: -15px;
  left: -15px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--card-color, #3b82f6);
  opacity: 0.12;
  filter: blur(22px);
  pointer-events: none;
}
.dash-card:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, #16243d 0%, #101c31 100%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.55), 0 0 0 1px var(--card-color, #3b82f6);
}

/* ícono: prominente, fijo en esquina superior izquierda */
.dash-card__icon {
  position: absolute;
  top: clamp(8px,0.8vh,12px);
  left: clamp(8px,0.7vw,12px);
  width: clamp(46px, 3.8vw, 58px);
  height: clamp(46px, 3.8vw, 58px);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.45rem, 1.9vw, 2rem);
  background: var(--card-color, #3b82f6);
  box-shadow: 0 4px 18px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.18);
  z-index: 2;
}
.dash-card__icon--avatar { overflow: hidden; padding: 0; }
.dash-card__icon--avatar .dash-emp-initials { font-size: clamp(1rem,1.3vw,1.3rem); font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.dash-card__icon--avatar .dash-emp-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.dash-card__sublabel { font-size: clamp(0.58rem,0.62vw,0.68rem); opacity: .65; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }

/* body: desplazado a la derecha para no pisar el ícono */
.dash-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: clamp(50px, 4.2vw, 66px);
  flex: 1;
  min-width: 0;
}
.dash-card__label {
  font-size: clamp(0.60rem, 0.65vw, 0.70rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.50);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}
/* número: intencionalmente más pequeño que el ícono */
.dash-card__count {
  font-size: clamp(1.1rem, 1.4vw, 1.55rem);
  font-weight: 800;
  color: #e2e8f0;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.dash-card__compare {
  font-size: clamp(0.58rem, 0.60vw, 0.64rem);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.dash-card__compare--up.dash-card__compare--bad    { color: #f87171; }
.dash-card__compare--up.dash-card__compare--good   { color: #4ade80; }
.dash-card__compare--down.dash-card__compare--good { color: #4ade80; }
.dash-card__compare--down.dash-card__compare--bad  { color: #f87171; }
.dash-card__compare--neutral  { color: rgba(255,255,255,0.28); }
.dash-card__compare--building { color: rgba(255,255,255,0.20); font-style: italic; }
.dash-card__chevron { display: none; } /* espacio lo ocupa el ícono */
.dash-card.active {
  background: linear-gradient(135deg, #1b2e50 0%, #111e38 100%);
  box-shadow: 0 0 0 2px var(--card-color, #3b82f6), 0 10px 30px rgba(0,0,0,0.45);
}

/* ── Auditoría financiera ──────────────────────────────────────────────────── */
/* ── Auditoría financiera (fa-*) ────────────────────────────────────────── */
.fa-header { margin-bottom: clamp(12px,1.4vh,20px); }
.fa-title  { margin:0; font-size:1rem; font-weight:800; color:#e2e8f0; }
.fa-period { margin:2px 0 0; font-size:0.75rem; color:rgba(255,255,255,0.4); }

.fa-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.fa-kpi {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 18px 20px;
  border-top: 3px solid transparent;
}
.fa-kpi--green { border-top-color: #22c55e; }
.fa-kpi--red   { border-top-color: #ef4444; }
.fa-kpi--blue  { border-top-color: #6366f1; }
.fa-kpi__label { font-size:0.68rem; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.fa-kpi__value { font-size:1.6rem; font-weight:900; color:#e2e8f0; letter-spacing:-0.03em; line-height:1; }
.fa-kpi__sub   { font-size:0.68rem; color:#64748b; margin-top:4px; }

.fa-section-title {
  font-size:0.72rem; font-weight:700; color:#64748b; text-transform:uppercase;
  letter-spacing:.06em; margin: 8px 0 12px;
}

.fa-cartera-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.fa-cartera-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 16px;
}
.fa-cartera-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  text-transform: capitalize;
  margin-bottom: 10px;
}
.fa-cartera-collected { font-size:1.3rem; font-weight:900; color:#22c55e; letter-spacing:-0.02em; }
.fa-cartera-meta      { font-size:0.72rem; color:#94a3b8; margin:2px 0 8px; }
.fa-cartera-debt      { font-size:0.78rem; color:#f59e0b; font-weight:600; }
.fa-cartera-own       { font-size:0.72rem; color:#94a3b8; margin-top:4px; }
.fa-cartera-cross     { font-size:0.72rem; color:#ef4444; margin-top:2px; }

.fa-cut-row {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
}
.fa-cut-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
}
.fa-cut-header:hover { background: rgba(255,255,255,0.04); }
.fa-cut-header strong { font-size:0.88rem; color:#e2e8f0; font-weight:700; }
.fa-cut-header span   { font-size:0.72rem; color:#64748b; margin-left:8px; }
.fa-cut-total         { text-align:right; }
.fa-cut-total strong  { font-size:1rem; color:#22c55e; font-weight:800; display:block; }
.fa-cut-total small   { font-size:0.70rem; color:#64748b; }
.fa-cut-chevron       { font-size:0.7rem; color:#64748b; margin-left:10px; transition:transform .2s; }
.fa-cut-row.open .fa-cut-chevron { transform: rotate(180deg); }
.fa-cut-detail        { display:none; padding:0 18px 16px; }
.fa-cut-row.open .fa-cut-detail { display:block; }
.fa-cut-meta          { font-size:0.70rem; color:#475569; margin-top:10px; }

/* ── Bottom panel (Cortes recientes ↔ Detalle ejecutiva) ─────────────────── */
.fa-bottom-panel { margin-top: 24px; }
.fa-bottom-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.fa-bottom-tab {
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 0.80rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.10);
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.fa-bottom-tab:hover { background: rgba(255,255,255,0.04); color:#94a3b8; }
.fa-bottom-tab--active { background: rgba(14,165,233,0.12); color: #0ea5e9; border-color: rgba(14,165,233,0.30); }
.fa-kpi--yellow { border-top-color: #f59e0b; }
.fa-kpi-row--4  { grid-template-columns: repeat(4, 1fr); }
.fa-exec-inline-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fa-exec-period { font-size:0.72rem; color:#64748b; }
.fa-exec-section-title {
  font-size:0.65rem; font-weight:700; color:#475569;
  text-transform:uppercase; letter-spacing:.06em;
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.fa-history-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.8rem;
}
.fa-history-row:last-child { border-bottom: none; }
.fa-history-period { color:#94a3b8; }
.fa-history-amount { font-weight:700; color:#22c55e; }
.fa-history-meta   { font-size:0.68rem; color:#475569; }

.fa-debtor-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.8rem;
}
.fa-debtor-row:last-child { border-bottom: none; }
.fa-debtor-name   { color:#e2e8f0; font-weight:500; }
.fa-debtor-status { font-size:0.65rem; padding:2px 7px; border-radius:10px; margin-left:6px; font-weight:600; }
.fa-debtor-status--Moroso     { background:#7f1d1d; color:#fca5a5; }
.fa-debtor-status--Suspendido { background:#431407; color:#fdba74; }
.fa-debtor-status--Activo     { background:#14532d; color:#86efac; }
.fa-debtor-amount { font-weight:700; color:#f59e0b; white-space:nowrap; margin-left:8px; }

.fa-cross-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.78rem;
}
.fa-cross-row:last-child { border-bottom: none; }
.fa-cross-client { color:#94a3b8; }
.fa-cross-exec   { font-size:0.65rem; color:#64748b; }
.fa-cross-amount { font-weight:700; color:#f43f5e; white-space:nowrap; margin-left:8px; }
.fa-cross-amount--in { color:#0ea5e9; }
.fa-empty        { font-size:0.75rem; color:#475569; padding:6px 0; }

/* legacy fin-* kept for backward compat */
.fin-header { margin-bottom: clamp(12px,1.4vh,20px); flex-shrink: 0; }
.fin-title  { margin:0; font-size:1rem; font-weight:800; color:#e2e8f0; }
.fin-subtitle { font-size:0.75rem; color:rgba(255,255,255,0.35); }

/* Legacy op-card kept for "Ver todas" only — hidden in dashboard */
.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: clamp(10px,1vh,17px) clamp(10px,0.9vw,16px) clamp(8px,0.8vh,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: clamp(1.4rem,2vw,2.1rem); font-weight: 900;
  margin: 4px 0 5px; line-height: 1; letter-spacing: -0.04em;
}
.op-card__count--valoracion {
  font-size: clamp(1.1rem,1.6vw,1.6rem);
}

/* 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--infra-pending { border-top-color: #0ea5e9; }
.op-card--infra-pending .op-card__count { color: #0284c7; }
.op-card--infra-pending .op-card__label { color: #0369a1; }
.op-card--infra-pending:hover { box-shadow: 0 10px 30px rgba(14,165,233,0.18); }

.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--valoracion { border-top-color: #f59e0b; }
.op-card--valoracion .op-card__label { color: #92400e; }
.op-card--valoracion:hover { box-shadow: 0 10px 30px rgba(245,158,11,0.20); }

.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; margin-bottom: clamp(6px,0.8vh,18px); }
.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-body    { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; }
.cc-avatar  {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  color: #1d4ed8; font-size: 0.9rem; font-weight: 900;
  border: 2px solid #ffffff; box-shadow: 0 5px 16px rgba(15, 23, 42, 0.16);
}
.cc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-main    { min-width: 0; }
.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: clamp(12px,1.2vh,20px) clamp(14px,1.3vw,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-small:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.btn-csv {
  background: linear-gradient(135deg, #0d6e3b, #0a5a30);
  color: #fff;
  border-color: #0d6e3b;
}
.btn-csv:hover { background: linear-gradient(135deg, #0f8048, #0d6e3b); }

.pagination-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-size: .85rem;
  color: var(--text-secondary);
}
.pagination-bar #clients-page-info { flex: 1; text-align: center; }

/* Birthday cards — integrate into unified dashboard grid */
.dash-bday-card { display:flex; align-items:center; gap:10px; }
.bday-avatar {
  width:42px; height:42px; border-radius:50%;
  background:var(--card-color,#ec4899);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; color:#fff; flex-shrink:0;
  overflow:hidden;
}

.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--small { background: #e2e8f0; color: #475569; }
.badge--success { background: #dcfce7; color: #166534; }
.badge--danger { background: #fee2e2; color: #991b1b; }
.badge--warning { background: #fef3c7; color: #92400e; }
.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: minmax(0, 1fr) minmax(360px, auto);
  gap: 14px 18px;
  align-items: start;
  margin-bottom: 4px;
}
.c360-header-main { display: flex; gap: 14px; align-items: center; min-width: 0; }

.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);
  overflow: hidden;
}
.c360-avatar--img { background: #e5edf7; cursor: zoom-in; }
.c360-avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }

/* Photo lightbox overlay */
.photo-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.82);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
  animation: _lbFadeIn 0.15s ease;
}
@keyframes _lbFadeIn { from { opacity:0; } to { opacity:1; } }
.photo-lightbox img {
  max-width: min(88vw, 520px);
  max-height: 80vh;
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7);
  object-fit: contain;
  cursor: default;
  display: block;
}

.c360-identity { min-width: 0; }
.c360-identity h2 { margin: 0 0 4px; font-size: 1.08rem; color: #0f1e32; letter-spacing: 0; overflow-wrap: anywhere; }
.c360-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; }
.c360-meta { margin: 0; font-size: 0.78rem; color: #64748b; overflow-wrap: anywhere; line-height: 1.35; }
.c360-header-stats { display: flex; gap: 12px 16px; align-items: flex-start; justify-content: flex-end; flex-wrap: wrap; min-width: 0; max-width: 720px; }
.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-status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  width: max-content; max-width: 180px; padding: 4px 9px;
  border-radius: 999px; font-size: 0.76rem !important; font-weight: 800;
  line-height: 1.15; white-space: nowrap;
}
.c360-status-icon { font-size: .82rem; line-height: 1; }
.c360-status-badge--active { color: #15803d !important; background: #dcfce7; }
.c360-status-badge--moroso { color: #b45309 !important; background: #fef3c7; }
.c360-status-badge--suspended { color: #b91c1c !important; background: #fee2e2; }
.c360-status-badge--pending { color: #6d28d9 !important; background: #ede9fe; }
.c360-status-badge--retired { color: #0369a1 !important; background: #e0f2fe; }
.c360-status-badge--inactive { color: #475569 !important; background: #e2e8f0; }
.c360-status-badge--unknown { color: #475569 !important; background: #f1f5f9; }
.c360-stat-item--conn { min-width: 118px; }
.c360-conn-status {
  display: inline-flex; align-items: center; gap: 6px;
  width: max-content; max-width: 190px; padding: 4px 9px;
  border-radius: 999px; font-size: 0.76rem !important; font-weight: 800;
  line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c360-conn-status::before {
  content: ''; width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto;
}
.c360-conn-status--online { color: #15803d !important; background: #dcfce7; }
.c360-conn-status--online::before { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.16); }
.c360-conn-status--offline { color: #c2410c !important; background: #ffedd5; }
.c360-conn-status--offline::before { background: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,0.16); }
.c360-conn-status--suspended { color: #b91c1c !important; background: #fee2e2; }
.c360-conn-status--suspended::before { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.16); }
.c360-conn-status--unknown,
.c360-conn-status--loading { color: #475569 !important; background: #e2e8f0; }
.c360-conn-status--unknown::before,
.c360-conn-status--loading::before { background: #94a3b8; }
.c360-conn-status--missing { color: #991b1b !important; background: #fee2e2; }
.c360-conn-status--missing::before { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.16); }
.c360-header-actions { grid-column: 1 / -1; display: flex; gap: 8px; align-items: flex-start; justify-content: flex-end; flex-wrap: wrap; min-width: 0; }

/* Diagnostico rapido - INLINE dentro de la misma fila de botones del
   encabezado de Cliente 360 (Mis asignados / Registrar pago / ...),
   pegado a la izquierda de esa fila. Iconos compactos por tipo de causa
   (no solo color), con el detalle completo en el title (tooltip). */
.c360-diag-inline { display: flex; align-items: center; gap: 6px; margin-right: auto; border-radius: 999px; }
.c360-diag-inline.hidden { display: none; }
.c360-diag-inline--pulse { animation: c360-diag-inline-pulse 0.7s ease-out; }
@keyframes c360-diag-inline-pulse {
  0%   { background: rgba(37, 99, 235, 0.16); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); }
  100% { background: transparent; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0); }
}
.c360-diag-mini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
}
.c360-diag-mini.hidden { display: none; }
.c360-diag-mini--critical { background: #fee2e2; color: #b91c1c; }
.c360-diag-mini--warning  { background: #ffedd5; color: #c2410c; }
.c360-diag-mini--healthy  { background: #dcfce7; color: #15803d; }
.c360-diag-mini--unknown  { background: #e2e8f0; color: #94a3b8; }
.c360-diag-mini svg { width: 17px; height: 17px; }
.c360-diag-mini .bar { fill: currentColor; opacity: .28; }
.c360-diag-mini .bar--on { opacity: 1; }
.c360-diag-mini-val { font-size: 0.76rem; font-weight: 700; color: #475569; white-space: nowrap; }
.c360-diag-mini-val.hidden { display: none; }
.c360-diag-mini-time { font-size: 0.7rem; font-weight: 500; color: #94a3b8; white-space: nowrap; }
.c360-diag-mini-time.hidden { display: none; }
.c360-diag-mini-bar { display: inline-block; width: 46px; height: 5px; border-radius: 99px; background: rgba(0,0,0,0.08); overflow: hidden; }
.c360-diag-mini-bar.hidden { display: none; }
.c360-diag-mini-bar-fill { display: block; height: 100%; border-radius: 99px; }
.c360-diag-mini-bar-fill--critical { background: #ef4444; }
.c360-diag-mini-bar-fill--warning  { background: #f59e0b; }
.c360-diag-mini-bar-fill--healthy  { background: #22c55e; }
.c360-diag-mini-bar-fill--unknown  { background: #94a3b8; }
.c360-diag-mini-pct { font-size: 0.74rem; font-weight: 800; white-space: nowrap; }
.c360-diag-mini-pct.hidden { display: none; }
.c360-diag-mini-pct--critical { color: #b91c1c; }
.c360-diag-mini-pct--warning  { color: #c2410c; }
.c360-diag-mini-pct--healthy  { color: #15803d; }
.c360-diag-mini-pct--unknown  { color: #94a3b8; }
.c360-diag-refresh-btn {
  width: 22px; height: 22px; border-radius: 999px; border: 1px solid #e2e8f0;
  background: #f8fafc; color: #64748b; font-size: 13px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; transition: background .15s, transform .2s;
}
.c360-diag-refresh-btn:hover { background: #e2e8f0; color: #334155; }
.c360-diag-refresh-btn:disabled { opacity: .5; cursor: default; }
.c360-diag-refresh-btn--spinning { animation: c360-diag-refresh-spin .8s linear infinite; }
@keyframes c360-diag-refresh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.c360-prov-refresh-btn {
  width: 26px; height: 26px; border-radius: 999px; border: 1px solid #e2e8f0;
  background: #f8fafc; color: #64748b; font-size: 15px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; transition: background .15s, transform .2s;
}
.c360-prov-refresh-btn:hover { background: #e2e8f0; color: #334155; }
.c360-prov-refresh-btn:disabled { opacity: .5; cursor: default; }

.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-row--paid { background: linear-gradient(90deg, rgba(22,163,74,.06), transparent 45%); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.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-history { padding: 8px 0 18px; border-bottom: 1px solid #dbe5f2; margin-bottom: 6px; }
.c360-pay-history-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.c360-pay-history-head strong { color: #0f1e32; font-size: .88rem; }
.c360-pay-history-head span { color: #64748b; font-size: .74rem; }
.c360-pay-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.c360-pay-summary-card {
  display: flex; align-items: center; gap: 11px; min-height: 58px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px; background: #f8fafc; min-width: 0;
  box-shadow: 0 8px 20px rgba(15, 30, 50, .055);
}
.c360-pay-summary-card strong { display: block; color: #0f1e32; font-size: 1.02rem; line-height: 1.15; overflow-wrap: anywhere; }
.c360-pay-summary-card small { display: block; color: #475569; font-size: .70rem; line-height: 1.2; margin-top: 3px; font-weight: 700; }
.c360-pay-summary-icon {
  width: 32px; height: 32px; border-radius: 999px; display: inline-grid; place-items: center;
  flex-shrink: 0; font-size: .82rem; font-weight: 900; background: #e2e8f0; color: #475569;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75);
}
.c360-pay-summary-card--active { background: #e9fbef; border-color: #86efac; }
.c360-pay-summary-card--active .c360-pay-summary-icon { background: #16a34a; color: #fff; }
.c360-pay-summary-card--moroso { background: #fff4d6; border-color: #facc15; }
.c360-pay-summary-card--moroso .c360-pay-summary-icon { background: #f59e0b; color: #fff; }
.c360-pay-summary-card--suspended { background: #ffe7e7; border-color: #fca5a5; }
.c360-pay-summary-card--suspended .c360-pay-summary-icon { background: #ef4444; color: #fff; }
.c360-pay-summary-card--retired { background: #e6f5ff; border-color: #7dd3fc; }
.c360-pay-summary-card--retired .c360-pay-summary-icon { background: #0284c7; color: #fff; }
.c360-pay-summary-card--portfolio { background: #eef4ff; border-color: #93c5fd; }
.c360-pay-summary-card--portfolio .c360-pay-summary-icon { background: #2563eb; color: #fff; }
.c360-pay-summary-card--total { background: #e8fff3; border-color: #6ee7b7; }
.c360-pay-summary-card--total .c360-pay-summary-icon { background: #059669; color: #fff; }
.c360-pay-summary-card--advance { background: #f5f0ff; border-color: #c4b5fd; }
.c360-pay-summary-card--advance .c360-pay-summary-icon { background: #7c3aed; color: #fff; }

.c360-pay-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: start;
  margin-top: 10px; padding: 14px 12px; border: 1px solid #dbe5f2; border-radius: 8px;
  background: #fff; box-shadow: 0 10px 26px rgba(15, 30, 50, .06);
}
.c360-pay-row:last-child { border-bottom: none; }
.c360-pay-icon { width: 38px; height: 38px; border-radius: 50%; background: #dbeafe; color: #2563eb; display: grid; place-items: center; font-size: 0.82rem; font-weight: 900; box-shadow: 0 6px 14px rgba(37,99,235,.14); }
.c360-pay-main { min-width: 0; }
.c360-pay-title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.c360-pay-title > strong { font-size: 0.87rem; color: #0f1e32; }
.c360-pay-ref { font-size: .70rem; color: #475569; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 999px; padding: 3px 9px; max-width: 100%; overflow-wrap: anywhere; }
.c360-pay-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); gap: 10px 14px; align-items: stretch; }
.c360-pay-meta-grid > div { min-width: 0; }
.c360-pay-meta-grid span:first-child {
  display: block; color: #64748b; font-size: .66rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px;
}
.c360-pay-meta-grid strong { display: block; font-size: .78rem; color: #0f1e32; overflow-wrap: anywhere; }
.c360-pay-meta-grid small { display: block; color: #64748b; font-size: .70rem; line-height: 1.25; margin-top: 2px; overflow-wrap: anywhere; }
.c360-pay-warning { color: #b45309 !important; font-weight: 700; }
.c360-pay-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  border-radius: 999px; padding: 5px 10px; font-size: .74rem; font-weight: 900;
  line-height: 1.2; border: 1px solid transparent; overflow-wrap: anywhere;
}
.c360-pay-chip > span { display: inline-block !important; margin: 0 !important; color: inherit !important; font-size: .72rem !important; font-weight: 900 !important; text-transform: none !important; letter-spacing: 0 !important; }
.c360-pay-chip--active { color: #047857; background: #bbf7d0; border-color: #86efac; }
.c360-pay-chip--moroso { color: #a16207; background: #fde68a; border-color: #facc15; }
.c360-pay-chip--suspended { color: #b91c1c; background: #fecaca; border-color: #fca5a5; }
.c360-pay-chip--retired { color: #075985; background: #bae6fd; border-color: #7dd3fc; }
.c360-pay-chip--inactive,
.c360-pay-chip--unknown { color: #475569; background: #e2e8f0; border-color: #cbd5e1; }
.c360-pay-chip--class { color: #1d4ed8; background: #bfdbfe; border-color: #93c5fd; }
.c360-pay-chip--invoice-paid { color: #047857; background: #bbf7d0; border-color: #86efac; }
.c360-pay-chip--invoice-overdue { color: #b91c1c; background: #fecaca; border-color: #fca5a5; }
.c360-pay-chip--invoice-pending { color: #a16207; background: #fde68a; border-color: #facc15; }
.c360-pay-chip--invoice-void,
.c360-pay-chip--invoice-neutral { color: #475569; background: #f1f5f9; border-color: #e2e8f0; }
.c360-pay-chip--invoice-advance { color: #7c3aed; background: #f5f0ff; border-color: #c4b5fd; }
.c360-pay-notes { margin: 8px 0 0; font-size: .76rem; color: #64748b; overflow-wrap: anywhere; }
.c360-pay-advance-note { color: #6d28d9; font-weight: 700; }
.c360-pay-amount { font-weight: 900; font-size: 1.02rem; color: #16a34a; white-space: nowrap; letter-spacing: -0.01em; padding-top: 4px; }
.c360-pay-print-btn { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px; padding: 4px 9px; font-size: 1.05rem; cursor: pointer; color: #2563eb; opacity: 1; transition: background .15s, border-color .15s, box-shadow .15s; margin-top: 4px; flex-shrink: 0; }
.c360-pay-print-btn:hover { background: #dbeafe; border-color: #93c5fd; box-shadow: 0 2px 6px rgba(37,99,235,.18); }

.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; }

.c360-prov-summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 9px 0 12px; color: #64748b; font-size: 0.82rem;
}
.c360-prov-summary strong {
  display: inline-flex; align-items: center; min-height: 24px; padding: 3px 9px;
  border-radius: 999px; background: var(--surface-raised); color: #0f1e32;
  font-size: 0.78rem; border: 1px solid var(--border);
}
.c360-prov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
.c360-prov-card {
  border: 1px solid var(--border); border-radius: 8px; padding: 12px;
  background: var(--surface); min-width: 0;
}
.c360-prov-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.c360-prov-card-head strong { display: block; color: #0f1e32; font-size: 0.92rem; }
.c360-prov-card-head small { display: block; color: #64748b; font-size: 0.74rem; margin-top: 2px; }
.c360-prov-status {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 4px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 800;
}
.c360-prov-dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
.c360-prov-status--online { color: #15803d; background: #dcfce7; }
.c360-prov-status--offline { color: #c2410c; background: #ffedd5; }
.c360-prov-status--suspended { color: #b91c1c; background: #fee2e2; }
.c360-prov-status--unknown { color: #475569; background: #e2e8f0; }
.c360-prov-status--missing { color: #991b1b; background: #fee2e2; }
.c360-prov-detail { margin: 0 0 10px; color: #475569; font-size: 0.82rem; }

/* Grupos por dominio (Cuenta y plan / Red PPPoE / Fibra optica) - reemplaza
   la grilla plana de 13 campos con el mismo peso visual. */
.c360-prov-groups { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.c360-prov-group { border: 1px solid var(--border); border-radius: 8px; background: var(--surface-raised); overflow: hidden; }
.c360-prov-group-head {
  display: flex; align-items: center; gap: 7px; padding: 7px 10px;
  font-size: 0.66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #64748b; border-bottom: 1px solid var(--border);
}
.c360-prov-group-swatch { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.c360-prov-group-body {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px; padding: 9px 10px 11px;
}
.c360-prov-field { min-width: 0; }
.c360-prov-field--full { grid-column: 1 / -1; }
.c360-prov-field .k { display: block; color: #94a3b8; font-size: 0.66rem; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; margin-bottom: 2px; }
.c360-prov-field .v {
  display: block; color: #0f1e32; font-size: 0.8rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c360-prov-field .v.mono { font-family: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.c360-prov-field .v.copyable {
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  border-radius: 5px; margin: -2px -5px; padding: 2px 5px; max-width: 100%;
}
.c360-prov-field .v.copyable:hover { background: rgba(37, 99, 235, 0.08); color: #1d4ed8; }
.c360-prov-field .v.copyable .copy-ic { opacity: 0; font-size: 0.68rem; flex-shrink: 0; }
.c360-prov-field .v.copyable:hover .copy-ic { opacity: .7; }
.c360-prov-empty { display: inline-block; font-size: 0.76rem; font-style: italic; font-weight: 500; color: #94a3b8; }

.c360-prov-signal-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.c360-prov-signal-value { font-size: 0.84rem; font-weight: 800; white-space: nowrap; }
.c360-prov-signal-badge { font-size: 0.64rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.c360-prov-signal-badge--good { background: #dcfce7; color: #15803d; }
.c360-prov-signal-badge--warn { background: #ffedd5; color: #c2410c; }
.c360-prov-signal-badge--bad { background: #fee2e2; color: #b91c1c; }
.c360-prov-signal-badge--unknown { background: #e2e8f0; color: #475569; }
/* Barra de relleno, no de zonas fijas: el color siempre sale de la misma
   clasificacion textual que ya trae SmartOLT (c360ProvSignalClass), nunca
   de un umbral de dBm inventado - así nunca puede contradecir al badge. */
.c360-prov-gauge { position: relative; flex: 1; height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; }
.c360-prov-gauge-fill { height: 100%; border-radius: 99px; }
.c360-prov-gauge-fill--good { background: #22c55e; }
.c360-prov-gauge-fill--warn { background: #f59e0b; }
.c360-prov-gauge-fill--bad { background: #ef4444; }
.c360-prov-gauge-fill--unknown { background: #94a3b8; }

.c360-prov-history-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.c360-prov-history-body { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 260px; overflow-y: auto; }
.c360-prov-history-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 9px; border-radius: 8px; font-size: 0.78rem; border: 1px solid transparent;
}
.c360-prov-history-dates { font-family: ui-monospace, monospace; white-space: nowrap; opacity: .85; }
.c360-prov-history-cause { font-weight: 700; white-space: nowrap; }
.c360-prov-history-row--critical { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.c360-prov-history-row--warning  { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.c360-prov-history-row--ok       { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.c360-prov-history-row--unknown  { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }

@media (max-width: 700px) {
  .c360-header { grid-template-columns: 1fr; }
  .c360-header-stats { justify-content: flex-start; flex-wrap: wrap; gap: 10px; }
  .c360-header-actions { justify-content: flex-start; flex-wrap: wrap; }
  .c360-form-row { grid-template-columns: 1fr; }
  .c360-note-form { grid-template-columns: 1fr; }
  .c360-prov-grid { grid-template-columns: 1fr; }
  .c360-prov-group-body { 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(360px, calc(100vh - 460px), 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: clamp(6px,0.7vh,18px);
  transition: border-radius 0.2s;
}
.workspace--fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 900 !important;
  height: 100vh !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.ws-fullscreen-btn { margin-top: 4px; }
.ws-fullscreen-btn svg { display: block; }

/* ── 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-filter-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eef2ff;
  color: #334155;
  font-size: .92rem;
  flex-shrink: 0;
}
.ws-filter-btn:hover { background: #dbeafe; color: #1d4ed8; }
.ws-filter-pop {
  position: absolute;
  top: 58px;
  left: 12px;
  right: 12px;
  z-index: 40;
  display: grid;
  gap: 8px;
  padding: 10px;
  background: #fff;
  border: 1px solid #dbe3ea;
  border-radius: 8px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .16);
}
.ws-filter-pop.hidden { display: none; }
.ws-filter-pop label {
  display: grid;
  gap: 4px;
  color: #475569;
  font-size: .72rem;
  font-weight: 700;
}
.ws-filter-pop select,
.ws-filter-pop input {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid #dbe3ea;
  border-radius: 6px;
  padding: 0 8px;
  font: inherit;
  font-size: .78rem;
  color: #0f172a;
}
.ws-filter-check {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 7px !important;
  font-weight: 600 !important;
}
.ws-filter-check input { width: 14px; height: 14px; }
.ws-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}
.ws-filter-actions button {
  border-radius: 6px;
  padding: 7px 11px;
  font-size: .74rem;
  font-weight: 700;
}
.ws-filter-actions button:last-child { background: #2563eb; color: #fff; }

.ws-list-header { position: relative; }
.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-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 99px;
  background: #e2e8f0;
  color: #475569;
  font-size: .64rem;
  font-weight: 700;
  line-height: 1;
}
.ws-list-tab.active .ws-tab-count {
  background: #00a884;
  color: #fff;
}
.ws-tab-count.is-empty {
  opacity: .38;
}

.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: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 2px;
}
.ws-cr-btn {
  width: 100%; min-width: 0; padding: 8px 5px; border: 1px solid #e2e8f0;
  border-radius: 8px; background: #fff; color: #374151;
  font: inherit; font-size: 0.74rem; font-weight: 700;
  cursor: pointer; text-align: center; white-space: nowrap;
  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-release-btn {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  border-radius: 7px !important;
  font-weight: 800 !important;
}
.ws-release-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}
.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 (doodle icons) */
.ws-messages {
  flex: 1; overflow-y: auto; padding: 14px 18px;
  display: flex; flex-direction: column; gap: 3px;
  background-color: #efeae2;
  background-image: url('wa-bg.svg');
  background-size: 560px 560px;
  background-repeat: repeat;
}

.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; }
.ws-system-event {
  align-self: center;
  max-width: min(84%, 620px);
  margin: 8px auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: #64748b;
  font-size: .72rem;
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.ws-system-event small {
  margin-left: 8px;
  color: #94a3b8;
  white-space: nowrap;
}
.ws-msg-video-wrap,
.ws-msg-image-wrap {
  display: grid;
  gap: 6px;
}
.ws-msg-video {
  width: min(280px, 62vw);
  max-height: 260px;
  border-radius: 8px;
  display: block;
  background: #111b21;
}
.ws-msg-caption {
  font-size: 0.82rem;
  line-height: 1.45;
}
.ws-msg-file {
  min-width: 220px;
  max-width: 320px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 9px;
  border-radius: 8px;
  background: rgba(17, 27, 33, 0.06);
}
.ws-msg-file-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(0, 168, 132, 0.14);
}
.ws-msg-file-body {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.ws-msg-file-body strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111b21;
}
.ws-msg-file-body a {
  color: #008069;
  font-weight: 700;
  font-size: 0.78rem;
}

/* 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;
  flex-wrap: wrap;
}
.ws-clip-preview {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #dbe4ea;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.ws-clip-thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
  background: #f1f5f9;
}
.ws-clip-meta {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.ws-clip-meta strong {
  font-size: 0.82rem;
  color: #111b21;
}
.ws-clip-meta span {
  font-size: 0.74rem;
  color: #667781;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-clip-remove {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: #eef2f6;
  color: #334155;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.ws-clip-remove:hover {
  background: #fee2e2;
  color: #b91c1c;
}
.ws-msg-input {
  flex: 1; padding: 10px 16px; border-radius: 22px;
  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);
  min-height: 42px;
  max-height: 126px;
  line-height: 1.35;
  resize: none;
  overflow-y: auto;
}
.ws-msg-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,168,132,0.30);
}
.ws-compose-expand-btn {
  width: 38px;
  height: 38px;
  border: 1px solid #dbe4ea;
  border-radius: 50%;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transition: var(--t);
}
.ws-compose-expand-btn:hover {
  background: #e8f8f4;
  border-color: #9adfcf;
  color: #007a63;
  transform: translateY(-1px);
}
.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--delivered { background: #d9fdd3; color: #15803d; }
.ws-send-badge--read  { background: #dbeafe; color: #1d4ed8; }
.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-composer .ws-tpl-wrap { display: none; }
.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: 260px; max-width: 340px; max-height: min(520px, 62vh);
  overflow-y: auto;
}
.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-pagos       { background: #dcfce7; color: #166534; }
.ws-cfg-cat-recordatorio { background: #fef9c3; color: #713f12; }
.ws-cfg-cat-bienvenida  { background: #d9fdd3; color: #15803d; }
.ws-cfg-cat-general     { background: #ede9fe; color: #5b21b6; }

.ws-compose-modal {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}
.ws-compose-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 18, 32, 0.54);
  backdrop-filter: blur(2px);
}
.ws-compose-modal__panel {
  position: relative;
  width: min(760px, 100%);
  max-height: min(720px, 88vh);
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
  display: grid;
  grid-template-rows: auto minmax(280px, 1fr) auto;
  overflow: hidden;
}
.ws-compose-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}
.ws-compose-modal__head strong {
  display: block;
  color: #0f172a;
  font-size: 0.98rem;
}
.ws-compose-modal__head span {
  display: block;
  color: #64748b;
  font-size: 0.78rem;
  margin-top: 2px;
}
.ws-compose-modal__close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #eef2f7;
  color: #334155;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}
.ws-compose-modal__close:hover {
  background: #fee2e2;
  color: #b91c1c;
}
.ws-compose-modal__textarea {
  width: 100%;
  min-height: 360px;
  resize: none;
  border: 0;
  padding: 18px;
  color: #111b21;
  font: inherit;
  font-size: 0.96rem;
  line-height: 1.55;
  outline: none;
  white-space: pre-wrap;
}
.ws-compose-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid #e5e7eb;
  background: #f8fafc;
}

/* ── 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; justify-content: flex-end;
}

/* 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;
}
.modal {
  background: #ffffff;
  border-radius: 18px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  color: #0f1e32;
  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);
}

.cm-cedula-current {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #eff6ff;
}
.cm-cedula-current__link {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #1d4ed8;
  font-weight: 700;
  font-size: 0.78rem;
  text-decoration: none;
}
.cm-cedula-current__link img {
  width: 72px;
  height: 46px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid #bfdbfe;
  background: #fff;
}
.cm-cedula-current__badge {
  display: inline-flex;
  margin-right: 8px;
  padding: 4px 7px;
  border-radius: 7px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 800;
}

.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; }
.qp-badge--blocked { background: #ffebee; color: #c62828; }

/* ── 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); }

#view-infrastructure {
  display: flex;
  flex-direction: column;
}
#view-infrastructure.hidden { display: none; }
.infra-locator-card { order: 1; }
.infra-map-card { order: 2; }
.infra-new-point-card { order: 3; }
#infra-points-card { order: 4; }
.infra-locator-card,
.infra-map-card,
.infra-new-point-card { margin-bottom: 14px; }
.infra-map-head-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.infra-map-summary { color: #64748b; font-size: 0.78rem; font-weight: 700; }
.infra-map-fullscreen-btn {
  height: 32px;
  padding: 0 12px;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}
.infra-map-action-btn {
  height: 32px;
  padding: 0 12px;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}
.infra-map-action-btn.is-active {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}
.infra-map-legend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #475569;
  font-size: 0.76rem;
  font-weight: 800;
}
.infra-dot {
  width: 9px;
  height: 9px;
  display: inline-block;
  border-radius: 999px;
}
.infra-dot--terminal { background: #dc2626; }
.infra-dot--manga { background: #2563eb; }
.infra-dot--mobile { background: #16a34a; }
.infra-locator {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.infra-locator__input { margin: 0; }
.infra-locator__button {
  min-width: 150px;
  height: 38px;
  white-space: nowrap;
}
.infra-nearby-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.infra-nearby-empty {
  grid-column: 1 / -1;
  color: #64748b;
  font-size: 0.84rem;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.infra-nearby-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 58px;
  padding: 9px;
  border: 1px solid #fed7aa;
  background: #fff7ed;
  border-radius: 8px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.infra-nearby-item:hover { border-color: #f97316; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08); }
.infra-nearby-item.is-full, .cm-infra-terminal.is-full, .c360-pay-row.is-full { border-color: #ef4444; background: #fef2f2; }
.infra-nearby-rank {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f97316;
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
}
.infra-nearby-item strong {
  display: block;
  color: #0f1e32;
  font-size: 0.82rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.infra-nearby-item span {
  display: block;
  color: #64748b;
  font-size: 0.72rem;
  line-height: 1.25;
  margin-top: 2px;
}

.infra-audit-modal.hidden { display: none; }
.infra-audit-modal { position: fixed; inset: 0; z-index: 10000; }
.infra-audit-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); }
.infra-audit-modal__panel { position: relative; width: min(1120px, calc(100vw - 32px)); max-height: calc(100vh - 48px); margin: 24px auto; background: #fff; border-radius: 8px; box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24); overflow: auto; }
.infra-audit-modal__body { padding: 16px; }
.infra-audit-header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.infra-audit-header h3 { margin: 0; color: #0f172a; font-size: 1rem; }
.infra-audit-header p { margin: 4px 0 0; color: #64748b; font-size: 0.82rem; }
.infra-audit-warning, .infra-audit-note { border-radius: 8px; padding: 9px 10px; margin-bottom: 10px; font-size: 0.82rem; font-weight: 700; }
.infra-audit-warning { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.infra-audit-note { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; }
.infra-audit-table-wrap { overflow-x: auto; }
.infra-audit-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.infra-audit-table th, .infra-audit-table td { border-bottom: 1px solid #e2e8f0; padding: 9px 8px; vertical-align: top; text-align: left; }
.infra-audit-table th { color: #475569; background: #f8fafc; font-size: 0.72rem; text-transform: uppercase; }
.infra-audit-table td span, .infra-audit-muted { display: block; color: #64748b; font-size: 0.72rem; margin-top: 2px; }
.infra-audit-table tr.is-free td { color: #166534; background: #f0fdf4; }
.infra-audit-badge { display: inline-flex; padding: 2px 7px; border-radius: 999px; font-weight: 800; background: #e2e8f0; color: #334155; }
.infra-audit-badge--ok { background: #dcfce7; color: #166534; }
.infra-audit-badge--notice { background: #dbeafe; color: #1d4ed8; }
.infra-audit-badge--warning { background: #fef3c7; color: #92400e; }
.infra-audit-badge--blocked { background: #fee2e2; color: #991b1b; }
.infra-audit-badge--reusable { background: #ede9fe; color: #5b21b6; }
.cm-infra-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.cm-infra-search-row .btn-secondary {
  height: 38px;
  white-space: nowrap;
}
.cm-infra-box {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  border-radius: 8px;
  padding: 10px;
}
.cm-infra-box__header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.cm-infra-box__header strong {
  color: #0f1e32;
  font-size: 0.82rem;
}
.cm-infra-box__header span {
  color: #64748b;
  font-size: 0.72rem;
  text-align: right;
}
.cm-infra-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.cm-infra-empty {
  grid-column: 1 / -1;
  color: #64748b;
  font-size: 0.82rem;
  padding: 8px 10px;
  border: 1px dashed #bfdbfe;
  border-radius: 8px;
  background: #fff;
}
.cm-infra-terminal {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  border-radius: 8px;
  padding: 8px;
  text-align: left;
  cursor: pointer;
  min-height: 68px;
}
.cm-infra-terminal--rank-1 {
  border-color: #86efac;
  background: #f0fdf4;
}
.cm-infra-terminal--rank-2 {
  border-color: #fde68a;
  background: #fffbeb;
}
.cm-infra-terminal--rank-3 {
  border-color: #fed7aa;
  background: #fff7ed;
}
.cm-infra-terminal--rank-4 {
  border-color: #fecaca;
  background: #fef2f2;
}
.cm-infra-terminal--rank-5 {
  border-color: #cbd5e1;
  background: #f8fafc;
}
.cm-infra-terminal.is-selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.16);
}
.cm-infra-terminal--rank-1.is-selected { background: #dcfce7; }
.cm-infra-terminal--rank-2.is-selected { background: #fef3c7; }
.cm-infra-terminal--rank-3.is-selected { background: #ffedd5; }
.cm-infra-terminal--rank-4.is-selected { background: #fee2e2; }
.cm-infra-terminal--rank-5.is-selected { background: #e2e8f0; }
.cm-infra-terminal strong {
  display: block;
  color: #0f1e32;
  font-size: 0.8rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-infra-terminal span {
  display: block;
  color: #64748b;
  font-size: 0.71rem;
  line-height: 1.25;
  margin-top: 3px;
}
.infra-map {
  width: 100%;
  height: min(42vh, 420px);
  min-height: 300px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  background: #f8fafc;
}
body.infra-map-fullscreen-active {
  overflow: hidden;
}
.infra-map-card.is-fullscreen {
  position: fixed;
  inset: 10px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.36);
}
.infra-map-card.is-fullscreen .panel-card__header {
  flex: 0 0 auto;
}
.infra-map-card.is-fullscreen .infra-map {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}
.infra-map-card.is-fullscreen .infra-map-fullscreen-btn {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}
.infra-map-empty {
  margin-top: 10px;
  color: #64748b;
  font-size: 0.84rem;
}
.infra-map-pick-hint {
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 0.82rem;
  font-weight: 700;
}
.infra-map-popup strong {
  color: #0f1e32;
  display: block;
  font-size: 0.9rem;
  margin-bottom: 2px;
}
.infra-map-popup span {
  color: #475569;
  display: block;
  font-size: 0.78rem;
  line-height: 1.35;
}
.infra-map-popup-action {
  margin-top: 8px;
  margin-right: 6px;
  height: 28px;
  font-size: 0.74rem;
}
.infra-delete-point-btn {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
}
.c360-infra-location-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}
.c360-infra-location-input { margin: 0; }
.c360-infra-map {
  width: 100%;
  height: min(34vh, 360px);
  min-height: 260px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background: #f8fafc;
  margin: 10px 0 14px;
}
#c360-panel-infraestructura.is-fullscreen {
  position: fixed;
  inset: 10px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: 10px;
  overflow: auto;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.36);
}
#c360-panel-infraestructura.is-fullscreen .panel-card__header,
#c360-panel-infraestructura.is-fullscreen .c360-infra-location-tools,
#c360-panel-infraestructura.is-fullscreen .c360-infra-suggestions,
#c360-panel-infraestructura.is-fullscreen .c360-infra-confirmations,
#c360-panel-infraestructura.is-fullscreen #c360-infra-current,
#c360-panel-infraestructura.is-fullscreen #c360-infra-nearby {
  flex: 0 0 auto;
}
#c360-panel-infraestructura.is-fullscreen .c360-infra-map {
  flex: 1 1 auto;
  height: 58vh;
  min-height: 360px;
}
#c360-panel-infraestructura.is-fullscreen .infra-map-fullscreen-btn {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}
#c360-panel-infraestructura.is-fullscreen .c360-infra-tech {
  display: none;
}
.c360-infra-tech {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px;
  gap: 12px;
  align-items: stretch;
  padding: 10px;
  margin: 6px 0 10px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
}
.c360-infra-tech__info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  color: #334155;
  font-size: 0.84rem;
}
.c360-infra-tech__info strong {
  color: #0f1e32;
  font-size: 0.9rem;
}
.c360-infra-tech__info span,
.c360-infra-tech__info a {
  overflow-wrap: anywhere;
}
.c360-infra-mini-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: #64748b;
  font-size: 0.76rem;
}
.c360-infra-mini-legend i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display: inline-block;
  border: 1px solid rgba(15, 23, 42, 0.18);
}
.c360-infra-tech__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  border: 1px solid #d6e2f0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  color: #64748b;
  font-weight: 800;
  text-align: center;
}
.c360-infra-tech__photo img {
  width: 100%;
  height: 100%;
  max-height: 130px;
  object-fit: contain;
}
.c360-infra-tech__photo--empty {
  padding: 10px;
}
.c360-infra-resolution {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px;
  margin: 6px 0 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font-size: 0.82rem;
}
.c360-infra-resolution strong {
  color: #0f1e32;
  font-size: 0.86rem;
}
.c360-infra-resolution span {
  color: #475569;
  line-height: 1.35;
}
.c360-infra-resolution .btn-small {
  margin-left: auto;
}
.c360-infra-resolution--match {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.c360-infra-resolution--match strong {
  color: #166534;
}
.c360-infra-resolution--create {
  border-color: #fed7aa;
  background: #fff7ed;
}
.c360-infra-resolution--create strong {
  color: #9a3412;
}
.c360-infra-suggestions {
  border: 1px solid #fed7aa;
  background: #fff7ed;
  border-radius: 8px;
  padding: 10px;
  margin: 0 0 12px;
}
.c360-infra-suggestions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.c360-infra-suggestions-head strong {
  color: #9a3412;
  font-size: 0.84rem;
}
.c360-infra-suggestions-head span {
  color: #c2410c;
  font-size: 0.74rem;
  font-weight: 700;
}
.c360-infra-confirmations {
  border: 1px solid #bae6fd;
  background: #f0f9ff;
  border-radius: 8px;
  padding: 10px;
  margin: 0 0 12px;
}
.c360-infra-confirmations-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.c360-infra-confirmations-head strong {
  color: #075985;
  font-size: 0.84rem;
}
.c360-infra-confirmations-head span {
  color: #0369a1;
  font-size: 0.74rem;
  font-weight: 700;
}
.c360-infra-confirmation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px minmax(220px, 280px);
  gap: 10px;
  align-items: stretch;
  background: #fff;
  border: 1px solid #dbeafe;
  border-radius: 7px;
  padding: 8px;
}
.c360-infra-confirmation + .c360-infra-confirmation { margin-top: 8px; }
.c360-infra-confirmation__main,
.c360-infra-confirmation__form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 0.78rem;
  color: #334155;
}
.c360-infra-confirmation__main strong {
  color: #0f1e32;
  font-size: 0.84rem;
}
.c360-infra-confirmation__main span,
.c360-infra-confirmation__main a {
  overflow-wrap: anywhere;
}
.c360-infra-confirmation__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 104px;
  border: 1px solid #d6e2f0;
  border-radius: 7px;
  background: #f8fafc;
  overflow: hidden;
}
.c360-infra-confirmation__photo img {
  width: 100%;
  height: 100%;
  max-height: 126px;
  object-fit: contain;
}
.c360-infra-confirmation__form label {
  margin: 0;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}
.c360-infra-confirmation__form select,
.c360-infra-confirmation__form input {
  width: 100%;
  min-height: 32px;
  border: 1px solid #d6e2f0;
  border-radius: 7px;
  padding: 6px 8px;
  color: #0f172a;
  background: #fff;
}
.c360-infra-confirmation__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 2px;
}
.c360-infra-confirm-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px minmax(220px, 280px);
  gap: 10px;
  align-items: stretch;
  margin: 8px 0 12px;
}
.c360-infra-confirm-inline__main,
.c360-infra-confirm-inline__form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 0.78rem;
}
.c360-infra-confirm-inline__main strong {
  color: #0f1e32;
  font-size: 0.84rem;
}
.c360-infra-confirm-inline__main span,
.c360-infra-confirm-inline__main a {
  overflow-wrap: anywhere;
}
.c360-infra-confirm-inline__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  border: 1px solid #d6e2f0;
  border-radius: 7px;
  background: #f8fafc;
  overflow: hidden;
}
.c360-infra-confirm-inline__photo img {
  width: 100%;
  height: 100%;
  max-height: 116px;
  object-fit: contain;
}
.c360-infra-confirm-inline__form label {
  margin: 0;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}
.c360-infra-confirm-inline__form input {
  width: 100%;
  min-height: 32px;
  border: 1px solid #d6e2f0;
  border-radius: 7px;
  padding: 6px 8px;
  color: #0f172a;
  background: #fff;
}
.c360-infra-confirm-inline__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 2px;
}
@media (max-width: 980px) {
  .c360-infra-confirmation,
  .c360-infra-confirm-inline,
  .c360-infra-tech {
    grid-template-columns: 1fr;
  }
  .c360-infra-confirmation__photo,
  .c360-infra-confirm-inline__photo,
  .c360-infra-tech__photo {
    min-height: 140px;
  }
}
.c360-infra-suggestion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  background: #fff;
  border: 1px solid #ffedd5;
  border-radius: 7px;
  padding: 8px;
}
.c360-infra-suggestion + .c360-infra-suggestion { margin-top: 8px; }
.c360-infra-suggestion strong {
  display: block;
  color: #0f1e32;
  font-size: 0.82rem;
}
.c360-infra-suggestion p {
  color: #334155;
  font-size: 0.78rem;
  line-height: 1.35;
  margin: 3px 0;
}
.c360-infra-suggestion span {
  color: #64748b;
  font-size: 0.72rem;
}
@media (max-width: 1100px) {
  .infra-nearby-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .infra-locator { grid-template-columns: 1fr; }
  .infra-locator__button { width: 100%; }
  .infra-nearby-list { grid-template-columns: 1fr; }
  .c360-infra-location-tools { grid-template-columns: 1fr; }
}

/* 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; }

/* Batch dispatch (Despacho WA) */
.batch-summary-strip {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 14px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
}
.batch-summary-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 90px; background: #fff; border: 1px solid #e2e8f0; border-radius: 7px;
  padding: 8px 12px;
}
.batch-summary-item--today { border-color: #6366f1; background: #eef2ff; }
.batch-summary-date { font-size: 0.72rem; color: #64748b; font-weight: 600; }
.batch-summary-count { font-size: 1.35rem; font-weight: 800; color: #0f1e32; }
.batch-summary-item--today .batch-summary-count { color: #4f46e5; }
.batch-summary-label { font-size: 0.68rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
.batch-dispatch-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0 14px; gap: 10px;
}
.batch-dispatch-footer { padding: 10px 0 0; text-align: right; }

/* 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; }

/* ── "Ver todas" link ─────────────────────────────────────────────────────── */

.ver-todas-bar {
  display: flex;
  justify-content: flex-end;
  margin: clamp(-4px,-0.3vh,0px) 0 clamp(4px,0.5vh,10px);
}

.ver-todas-link {
  background: none;
  border: none;
  color: rgba(255,255,255,0.38);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 5px;
  transition: color 0.15s ease;
}
.ver-todas-link:hover {
  color: #93c5fd;
  background: rgba(59,130,246,0.08);
}

/* ── Todas las tarjetas — sección completa ─────────────────────────────────── */

#view-all-cards {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.allcards-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(10px,1.2vh,18px);
  flex-shrink: 0;
}

.allcards-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.allcards-last-update {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.30);
}

/* Filtros */
.allcards-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: clamp(10px,1.2vh,18px);
  flex-shrink: 0;
}

.filter-pill {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: rgba(255,255,255,0.55);
  font-size: 0.76rem;
  font-weight: 500;
  padding: 5px 13px;
  cursor: pointer;
  transition: var(--t);
  white-space: nowrap;
}
.filter-pill:hover {
  background: rgba(255,255,255,0.12);
  color: #e2e8f0;
}
.filter-pill.active {
  background: rgba(59,130,246,0.22);
  border-color: rgba(59,130,246,0.45);
  color: #93c5fd;
  font-weight: 600;
}
.filter-sep {
  display: block;
  width: 1px;
  background: rgba(255,255,255,0.12);
  margin: 0 4px;
  align-self: stretch;
}

/* Área scrolleable */
.allcards-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.allcards-loading {
  text-align: center;
  color: rgba(255,255,255,0.30);
  padding: 30px;
  font-size: 0.84rem;
}

/* Bloques Visible / En cola */
.allcards-section {}
.allcards-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.allcards-section-count {
  font-size: 0.77rem;
  color: rgba(255,255,255,0.38);
}

/* Badges */
.allcards-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.allcards-badge--visible {
  background: rgba(34,197,94,0.15);
  border: 1px solid rgba(34,197,94,0.30);
  color: #86efac;
}
.allcards-badge--queue {
  background: rgba(245,158,11,0.14);
  border: 1px solid rgba(245,158,11,0.28);
  color: #fcd34d;
}

/* Cuadrícula responsive */
.allcards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(160px,13vw,210px), 1fr));
  gap: clamp(8px,0.7vw,14px);
}

.allcards-empty {
  color: rgba(255,255,255,0.30);
  font-size: 0.80rem;
  padding: 14px 0;
}

/* Tarjeta individual en "Todas las tarjetas" */
.allcard {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.09);
  border-top: 3px solid transparent;
  border-radius: var(--r-xl);
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.allcard--visible {
  cursor: pointer;
}
.allcard--visible:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.allcard--queued {
  opacity: 0.80;
  border-style: dashed;
  border-top-style: dashed;
  border-color: rgba(255,255,255,0.12);
}
.allcard--queued.allcard--clickable {
  cursor: pointer;
  opacity: 0.92;
}
.allcard--queued.allcard--clickable:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.allcard__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.allcard__pos {
  font-size: 0.66rem;
  font-weight: 700;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.04em;
}
.allcard__icon {
  font-size: 1rem;
}
.allcard__label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.allcard__value {
  font-size: clamp(1.2rem,1.8vw,1.8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 2px 0;
}
.allcard__value--queued {
  color: #94a3b8;
  font-size: 1.2rem;
}
.allcard__sub {
  font-size: 0.70rem;
  color: #64748b;
  margin-top: 1px;
}
.allcard__cat {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.25);
  margin-top: 2px;
}
.allcard__reason,
.allcard__condition {
  font-size: 0.69rem;
  color: #64748b;
  line-height: 1.45;
  margin-top: 3px;
}
.allcard__reason-label {
  color: rgba(255,255,255,0.22);
  font-weight: 600;
}
.allcard__action {
  margin-top: 8px;
  font-size: 0.73rem;
  font-weight: 600;
  color: #60a5fa;
}

/* inherit border-top colors from op-card--* variants */
.allcard.op-card--notif-c30    { border-top-color: #2563eb; }
.allcard.op-card--notif-c15    { border-top-color: #6366f1; }
.allcard.op-card--regular-c30  { border-top-color: #0d9488; }
.allcard.op-card--regular-c15  { border-top-color: #0284c7; }
.allcard.op-card--mis-dia      { border-top-color: #d97706; }
.allcard.op-card--suspendidos  { border-top-color: #a855f7; }
.allcard.op-card--acuerdos     { border-top-color: #ef4444; }
.allcard.op-card--mis-asignados { border-top-color: #8b5cf6; }
.allcard.op-card--infra-pending { border-top-color: #0ea5e9; }
.allcard.op-card--pendiente-inst { border-top-color: #22c55e; }
.allcard.op-card--prorrateadas { border-top-color: #f59e0b; }
.allcard.op-card--valoracion   { border-top-color: #f59e0b; }

/* colors for allcard__value (same hue as op-card) */
.allcard.op-card--notif-c30    .allcard__value { color: #2563eb; }
.allcard.op-card--notif-c15    .allcard__value { color: #4f46e5; }
.allcard.op-card--regular-c30  .allcard__value { color: #0d9488; }
.allcard.op-card--regular-c15  .allcard__value { color: #0284c7; }
.allcard.op-card--mis-dia      .allcard__value { color: #d97706; }
.allcard.op-card--suspendidos  .allcard__value { color: #9333ea; }
.allcard.op-card--acuerdos     .allcard__value { color: #dc2626; }
.allcard.op-card--mis-asignados .allcard__value { color: #7c3aed; }
.allcard.op-card--infra-pending .allcard__value { color: #0284c7; }
.allcard.op-card--pendiente-inst .allcard__value { color: #16a34a; }
.allcard.op-card--prorrateadas .allcard__value { color: #b45309; }
.allcard.op-card--valoracion   .allcard__value { color: #b45309; }

/* Vista completa de Valoraciones */
.ratings-page { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
.ratings-summary {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.ratings-summary__left  { display: flex; flex-direction: column; align-items: center; min-width: 90px; }
.ratings-summary__bars  { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 5px; }
.ratings-summary__right { display: flex; flex-direction: column; align-items: center; min-width: 80px; }

/* 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; }

.tk-colbata-warn {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #fff1f2, #fee2e2);
  border: 1px solid #fecaca; border-radius: 10px;
  padding: 9px 12px; margin: 6px 0 10px;
  font-size: .78rem; font-weight: 700; color: #991b1b;
}
.tk-colbata-warn.hidden { display: none; }

/* 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; }
.tk-manage-entry { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tk-manage-modal { max-width: 620px; overflow-x: hidden; }
.tk-manage-sub { color: #64748b; font-size: .78rem; margin-top: 2px; }
.tk-manage-choice { display: grid; gap: 6px; margin-bottom: 12px; }
.tk-manage-choice label { color: #334155; font-size: .78rem; font-weight: 700; }
.tk-manage-block { border: 1.5px solid #e2e8f0; border-radius: 10px; background: #f8fafc; padding: 12px; margin-bottom: 12px; overflow-x: hidden; }
.tk-man-preview { border: 1.5px solid #bfdbfe; border-radius: 10px; background: #eff6ff; padding: 12px; }
.tk-man-preview textarea { min-height: 128px; resize: vertical; background: #fff; }
.tk-gestion-grid,
.tk-history-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tk-gestion-section {
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  padding: 12px;
}
.tk-gestion-section-title {
  color: #334155;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.tk-client-order-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tk-client-order-item {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}
.tk-client-order-item--current {
  border-color: #93c5fd;
  background: #eff6ff;
}
.tk-client-order-top,
.tk-client-order-meta {
  display: flex;
  align-items: center;
  gap: 8px 14px;
  flex-wrap: wrap;
}
.tk-client-order-top {
  justify-content: space-between;
  color: #1e293b;
  font-size: .86rem;
}
.tk-client-order-status {
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: .7rem;
  font-weight: 800;
  padding: 2px 8px;
}
.tk-client-order-meta {
  color: #64748b;
  font-size: .76rem;
  margin-top: 5px;
}

/* 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; }

/* Banner destacado de solicitud de asignacion pendiente de envio al supervisor */
.tk-assign-banner {
  background: #eff6ff; border: 2px solid #3b82f6; border-radius: 10px;
  padding: 14px 16px; margin-bottom: 14px;
}
.tk-assign-banner.hidden { display: none; }
.tk-assign-banner-title { font-weight: 800; color: #1d4ed8; font-size: .95rem; margin-bottom: 6px; }
.tk-assign-banner-text { font-size: .82rem; color: #1e3a5f; margin: 0 0 12px; line-height: 1.5; }
.btn-assign-send {
  display: inline-flex; align-items: center; gap: 8px;
  background: #2563eb; color: #fff; font-weight: 700; font-size: .9rem;
  border: none; border-radius: 10px; padding: 10px 20px; cursor: pointer;
  box-shadow: 0 2px 6px rgba(37,99,235,.35);
}
.btn-assign-send:hover { background: #1d4ed8; }
.btn-assign-send:disabled { background: #93c5fd; cursor: not-allowed; box-shadow: none; }
.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); overflow-x: hidden; }
.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; overflow-x: hidden; }
.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; }

/* Compact client modal v2 */
.modal-card--wide { max-width: 720px; }
.cm-section-label {
  font-size: .68rem; font-weight: 700; color: #6366f1;
  text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 1.5px solid #e0e7ff; padding-bottom: 5px; margin-bottom: 10px;
}
@media (max-width: 640px) {
  .modal-card--wide { max-width: 100%; }
  .modal-grid { grid-template-columns: 1fr; }
  .modal-field--full { grid-column: 1; }
}

/* 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: 1px solid #1d4ed8;
  border-radius: 6px;
  min-width: 88px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: .75rem;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .1s, box-shadow .15s;
  letter-spacing: .01em;
  box-shadow: 0 3px 9px rgba(37,99,235,.38);
}
.ws-conv-accept:hover { background: #1d4ed8; box-shadow: 0 4px 12px rgba(29,78,216,.42); }
.ws-conv-accept:active { transform: translateY(1px); box-shadow: 0 2px 5px rgba(29,78,216,.34); }
.ws-conv-accept-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: rgba(255,255,255,.22);
  font-size: .72rem;
  line-height: 1;
}
/* 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,.96);
  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-actions--espera { right: 102px; }
.ws-conv-item { position: relative; }
.ws-conv-item:hover .ws-conv-actions { display: flex; }
.ws-conv-item:not(.ws-conv-item--espera):hover .ws-conv-right { opacity: 0; pointer-events: none; }
.ws-conv-item--espera:hover .ws-conv-right { opacity: 1; pointer-events: auto; }
.ws-conv-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 750;
  white-space: nowrap;
  letter-spacing: 0;
}
.ws-conv-state--waiting {
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}
.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; }
/* Whaticket-style conversation rows */
.ws-conv-item {
  position: relative;
  min-height: 70px;
  padding: 10px 12px;
  border-left: 4px solid transparent;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0;
  background: #fff;
  gap: 0;
}
.ws-conv-item:hover { background: #f8fafc; }
.ws-conv-item.active { background: #eef2f7; border-left-color: #00a884; }
.ws-conv-item--espera {
  padding-right: 72px;
  border-left-color: #9ca3af !important;
}
.ws-conv-mainline {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.ws-conv-body { min-width: 0; flex: 1; }
.ws-conv-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ws-conv-name-row .ws-conv-name { flex: 1; }
.ws-conv-preview-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-top: 4px;
}
.ws-conv-preview-row .ws-conv-preview { flex: 1; min-width: 0; }
.ws-conv-actions {
  position: static;
  display: inline-flex;
  transform: none;
  gap: 4px;
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  z-index: auto;
  flex-shrink: 0;
}
.ws-conv-actions--espera { right: auto; }
.ws-conv-item:hover .ws-conv-actions { display: inline-flex; }
.ws-conv-item:not(.ws-conv-item--espera):hover .ws-conv-right,
.ws-conv-item--espera:hover .ws-conv-right { opacity: 1; pointer-events: auto; }
.ws-ca-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  justify-content: center;
  border-radius: 999px;
  color: #64748b;
  background: transparent;
}
.ws-ca-btn:hover { background: #e2e8f0; color: #0f172a; }
.ws-conv-accept {
  position: absolute;
  right: 6px;
  top: 9px;
  bottom: 9px;
  width: 62px;
  min-width: 62px;
  padding: 6px 5px;
  flex-direction: column;
  gap: 4px;
  border-radius: 7px;
  background: #3457f5;
  border-color: #2446dd;
  box-shadow: 0 2px 8px rgba(52,87,245,.28);
  font-size: .72rem;
}
.ws-conv-accept:hover { background: #2446dd; box-shadow: 0 4px 12px rgba(36,70,221,.34); }
.ws-conv-accept-check {
  width: 19px;
  height: 19px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.9);
  background: transparent;
  font-size: .72rem;
}
.ws-conv-state { display: none; }
.ws-conv-badge { flex-shrink: 0; }
/* F5: Conversation preview modal */
.ws-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 1120;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 42px 16px;
  overflow-y: auto;
  background: rgba(15,23,42,.48);
}
.ws-preview-modal {
  width: min(680px, 100%);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden;
}
.ws-preview-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
}
.ws-preview-kicker {
  font-size: .68rem;
  font-weight: 800;
  color: #00a884;
  text-transform: uppercase;
}
.ws-preview-modal-title {
  margin-top: 2px;
  font-size: 1rem;
  font-weight: 800;
  color: #1e293b;
}
.ws-preview-modal-sub {
  margin-top: 2px;
  font-size: .76rem;
  color: #64748b;
}
.ws-preview-close {
  border: 0;
  background: #f1f5f9;
  color: #64748b;
  border-radius: 8px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}
.ws-preview-close:hover { background: #e2e8f0; color: #0f172a; }
.ws-preview-body {
  min-height: 220px;
  max-height: 62vh;
  overflow-y: auto;
  padding: 18px 20px;
  background: #efeae2;
}
.ws-preview-thread {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ws-preview-loading,
.ws-preview-empty {
  font-size: .84rem;
  color: #64748b;
  padding: 40px 12px;
  text-align: center;
}
.ws-preview-msg {
  display: flex;
  flex-direction: column;
  max-width: 76%;
}
.ws-preview-msg--in  { align-self: flex-start; }
.ws-preview-msg--out { align-self: flex-end; align-items: flex-end; }
.ws-preview-speaker {
  margin: 0 0 2px 4px;
  font-size: .67rem;
  font-weight: 800;
  color: #00a884;
}
.ws-preview-msg--out .ws-preview-speaker {
  margin-left: 0;
  margin-right: 4px;
  color: #2563eb;
}
.ws-preview-bubble {
  font-size: .82rem;
  line-height: 1.42;
  padding: 8px 11px;
  border-radius: 11px;
  word-break: break-word;
  box-shadow: 0 1px 2px rgba(15,23,42,.08);
}
.ws-preview-msg--in  .ws-preview-bubble {
  background: #fff;
  color: #1e293b;
  border-bottom-left-radius: 3px;
}
.ws-preview-msg--out .ws-preview-bubble {
  background: #d9fdd3;
  color: #14532d;
  border-bottom-right-radius: 3px;
}
.ws-preview-time {
  margin-top: 3px;
  font-size: .65rem;
  color: #64748b;
}
.ws-preview-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}
/* ── 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;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.c360-svc-row:hover { background: #f8fafc; }
.c360-svc-row--main {
  margin: 4px 0 8px;
  padding: 12px;
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 8px;
  background: #f8fbff;
}
.c360-svc-row:last-child { border-bottom: none; }
.c360-svc-icon { font-size: 1.3rem; flex-shrink: 0; }
.c360-svc-info { flex: 1; min-width: 0; 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-invoice-badge {
  display: inline-flex; align-items: center; height: 24px;
  border-radius: 999px; padding: 0 9px;
  font-size: .72rem; font-weight: 800; white-space: nowrap;
  border: 1px solid transparent;
}
.c360-invoice-badge--pending {
  background: #fff7ed; color: #c2410c; border-color: #fed7aa;
}
.c360-invoice-badge--paid {
  background: #ecfdf5; color: #047857; border-color: #bbf7d0;
}
.svc-status-select {
  min-width: 150px;
  height: 28px;
  border: 1px solid #d8e1ee;
  border-radius: 7px;
  background: #fff;
  color: #243244;
  font-size: .76rem;
  font-weight: 700;
  padding: 0 8px;
}
.svc-status-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.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; }

.streaming-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.streaming-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.streaming-actions select {
  height: 34px; min-width: 180px; border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 0 10px; background: #fff; color: #0f1e32;
  font-weight: 700;
}
.streaming-metrics {
  display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px; margin: 14px 0;
}
.streaming-metric {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 12px 14px; box-shadow: var(--shadow-xs);
}
.streaming-metric span {
  display: block; color: #64748b; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em;
}
.streaming-metric strong {
  display: block; margin-top: 4px; color: #0f1e32; font-size: 1.08rem;
}
.streaming-layout {
  display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 14px; align-items: start;
}
.streaming-section-title {
  color: #64748b; font-size: .72rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px;
}
.streaming-accounts-panel, .streaming-detail-panel { min-height: 220px; }
.streaming-account {
  width: 100%; display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; border: 1px solid #e2e8f0; background: #fff; border-radius: 10px;
  padding: 10px 11px; margin-bottom: 8px; cursor: pointer; text-align: left;
  transition: var(--t);
}
.streaming-account:hover, .streaming-account.is-active {
  border-color: #2563eb; background: #eff6ff; box-shadow: var(--shadow-xs);
}
.streaming-account strong { display: block; color: #0f1e32; font-size: .86rem; overflow-wrap: anywhere; }
.streaming-account span { display: block; color: #64748b; font-size: .76rem; margin-top: 3px; }
.streaming-account-flags { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.streaming-detail-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.streaming-detail-head h3 { margin: 0 0 4px; color: #0f1e32; overflow-wrap: anywhere; }
.streaming-detail-head p { margin: 0; color: #64748b; font-size: .8rem; overflow-wrap: anywhere; }
.streaming-detail-kpis { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.streaming-detail-kpis span {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 6px 9px; font-size: .78rem; font-weight: 800; color: #334155;
}
.streaming-badge {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: 3px 8px; font-size: .72rem; font-weight: 900; white-space: nowrap;
}
.streaming-badge--ok { color: #047857; background: #d1fae5; }
.streaming-badge--warn { color: #92400e; background: #fef3c7; }
.streaming-badge--bad { color: #b91c1c; background: #fee2e2; }
.streaming-badge--muted { color: #475569; background: #e2e8f0; }
.streaming-empty { color: #64748b; margin: 10px 0; }
.streaming-error { color: #dc2626; font-weight: 700; }
.streaming-client-table td { vertical-align: top; }

@media (max-width: 1100px) {
  .streaming-metrics { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
  .streaming-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .streaming-metrics { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}

/* 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;
}

.c360-service-detail-overlay {
  position: fixed; inset: 0; z-index: 8600;
  background: rgba(10,18,30,.58);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.c360-service-detail-overlay.hidden { display: none; }
.c360-service-detail-modal {
  width: 100%; max-width: 640px; max-height: 90vh;
  background: #ffffff; border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  overflow: hidden; display: flex; flex-direction: column;
}
.c360-service-detail-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}
.c360-service-detail-title { font-size: 1rem; font-weight: 800; color: #0f172a; }
.c360-service-detail-sub { margin-top: 3px; font-size: .78rem; color: #64748b; }
.c360-service-detail-close {
  width: 30px; height: 30px; border: none; border-radius: 8px;
  background: #eef2f7; color: #64748b; font-size: 1.15rem;
  cursor: pointer;
}
.c360-service-detail-close:hover { background: #e2e8f0; color: #0f172a; }
.c360-service-detail-body {
  padding: 16px 18px; overflow: auto; display: flex; flex-direction: column; gap: 14px;
}
.svc-detail-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.svc-detail-row {
  background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 9px 10px; display: flex; flex-direction: column; gap: 3px;
}
.svc-detail-row span { font-size: .68rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .05em; }
.svc-detail-row strong { font-size: .86rem; color: #0f172a; word-break: break-word; }
.svc-detail-edit-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.svc-detail-edit-grid label {
  font-size: .7rem; font-weight: 800; color: #64748b;
  text-transform: uppercase; letter-spacing: .05em;
}
.svc-detail-edit-grid input,
.svc-detail-edit-grid textarea {
  width: 100%; margin-top: 4px; border: 1px solid #dbe3ef;
  border-radius: 8px; padding: 9px 10px; font: inherit;
  color: #0f172a; background: #ffffff;
}
.svc-detail-edit-grid textarea { resize: vertical; min-height: 74px; }
.svc-detail-wide { grid-column: 1 / -1; }
.c360-service-detail-actions {
  display: flex; justify-content: flex-end; gap: 9px;
  padding: 14px 18px; border-top: 1px solid #e5e7eb;
  background: #ffffff;
}

/* ── 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-text--readonly {
  background: #f8fafc;
  color: #334155;
  cursor: not-allowed;
}
.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-modal .btn-secondary,
.wa-picker-modal .btn-secondary:hover {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
}
#wa-picker-copy.wa-picker-copy-ready,
#wa-picker-copy.wa-picker-copy-ready:disabled {
  opacity: 1 !important;
  cursor: pointer !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
}
#wa-picker-send:disabled {
  opacity: .65;
  cursor: not-allowed;
}
#wa-picker-web {
  background: #16a34a;
  border-color: #16a34a;
}
#wa-picker-web:hover {
  background: #15803d;
  border-color: #15803d;
}
.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; }

/* ── Portfolio Cut: Corte de Carteras ─────────────────────────── */
.pc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.pc-header h2 { margin: 0 0 4px; font-size: 1.35rem; }
.pc-subtitle { margin: 0; opacity: .6; font-size: .85rem; }
.pc-period-label { font-size: .82rem; opacity: .55; }

.pc-cartera-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  padding: 16px 0 8px;
}
.pc-cartera-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pc-cartera-badge {
  display: inline-block;
  color: #fff;
  font-weight: 700;
  font-size: .78rem;
  border-radius: 20px;
  padding: 2px 10px;
  text-transform: uppercase;
  letter-spacing: .03em;
  width: fit-content;
}
.pc-cartera-total { font-size: 1.18rem; font-weight: 700; margin-top: 4px; }
.pc-cartera-meta  { font-size: .8rem; opacity: .55; }
.pc-cartera-cross { font-size: .78rem; color: var(--warning, #f59e0b); font-weight: 600; }
.pc-cartera-own   { font-size: .78rem; opacity: .5; }

.pc-global-total {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: 6px;
  font-size: .9rem;
}
.pc-global-total strong { font-size: 1.15rem; }
.pc-global-total small  { opacity: .5; }
.pc-global-total span   { opacity: .55; }

/* Histórico */
.pc-cut-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.pc-cut-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  gap: 12px;
  background: var(--surface);
  transition: background .15s;
}
.pc-cut-header:hover { background: var(--surface-alt, #f8fafc); }
.pc-cut-header > div:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pc-cut-header strong { font-size: 1rem; }
.pc-cut-header span   { font-size: .8rem; opacity: .55; }
.pc-cut-total { display: flex; align-items: center; gap: 8px; text-align: right; }
.pc-cut-total strong { font-size: 1rem; }
.pc-cut-total small  { opacity: .5; font-size: .78rem; }
.pc-cut-chevron { font-size: .7rem; opacity: .4; transition: transform .2s; }
.pc-cut-row.open .pc-cut-chevron { transform: rotate(180deg); }

.pc-cut-detail {
  display: none;
  padding: 0 16px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg, #f1f5f9);
}
.pc-cut-row.open .pc-cut-detail { display: block; }
.pc-cut-row[open] .pc-cut-detail { display: block; }
.pc-cut-meta { font-size: .78rem; opacity: .45; margin-top: 8px; }

#view-financial,
#view-portfolio-cut {
  background: #f8fafc;
  color: #0f172a;
  border-radius: 12px;
  padding: 18px;
}

#view-financial .fa-title,
#view-financial .fa-section-title,
#view-financial .fa-exec-section-title,
#view-portfolio-cut .pc-header h2 {
  color: #0f172a;
}

#view-financial .fa-period,
#view-portfolio-cut .pc-subtitle,
#view-portfolio-cut .pc-period-label {
  color: #64748b;
  opacity: 1;
}

#view-financial .fa-kpi,
#view-financial .fa-cartera-card,
#view-financial .fa-cut-row,
#view-portfolio-cut .panel-card,
#view-portfolio-cut .pc-cut-row {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#view-financial .fa-kpi__value,
#view-financial .fa-cut-header strong,
#view-financial .fa-debtor-name,
#view-portfolio-cut .pc-cartera-main strong,
#view-portfolio-cut .pc-cut-header strong {
  color: #0f172a;
}

.pc-ledger-note {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .84rem;
  line-height: 1.45;
  margin: 8px 0 12px;
}

.pc-cartera-list {
  display: grid;
  gap: 8px;
  padding: 8px 0;
}

.pc-cartera-row {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.pc-cartera-row--attention {
  border-left: 4px solid #f59e0b;
}

.pc-cartera-summary {
  display: grid;
  grid-template-columns: minmax(96px, .7fr) minmax(170px, 1.4fr) repeat(3, minmax(125px, 1fr)) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.pc-cartera-summary::-webkit-details-marker,
.pc-cut-header::-webkit-details-marker {
  display: none;
}

.pc-cartera-row[open] .pc-cartera-summary,
.pc-cut-row[open] .pc-cut-header {
  background: #f8fafc;
}

.pc-cartera-main,
.pc-cartera-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pc-cartera-main strong {
  font-size: .98rem;
}

.pc-cartera-main small,
.pc-cartera-metric small,
.pc-row-chevron {
  color: #64748b;
  font-size: .72rem;
}

.pc-cartera-metric strong {
  color: #0f172a;
  font-size: .86rem;
}

.pc-cartera-metric--warn strong { color: #b45309; }
.pc-cartera-metric--info strong { color: #0369a1; }

.pc-row-chevron {
  white-space: nowrap;
  justify-self: end;
}

.pc-cartera-detail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
}

.pc-cartera-detail div {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px;
  display: grid;
  gap: 3px;
}

.pc-cartera-detail span,
.pc-cartera-detail small {
  color: #64748b;
  font-size: .72rem;
}

.pc-cartera-detail strong {
  color: #0f172a;
  font-size: .92rem;
}

.pc-empty {
  color: #64748b;
  font-size: .84rem;
  margin: 0;
  padding: 10px 0;
}

#view-portfolio-cut .pc-global-total {
  justify-content: flex-end;
}

#view-portfolio-cut .pc-global-total > div {
  display: grid;
  justify-items: end;
  gap: 2px;
}

#view-portfolio-cut .pc-global-total span,
#view-portfolio-cut .pc-global-total small {
  color: #64748b;
  opacity: 1;
}

#view-portfolio-cut .pc-global-total strong {
  color: #0f172a;
}

#view-portfolio-cut .pc-cut-header {
  list-style: none;
  background: #ffffff;
}

#view-portfolio-cut .pc-cut-detail {
  background: #f8fafc;
}

@media (max-width: 600px) {
  .pc-cartera-grid { grid-template-columns: 1fr 1fr; }
  .pc-cartera-summary {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .pc-cartera-detail {
    grid-template-columns: 1fr;
  }
  .pc-cut-header { flex-direction: column; align-items: flex-start; }
}

/* Whaticket-style preview modal */
.ws-preview-modal { width: min(560px, 96vw); border-radius: 5px; position: relative; }
.ws-preview-hdr { background: #f1f3f4; padding: 10px 14px; align-items: center; }
.ws-preview-kicker { color: #64748b; font-size: .66rem; }
.ws-preview-modal-title { font-size: .9rem; }
.ws-preview-modal-sub { font-size: .72rem; }
.ws-preview-tags {
  padding: 11px 14px;
  border-bottom: 1px solid #e5e7eb;
  color: #9ca3af;
  background: #fff;
  font-size: .82rem;
}
.ws-preview-body {
  min-height: 520px;
  max-height: 72vh;
  background-color: #efeae2;
  background-image: url('wa-bg.svg');
  background-size: 560px 560px;
  background-repeat: repeat;
}
.ws-preview-thread::before {
  content: 'Hoy';
  align-self: center;
  background: #e0f2fe;
  color: #475569;
  border-radius: 8px;
  padding: 6px 34px;
  font-size: .72rem;
  margin-bottom: 4px;
}
.ws-preview-footer { position: absolute; right: 54px; top: 13px; padding: 0; border: 0; background: transparent; }
.ws-preview-accept { border-radius: 18px !important; padding: 7px 18px !important; background: #3457f5 !important; }

/* Chat text containment and clickable links */
.ws-chat-left,
.ws-messages,
.ws-msg-wrap,
.ws-msg,
.ws-msg-caption,
.ws-preview-thread,
.ws-preview-bubble {
  min-width: 0;
}

.ws-messages,
.ws-preview-thread {
  overflow-x: hidden;
}

.ws-msg-wrap {
  max-width: min(70%, 920px);
}

.ws-msg,
.ws-msg-caption,
.ws-preview-bubble,
.ws-msg-file-body,
.ws-msg-file-body strong,
.ws-msg-file-body small {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ws-msg,
.ws-preview-bubble {
  white-space: pre-wrap;
}

.ws-msg-link,
.ws-msg a,
.ws-preview-bubble a {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* ── Contabilidad simple ─────────────────────────────────────────────── */
.acct-header { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; }
.acct-header h2 { margin:0 0 4px; color:#0f172a; }
.acct-header p { margin:0; color:#64748b; font-size:.88rem; }
.acct-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.acct-kpi { background:#fff; border:1px solid #e2e8f0; border-left:4px solid #64748b; border-radius:14px; padding:17px; box-shadow:0 5px 16px rgba(15,23,42,.05); }
.acct-kpi span { display:block; color:#64748b; font-size:.76rem; font-weight:700; margin-bottom:8px; }
.acct-kpi strong { color:#0f172a; font-size:1.3rem; }
.acct-kpi--red { border-left-color:#ef4444; } .acct-kpi--red strong { color:#dc2626; }
.acct-kpi--blue { border-left-color:#2563eb; } .acct-kpi--blue strong { color:#1d4ed8; }
.acct-kpi--amber { border-left-color:#f59e0b; } .acct-kpi--amber strong { color:#d97706; }
.acct-kpi--green { border-left-color:#16a34a; } .acct-kpi--green strong { color:#15803d; }
.acct-panel { background:#fff; border:1px solid #e2e8f0; border-radius:16px; overflow:hidden; box-shadow:0 5px 18px rgba(15,23,42,.05); }
.acct-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid #e2e8f0; }
.acct-toolbar h3 { margin:0; color:#0f172a; }
.acct-filters { display:flex; gap:8px; flex-wrap:wrap; }
.acct-filters input,.acct-filters select { border:1px solid #cbd5e1; border-radius:9px; padding:8px 10px; background:#fff; color:#334155; }
.acct-table-wrap { overflow-x:auto; }
.acct-table { width:100%; border-collapse:collapse; min-width:900px; }
.acct-table th { padding:11px 14px; background:#f8fafc; color:#64748b; font-size:.7rem; text-transform:uppercase; text-align:left; }
.acct-table td { padding:13px 14px; border-top:1px solid #eef2f7; color:#334155; font-size:.82rem; }
.acct-table .amount { font-weight:800; color:#0f172a; white-space:nowrap; }
.acct-empty { text-align:center!important; color:#94a3b8!important; padding:28px!important; }
.acct-badge { display:inline-flex; border-radius:999px; padding:4px 9px; font-size:.7rem; font-weight:800; white-space:nowrap; }
.acct-badge--paid { background:#dcfce7; color:#166534; } .acct-badge--pending { background:#fef3c7; color:#92400e; } .acct-badge--partial { background:#dbeafe; color:#1e40af; } .acct-badge--void { background:#e2e8f0; color:#475569; }
.acct-actions { display:flex; gap:5px; justify-content:flex-end; flex-wrap:wrap; }
.acct-action { border:0; border-radius:7px; padding:6px 8px; cursor:pointer; font-size:.7rem; font-weight:700; background:#e2e8f0; color:#334155; }
.acct-action--pay { background:#dcfce7; color:#166534; } .acct-action--void { background:#fee2e2; color:#991b1b; }
.acct-modal-actions { display:flex; justify-content:flex-end; gap:9px; padding:14px 22px 18px; border-top:1px solid #e9eef6; }
.acct-form-error { color:#b91c1c; background:#fee2e2; border-radius:8px; padding:9px 11px; margin-top:14px; font-size:.8rem; }
.acct-status-preview { display:flex; flex-direction:column; justify-content:center; }
.acct-hint { display:block; color:#94a3b8; font-size:.72rem; margin-top:4px; }
.acct-attachment-link { color:#2563eb; font-weight:700; text-decoration:none; white-space:nowrap; }
.acct-attachment-link:hover { text-decoration:underline; }
#acct-payroll-period[readonly] { background:#f1f5f9; color:#64748b; cursor:not-allowed; }
.acct-pay-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:14px 16px; margin-bottom:16px; }
.acct-pay-summary span { display:block; color:#64748b; font-size:.7rem; text-transform:uppercase; font-weight:700; margin-bottom:3px; }
.acct-pay-summary strong { color:#0f172a; font-size:.95rem; }
.acct-row--void { opacity:.55; }
#acct-ocr-wrap { border-top:1px dashed #e2e8f0; padding-top:12px; margin-top:2px; }
.acct-ocr-result { margin-top:10px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:12px 14px; font-size:.8rem; color:#334155; }
.acct-ocr-result > div { margin-bottom:4px; }
.acct-ocr-note { color:#64748b; font-weight:700; font-size:.72rem; text-transform:uppercase; margin-bottom:8px; }
.acct-ocr-warnings { margin-top:8px; color:#92400e; }
.acct-ocr-warnings > div { margin-bottom:3px; }
@media (max-width:900px) { .acct-kpis { grid-template-columns:repeat(2,1fr); } .acct-toolbar,.acct-header { align-items:stretch; flex-direction:column; } }
@media (max-width:520px) { .acct-kpis { grid-template-columns:1fr; } .acct-filters>* { flex:1 1 100%; } }