/* ================================================
   ROIZ ADS DASHBOARD — ESTILOS GLOBALES
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ---------- Reset & Variables ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #09090B;
  --bg-card:     #18181B;
  --bg-card2:    #27272A;
  --border:      #3F3F46;
  --primary:     #7C3AED;
  --primary-glow:#6D28D9;
  --accent:      #22C55E;
  --accent-glow: #16A34A;
  --success:     #4ADE80;
  --success-glow:#22C55E;
  --warning:     #FDE047;
  --danger:      #FB7185;
  --gold:        #FCD34D;
  --gold-glow:   #FBBF24;
  --cyan:        #06b6d4;
  --pink:        #ec4899;
  --text:        #FAFAFA;
  --text-muted:  #A1A1AA;
  --radius:      16px;
  --shadow:      0 4px 32px rgba(0,0,0,.6);
  --transition:  .22s cubic-bezier(.4,0,.2,1);
}

body {
  font-family: 'Inter', sans-serif;
  background:
    radial-gradient(ellipse 55% 35% at 100% -5%, rgba(124,58,237,.1) 0%, transparent 55%),
    radial-gradient(ellipse 45% 30% at 0% 105%, rgba(34,197,94,.07) 0%, transparent 55%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ================================================
   INDEX PAGE
   ================================================ */
.home-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(124,58,237,.28) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(34,197,94,.14) 0%, transparent 60%),
    var(--bg);
}

.home-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 3rem 3.5rem;
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow);
  animation: fadeUp .55s ease both;
  position: relative;
  overflow: hidden;
}

.home-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--gold));
}

.home-logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .5rem;
}

.home-logo .logo-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.3px;
  box-shadow: 0 4px 20px rgba(124,58,237,.45);
}

.home-logo h1 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.5px;
}

.home-logo span { color: var(--primary); }

.brand-badge {
  display: inline-block;
  background: rgba(124,58,237,.12);
  border: 1px solid rgba(124,58,237,.25);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .3rem .8rem;
  border-radius: 20px;
  margin-bottom: 1.5rem;
}

.home-subtitle {
  color: var(--text-muted);
  font-size: .95rem;
  margin-bottom: 2.5rem;
}

/* Form */
.form-group { margin-bottom: 1.4rem; }

label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .5rem;
}

select, input[type="date"] {
  width: 100%;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: .95rem;
  padding: .75rem 1rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
  -webkit-appearance: none;
}

select { cursor: pointer; }

select:focus, input[type="date"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124,58,237,.2);
}

.date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.6rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  transition: all var(--transition);
  text-decoration: none;
}

.btn-primary {
  width: 100%;
  background: linear-gradient(135deg, var(--primary) 0%, #5B21B6 45%, var(--accent) 100%);
  color: #fff;
  margin-top: .5rem;
  box-shadow: 0 4px 24px rgba(124,58,237,.45);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(124,58,237,.5), 0 4px 18px rgba(34,197,94,.25);
}

.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: var(--bg-card2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: .88rem;
}
.btn-ghost:hover { background: var(--border); color: var(--text); }

/* ================================================
   REPORT PAGE
   ================================================ */

/* Header */
.report-header {
  background: rgba(10,10,12,.96);
  border-bottom: 1px solid rgba(124,58,237,.35);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 28px rgba(0,0,0,.55), 0 1px 0 rgba(34,197,94,.12);
}

.header-left { display: flex; align-items: center; gap: 1rem; }

.header-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.header-brand-icon {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(124,58,237,.4);
}

.header-brand-text {
  font-size: .82rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .04em;
}

.header-divider {
  width: 1px;
  height: 32px;
  background: var(--border);
  margin: 0 .5rem;
}

.header-info h2 { font-size: 1rem; font-weight: 700; }
.header-info p  { font-size: .78rem; color: var(--text-muted); }

.header-right { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

/* Layout */
.report-body { padding: 2rem; max-width: 1400px; margin: 0 auto; }

/* Section titles */
.section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.section-title .title-bar {
  width: 4px; height: 20px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
  border-radius: 4px;
  flex-shrink: 0;
}

/* ── KPI Cards ── */
.kpi-section { margin-bottom: 2rem; }

.kpi-section-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
  margin-bottom: .8rem;
  padding-left: .2rem;
}

.kpi-grid-main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}

.kpi-grid-secondary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1rem;
}

.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  animation: fadeUp .4s ease both;
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
}

.kpi-card.size-lg { padding: 1.6rem 1.6rem; }
.kpi-card.size-lg .kpi-value { font-size: 2rem; }

