/* ================================================================
   ClaroKPIs — main.css v2.0
   Extiende la base existente con componentes nuevos aprobados.
   Todo lo anterior se mantiene. Solo se agregan secciones nuevas.
   ================================================================ */

/* ── GOOGLE FONTS ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── CSS VARIABLES ────────────────────────────────────────────── */
:root {
  /* Fondos */
  --color-bg:           #080d18;
  --color-bg-card:      #0f1623;
  --color-bg-card-2:    #161e2e;
  --color-bg-hover:     #1a2538;
  --color-border:       rgba(255,255,255,.07);
  --color-border-light: rgba(255,255,255,.11);

  /* Texto */
  --color-text:         #f0f4ff;
  --color-text-muted:   #8899aa;
  --color-text-faint:   #4a5568;

  /* Semáforos */
  --color-green:        #22c55e;
  --color-green-bg:     rgba(34,197,94,.1);
  --color-green-border: rgba(34,197,94,.25);
  --color-yellow:       #f59e0b;
  --color-yellow-bg:    rgba(245,158,11,.1);
  --color-yellow-border:rgba(245,158,11,.25);
  --color-red:          #ef4444;
  --color-red-bg:       rgba(239,68,68,.1);
  --color-red-border:   rgba(239,68,68,.25);

  /* Acento */
  --color-blue:         #3b82f6;
  --color-blue-dark:    #2563eb;
  --color-blue-bg:      rgba(59,130,246,.1);
  --color-blue-border:  rgba(59,130,246,.25);
  --color-indigo:       #6366f1;
  --color-teal:         #14b8a6;

  /* Gradientes */
  --gradient-brand:     linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);
  --gradient-card:      linear-gradient(145deg,#111827 0%,#1a2234 100%);
  --gradient-success:   linear-gradient(135deg,#22c55e,#16a34a);
  --gradient-danger:    linear-gradient(135deg,#ef4444,#dc2626);

  /* Tipografía */
  --font-main:          'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:          'JetBrains Mono', monospace;

  /* Espaciado */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;

  /* Radios */
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px;
  --radius-xl:20px; --radius-full:9999px;

  /* Sombras */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.3);
  --shadow-lg:  0 10px 30px rgba(0,0,0,.5),0 4px 8px rgba(0,0,0,.3);
  --shadow-glow-blue:  0 0 20px rgba(59,130,246,.2);
  --shadow-glow-green: 0 0 16px rgba(34,197,94,.18);
  --shadow-glow-red:   0 0 16px rgba(239,68,68,.18);

  /* Transiciones */

  /* ── BLOQUE 3 — VARIABLES ─────────────────────────────── */
  --color-bg-hero:      #0c1220;
  --kpi-hero-size:      2.8rem;
  --kpi-secondary-size: 1.35rem;
  --transition-module:  180ms ease;
  --sidebar-pill:       3px;
  --shadow-card:        0 1px 3px rgba(0,0,0,.6), 0 0 0 0.5px rgba(255,255,255,.06);
  --shadow-hero:        0 4px 24px rgba(0,0,0,.5), 0 0 0 0.5px rgba(255,255,255,.08);
  --transition-fast:.15s ease; --transition-med:.25s ease; --transition-slow:.4s ease;

  /* Sidebar */
  --sidebar-width: 220px;
}

/* ── RESET ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font-main);
  background:  var(--color-bg);
  color:       var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
input, textarea, select { font-family:inherit; }
img { max-width:100%; display:block; }
:focus-visible { outline:2px solid var(--color-blue); outline-offset:2px; }

/* ── UTILIDADES ───────────────────────────────────────────────── */
.hidden  { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mono { font-family:var(--font-mono); }

/* ── TIPOGRAFÍA ───────────────────────────────────────────────── */
.text-xs   { font-size:.72rem; }
.text-sm   { font-size:.82rem; }
.text-base { font-size:.9rem; }
.text-lg   { font-size:1rem; }
.text-xl   { font-size:1.1rem; }
.text-2xl  { font-size:1.25rem; }
.text-3xl  { font-size:1.5rem; }
.text-muted { color:var(--color-text-muted); }
.text-faint { color:var(--color-text-faint); }
.font-600   { font-weight:600; }
.font-700   { font-weight:700; }
.font-800   { font-weight:800; }

/* ── SCROLL ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track  { background:transparent; }
::-webkit-scrollbar-thumb  { background:var(--color-border-light); border-radius:9999px; }
::-webkit-scrollbar-thumb:hover { background:#4a5568; }

/* ── ANIMACIONES ──────────────────────────────────────────────── */
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes fadeInUp  { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideInR  { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
@keyframes pulse     { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes spin      { to{transform:rotate(360deg)} }
@keyframes countUp   { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
@keyframes shimmer   { from{background-position:-200% 0} to{background-position:200% 0} }

.animate-fade     { animation:fadeIn .25s ease forwards; }
.animate-fade-up  { animation:fadeInUp .3s ease forwards; }
.animate-slide-r  { animation:slideInR .25s ease forwards; }
.animate-count    { animation:countUp .4s ease forwards; }

/* ── KPI CARD ─────────────────────────────────────────────────── */
.kpi-card {
  background:    var(--color-bg-card);
  box-shadow:    var(--shadow-card);
  border-radius: var(--radius-lg);
  padding:       var(--space-5);
  position:      relative;
  overflow:      hidden;
  transition:    box-shadow var(--transition-fast), transform var(--transition-fast);
  cursor:        pointer;
}
.kpi-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(145deg,rgba(255,255,255,.025) 0%,transparent 55%);
  pointer-events:none;
}
.kpi-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.6), 0 0 0 0.5px rgba(255,255,255,.1);
  transform: translateY(-1px);
}
.kpi-card-label {
  font-size:.72rem;
  font-weight:600;
  color: var(--color-text-muted);
  text-transform:uppercase;
  letter-spacing:.07em;
  margin-bottom:var(--space-2);
  display:flex;
  align-items:center;
  gap:6px;
}
.kpi-card-value {
  font-family: var(--font-mono);
  font-size: var(--kpi-secondary-size);
  font-weight:800;
  color: var(--color-text);
  line-height:1.1;
  letter-spacing:-.03em;
}
.kpi-card-delta {
  font-size:.72rem;
  font-weight:600;
  margin-top:var(--space-2);
  display:flex;
  align-items:center;
  gap:4px;
}
/* ── KPI HERO (primer KPI de cada módulo) ─────────────────── */
.kpi-card.kpi-hero {
  background:  var(--color-bg-hero);
  box-shadow:  var(--shadow-hero);
  grid-column: span 2;
  padding:     var(--space-6) var(--space-6) var(--space-5);
  overflow:    hidden;
}
.kpi-card.kpi-hero .kpi-card-value {
  font-size: var(--kpi-hero-size);
  letter-spacing: -.04em;
  line-height: 1;
}
.kpi-card.kpi-hero .kpi-card-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}
.kpi-card.kpi-hero .kpi-card-delta {
  font-size: .8rem;
  font-weight: 600;
  margin-top: var(--space-3);
}
/* Número fantasma — firma visual */
.kpi-card.kpi-hero::after {
  content: attr(data-ghost);
  position: absolute;
  right: -8px;
  bottom: -16px;
  font-family: var(--font-mono);
  font-size: 6rem;
  font-weight: 900;
  color: var(--color-text);
  opacity: .03;
  transform: rotate(-8deg);
  pointer-events: none;
  line-height: 1;
  user-select: none;
  letter-spacing: -.06em;
}
/* Hero status glow */
.kpi-card.kpi-hero.status-green {
  border-left: 2px solid var(--color-green) !important;
  box-shadow: var(--shadow-hero), 0 0 40px rgba(34,197,94,.05) !important;
}
.kpi-card.kpi-hero.status-yellow {
  border-left: 2px solid var(--color-yellow) !important;
  box-shadow: var(--shadow-hero), 0 0 40px rgba(245,158,11,.05) !important;
}
.kpi-card.kpi-hero.status-red {
  border-left: 2px solid var(--color-red) !important;
  box-shadow: var(--shadow-hero), 0 0 40px rgba(239,68,68,.06) !important;
}

/* ── KPI GRID AJUSTADO ────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
/* Cuando el grid tiene hero (2-col span), mínimo 4 cols */
.kpi-grid.has-hero {
  grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
}

.kpi-card-sparkline {
  position:absolute;
  bottom:0; right:0;
  width:80px; height:40px;
  opacity:.5;
}
/* Semáforo dot */
.status-dot {
  width:8px; height:8px;
  border-radius:50%;
  flex-shrink:0;
  display:inline-block;
}
.status-dot.green  { background:var(--color-green);  box-shadow:0 0 6px var(--color-green); }
.status-dot.yellow { background:var(--color-yellow); box-shadow:0 0 6px var(--color-yellow); }
.status-dot.red    { background:var(--color-red);    box-shadow:0 0 6px var(--color-red); }
.status-dot.na     { background:var(--color-text-faint); }

/* Banda lateral de alerta en card */
.kpi-card.status-red    { border-left:3px solid var(--color-red)    !important; }
.kpi-card.status-yellow { border-left:3px solid var(--color-yellow) !important; }
.kpi-card.status-green  { border-left:3px solid var(--color-green)  !important; }

/* ── GRID DE KPIs ─────────────────────────────────────────────── */
.kpi-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.kpi-grid-5 { grid-template-columns: repeat(5,1fr); }
.kpi-grid-4 { grid-template-columns: repeat(4,1fr); }
.kpi-grid-3 { grid-template-columns: repeat(3,1fr); }

/* ── SECTION CARD ─────────────────────────────────────────────── */
.section-card {
  background:  var(--color-bg-card);
  border:      0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:     var(--space-6);
  margin-bottom: var(--space-5);
}
.section-card-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: var(--space-5);
  gap: var(--space-4);
}
.section-card-title {
  font-size:.9rem;
  font-weight:700;
  color: var(--color-text);
  display:flex;
  align-items:center;
  gap:8px;
}
.section-card-subtitle {
  font-size:.75rem;
  color: var(--color-text-muted);
  margin-top:2px;
}
.chart-wrap {
  position:relative;
  width:100%;
}
.chart-wrap canvas { display:block; }

/* ── TABLA ────────────────────────────────────────────────────── */
.data-table {
  width:100%;
  border-collapse:collapse;
  font-size:.82rem;
}
.data-table th {
  text-align:left;
  font-size:.7rem;
  font-weight:700;
  color: var(--color-text-muted);
  text-transform:uppercase;
  letter-spacing:.07em;
  padding:10px 12px;
  border-bottom:0.5px solid var(--color-border);
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
}
.data-table th:hover { color:var(--color-text); }
.data-table td {
  padding:10px 12px;
  border-bottom:0.5px solid rgba(255,255,255,.04);
  color:var(--color-text);
  vertical-align:middle;
}
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:rgba(59,130,246,.04); }
.data-table .mono { font-family:var(--font-mono); }
.data-table .right { text-align:right; }
.data-table .center { text-align:center; }

