@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --alx-green:#00c896;--alx-teal:#00a98f;--alx-navy:#0d1f3c;--alx-ink:#1a2740;
  --alx-muted:#5a6a84;--alx-border:#e4e9f2;--alx-bg:#f5f7fb;--alx-card:#ffffff;
  --alx-pink:#e5006e;--alx-amber:#f59e0b;--alx-blue:#2563eb;--alx-purple:#7c3aed;
  --radius:12px;--shadow:0 1px 4px rgba(13,31,60,.07),0 4px 16px rgba(13,31,60,.06);
}
body{font-family:'Inter',system-ui,sans-serif;background:var(--alx-bg);color:var(--alx-ink);min-height:100vh;font-size:14px;}
.header{background:var(--alx-card);border-bottom:1px solid var(--alx-border);padding:0 32px;display:flex;align-items:center;justify-content:space-between;height:68px;position:sticky;top:0;z-index:100;}
.header-left{display:flex;align-items:center;gap:20px;}
.logo-wrap{display:flex;align-items:center;gap:10px;}
.logo-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--alx-green),var(--alx-teal));border-radius:9px;display:flex;align-items:center;justify-content:center;}
.logo-name{font-size:17px;font-weight:700;color:var(--alx-navy);letter-spacing:-.3px;}
.header-divider{width:1px;height:28px;background:var(--alx-border);}
.header-title h1{font-size:15px;font-weight:700;color:var(--alx-ink);}
.header-title p{font-size:12px;color:var(--alx-muted);margin-top:1px;}
.client-badge{display:flex;align-items:center;gap:7px;background:#f0faf7;border:1px solid #b6ead9;border-radius:20px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--alx-teal);}
.client-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--alx-green);}
.toolbar{background:var(--alx-card);border-bottom:1px solid var(--alx-border);padding:14px 32px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.toolbar-group{display:flex;flex-direction:column;gap:4px;}
.toolbar-label{font-size:10px;font-weight:600;color:var(--alx-muted);letter-spacing:.6px;text-transform:uppercase;}
.date-input{display:flex;align-items:center;gap:8px;border:1px solid var(--alx-border);border-radius:8px;padding:7px 12px;background:var(--alx-bg);font-size:13px;font-weight:500;color:var(--alx-ink);}
.date-input input[type=date]{border:none;background:transparent;font-size:13px;font-weight:500;color:var(--alx-ink);cursor:pointer;outline:none;}
.tab-group{display:flex;border:1px solid var(--alx-border);border-radius:8px;overflow:hidden;}
.tab-btn{padding:7px 16px;font-size:13px;font-weight:500;border:none;background:var(--alx-bg);color:var(--alx-muted);cursor:pointer;}
.tab-btn.active{background:var(--alx-navy);color:#fff;font-weight:600;}
.tab-btn:not(:last-child){border-right:1px solid var(--alx-border);}
.campaign-select{display:flex;align-items:center;gap:8px;border:1px solid var(--alx-border);border-radius:8px;padding:7px 14px;background:var(--alx-bg);font-size:13px;font-weight:500;color:var(--alx-ink);min-width:200px;}
.campaign-select select{border:none;background:transparent;font-size:13px;font-weight:500;color:var(--alx-ink);cursor:pointer;outline:none;width:100%;}
.toolbar-actions{margin-left:auto;display:flex;gap:10px;align-items:center;position:relative;}
.btn-export{padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;border:1px solid var(--alx-border);background:var(--alx-card);color:var(--alx-ink);cursor:pointer;}
.btn-refresh{padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;border:none;background:var(--alx-green);color:#fff;cursor:pointer;display:flex;align-items:center;gap:7px;}
.export-menu{display:none;position:absolute;top:110%;right:80px;background:#fff;border:1px solid var(--alx-border);border-radius:8px;box-shadow:var(--shadow);min-width:160px;z-index:200;}
.export-menu.open{display:block;}
.export-item{padding:10px 16px;cursor:pointer;font-size:13px;font-weight:500;color:var(--alx-ink);}
.export-item:hover{background:var(--alx-bg);}
.export-item:not(:last-child){border-bottom:1px solid var(--alx-border);}
.main{padding:28px 32px;max-width:1400px;margin:0 auto;}
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:24px;}
.kpi-card{background:var(--alx-card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);border:1px solid var(--alx-border);position:relative;overflow:hidden;}
.kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
.kpi-card.c-encoladas::before{background:var(--alx-teal);}
.kpi-card.c-efectuadas::before{background:var(--alx-blue);}
.kpi-card.c-positivos::before{background:var(--alx-green);}
.kpi-card.c-rellamados::before{background:var(--alx-amber);}
.kpi-card.c-gasto::before{background:var(--alx-pink);}
.kpi-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.kpi-card.c-encoladas .kpi-icon{background:#e8f9f5;color:var(--alx-teal);}
.kpi-card.c-efectuadas .kpi-icon{background:#eff4ff;color:var(--alx-blue);}
.kpi-card.c-positivos .kpi-icon{background:#e6faf4;color:var(--alx-green);}
.kpi-card.c-rellamados .kpi-icon{background:#fffbeb;color:var(--alx-amber);}
.kpi-card.c-gasto .kpi-icon{background:#fdf2f8;color:var(--alx-pink);}
.kpi-label{font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--alx-muted);margin-bottom:6px;}
.kpi-value{font-size:28px;font-weight:800;color:var(--alx-ink);line-height:1;letter-spacing:-1px;}
.kpi-value.pink{color:var(--alx-pink);}
.kpi-sub{font-size:12px;color:var(--alx-muted);margin-top:6px;}
.kpi-sub .highlight{font-weight:700;}
.kpi-sub .highlight.green{color:var(--alx-green);}
.kpi-sub .highlight.blue{color:var(--alx-blue);}
.content-row{display:grid;grid-template-columns:1fr 340px;gap:20px;}
.card{background:var(--alx-card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--alx-border);overflow:hidden;}
.card-header{padding:18px 22px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--alx-border);}
.card-title{font-size:14px;font-weight:700;color:var(--alx-ink);}
.card-date{font-size:12px;color:var(--alx-muted);}
table{width:100%;border-collapse:collapse;}
thead tr{background:var(--alx-bg);}
thead th{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--alx-muted);padding:10px 16px;text-align:left;border-bottom:1px solid var(--alx-border);}
thead th:not(:first-child){text-align:right;}
tbody tr{border-bottom:1px solid var(--alx-border);transition:background .1s;cursor:pointer;}
tbody tr:last-child{border-bottom:none;}
tbody tr:hover{background:#fafbfd;}
td{padding:16px;vertical-align:middle;}
td:not(:first-child){text-align:right;}
.camp-name{font-size:13px;font-weight:700;color:var(--alx-ink);}
.camp-indicator{width:3px;height:36px;border-radius:2px;flex-shrink:0;}
.camp-cell{display:flex;align-items:center;gap:12px;}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:20px;margin-top:3px;}
.pill.green{background:#e6faf4;color:#00a97a;}
.pill.blue{background:#eff4ff;color:#2563eb;}
.pill.amber{background:#fffbeb;color:#b45309;}
.num{font-size:13px;font-weight:600;color:var(--alx-ink);}
.cost{font-size:13px;font-weight:700;color:var(--alx-pink);}
.funnel-card{padding:22px;}
.funnel-title{font-size:14px;font-weight:700;color:var(--alx-ink);margin-bottom:20px;}
.funnel-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.funnel-meta-label{font-size:12px;font-weight:600;color:var(--alx-ink);display:flex;align-items:center;gap:6px;}
.funnel-meta-label .dot{width:8px;height:8px;border-radius:50%;}
.funnel-meta-val{font-size:12px;font-weight:700;color:var(--alx-ink);}
.funnel-meta-pct{font-size:11px;color:var(--alx-muted);}
.funnel-bar-wrap{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.funnel-bar-outer{flex:1;height:32px;background:var(--alx-bg);border-radius:6px;overflow:hidden;}
.funnel-bar-inner{height:100%;border-radius:6px;}
.funnel-bar-inner.col-encoladas{background:var(--alx-teal);}
.funnel-bar-inner.col-efectuadas{background:var(--alx-blue);}
.funnel-bar-inner.col-positivos{background:var(--alx-green);}
.funnel-bar-inner.col-rellamados{background:var(--alx-amber);}
.funnel-divider{border:none;border-top:1px dashed var(--alx-border);margin:4px 0 12px;}
.excl-box{margin-top:20px;background:#fdf8ff;border:1px solid #e9d8ff;border-radius:10px;padding:14px 16px;}
.excl-title{font-size:11px;font-weight:700;color:#7c3aed;letter-spacing:.5px;text-transform:uppercase;margin-bottom:8px;}
.excl-tags{display:flex;flex-wrap:wrap;gap:6px;}
.excl-tag{font-size:11px;font-weight:600;background:#f3ebff;color:#6d28d9;border-radius:5px;padding:3px 8px;}
.footer-note{margin-top:20px;font-size:11px;color:var(--alx-muted);text-align:center;}
.loading-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.6);z-index:999;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:var(--alx-teal);}
.loading-overlay.show{display:flex;}
@media print{
  .toolbar,.btn-export,.btn-refresh,.loading-overlay{display:none!important;}
  .header{position:static;}
  .content-row{display:block;}
  .funnel-card{margin-top:20px;}
  table{width:100%;border-collapse:collapse;}
  thead th{background:#f5f7fb!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  tbody tr{page-break-inside:avoid;}
  .kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
  .kpi-card::before{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .pill{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .num,.cost,.kpi-value{color:#1a2740!important;}
}

.flatpickr-day--week {
  background: #eff4ff;
  color: #2563eb;
  border-radius: 0;
}
.flatpickr-day--week.selected {
  background: #2563eb;
  color: #fff;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: #00c896 !important;
  border-color: #00c896 !important;
}
.flatpickr-day.inRange {
  background: #e6faf4 !important;
  border-color: #e6faf4 !important;
  color: #1a2740 !important;
}
.flatpickr-day.today {
  border-color: #00c896 !important;
}

.flatpickr-monthSelect-month.selected,
.flatpickr-monthSelect-month:hover {
  background: #00c896 !important;
  color: #fff !important;
}

.spinner-overlay {
  display: none;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,.7);
  z-index: 10;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
}
.spinner-overlay.show { display: flex; }
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--alx-border);
  border-top-color: var(--alx-green);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.card { position: relative; }