.kpi-card.color-gold::before    { background: linear-gradient(90deg, var(--gold), var(--gold-glow)); }
.kpi-card.color-green::before   { background: linear-gradient(90deg, var(--success), var(--success-glow)); }
.kpi-card.color-purple::before  { background: linear-gradient(90deg, var(--primary), var(--accent)); }
.kpi-card.color-teal::before    { background: linear-gradient(90deg, #2dd4bf, #0891b2); }
.kpi-card.color-blue::before    { background: linear-gradient(90deg, var(--primary), var(--accent)); }
.kpi-card.color-yellow::before  { background: linear-gradient(90deg, var(--warning), var(--gold-glow)); }
.kpi-card.color-orange::before  { background: linear-gradient(90deg, #f97316, #ea580c); }
.kpi-card.color-pink::before    { background: linear-gradient(90deg, var(--pink), #db2777); }
.kpi-card.color-cyan::before    { background: linear-gradient(90deg, var(--cyan), #0284c7); }
.kpi-card.color-red::before     { background: linear-gradient(90deg, var(--danger), #e11d48); }

.kpi-card.size-lg.color-gold   { box-shadow: 0 0 30px rgba(252,211,77,.08); }
.kpi-card.size-lg.color-green  { box-shadow: 0 0 30px rgba(74,222,128,.08); }
.kpi-card.size-lg.color-purple { box-shadow: 0 0 30px rgba(124,58,237,.1); }
.kpi-card.size-lg.color-teal   { box-shadow: 0 0 30px rgba(45,212,191,.08); }

.kpi-card.color-gold   { background: linear-gradient(180deg, rgba(252,211,77,.06) 0%, var(--bg-card) 55%); }
.kpi-card.color-green  { background: linear-gradient(180deg, rgba(74,222,128,.06) 0%, var(--bg-card) 55%); }
.kpi-card.color-purple { background: linear-gradient(180deg, rgba(124,58,237,.08) 0%, var(--bg-card) 55%); }
.kpi-card.color-teal   { background: linear-gradient(180deg, rgba(45,212,191,.06) 0%, var(--bg-card) 55%); }
.kpi-card.color-orange { background: linear-gradient(180deg, rgba(249,115,22,.06) 0%, var(--bg-card) 55%); }
.kpi-card.color-cyan   { background: linear-gradient(180deg, rgba(6,182,212,.06) 0%, var(--bg-card) 55%); }

.kpi-card:hover { transform: translateY(-3px); box-shadow: 0 8px 36px rgba(0,0,0,.5); }

.kpi-label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: .4rem;
}

.kpi-value {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1.1;
}

.kpi-icon {
  position: absolute;
  top: 1rem; right: 1rem;
  font-size: 1.5rem;
  opacity: .15;
}

/* ── Embudo de Conversión ── */
.funnel-section {
  margin-bottom: 2rem;
}

.funnel-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  animation: fadeUp .5s ease both;
}

.funnel-steps {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.funnel-step {
  display: flex;
  align-items: center;
  gap: 1rem;
  animation: fadeUp .4s ease both;
}

.funnel-step:nth-child(1) { animation-delay: .1s; }
.funnel-step:nth-child(2) { animation-delay: .2s; }
.funnel-step:nth-child(3) { animation-delay: .3s; }
.funnel-step:nth-child(4) { animation-delay: .4s; }
.funnel-step:nth-child(5) { animation-delay: .5s; }

.funnel-label {
  width: 140px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
  flex-shrink: 0;
}

.funnel-bar-wrap {
  flex: 1;
  height: 38px;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.funnel-bar {
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  transition: width .8s cubic-bezier(.4,0,.2,1);
  min-width: fit-content;
}

.funnel-bar.bar-reach      { background: linear-gradient(90deg, #A855F7, #C084FC); }
.funnel-bar.bar-clicks     { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
.funnel-bar.bar-atc        { background: linear-gradient(90deg, #FCD34D, #FBBF24); }
.funnel-bar.bar-checkout   { background: linear-gradient(90deg, #ec4899, #f472b6); }
.funnel-bar.bar-purchases  { background: linear-gradient(90deg, #4ADE80, #22C55E); }

.funnel-rate {
  width: 80px;
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}

.funnel-rate span {
  display: block;
  font-size: .82rem;
  color: var(--success);
  font-weight: 700;
}

/* ── Panels ── */
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.8rem;
  animation: fadeUp .5s ease both;
}

.panel-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.panel-title::before {
  content: '';
  display: inline-block;
  width: 4px; height: 18px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
  border-radius: 4px;
}

/* Charts grid */
.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.8rem;
}

/* ── Top Creativos ── */
.creatives-section { margin-bottom: 2rem; }

.creatives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
}

.creative-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
  transition: transform var(--transition), box-shadow var(--transition);
  animation: fadeUp .4s ease both;
  position: relative;
  overflow: hidden;
}

.creative-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}

.creative-rank {
  position: absolute;
  top: .8rem;
  right: .8rem;
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  font-weight: 800;
  color: #fff;
}

.creative-name {
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: 1rem;
  max-width: 85%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creative-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}

.creative-metric {
  display: flex;
  flex-direction: column;
}

.creative-metric-label {
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.creative-metric-value {
  font-size: 1rem;
  font-weight: 700;
}

.creative-metric-value.value-green { color: var(--success); }
.creative-metric-value.value-gold { color: var(--gold); }

/* ── Top Públicos / Audiencias ── */
.audiences-section { margin-bottom: 2rem; }

/* ── Table ── */
.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}

thead th {
  text-align: left;
  padding: .7rem .8rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody tr {
  border-bottom: 1px solid rgba(63,63,70,.6);
  transition: background var(--transition);
}

tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: rgba(124,58,237,.08); }

tbody td {
  padding: .75rem .8rem;
  white-space: nowrap;
}

td.campaign-name, td.name-col {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

td.value-highlight {
  font-weight: 700;
  color: var(--success);
}

/* Performance badge */
.perf-badge {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 12px;
  font-size: .7rem;
  font-weight: 700;
}

.perf-badge.perf-good { background: rgba(74,222,128,.15); color: var(--success); }
.perf-badge.perf-ok   { background: rgba(253,224,71,.15); color: var(--warning); }
.perf-badge.perf-low  { background: rgba(251,113,133,.15); color: var(--danger); }

/* ── Footer ── */
.report-footer {
  text-align: center;
  padding: 2rem 1rem;
  border-top: 1px solid var(--border);
  margin-top: 1rem;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: var(--text-muted);
  font-weight: 500;
}

.footer-brand strong {
  color: var(--accent);
  font-weight: 700;
}

/* Loading */
.loading-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 1.5rem;
}

.spinner {
  width: 52px; height: 52px;
  border: 4px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.loading-text { color: var(--text-muted); font-size: .95rem; }

/* Error */
.error-box {
  background: rgba(251,113,133,.08);
  border: 1px solid rgba(251,113,133,.3);
  border-radius: var(--radius);
  padding: 1.8rem;
  text-align: center;
  max-width: 520px;
  margin: 4rem auto;
}

.error-box .error-icon { font-size: 2.5rem; margin-bottom: .8rem; }
.error-box h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.error-box p  { color: var(--text-muted); font-size: .9rem; }

/* Hidden */
.hidden { display: none !important; }

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Animation delays */
.kpi-card:nth-child(1) { animation-delay: .05s; }
.kpi-card:nth-child(2) { animation-delay: .10s; }
.kpi-card:nth-child(3) { animation-delay: .15s; }
.kpi-card:nth-child(4) { animation-delay: .20s; }
.kpi-card:nth-child(5) { animation-delay: .25s; }
.kpi-card:nth-child(6) { animation-delay: .30s; }

.creative-card:nth-child(1) { animation-delay: .05s; }
.creative-card:nth-child(2) { animation-delay: .10s; }
.creative-card:nth-child(3) { animation-delay: .15s; }
.creative-card:nth-child(4) { animation-delay: .20s; }
.creative-card:nth-child(5) { animation-delay: .25s; }
.creative-card:nth-child(6) { animation-delay: .30s; }

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 900px) {
  .kpi-grid-main { grid-template-columns: repeat(2, 1fr); }
  .charts-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .home-card { padding: 2rem 1.5rem; }
  .date-row  { grid-template-columns: 1fr; }
  .report-header { padding: 1rem; }
  .report-body   { padding: 1rem; }
  .kpi-grid-main { grid-template-columns: 1fr 1fr; }
  .kpi-grid-secondary { grid-template-columns: 1fr 1fr; }
  .header-right { width: 100%; justify-content: flex-start; }
  .funnel-label { width: 90px; font-size: .72rem; }
  .creatives-grid { grid-template-columns: 1fr; }
  .header-divider { display: none; }
}

/* ================================================
   GRIDS DE KPIs
   ================================================ */

/* ── Compare strip ── */
.compare-strip {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .55rem 1rem;
  background: rgba(124,58,237,.06);
  border: 1px solid rgba(124,58,237,.2);
  border-radius: 10px;
  margin-bottom: .8rem;
}

.cs-label {
  font-size: .77rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.cs-dates {
  font-size: .82rem;
  font-weight: 600;
  color: #a78bfa;
}

.cs-edit-btn {
  margin-left: auto;
  background: none;
  border: 1px solid rgba(124,58,237,.3);
  color: var(--text-muted);
  border-radius: 8px;
  padding: .28rem .7rem;
  font-size: .74rem;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}

.cs-edit-btn:hover {
  border-color: var(--primary);
  color: #a78bfa;
  background: rgba(124,58,237,.1);
}

/* ── Compare edit panel ── */
.compare-edit-panel {
  background: rgba(124,58,237,.05);
  border: 1px solid rgba(124,58,237,.18);
  border-radius: 10px;
  padding: .8rem 1rem;
  margin-bottom: .9rem;
}

.cep-row {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

.cep-group {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.cep-label {
  font-size: .73rem;
  color: var(--text-muted);
  font-weight: 500;
}

.cep-input {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: .42rem .75rem;
  font-size: .85rem;
  outline: none;
  transition: border-color .2s;
}

.cep-input:focus {
  border-color: var(--primary);
}

.cep-actions {
  display: flex;
  gap: .6rem;
  align-items: center;
}

.kpi-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.kpi-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

/* ── 2 columnas de gráficas ── */
.charts-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  margin-bottom: 1.8rem;
}

.panel-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-muted);
  margin-bottom: .9rem;
}

.chart-empty {
  color: var(--text-muted);
  font-size: .9rem;
  padding: .5rem;
}

/* ── Embudo horizontal (tarjetas + conectores) ── */
.funnel-strip {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding-bottom: .5rem;
}

.funnel-step-card {
  flex: 1;
  min-width: 130px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1rem;
  text-align: center;
  animation: fadeUp .4s ease both;
  transition: transform var(--transition), box-shadow var(--transition);
}

.funnel-step-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
}

.funnel-step-card.fsc-highlight-atc {
  border-color: rgba(252,211,77,.4);
  box-shadow: 0 0 18px rgba(252,211,77,.1);
}

.funnel-step-card.fsc-highlight-checkout {
  border-color: rgba(236,72,153,.4);
  box-shadow: 0 0 18px rgba(236,72,153,.1);
}

.funnel-step-card.fsc-highlight-purchase {
  border-color: rgba(74,222,128,.4);
  box-shadow: 0 0 18px rgba(74,222,128,.12);
}

.fsc-stage {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: .4rem;
}

.fsc-value {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.4px;
  line-height: 1.1;
}

.funnel-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  padding: 0 .5rem;
  flex-shrink: 0;
}

.fc-rate-label {
  font-size: .65rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

.fc-arrow {
  font-size: 1rem;
  color: var(--border);
}

/* ================================================
   NUEVAS CLASES — REDISEÑO E-COMMERCE
   ================================================ */

/* ── Deltas de comparación ── */
.kpi-delta {
  margin-top: .55rem;
  min-height: 1.1rem;
  font-size: .75rem;
  font-weight: 600;
}
.delta-good    { color: var(--success); }
.delta-bad     { color: var(--danger); }
.delta-neutral { color: var(--text-muted); }

/* ── Colores semánticos para ROAS ── */
.roas-good { color: var(--success); }
.roas-ok   { color: var(--warning); }
.roas-bad  { color: var(--danger); }

/* ── Funnel horizontal con tarjetas ── */
.funnel-cards-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  padding-bottom: .4rem;
  margin-bottom: 2rem;
}

.funnel-card-item {
  flex: 1;
  min-width: 140px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1rem;
  text-align: center;
  animation: fadeUp .4s ease both;
}

.fc-icon  { font-size: 1.4rem; display: block; margin-bottom: .35rem; }
.fc-label {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: .45rem;
}
.fc-value {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.3px;
}

.funnel-arrow-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  padding: 0 .6rem;
  flex-shrink: 0;
}
.conv-pct {
  font-size: .68rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.conv-arrow { font-size: 1.1rem; color: var(--text-muted); }

/* ── 3 métricas secundarias ── */
.metrics-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.8rem;
}

/* ── Resaltado de filas en tabla de campañas ── */
tbody tr.row-good { background: rgba(74,222,128,.05); }
tbody tr.row-bad  { background: rgba(251,113,133,.05); }
tbody tr.row-good:hover { background: rgba(74,222,128,.1); }
tbody tr.row-bad:hover  { background: rgba(251,113,133,.1); }

/* ════════════════════════════════════════
   EFICIENCIA POR ETAPA DEL EMBUDO
════════════════════════════════════════ */
.funnel-efficiency-panel {}

.funnel-eff-grid {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  padding-bottom: .3rem;
}

.eff-col {
  flex: 1;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem .9rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card2);
  position: relative;
}

.eff-col-purple { border-top: 3px solid var(--primary); }
.eff-col-cyan   { border-top: 3px solid #06b6d4; }
.eff-col-yellow { border-top: 3px solid #FDE047; }
.eff-col-pink   { border-top: 3px solid #ec4899; }
.eff-col-green  { border-top: 3px solid #4ADE80; }

.eff-icon   { font-size: 1.3rem; line-height: 1; }
.eff-stage  { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.eff-volume { font-size: 1.5rem; font-weight: 800; letter-spacing: -.3px; line-height: 1.1; margin: .15rem 0 .3rem; }

.eff-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .72rem;
}

.eff-key { color: var(--text-muted); font-weight: 500; }
.eff-val { font-weight: 700; }

.eff-conv-good { color: var(--success); }
.eff-conv-ok   { color: var(--warning); }
.eff-conv-bad  { color: var(--danger); }

.eff-arrow {
  color: var(--border);
  font-size: .9rem;
  padding: 0 .4rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  align-self: center;
}

/* ════════════════════════════════════════
   ADS TOOLBAR — Sort buttons
════════════════════════════════════════ */
.ads-toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}

.ads-toolbar-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  white-space: nowrap;
}

.ads-sort-btns {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

.sort-btn {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: inherit;
  font-size: .75rem;
  font-weight: 600;
  padding: .35rem .8rem;
  border-radius: 20px;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.sort-btn:hover {
  border-color: var(--primary);
  color: var(--text);
}

.sort-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 14px rgba(124,58,237,.45);
}

/* ════════════════════════════════════════
   BOTÓN VER ANUNCIO
════════════════════════════════════════ */
.ad-preview-btn {
  margin-top: .6rem;
  width: 100%;
  padding: .5rem;
  background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.3);
  border-radius: 10px;
  color: var(--accent);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  letter-spacing: .02em;
}

.ad-preview-btn:hover {
  background: rgba(124,58,237,.22);
  border-color: var(--primary);
  transform: translateY(-1px);
}

/* ════════════════════════════════════════
   MODAL PREVIEW
════════════════════════════════════════ */
.preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.82);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .18s ease;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.preview-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  width: 100%;
  max-width: 900px;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,.8);
  animation: slideUp .22s ease;
}

@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.preview-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: .85rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
  z-index: 10;
}
.preview-close:hover { background: var(--border); color: var(--text); }

.preview-modal-header {
  padding: 1.5rem 1.5rem .8rem;
  border-bottom: 1px solid var(--border);
}

.preview-campaign-tag {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--accent);
  margin-bottom: .35rem;
}

.preview-ad-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  padding-right: 2.5rem;
}

/* Modal body: 2 columnas */
.preview-modal-body {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 0;
  min-height: 300px;
}

/* Columna iframe */
.preview-iframe-col {
  padding: 1.2rem 1.5rem;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.preview-format-btns {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

.pfmt-btn {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: inherit;
  font-size: .72rem;
  font-weight: 600;
  padding: .3rem .75rem;
  border-radius: 16px;
  cursor: pointer;
  transition: all var(--transition);
}
.pfmt-btn:hover { border-color: var(--primary); color: var(--text); }
.pfmt-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-glow));
  border-color: transparent;
  color: #fff;
}

.preview-iframe-wrap {
  flex: 1;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: var(--text-muted);
  font-size: .9rem;
}

.preview-iframe-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.preview-error {
  color: var(--danger);
  font-size: .85rem;
  text-align: center;
  padding: 1rem;
}

/* Columna métricas */
.preview-metrics-col {
  padding: 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.preview-metrics-title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-muted);
  margin-bottom: .2rem;
}

.preview-metrics-grid {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.pmg-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .6rem .7rem;
  border-radius: 10px;
  background: var(--bg-card2);
  gap: .5rem;
}

.pmg-label {
  font-size: .72rem;
  color: var(--text-muted);
  font-weight: 500;
}

.pmg-value {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
}

/* ── Responsive modal ── */
@media (max-width: 700px) {
  .preview-modal-body { grid-template-columns: 1fr; }
  .preview-iframe-col { border-right: none; border-bottom: 1px solid var(--border); }
  .preview-modal { max-height: 95vh; }
}

/* ── Subtítulo de sección ── */
.section-subtitle {
  font-size: .82rem;
  color: var(--text-muted);
  margin-top: -.7rem;
  margin-bottom: 1.2rem;
}

/* ════════════════════════════════════════
   AD CARDS — Anuncios con mayor impacto
════════════════════════════════════════ */
.ads-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-bottom: 2rem;
}

.ad-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: fadeUp .45s ease both;
  transition: transform var(--transition), box-shadow var(--transition);
}

.ad-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
}

/* Media (thumbnail) */
.ad-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg-card2);
  overflow: hidden;
  flex-shrink: 0;
}