/* Progreso relativo en tabla */
.table-bar-wrap {
  display:flex;
  align-items:center;
  gap:8px;
}
.table-bar {
  height:4px;
  border-radius:2px;
  background:var(--color-border);
  flex:1;
  overflow:hidden;
}
.table-bar-fill {
  height:100%;
  border-radius:2px;
  background: var(--gradient-brand);
  transition: width .5s ease;
}

/* ── TABS ─────────────────────────────────────────────────────── */
.tabs {
  display:flex;
  gap:4px;
  background:var(--color-bg);
  border:0.5px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:3px;
  flex-wrap:wrap;
}
.tab-btn {
  flex:1;
  padding:7px 14px;
  border-radius:var(--radius-sm);
  font-size:.8rem;
  font-weight:600;
  color:var(--color-text-muted);
  transition:all var(--transition-fast);
  white-space:nowrap;
  text-align:center;
}
.tab-btn:hover { color:var(--color-text); }
.tab-btn.active {
  background:var(--color-bg-card);
  color:var(--color-text);
  box-shadow:var(--shadow-sm);
}

/* ── BOTONES ──────────────────────────────────────────────────── */
.btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border-radius:var(--radius-md);
  font-size:.82rem;
  font-weight:600;
  transition:all var(--transition-fast);
  white-space:nowrap;
}
.btn-primary {
  background:var(--gradient-brand);
  color:#fff;
  box-shadow:0 2px 8px rgba(59,130,246,.3);
}
.btn-primary:hover { opacity:.9; transform:translateY(-1px); }
.btn-secondary {
  background:var(--color-bg-card);
  border:0.5px solid var(--color-border-light);
  color:var(--color-text-muted);
}
.btn-secondary:hover { border-color:var(--color-blue); color:var(--color-text); }
.btn-ghost {
  color:var(--color-text-muted);
  padding:6px 10px;
}
.btn-ghost:hover { color:var(--color-text); background:var(--color-bg-card); }
.btn-danger {
  background:var(--color-red-bg);
  border:0.5px solid var(--color-red-border);
  color:var(--color-red);
}
.btn-danger:hover { background:var(--color-red); color:#fff; }
.btn-sm { padding:5px 12px; font-size:.75rem; }
.btn-icon { padding:7px; border-radius:var(--radius-sm); }

/* ── BADGE ────────────────────────────────────────────────────── */
.badge {
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:var(--radius-full);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.04em;
  white-space:nowrap;
}
.badge-green  { background:var(--color-green-bg);  color:var(--color-green);  border:0.5px solid var(--color-green-border); }
.badge-yellow { background:var(--color-yellow-bg); color:var(--color-yellow); border:0.5px solid var(--color-yellow-border); }
.badge-red    { background:var(--color-red-bg);    color:var(--color-red);    border:0.5px solid var(--color-red-border); }
.badge-blue   { background:var(--color-blue-bg);   color:var(--color-blue);   border:0.5px solid var(--color-blue-border); }
.badge-gray   { background:rgba(255,255,255,.06);  color:var(--color-text-muted); border:0.5px solid var(--color-border-light); }

/* ── ALERTA BANNER ────────────────────────────────────────────── */
.alert-banner {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 16px;
  border-radius:var(--radius-md);
  margin-bottom:var(--space-3);
  background:var(--color-bg-card);
  border:0.5px solid var(--color-border);
  animation:fadeInUp .25s ease;
  cursor:pointer;
  transition:border-color var(--transition-fast);
}
.alert-banner:hover { border-color:var(--color-border-light); }
.alert-banner.red    { border-left:3px solid var(--color-red); }
.alert-banner.yellow { border-left:3px solid var(--color-yellow); }
.alert-banner.green  { border-left:3px solid var(--color-green); }
.alert-banner-icon { font-size:1rem; flex-shrink:0; margin-top:1px; }
.alert-banner-body { flex:1; min-width:0; }
.alert-banner-title { font-size:.82rem; font-weight:600; color:var(--color-text); }
.alert-banner-desc  { font-size:.75rem; color:var(--color-text-muted); margin-top:2px; }

/* ── SKELETON ─────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--color-bg-card) 25%, var(--color-bg-hover) 50%, var(--color-bg-card) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}
.skeleton-card  { height:100px; border-radius:var(--radius-lg); }
.skeleton-chart { height:280px; border-radius:var(--radius-lg); }
.skeleton-text  { height:14px; width:60%; border-radius:4px; }
.skeleton-text-sm { height:10px; width:40%; border-radius:4px; }

/* ── MODAL ────────────────────────────────────────────────────── */
.modal-backdrop {
  position:fixed; inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(4px);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-5);
  animation:fadeIn .2s ease;
}
.modal-box {
  background:var(--color-bg-card);
  border:0.5px solid var(--color-border);
  border-radius:var(--radius-xl);
  width:100%;
  max-width:560px;
  max-height:90vh;
  overflow-y:auto;
  padding:var(--space-8);
  position:relative;
  animation:fadeInUp .25s ease;
}
.modal-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:var(--space-6);
}
.modal-title  { font-size:1.05rem; font-weight:800; color:var(--color-text); }
.modal-close  { color:var(--color-text-muted); padding:4px; border-radius:var(--radius-sm); transition:color var(--transition-fast); }
.modal-close:hover { color:var(--color-text); }

/* ── FORMULARIO ───────────────────────────────────────────────── */
.form-group  { margin-bottom:var(--space-5); }
.form-label  { display:block; font-size:.78rem; font-weight:600; color:var(--color-text-muted); margin-bottom:var(--space-2); }
.form-input, .form-select, .form-textarea {
  width:100%;
  background:var(--color-bg);
  border:0.5px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:10px 14px;
  color:var(--color-text);
  font-size:.85rem;
  font-family:var(--font-main);
  transition:border-color var(--transition-fast);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline:none;
  border-color:var(--color-blue);
  box-shadow:0 0 0 3px rgba(59,130,246,.12);
}
.form-textarea { resize:vertical; min-height:80px; }
.form-select   { appearance:none; cursor:pointer; }
.form-hint     { font-size:.72rem; color:var(--color-text-faint); margin-top:var(--space-1); }

/* ── TOGGLE ───────────────────────────────────────────────────── */
.toggle { display:flex; align-items:center; gap:10px; cursor:pointer; }
.toggle-track {
  width:38px; height:22px;
  background:var(--color-border);
  border-radius:11px;
  position:relative;
  transition:background var(--transition-fast);
}
.toggle-track.on { background:var(--color-blue); }
.toggle-thumb {
  position:absolute;
  top:3px; left:3px;
  width:16px; height:16px;
  background:#fff;
  border-radius:50%;
  transition:transform var(--transition-fast);
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.toggle-track.on .toggle-thumb { transform:translateX(16px); }

/* ── BREADCRUMB ───────────────────────────────────────────────── */
.breadcrumb { display:flex; align-items:center; gap:6px; font-size:.78rem; flex-wrap:wrap; }
.breadcrumb-item {
  color:var(--color-text-muted);
  cursor:pointer;
  transition:color var(--transition-fast);
}
.breadcrumb-item:hover { color:var(--color-text); }
.breadcrumb-sep   { color:var(--color-text-faint); }
.breadcrumb-active { color:var(--color-text); font-weight:600; }

/* ── TOOLTIP ──────────────────────────────────────────────────── */
[data-tooltip] { position:relative; }
[data-tooltip]::after {
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  background:var(--color-bg-card-2);
  border:0.5px solid var(--color-border);
  color:var(--color-text);
  font-size:.72rem;
  padding:5px 10px;
  border-radius:6px;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity var(--transition-fast);
  z-index:9999;
}
[data-tooltip]:hover::after { opacity:1; }

/* ── VISTA QUÉ HACER HOY ──────────────────────────────────────── */
.today-action {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  background:var(--color-bg-card);
  border:0.5px solid var(--color-border);
  border-radius:var(--radius-md);
  margin-bottom:var(--space-3);
  cursor:pointer;
  transition:border-color var(--transition-fast), transform var(--transition-fast);
}
.today-action:hover { border-color:var(--color-blue); transform:translateX(3px); }
.today-action.urgencia-alta   { border-left:3px solid var(--color-red); }
.today-action.urgencia-media  { border-left:3px solid var(--color-yellow); }
.today-action.urgencia-baja   { border-left:3px solid var(--color-blue); }
.today-action-icon  { font-size:1.2rem; flex-shrink:0; }
.today-action-body  { flex:1; min-width:0; }
.today-action-text  { font-size:.85rem; font-weight:600; color:var(--color-text); }
.today-action-link  { font-size:.72rem; color:var(--color-blue); margin-top:4px; }

/* ── FICHA CLIENTE 360° ───────────────────────────────────────── */
.client360-drawer {
  position:fixed;
  inset:0;
  z-index:500;
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
  pointer-events:none;
}
.client360-overlay {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(3px);
  pointer-events:auto;
  opacity:0;
  transition:opacity var(--transition-med);
}
.client360-panel {
  position:relative;
  width:min(480px, 95vw);
  height:100%;
  background:var(--color-bg-card);
  border-left:0.5px solid var(--color-border);
  overflow-y:auto;
  pointer-events:auto;
  transform:translateX(100%);
  transition:transform var(--transition-med);
  display:flex;
  flex-direction:column;
}
.client360-drawer.open .client360-overlay { opacity:1; }
.client360-drawer.open .client360-panel   { transform:translateX(0); }

.client360-header {
  padding:var(--space-6);
  border-bottom:0.5px solid var(--color-border);
  display:flex;
  align-items:flex-start;
  gap:14px;
  flex-shrink:0;
}
.client360-avatar {
  width:48px; height:48px;
  border-radius:50%;
  background:var(--gradient-brand);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  font-weight:800;
  color:#fff;
  flex-shrink:0;
}
.client360-name  { font-size:1rem; font-weight:800; color:var(--color-text); }
.client360-meta  { font-size:.75rem; color:var(--color-text-muted); margin-top:3px; }
.client360-body  { flex:1; padding:var(--space-5) var(--space-6); }

.client360-section {
  margin-bottom:var(--space-6);
}
.client360-section-title {
  font-size:.72rem;
  font-weight:700;
  color:var(--color-text-muted);
  text-transform:uppercase;
  letter-spacing:.07em;
  margin-bottom:var(--space-3);
  padding-bottom:var(--space-2);
  border-bottom:0.5px solid var(--color-border);
}
.client360-stat-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-3);
}
.client360-stat {
  background:var(--color-bg);
  border:0.5px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:10px 12px;
}
.client360-stat-label { font-size:.68rem; color:var(--color-text-muted); margin-bottom:3px; }
.client360-stat-value { font-size:.9rem; font-weight:700; font-family:var(--font-mono); color:var(--color-text); }