.ad-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ad-thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-card2), #1a1a2e);
}

.ad-thumb-fallback span {
  font-size: 2rem;
  font-weight: 800;
  color: var(--border);
  letter-spacing: -.05em;
}

.ad-roas-badge {
  position: absolute;
  top: .6rem;
  left: .6rem;
  padding: .25rem .65rem;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.badge-green  { background: rgba(74,222,128,.2);  color: #4ADE80; border: 1px solid rgba(74,222,128,.4); }
.badge-yellow { background: rgba(253,224,71,.2);  color: #FDE047; border: 1px solid rgba(253,224,71,.4); }
.badge-red    { background: rgba(251,113,133,.2); color: #FB7185; border: 1px solid rgba(251,113,133,.4); }

.ad-purchases-pill {
  position: absolute;
  bottom: .6rem;
  right: .6rem;
  background: rgba(74,222,128,.15);
  border: 1px solid rgba(74,222,128,.35);
  color: #4ADE80;
  font-size: .68rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: 12px;
}

/* Cuerpo */
.ad-card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1;
}

.ad-campaign-tag {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ad-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ad-headline {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 1px solid rgba(63,63,70,.5);
  padding-top: .35rem;
  margin-top: .1rem;
}

.ad-body-text {
  font-size: .72rem;
  color: var(--text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Métricas */
.ad-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem .6rem;
  margin-top: .5rem;
  padding-top: .6rem;
  border-top: 1px solid rgba(63,63,70,.5);
}

.ad-metric {
  display: flex;
  flex-direction: column;
  gap: .05rem;
}

.am-label {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
}

.am-value {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
}

/* ── Responsive nuevas clases ── */
@media (max-width: 1200px) {
  .kpi-grid-6 { grid-template-columns: repeat(3, 1fr); }
  .kpi-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .ads-grid   { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .metrics-row-3 { grid-template-columns: repeat(3, 1fr); }
  .kpi-grid-6 { grid-template-columns: repeat(3, 1fr); }
  .kpi-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .charts-2col { grid-template-columns: 1fr; }
  .ads-grid   { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .metrics-row-3 { grid-template-columns: 1fr; }
  .kpi-grid-6 { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .charts-2col { grid-template-columns: 1fr; }
  .ads-grid   { grid-template-columns: repeat(2, 1fr); }
  .funnel-step-card { min-width: 100px; padding: .8rem .6rem; }
  .fsc-value { font-size: 1.2rem; }
}

/* ════════════════════════════════════════
   PDF EXPORT MODE — tema claro para impresión
   Se aplica sólo durante la captura html2canvas
════════════════════════════════════════ */
.pdf-export-mode {
  background: #f4f4f6 !important;
  color: #111827 !important;
}

/* Contenedores / tarjetas */
.pdf-export-mode .kpi-card,
.pdf-export-mode .panel,
.pdf-export-mode .funnel-step-card,
.pdf-export-mode .eff-col,
.pdf-export-mode .ad-card,
.pdf-export-mode .pmg-row {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
  color: #111827 !important;
}

/* Etiquetas / textos secundarios */
.pdf-export-mode .kpi-label,
.pdf-export-mode .panel-label,
.pdf-export-mode .fsc-stage,
.pdf-export-mode .eff-stage,
.pdf-export-mode .eff-key,
.pdf-export-mode .am-label,
.pdf-export-mode .ad-campaign-tag,
.pdf-export-mode .ad-body-text,
.pdf-export-mode .ad-headline,
.pdf-export-mode .pmg-label,
.pdf-export-mode .ads-toolbar-label,
.pdf-export-mode .footer-brand {
  color: #6b7280 !important;
}

/* Valores principales */
.pdf-export-mode .kpi-value,
.pdf-export-mode .fsc-value,
.pdf-export-mode .eff-volume,
.pdf-export-mode .ad-name,
.pdf-export-mode .am-value,
.pdf-export-mode .pmg-value {
  color: #111827 !important;
}

.pdf-export-mode .kpi-icon { color: #374151 !important; }

/* Títulos de sección */
.pdf-export-mode .section-title { color: #111827 !important; }
.pdf-export-mode .section-title .title-bar {
  background: linear-gradient(180deg, #7C3AED, #22C55E) !important;
}

/* Colores semánticos — versiones de alto contraste para fondo blanco */
.pdf-export-mode .roas-good,
.pdf-export-mode .delta-good,
.pdf-export-mode .eff-conv-good { color: #15803d !important; }

.pdf-export-mode .roas-ok,
.pdf-export-mode .eff-conv-ok   { color: #b45309 !important; }

.pdf-export-mode .roas-bad,
.pdf-export-mode .delta-bad,
.pdf-export-mode .eff-conv-bad  { color: #b91c1c !important; }

.pdf-export-mode .delta-neutral { color: #6b7280 !important; }

/* Embudo */
.pdf-export-mode .fc-rate-label { color: #7C3AED !important; }
.pdf-export-mode .fc-arrow,
.pdf-export-mode .eff-arrow     { color: #d1d5db !important; }

.pdf-export-mode .funnel-step-card.fsc-highlight-atc {
  border-color: rgba(180,83,9,.4) !important;
}
.pdf-export-mode .funnel-step-card.fsc-highlight-checkout {
  border-color: rgba(190,24,93,.4) !important;
}
.pdf-export-mode .funnel-step-card.fsc-highlight-purchase {
  border-color: rgba(21,128,61,.4) !important;
}

/* Tabla */
.pdf-export-mode table                { background: #fff !important; }
.pdf-export-mode thead th             { color: #6b7280 !important; border-color: #e5e7eb !important; }
.pdf-export-mode tbody td             { color: #111827 !important; }
.pdf-export-mode tbody tr             { border-color: #f3f4f6 !important; }
.pdf-export-mode tbody tr.row-good    { background: rgba(21,128,61,.04) !important; }
.pdf-export-mode tbody tr.row-bad     { background: rgba(185,28,28,.04) !important; }
.pdf-export-mode tbody tr:hover       { background: transparent !important; }

/* Badges ROAS en ad-cards */
.pdf-export-mode .badge-green  { background: rgba(21,128,61,.1) !important; color: #15803d !important; border-color: rgba(21,128,61,.3) !important; }
.pdf-export-mode .badge-yellow { background: rgba(180,83,9,.1)  !important; color: #b45309 !important; border-color: rgba(180,83,9,.3)  !important; }
.pdf-export-mode .badge-red    { background: rgba(185,28,28,.1) !important; color: #b91c1c !important; border-color: rgba(185,28,28,.3) !important; }

.pdf-export-mode .ad-purchases-pill {
  background: rgba(21,128,61,.1) !important;
  color: #15803d !important;
  border-color: rgba(21,128,61,.3) !important;
}

.pdf-export-mode .ad-thumb-fallback          { background: #f3f4f6 !important; }
.pdf-export-mode .ad-thumb-fallback span     { color: #9ca3af !important; }
.pdf-export-mode .ad-metrics-grid            { border-color: #e5e7eb !important; }
.pdf-export-mode #compareStrip,
.pdf-export-mode #compareEditPanel           { display: none !important; }

/* Footer */
.pdf-export-mode .report-footer      { border-color: #e5e7eb !important; }
.pdf-export-mode .footer-brand strong { color: #7C3AED !important; }

/* Ocultar elementos interactivos (no tienen sentido en un PDF) */
.pdf-export-mode .ads-toolbar,
.pdf-export-mode .ad-preview-btn { display: none !important; }

/* ── Portada PDF: oculta en pantalla, visible solo al imprimir ── */
.pdf-cover { display: none; }

/* ════════════════════════════════════════
   SPLIT LAYOUT — Página de inicio pública
════════════════════════════════════════ */
.split-layout {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  min-height: 100vh;
}

/* ── Panel izquierdo (marca pública) ── */
.split-left {
  background:
    radial-gradient(ellipse 70% 50% at 20% 20%, rgba(124,58,237,.35) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(34,197,94,.2) 0%, transparent 55%),
    linear-gradient(160deg, #0f0720 0%, #1a0a3e 45%, #071a0f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 4rem;
  position: relative;
  overflow: hidden;
}

.split-left::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--gold));
}

.split-left-inner {
  max-width: 440px;
  width: 100%;
}

.sl-logo-wrap {
  margin-bottom: 1.4rem;
}

.sl-logo-icon {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  box-shadow: 0 8px 32px rgba(124,58,237,.5), 0 4px 18px rgba(34,197,94,.2);
}

.sl-brand {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1;
  color: #fff;
  margin-bottom: .55rem;
}

.sl-tagline {
  font-size: 1rem;
  font-weight: 600;
  background: linear-gradient(90deg, #a78bfa, #4ade80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: .01em;
  margin-bottom: 1.6rem;
}

.sl-divider {
  width: 48px; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 4px;
  margin-bottom: 1.4rem;
}

.sl-description {
  color: rgba(255,255,255,.65);
  font-size: .92rem;
  line-height: 1.7;
  margin-bottom: 1.8rem;
}

.sl-services {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 2rem;
}

.sl-services li {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .9rem;
  font-weight: 500;
  color: rgba(255,255,255,.8);
}

.sl-svc-icon {
  font-size: 1.05rem;
  flex-shrink: 0;
}

.sl-contact {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .82rem;
  color: rgba(255,255,255,.45);
}

/* ── Panel derecho (admin) ── */
.split-right {
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  border-left: 1px solid rgba(124,58,237,.15);
}

.split-right .home-card {
  box-shadow: none;
  border-color: var(--border);
  max-width: 400px;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .split-layout { grid-template-columns: 1fr; }

  .split-left {
    padding: 2.5rem 2rem;
    min-height: auto;
  }

  .sl-brand { font-size: 2rem; }
  .sl-logo-icon { width: 60px; height: 60px; font-size: 1.1rem; border-radius: 14px; }

  .split-right {
    border-left: none;
    border-top: 1px solid rgba(124,58,237,.15);
    padding: 2rem 1.5rem;
  }
}

/* ════════════════════════════════════════
   PIN GATE — Acceso protegido al panel
════════════════════════════════════════ */
.pin-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(124,58,237,.28) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(34,197,94,.14) 0%, transparent 60%),
    var(--bg);
}

.pin-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 2.6rem 3rem;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow);
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: fadeUp .45s ease both;
}

.pin-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--gold));
}

.pin-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin-bottom: 1rem;
}

.pin-logo-icon {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 4px 18px rgba(124,58,237,.4);
  flex-shrink: 0;
}

.pin-logo-text {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: .02em;
}

.pin-subtitle {
  color: var(--text-muted);
  font-size: .88rem;
  line-height: 1.6;
  margin-bottom: 1.8rem;
}

.pin-form-group {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.pin-input {
  width: 100%;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  padding: .8rem 1rem;
  outline: none;
  text-align: center;
  letter-spacing: .12em;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
  -webkit-appearance: none;
}

.pin-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124,58,237,.2);
}

.pin-error {
  color: var(--danger);
  font-size: .8rem;
  font-weight: 500;
  margin-top: .25rem;
  animation: fadeUp .2s ease both;
}

/* ════════════════════════════════════════
   @media print — PDF PROFESIONAL
   Optimizado para "Guardar como PDF" en Chrome
════════════════════════════════════════ */
@media print {
  @page { size: A4 landscape; margin: .8cm 1.1cm; }

  /* Desactivar animaciones y transiciones */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  html, body {
    background: #ffffff !important;
    color: #111827 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-size: 10pt;
  }

  /* ── PORTADA DE MARCA ───────────────────────────── */
  .pdf-cover {
    display: flex !important;
    align-items: center;
    gap: 1.6rem;
    background: linear-gradient(120deg, #1e0f5c 0%, #4c1d95 52%, #0f3d22 100%) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    padding: .5cm .8cm;
    margin-bottom: .55cm;
    border-radius: 14px;
    page-break-inside: avoid;
    break-inside: avoid;
    position: relative;
    overflow: hidden;
  }

  .pdf-cover::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #7C3AED, #22C55E, #FCD34D) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .pdfcov-left {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-shrink: 0;
  }

  .pdfcov-logo-icon {
    width: 50px; height: 50px;
    background: linear-gradient(135deg, #7C3AED, #22C55E) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    font-weight: 800;
    color: #fff !important;
    flex-shrink: 0;
    letter-spacing: -.02em;
  }

  .pdfcov-logo-texts {
    display: flex;
    flex-direction: column;
    gap: .1rem;
  }

  .pdfcov-brand {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff !important;
    letter-spacing: .02em;
  }

  .pdfcov-tagline {
    display: block;
    font-size: .64rem;
    color: rgba(255,255,255,.58) !important;
    font-weight: 500;
    letter-spacing: .05em;
  }

  .pdfcov-sep {
    width: 1px; height: 40px;
    background: rgba(255,255,255,.22) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    flex-shrink: 0;
  }

  .pdfcov-meta {
    display: flex;
    gap: 2rem;
    flex: 1;
  }

  .pdfcov-field {
    display: flex;
    flex-direction: column;
    gap: .1rem;
  }

  .pdfcov-field-label {
    font-size: .56rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.48) !important;
  }

  .pdfcov-field-val {
    font-size: .92rem;
    font-weight: 700;
    color: #fff !important;
  }

  #pdfCovPeriod {
    color: #c4b5fd !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .pdfcov-date-block {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin-left: auto;
    text-align: right;
  }

  /* ── Ocultar header de pantalla ── */
  .report-header { display: none !important; }

  /* ── Body ── */
  .report-body {
    background: #ffffff !important;
    padding: 0 !important;
    max-width: none !important;
  }

  /* ── Ocultar controles interactivos ── */
  #compareStrip, #compareEditPanel,
  .ads-toolbar, .ad-preview-btn,
  .preview-overlay, .loading-overlay,
  #btnPDF, #btnVolver { display: none !important; }

  /* ── Títulos de sección ── */
  .section-title {
    color: #111827 !important;
    font-size: .8rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: .38cm !important;
    margin-bottom: .28cm !important;
    padding-bottom: .22rem;
    border-bottom: 1.5px solid #ececf0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    page-break-after: avoid;
    break-after: avoid;
  }

  .section-title .title-bar {
    background: linear-gradient(180deg, #7C3AED, #22C55E) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ── KPI Cards ── */
  .kpi-section {
    margin-bottom: .35cm !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .kpi-grid-6 {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: .42rem !important;
  }

  .kpi-card {
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    padding: .5rem .65rem !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    break-inside: avoid;
  }

  /* Fondos tintados según tipo */
  .kpi-card.color-gold   { background: linear-gradient(180deg, rgba(252,211,77,.12) 0%, #fafafa 60%) !important; }
  .kpi-card.color-green  { background: linear-gradient(180deg, rgba(74,222,128,.11) 0%, #fafafa 60%) !important; }
  .kpi-card.color-purple { background: linear-gradient(180deg, rgba(124,58,237,.10) 0%, #fafafa 60%) !important; }
  .kpi-card.color-teal   { background: linear-gradient(180deg, rgba(45,212,191,.10) 0%, #fafafa 60%) !important; }
  .kpi-card.color-orange { background: linear-gradient(180deg, rgba(249,115,22,.10) 0%, #fafafa 60%) !important; }
  .kpi-card.color-cyan   { background: linear-gradient(180deg, rgba(6,182,212,.10)  0%, #fafafa 60%) !important; }

  /* Barras de color superiores */
  .kpi-card.color-gold::before   { background: linear-gradient(90deg,#f59e0b,#fbbf24) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .kpi-card.color-green::before  { background: linear-gradient(90deg,#22c55e,#16a34a) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .kpi-card.color-purple::before { background: linear-gradient(90deg,#7c3aed,#22c55e) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .kpi-card.color-teal::before   { background: linear-gradient(90deg,#2dd4bf,#0891b2) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .kpi-card.color-orange::before { background: linear-gradient(90deg,#f97316,#ea580c) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .kpi-card.color-cyan::before   { background: linear-gradient(90deg,#06b6d4,#0284c7) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }

  .kpi-label { color: #6b7280 !important; font-size: .56rem !important; }
  .kpi-value { color: #111827 !important; font-size: 1.12rem !important; }
  .kpi-icon  { font-size: 1rem !important; opacity: .18 !important; }
  .kpi-delta { font-size: .58rem !important; }

  /* ── Colores semánticos ── */
  .roas-good, .delta-good, .eff-conv-good { color: #15803d !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .roas-ok,   .eff-conv-ok                { color: #b45309 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .roas-bad,  .delta-bad,  .eff-conv-bad  { color: #b91c1c !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .delta-neutral                           { color: #6b7280 !important; }

  /* ── Panels ── */
  .panel {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    margin-bottom: .38cm !important;
    padding: .5rem .7rem !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .panel-label { color: #374151 !important; font-size: .6rem !important; }

  /* ── Gráficas ── */
  canvas {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    max-height: 152px !important;
  }

  .charts-2col {
    gap: .75rem !important;
    margin-bottom: .38cm !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* ── Embudo horizontal ── */
  .funnel-strip { overflow: visible !important; }

  .funnel-step-card {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    padding: .55rem .5rem !important;
    min-width: 0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .funnel-step-card.fsc-highlight-atc {
    border-color: rgba(180,83,9,.38) !important;
    background: linear-gradient(180deg,rgba(245,158,11,.09) 0%,#f9fafb 65%) !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .funnel-step-card.fsc-highlight-checkout {
    border-color: rgba(190,24,93,.38) !important;
    background: linear-gradient(180deg,rgba(236,72,153,.09) 0%,#f9fafb 65%) !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .funnel-step-card.fsc-highlight-purchase {
    border-color: rgba(21,128,61,.38) !important;
    background: linear-gradient(180deg,rgba(34,197,94,.10) 0%,#f9fafb 65%) !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }

  .fsc-stage     { color: #6b7280 !important; font-size: .56rem !important; }
  .fsc-value     { color: #111827 !important; font-size: 1rem !important; }
  .fc-rate-label { color: #6d28d9 !important; font-size: .56rem !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .fc-arrow      { color: #d1d5db !important; font-size: .8rem !important; }

  /* ── Eficiencia por etapa ── */
  .funnel-efficiency-panel { page-break-inside: avoid; break-inside: avoid; }
  .funnel-eff-grid { overflow: visible !important; }

  .eff-col {
    border-color: #e5e7eb !important;
    padding: .6rem .55rem !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .eff-col-purple { border-top-color:#7C3AED !important; background:linear-gradient(180deg,rgba(124,58,237,.08) 0%,#fafafa 65%) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .eff-col-cyan   { border-top-color:#0891b2 !important; background:linear-gradient(180deg,rgba(6,182,212,.08)  0%,#fafafa 65%) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .eff-col-yellow { border-top-color:#d97706 !important; background:linear-gradient(180deg,rgba(245,158,11,.08) 0%,#fafafa 65%) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .eff-col-pink   { border-top-color:#be185d !important; background:linear-gradient(180deg,rgba(236,72,153,.08) 0%,#fafafa 65%) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .eff-col-green  { border-top-color:#15803d !important; background:linear-gradient(180deg,rgba(34,197,94,.10)  0%,#fafafa 65%) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }

  .eff-icon   { font-size: 1.1rem !important; }
  .eff-stage  { color: #6b7280 !important; font-size: .54rem !important; }
  .eff-volume { color: #111827 !important; font-size: 1.05rem !important; }
  .eff-key    { color: #9ca3af !important; font-size: .58rem !important; }
  .eff-val    { color: #374151 !important; font-size: .65rem !important; }
  .eff-arrow  { color: #d1d5db !important; font-size: .8rem !important; }

  /* ── Tabla ── */
  table {
    border-collapse: collapse !important;
    font-size: .7rem !important;
    width: 100% !important;
  }

  thead tr {
    background: #1e0f5c !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  thead th {
    color: #fff !important;
    border: 1px solid #2d1d6e !important;
    font-size: .58rem !important;
    padding: .4rem .55rem !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  tbody td {
    color: #111827 !important;
    border-bottom: 1px solid #f3f4f6 !important;
    border-left: none !important;
    border-right: none !important;
    padding: .38rem .55rem !important;
    font-size: .68rem !important;
  }

  tbody tr:nth-child(even) {
    background: #fafafa !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .campaign-name { color: #374151 !important; font-size: .66rem !important; }
  .row-good      { background: rgba(21,128,61,.05)  !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .row-bad       { background: rgba(185,28,28,.05) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  tbody tr:hover { background: transparent !important; }

  /* ── Anuncios ── */
  .ads-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: .6rem !important;
    margin-bottom: .38cm !important;
  }

  .ad-card {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .ad-card-body { padding: .55rem !important; gap: .18rem !important; }

  .ad-campaign-tag { color: #6d28d9 !important; font-size: .5rem !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .ad-name         { color: #111827 !important; font-size: .7rem !important; }
  .ad-headline     { color: #374151 !important; font-size: .63rem !important; }
  .ad-body-text    { color: #6b7280 !important; font-size: .6rem !important; }
  .am-label        { color: #9ca3af !important; font-size: .5rem !important; }
  .am-value        { color: #111827 !important; font-size: .75rem !important; }
  .ad-metrics-grid { border-color: #e5e7eb !important; gap: .18rem !important; padding-top: .35rem !important; margin-top: .25rem !important; }

  .ad-thumb-fallback      { background: #ede9fe !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .ad-thumb-fallback span { color: #7c3aed !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }

  .badge-green  { background:rgba(21,128,61,.12)  !important; color:#15803d !important; border:1px solid rgba(21,128,61,.3)  !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .badge-yellow { background:rgba(180,83,9,.12)   !important; color:#b45309 !important; border:1px solid rgba(180,83,9,.3)   !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .badge-red    { background:rgba(185,28,28,.12)  !important; color:#b91c1c !important; border:1px solid rgba(185,28,28,.3)  !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .ad-purchases-pill { background:rgba(21,128,61,.12) !important; color:#15803d !important; border:1px solid rgba(21,128,61,.3) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }

  /* ── Footer ── */
  .report-footer {
    border-color: #e5e7eb !important;
    padding: .3rem 0 !important;
    margin-top: .2cm !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .footer-brand        { color: #9ca3af !important; font-size: .62rem !important; }
  .footer-brand strong { color: #7C3AED !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }

  /* ── Saltos de página ── */
  .kpi-section              { page-break-inside: avoid; break-inside: avoid; }
  .charts-2col              { page-break-inside: avoid; break-inside: avoid; }
  .funnel-efficiency-panel  { page-break-inside: avoid; break-inside: avoid; }
  .section-title            { page-break-after: avoid;  break-after: avoid; }
  .panel                    { page-break-inside: avoid; break-inside: avoid; }
}