/* Riesgo churn */
.churn-badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 10px;
  border-radius:var(--radius-full);
  font-size:.72rem;
  font-weight:700;
}
.churn-badge.high   { background:var(--color-red-bg);    color:var(--color-red);    border:0.5px solid var(--color-red-border); }
.churn-badge.medium { background:var(--color-yellow-bg); color:var(--color-yellow); border:0.5px solid var(--color-yellow-border); }
.churn-badge.low    { background:var(--color-green-bg);  color:var(--color-green);  border:0.5px solid var(--color-green-border); }

/* ── MÓDULO METAS ─────────────────────────────────────────────── */
.goals-table { width:100%; border-collapse:collapse; }
.goals-table th {
  font-size:.7rem; font-weight:700; color:var(--color-text-muted);
  text-transform:uppercase; letter-spacing:.07em;
  padding:8px 12px; border-bottom:0.5px solid var(--color-border); text-align:left;
}
.goals-table td { padding:10px 12px; border-bottom:0.5px solid rgba(255,255,255,.04); }
.goals-table tr:last-child td { border-bottom:none; }
.goals-table tr:hover td { background:rgba(59,130,246,.04); }
.goals-input {
  background:var(--color-bg);
  border:0.5px solid var(--color-border);
  border-radius:var(--radius-sm);
  padding:6px 10px;
  color:var(--color-text);
  font-size:.82rem;
  font-family:var(--font-mono);
  width:120px;
  transition:border-color var(--transition-fast);
}
.goals-input:focus { outline:none; border-color:var(--color-blue); }
.goals-kpi-label { font-size:.82rem; font-weight:600; color:var(--color-text); }
.goals-kpi-hint  { font-size:.7rem; color:var(--color-text-faint); margin-top:2px; }

/* ── PLANTILLAS DOWNLOAD ──────────────────────────────────────── */
.template-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--space-3);
}
.template-card {
  background:var(--color-bg-card);
  border:0.5px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:14px;
  text-align:center;
  cursor:pointer;
  transition:all var(--transition-fast);
}
.template-card:hover {
  border-color:var(--color-blue);
  background:var(--color-blue-bg);
  transform:translateY(-2px);
}
.template-card-icon { font-size:1.4rem; margin-bottom:8px; }
.template-card-name { font-size:.78rem; font-weight:600; color:var(--color-text); }
.template-card-desc { font-size:.68rem; color:var(--color-text-muted); margin-top:3px; }

/* ── SELECTOR EXCEL / GOOGLE SHEETS ──────────────────────────── */
.data-source-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-4);
  margin-bottom:var(--space-5);
}
.data-source-card {
  background:var(--color-bg);
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  cursor:pointer;
  transition:all var(--transition-fast);
  text-align:center;
  position:relative;
}
.data-source-card:hover { border-color:var(--color-blue-border); }
.data-source-card.selected { border-color:var(--color-blue); background:var(--color-blue-bg); }
.data-source-card.disabled { opacity:.45; cursor:not-allowed; }
.data-source-card .coming-soon {
  position:absolute;
  top:8px; right:8px;
  font-size:.62rem; font-weight:700;
  background:var(--color-indigo);
  color:#fff;
  padding:2px 7px;
  border-radius:var(--radius-full);
}
.data-source-icon { font-size:1.8rem; margin-bottom:10px; }
.data-source-name { font-size:.88rem; font-weight:700; color:var(--color-text); }
.data-source-desc { font-size:.72rem; color:var(--color-text-muted); margin-top:4px; }

/* ── MODO PRESENTACIÓN ────────────────────────────────────────── */
.presentation-mode .sidebar       { display:none !important; }
.presentation-mode .main-header   { display:none !important; }
.presentation-mode .main-content  { margin-left:0 !important; padding:var(--space-8) !important; }
.presentation-mode .section-card  { background:rgba(255,255,255,.03); }
.presentation-mode .kpi-card-value { font-size:2.4rem !important; }
.presentation-mode .kpi-card-label { font-size:.85rem !important; }

/* ── MODO PRESENTACIÓN — números grandes ─────────────────────── */
.presentation-mode .kpi-card {
  padding:var(--space-8);
}

/* ── PRINT / PDF ──────────────────────────────────────────────── */
@media print {
  .sidebar, .main-header, .btn, .tabs, .filter-bar { display:none !important; }
  .main-content { margin-left:0 !important; }
  body { background:#fff !important; color:#000 !important; }
  .kpi-card { border:1px solid #ddd !important; background:#f9f9f9 !important; }
}