/* ==========================================================================
   CRM-FOR-ADS · AdGrid admin — shared stylesheet
   Data-dense dashboard. Built on AdGrid design tokens.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* Blue (brand/data) */
  --blue-900:#1E3A8A; --blue-800:#1E40AF; --blue-600:#2563EB; --blue-500:#3B82F6;
  --blue-300:#93C5FD; --blue-100:#DBEAFE; --blue-50:#EFF5FF;
  /* Amber (accent/CTA) */
  --amber-700:#B45309; --amber-600:#D97706; --amber-500:#F59E0B; --amber-100:#FEF3C7;
  /* Slate (neutral) */
  --slate-900:#0F172A; --slate-700:#334155; --slate-500:#64748B; --slate-400:#94A3B8;
  --slate-300:#CBD5E1; --slate-200:#E2E8F0; --slate-100:#E9EEF6; --slate-50:#F8FAFC; --white:#FFFFFF;
  /* Status */
  --success:#059669; --success-bg:#D1FAE5; --warning:#B45309; --warning-bg:#FEF3C7;
  --destructive:#DC2626; --destructive-bg:#FEE2E2; --info:#2563EB; --info-bg:#DBEAFE;

  /* Semantic */
  --color-primary:var(--blue-800); --color-on-primary:var(--white);
  --color-secondary:var(--blue-500); --color-accent:var(--amber-600); --color-on-accent:var(--white);
  --color-background:var(--slate-50); --color-foreground:var(--blue-900);
  --surface-app:var(--slate-50); --surface-card:var(--white); --surface-sunken:var(--slate-100);
  --surface-inverse:var(--blue-900);
  --text-strong:var(--slate-900); --text-body:var(--slate-700); --text-muted:var(--slate-500);
  --text-faint:var(--slate-400); --text-on-dark:var(--white); --text-accent:var(--amber-700);
  --border-subtle:var(--slate-200); --border-default:var(--blue-100); --border-strong:var(--slate-300);

  /* Type */
  --font-sans:'Fira Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'Fira Code','SFMono-Regular',ui-monospace,Menlo,monospace;
  --text-2xs:.6875rem; --text-xs:.75rem; --text-sm:.8125rem; --text-base:.875rem;
  --text-md:1rem; --text-lg:1.125rem; --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.25rem;
  --tracking-tight:-0.02em; --tracking-caps:0.08em;

  /* Spacing & layout */
  --space-2xs:2px; --space-xs:4px; --space-sm:8px; --space-md:16px; --space-lg:24px;
  --space-xl:32px; --space-2xl:48px; --space-3xl:64px;
  --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-full:9999px;
  --sidebar-width:240px; --topbar-height:56px; --row-height:44px;

  /* Shadows */
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 4px 6px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);
  --shadow-lg:0 10px 15px rgba(15,23,42,.10),0 2px 4px rgba(15,23,42,.05);
  --shadow-xl:0 20px 25px rgba(15,23,42,.14),0 4px 8px rgba(15,23,42,.06);
  --ring-focus:0 0 0 3px rgba(30,64,175,.28);
  --ring-accent:0 0 0 3px rgba(217,119,6,.28);

  /* Motion */
  --ease:cubic-bezier(0.2,0,0.2,1); --fast:120ms; --base:200ms; --slow:300ms;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; font-family:var(--font-sans); background:var(--surface-app);
  color:var(--text-body); font-size:var(--text-base); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-mono); color:var(--text-strong); letter-spacing:var(--tracking-tight); margin:0;}
a{color:var(--text-accent); text-decoration:none;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important; animation:none!important;}
}

/* ---- App shell ------------------------------------------------------- */
.app{display:flex; height:100vh; overflow:hidden;}

.sidebar{
  width:var(--sidebar-width); flex-shrink:0; background:var(--blue-900);
  color:#fff; display:flex; flex-direction:column; height:100%;
}
.sidebar__brand{
  height:var(--topbar-height); display:flex; align-items:center; gap:10px;
  padding:0 18px; border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar__brand span{font-family:var(--font-mono); font-weight:600; font-size:17px; letter-spacing:-0.02em;}
.sidebar__nav{padding:14px 12px; display:flex; flex-direction:column; gap:2px; flex:1;}
.sidebar__eyebrow{
  font-size:10px; letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--blue-300); padding:8px 10px 6px; font-weight:600;
}
.navitem{
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--radius-md);
  background:transparent; border:none; cursor:pointer; color:var(--blue-100);
  font-family:var(--font-sans); font-size:var(--text-base); font-weight:500;
  text-align:left; width:100%; transition:background var(--base) var(--ease);
}
.navitem svg{stroke:var(--blue-300); flex-shrink:0;}
.navitem:hover{background:rgba(255,255,255,.06);}
.navitem.is-active{background:rgba(255,255,255,.12); color:#fff; font-weight:600; box-shadow:inset 2px 0 0 var(--color-accent);}
.navitem.is-active svg{stroke:var(--amber-500);}
.navitem:focus-visible{outline:none; box-shadow:var(--ring-focus), inset 2px 0 0 var(--color-accent);}
.sidebar__user{padding:12px; border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:10px;}
.avatar{
  width:32px; height:32px; border-radius:var(--radius-full); flex-shrink:0;
  background:var(--amber-600); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:600; font-size:13px;
}
.sidebar__user .name{font-size:var(--text-sm); font-weight:600; color:#fff; line-height:1.2;}
.sidebar__user .org{font-size:var(--text-2xs); color:var(--blue-300);}
.iconbtn-ghost{background:transparent; border:none; cursor:pointer; color:var(--blue-300); display:inline-flex; padding:4px; border-radius:var(--radius-sm); transition:color var(--base);}
.iconbtn-ghost:hover{color:#fff;}

.main{flex:1; min-width:0; display:flex; flex-direction:column; height:100%; overflow:hidden;}
.topbar{
  height:var(--topbar-height); flex-shrink:0; background:var(--surface-card);
  border-bottom:1px solid var(--border-subtle); display:flex; align-items:center;
  justify-content:space-between; padding:0 22px; gap:16px;
}
.topbar__title{font-family:var(--font-mono); font-weight:600; font-size:var(--text-lg); color:var(--text-strong); line-height:1.1;}
.topbar__right{display:flex; align-items:center; gap:12px;}
.topbar__user{font-size:var(--text-sm); color:var(--text-muted); display:flex; align-items:center; gap:6px;}
.topbar__user b{color:var(--text-body); font-weight:600;}

.content{flex:1; overflow-y:auto; padding:var(--space-xl) var(--space-2xl);}
.content__head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-lg); margin-bottom:var(--space-lg); flex-wrap:wrap;}
.content__head h1{font-size:var(--text-2xl);}
.detail-actions{display:flex; align-items:center; gap:var(--space-sm); flex-wrap:wrap;}
.content__head .sub{font-size:var(--text-sm); color:var(--text-muted); margin-top:2px;}

/* ---- Buttons --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans);
  font-weight:600; font-size:var(--text-base); border-radius:var(--radius-md);
  padding:10px 18px; border:2px solid transparent; cursor:pointer; line-height:1;
  transition:background var(--base) var(--ease), transform var(--base) var(--ease), box-shadow var(--base) var(--ease), filter var(--base) var(--ease);
  white-space:nowrap;
}
.btn:focus-visible{outline:none; box-shadow:var(--ring-focus);}
.btn svg{flex-shrink:0;}
.btn--cta{background:var(--color-accent); color:var(--color-on-accent);}
.btn--cta:hover{filter:brightness(.93); transform:translateY(-1px);}
.btn--cta:focus-visible{box-shadow:var(--ring-accent);}
.btn--secondary{background:transparent; color:var(--color-primary); border-color:var(--color-primary);}
.btn--secondary:hover{background:var(--blue-50);}
.btn--ghost{background:transparent; color:var(--text-body); border-color:var(--border-strong);}
.btn--ghost:hover{background:var(--surface-sunken);}
.btn--danger{background:transparent; color:var(--destructive); border-color:var(--destructive);}
.btn--danger:hover{background:var(--destructive-bg);}
.btn--sm{padding:7px 12px; font-size:var(--text-sm);}

/* ---- Cards ----------------------------------------------------------- */
.card{background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);}
.card--pad{padding:var(--space-lg);}

/* KPI / stat cards */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--space-md);}
.kpi{background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-lg); box-shadow:var(--shadow-sm);}
.kpi__label{font-size:var(--text-xs); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-muted); font-weight:600; display:flex; align-items:center; gap:7px;}
.kpi__value{font-family:var(--font-mono); font-size:var(--text-3xl); font-weight:600; color:var(--text-strong); margin-top:10px; line-height:1;}
.kpi__delta{font-family:var(--font-mono); font-size:var(--text-xs); margin-top:8px; display:inline-flex; align-items:center; gap:4px;}
.kpi__delta.up{color:var(--success);} .kpi__delta.down{color:var(--destructive);}
.kpi__icon{width:30px; height:30px; border-radius:var(--radius-md); background:var(--blue-50); color:var(--blue-600); display:inline-flex; align-items:center; justify-content:center;}

/* ---- Badges ---------------------------------------------------------- */
.badge{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-sans);
  font-size:var(--text-xs); font-weight:600; padding:3px 9px; border-radius:var(--radius-full);
  line-height:1.4; white-space:nowrap;
}
.badge .dot{width:6px; height:6px; border-radius:50%; background:currentColor;}
.badge--active{background:var(--success-bg); color:var(--success);}
.badge--paused{background:var(--warning-bg); color:var(--warning);}
.badge--soon{background:var(--surface-sunken); color:var(--text-muted);}
.badge--info{background:var(--info-bg); color:var(--info);}
.badge--meta{background:#EDE9FE; color:#7C3AED;} /* origen Meta — token --channel-meta */
.badge--ok{background:var(--success-bg); color:var(--success);}
.badge--error{background:var(--destructive-bg); color:var(--destructive);}

/* ---- Toolbar / search ------------------------------------------------ */
.toolbar{display:flex; align-items:center; gap:var(--space-md); margin-bottom:var(--space-md); flex-wrap:wrap;}
.search{position:relative; flex:1; max-width:340px; min-width:200px;}
.search svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-faint);}
.search input{width:100%; height:38px;}
.input, .search input, .select{
  font-family:var(--font-sans); font-size:var(--text-base); color:var(--text-strong);
  border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface-card);
  padding:11px 14px; width:100%; transition:border-color var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.search input{height:38px; padding:0 14px 0 36px;}
.input:focus, .search input:focus, .select:focus{outline:none; border-color:var(--color-primary); box-shadow:var(--ring-focus);}
.input::placeholder{color:var(--text-faint);}
.input.is-error{border-color:var(--destructive);}
.input.is-error:focus{box-shadow:0 0 0 3px rgba(220,38,38,.22);}

/* ---- Tables ---------------------------------------------------------- */
.table-wrap{background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden;}
table.data{width:100%; border-collapse:collapse; font-size:var(--text-sm);}
table.data thead th{
  text-align:left; font-family:var(--font-sans); font-size:var(--text-2xs); font-weight:600;
  letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-muted);
  padding:12px 16px; background:var(--surface-app); border-bottom:1px solid var(--border-subtle);
  white-space:nowrap;
}
table.data tbody td{padding:0 16px; height:var(--row-height); border-top:1px solid var(--border-subtle); color:var(--text-body); vertical-align:middle;}
table.data tbody tr:first-child td{border-top:none;}
table.data tbody tr.clickable{cursor:pointer; transition:background var(--fast) var(--ease);}
table.data tbody tr.clickable:hover{background:var(--blue-50);}
table.data tbody tr:focus-visible{outline:none; background:var(--blue-50); box-shadow:inset 0 0 0 2px var(--color-primary);}
.cell-name{font-weight:600; color:var(--text-strong);}
/* real link inside a clickable row: inherits the cell look (no blue link chrome)
   but gives middle-click / open-in-new-tab / keyboard for free */
.cell-name .cell-link{color:inherit; text-decoration:none; display:inline-block;}
table.data tbody tr.clickable:hover .cell-name .cell-link{text-decoration:underline;}
.cell-name .cell-link:focus-visible{outline:none; box-shadow:var(--ring-focus); border-radius:var(--radius-sm);}
.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.col-actions{text-align:right; white-space:nowrap;}
.rowact{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--radius-sm); border:1px solid var(--border-subtle); background:var(--surface-card); color:var(--text-muted); cursor:pointer; transition:background var(--base), color var(--base), border-color var(--base);}
.rowact:hover{background:var(--surface-sunken); color:var(--color-primary); border-color:var(--border-strong);}
.rowact:focus-visible{outline:none; box-shadow:var(--ring-focus);}
.rowact + .rowact{margin-left:6px;}
.muted-cell{color:var(--text-muted);}

/* ---- Pagination ------------------------------------------------------ */
.pagination{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-top:1px solid var(--border-subtle); font-size:var(--text-sm); color:var(--text-muted);}
.pagination .pages{display:flex; gap:4px;}
.page-btn{min-width:32px; height:32px; padding:0 8px; border-radius:var(--radius-sm); border:1px solid var(--border-subtle); background:var(--surface-card); color:var(--text-body); font-family:var(--font-mono); font-size:var(--text-sm); cursor:pointer; transition:background var(--base), border-color var(--base);}
.page-btn:hover{background:var(--surface-sunken);}
.page-btn.is-active{background:var(--color-primary); color:#fff; border-color:var(--color-primary);}
.page-btn:disabled{opacity:.4; cursor:not-allowed;}

/* ---- Empty state ----------------------------------------------------- */
.empty{display:flex; flex-direction:column; align-items:center; text-align:center; padding:var(--space-3xl) var(--space-xl); gap:6px;}
.empty__icon{width:56px; height:56px; border-radius:var(--radius-lg); background:var(--blue-50); color:var(--blue-600); display:flex; align-items:center; justify-content:center; margin-bottom:8px;}
.empty h3{font-size:var(--text-lg); color:var(--text-strong);}
.empty p{color:var(--text-muted); max-width:320px; margin:0 0 14px;}

/* ---- Forms ----------------------------------------------------------- */
.field{margin-bottom:var(--space-lg);}
.field:last-child{margin-bottom:0;}
.field label{display:block; font-size:var(--text-sm); font-weight:600; color:var(--text-strong); margin-bottom:7px;}
.field .req{color:var(--destructive);}
.field .hint{font-size:var(--text-xs); color:var(--text-muted); margin-top:6px;}
.field .error-msg{font-size:var(--text-xs); color:var(--destructive); margin-top:6px; display:none; align-items:center; gap:5px;}
.field.is-error .error-msg{display:flex;}

/* Requirements helper (progressive-disclosure info callout — CRM dataset setup) */
.reqbox{border:1px solid var(--border-default); background:var(--info-bg); border-radius:var(--radius-md); margin-bottom:var(--space-lg); overflow:hidden;}
.reqbox__head{display:flex; align-items:center; gap:8px; padding:11px 13px; cursor:pointer; font-size:var(--text-sm); font-weight:600; color:var(--info); list-style:none; user-select:none;}
.reqbox__head::-webkit-details-marker{display:none;}
.reqbox__head svg{flex:0 0 auto;}
.reqbox__head > span{flex:1 1 auto;}
.reqbox__head:focus-visible{outline:none; box-shadow:var(--ring-focus);}
.reqbox__chev{transition:transform var(--base) var(--ease);}
.reqbox[open] .reqbox__chev{transform:rotate(180deg);}
.reqbox__list{margin:0; padding:0 15px 13px 30px; display:flex; flex-direction:column; gap:7px; font-size:var(--text-xs); color:var(--text-body); line-height:1.5;}
.reqbox__list li{padding-left:2px;}
.reqbox__list strong{color:var(--text-strong); font-weight:600;}
.reqbox__warn{list-style:none; margin-left:-18px; display:flex; align-items:flex-start; gap:6px; color:var(--warning);}
.reqbox__warn svg{flex:0 0 auto; margin-top:1px;}
.reqbox__warn strong{color:var(--warning);}

/* Segmented status control */
.segmented{display:inline-flex; background:var(--surface-sunken); border-radius:var(--radius-md); padding:3px; gap:3px;}
.segmented button{
  border:none; background:transparent; cursor:pointer; font-family:var(--font-sans);
  font-size:var(--text-sm); font-weight:600; color:var(--text-muted); padding:7px 16px;
  border-radius:var(--radius-sm); display:inline-flex; align-items:center; gap:7px;
  transition:background var(--base), color var(--base), box-shadow var(--base);
}
.segmented button[aria-pressed="true"]{background:var(--surface-card); box-shadow:var(--shadow-sm);}
.segmented button[aria-pressed="true"].on-active{color:var(--success);}
.segmented button[aria-pressed="true"].on-paused{color:var(--warning);}
.segmented button:focus-visible{outline:none; box-shadow:var(--ring-focus);}

.select-wrap{position:relative;}
.select{appearance:none; padding-right:38px; cursor:pointer;}
.select-wrap svg{position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--text-faint); pointer-events:none;}

/* ---- Modal ----------------------------------------------------------- */
.overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.5); backdrop-filter:blur(4px);
  display:flex; align-items:flex-start; justify-content:center; padding:64px 20px;
  opacity:0; visibility:hidden; transition:opacity var(--base) var(--ease), visibility var(--base) var(--ease);
  z-index:50; overflow-y:auto;
}
.overlay.is-open{opacity:1; visibility:visible;}
.modal{
  background:var(--surface-card); border-radius:var(--radius-xl); padding:var(--space-xl);
  box-shadow:var(--shadow-xl); width:100%; max-width:520px; transform:translateY(8px) scale(.98);
  transition:transform var(--base) var(--ease); margin:auto;
}
.overlay.is-open .modal{transform:translateY(0) scale(1);}
.modal--wide{max-width:680px;}
.modal__head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:var(--space-lg);}
.modal__head h2{font-size:var(--text-xl);}
.modal__head p{font-size:var(--text-sm); color:var(--text-muted); margin:4px 0 0;}
.modal__close{width:34px; height:34px; border-radius:var(--radius-md); border:1px solid var(--border-subtle); background:var(--surface-card); color:var(--text-muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition:background var(--base), color var(--base);}
.modal__close:hover{background:var(--surface-sunken); color:var(--text-strong);}
.modal__close:focus-visible{outline:none; box-shadow:var(--ring-focus);}
.modal__foot{display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:var(--space-xl); padding-top:var(--space-lg); border-top:1px solid var(--border-subtle);}

/* ---- Section heads --------------------------------------------------- */
.section{margin-top:var(--space-2xl);}
.section__head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:var(--space-md);}
.section__head h2{font-size:var(--text-xl); color:var(--text-strong);}
.section__head .sub{font-size:var(--text-sm); color:var(--text-muted);}

.eyebrow{font-size:var(--text-2xs); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-muted); font-weight:600;}

/* ---- Detail header --------------------------------------------------- */
.detail-head{display:flex; align-items:center; gap:var(--space-md); flex-wrap:wrap;}
.detail-head .crumb{display:flex; align-items:center; gap:6px; font-size:var(--text-sm); color:var(--text-muted); margin-bottom:6px;}
.detail-head h1{font-size:var(--text-2xl); display:flex; align-items:center; gap:12px;}

/* ---- Capture code block --------------------------------------------- */
.capture{
  background:var(--blue-900); color:#fff; border-radius:var(--radius-lg);
  padding:var(--space-lg); box-shadow:var(--shadow-md); position:relative; overflow:hidden;
}
.capture::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:22px 22px;
}
.capture > *{position:relative;}
.capture__eyebrow{font-size:var(--text-2xs); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--amber-500); font-weight:600;}
.capture h2{color:#fff; font-size:var(--text-xl); margin:6px 0 4px;}
.capture p{color:var(--blue-100); font-size:var(--text-sm); margin:0 0 var(--space-md); max-width:560px;}
.capture p code{font-family:var(--font-mono); background:rgba(255,255,255,.12); padding:1px 6px; border-radius:4px; color:#fff;}
.capture__block{margin-bottom:var(--space-md);}
.capture__subtitle{color:#fff; font-size:var(--text-sm); font-weight:600; margin:0 0 4px;}
.capture__subtitle code{font-family:var(--font-mono); background:rgba(255,255,255,.12); padding:1px 6px; border-radius:4px; color:#fff;}
.capture p.capture__help{font-size:var(--text-xs); color:var(--blue-300); margin:0 0 10px; max-width:560px;}
.codebox{background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-md); position:relative;}
.codebox__bar{display:flex; align-items:center; justify-content:space-between; padding:9px 12px 9px 14px; border-bottom:1px solid rgba(255,255,255,.1);}
.codebox__bar .label{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--blue-300);}
.codebox pre{margin:0; padding:14px; overflow-x:auto; font-family:var(--font-mono); font-size:var(--text-sm); line-height:1.6; color:#E8EEFB;}
.codebox .tok-tag{color:#93C5FD;} .codebox .tok-attr{color:#F59E0B;} .codebox .tok-str{color:#86EFAC;}
.btn-copy{display:inline-flex; align-items:center; gap:7px; background:var(--amber-600); color:#fff; border:none; border-radius:var(--radius-sm); padding:7px 13px; font-family:var(--font-sans); font-weight:600; font-size:var(--text-sm); cursor:pointer; transition:filter var(--base), background var(--base);}
.btn-copy:hover{filter:brightness(.93);}
.btn-copy.copied{background:var(--success);}
.btn-copy:focus-visible{outline:none; box-shadow:var(--ring-accent);}
.steps{list-style:none; counter-reset:step; margin:var(--space-md) 0 0; padding:0; display:flex; gap:var(--space-md); flex-wrap:wrap;}
.steps li{counter-increment:step; display:flex; align-items:center; gap:10px; font-size:var(--text-sm); color:var(--blue-100); flex:1; min-width:180px;}
.steps li::before{content:counter(step); flex-shrink:0; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-family:var(--font-mono); font-weight:600; font-size:var(--text-xs); display:flex; align-items:center; justify-content:center;}

/* ---- Expected fields editor (form modal) ---------------------------- */
.fieldrow{display:grid; grid-template-columns:1fr 150px 38px; gap:10px; align-items:center; margin-bottom:8px;}
.fieldrow .drag{display:none;}
.fieldrow .input{margin:0;}
.fieldrow .del{width:38px; height:42px; border-radius:var(--radius-md); border:1px solid var(--border-subtle); background:var(--surface-card); color:var(--text-muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background var(--base), color var(--base), border-color var(--base);}
.fieldrow .del:hover{background:var(--destructive-bg); color:var(--destructive); border-color:var(--destructive);}
.fieldrow .del:focus-visible{outline:none; box-shadow:var(--ring-focus);}
.fields-head{display:grid; grid-template-columns:1fr 150px 38px; gap:10px; margin-bottom:8px;}
.fields-head span{font-size:var(--text-2xs); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-muted); font-weight:600;}

/* Method picker (radio cards) */
.method-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px;}
.method{display:flex; align-items:center; gap:10px; padding:11px 13px; border:1px solid var(--border-strong); border-radius:var(--radius-md); cursor:pointer; transition:border-color var(--base), background var(--base);}
.method input{position:absolute; opacity:0; pointer-events:none;}
.method .ic{width:26px; height:26px; border-radius:var(--radius-sm); background:var(--surface-sunken); display:inline-flex; align-items:center; justify-content:center; color:var(--text-muted); flex-shrink:0;}
.method .mlabel{font-size:var(--text-sm); font-weight:600; color:var(--text-strong); line-height:1.2;}
.method:has(input:checked){border-color:var(--color-primary); background:var(--blue-50);}
.method:has(input:checked) .ic{background:var(--blue-100); color:var(--blue-700,#1d4ed8);}
.method:has(input:focus-visible){box-shadow:var(--ring-focus);}
.method.is-disabled{cursor:not-allowed; opacity:.7; background:var(--surface-app);}
.method.is-disabled .mlabel{color:var(--text-muted);}

/* ---- People with access (CL2) --------------------------------------- */
.people{border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; background:var(--surface-card);}
.people[hidden]{display:none;}
.people__row{display:grid; grid-template-columns:1fr auto auto 40px; align-items:center; gap:var(--space-md); padding:12px 16px; border-top:1px solid var(--border-subtle);}
.people__row:first-child{border-top:none;}
.people__who{display:flex; align-items:center; gap:11px; min-width:0;}
.people__who .ic{width:34px; height:34px; border-radius:var(--radius-full); background:var(--blue-50); color:var(--blue-600); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
.people__email{font-weight:600; color:var(--text-strong); font-size:var(--text-sm); word-break:break-all;}
.people__when{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:var(--text-xs); color:var(--text-muted); white-space:nowrap;}
.people .rowact.act-remove:hover{background:var(--destructive-bg); color:var(--destructive); border-color:var(--destructive);}
@media (max-width:560px){
  .people__row{grid-template-columns:1fr 40px; gap:6px 12px;}
  .people__badge{grid-row:2; grid-column:1;}
  .people__when{grid-row:3; grid-column:1;}
  .people__row .act-remove{grid-row:1; grid-column:2; align-self:start;}
}

/* ---- Chips (email) input (CL2 modal) -------------------------------- */
.chips-input{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; width:100%;
  border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface-card);
  padding:8px; min-height:90px; align-content:flex-start; cursor:text;
  transition:border-color var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.chips-input.is-focus{border-color:var(--color-primary); box-shadow:var(--ring-focus);}
.field.is-error .chips-input{border-color:var(--destructive);}
.chip{
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500;
  background:var(--blue-50); color:var(--blue-900); border:1px solid var(--blue-100);
  border-radius:var(--radius-full); padding:5px 6px 5px 11px; line-height:1.4;
}
.chip__text{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chip__x{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border:none; background:transparent; color:currentColor; cursor:pointer; border-radius:var(--radius-full); flex-shrink:0; opacity:.6; transition:opacity var(--base), background var(--base);}
.chip__x:hover{opacity:1; background:rgba(30,58,138,.12);}
.chip__x:focus-visible{outline:none; box-shadow:var(--ring-focus); opacity:1;}
.chip.is-invalid{background:var(--destructive-bg); color:#991B1B; border-color:#FCA5A5;}
.chip.is-invalid .chip__x:hover{background:rgba(220,38,38,.14);}
.chips-input__entry{flex:1; min-width:140px; border:none; outline:none; background:transparent; font-family:var(--font-sans); font-size:var(--text-base); color:var(--text-strong); padding:6px 4px; min-height:32px;}
.chips-input__entry::placeholder{color:var(--text-faint);}
.chips-count{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; font-size:var(--text-xs);}
.chips-count .ok{color:var(--text-body); font-weight:600; display:inline-flex; align-items:center; gap:6px;}
.chips-count .ok svg{color:var(--success);}
.chips-count .bad{color:var(--destructive); font-weight:600; display:inline-flex; align-items:center; gap:5px;}
.chips-count .bad svg{color:var(--destructive);}
.chips-count .none{color:var(--text-muted);}

/* ---- Toast ----------------------------------------------------------- */
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(12px); background:var(--slate-900); color:#fff; padding:11px 18px; border-radius:var(--radius-md); font-size:var(--text-sm); font-weight:500; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:9px; opacity:0; visibility:hidden; transition:opacity var(--base), transform var(--base); z-index:60;}
.toast.show{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.toast svg{stroke:var(--success);}

/* ---- Responsive ------------------------------------------------------ */
@media (max-width:1024px){
  .content{padding:var(--space-lg) var(--space-xl);}
}
@media (max-width:768px){
  .sidebar{position:fixed; left:0; top:0; bottom:0; transform:translateX(-100%); transition:transform var(--base) var(--ease); z-index:40; box-shadow:var(--shadow-xl);}
  .app.nav-open .sidebar{transform:translateX(0);}
  .scrim{position:fixed; inset:0; background:rgba(15,23,42,.4); opacity:0; visibility:hidden; transition:opacity var(--base); z-index:35;}
  .app.nav-open .scrim{opacity:1; visibility:visible;}
  .menu-toggle{display:inline-flex;}
  .content{padding:var(--space-lg);}
  .topbar__user span.email{display:none;}
  .method-grid{grid-template-columns:1fr;}
}
@media (min-width:769px){ .menu-toggle{display:none;} .scrim{display:none;} }
@media (max-width:560px){
  .content{padding:var(--space-md);}
  .content__head{align-items:stretch;}
  .content__head .btn{width:100%; justify-content:center;}
  .table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  table.data{min-width:640px;}
  .fieldrow,.fields-head{grid-template-columns:1fr 120px 38px;}
  .modal{padding:var(--space-lg);}
  .steps li{min-width:100%;}
}
.menu-toggle{width:38px; height:38px; border-radius:var(--radius-md); border:1px solid var(--border-subtle); background:var(--surface-card); color:var(--text-body); cursor:pointer; align-items:center; justify-content:center;}

/* ==========================================================================
   LEADS view — filter bar, channel breakdown, lead-table cells, detail drawer
   (extends the shared admin stylesheet; nothing above is modified)
   ========================================================================== */

/* ---- Filter bar ------------------------------------------------------ */
.filters{
  display:flex; align-items:flex-end; gap:var(--space-md); flex-wrap:wrap;
  margin-bottom:var(--space-lg); padding:var(--space-md);
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
}
.filter{display:flex; flex-direction:column; gap:6px; min-width:150px;}
.filter--grow{flex:1; min-width:200px;}
.filter > label{font-size:var(--text-2xs); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-muted); font-weight:600;}
.filters .select, .filters .search input{height:38px;}
.filters .search{flex:none; max-width:none; min-width:0; width:100%;}
/* Date range segmented (reuses .segmented look, scrollable on mobile) */
.daterange{display:inline-flex; background:var(--surface-sunken); border-radius:var(--radius-md); padding:3px; gap:3px;}
.daterange button{
  border:none; background:transparent; cursor:pointer; font-family:var(--font-sans);
  font-size:var(--text-sm); font-weight:600; color:var(--text-muted); padding:7px 12px;
  border-radius:var(--radius-sm); white-space:nowrap; transition:background var(--base), color var(--base), box-shadow var(--base);
}
.daterange button[aria-pressed="true"]{background:var(--surface-card); color:var(--color-primary); box-shadow:var(--shadow-sm);}
.daterange button:focus-visible{outline:none; box-shadow:var(--ring-focus);}
.filters__reset{margin-left:auto; align-self:flex-end;}

/* Date range custom popover */
.datepop[hidden]{display:none;}
.datepop{
  position:absolute; top:100%; left:0; margin-top:6px; z-index:40;
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:var(--space-md); display:flex; flex-direction:column; gap:12px; min-width:240px;
}
.datepop__field{display:flex; flex-direction:column; gap:5px;}
.datepop__field label{font-size:var(--text-xs); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-muted); font-weight:600;}
.datepop__field input{
  font-family:var(--font-sans); font-size:var(--text-sm); color:var(--text-strong);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:8px 10px; background:var(--surface-card);
}
.datepop__field input:focus-visible{outline:none; box-shadow:var(--ring-focus); border-color:var(--color-primary);}
.datepop__err{font-size:var(--text-xs); color:var(--destructive);}
.datepop__actions{display:flex; justify-content:flex-end; gap:8px;}

/* ---- Channel breakdown card ----------------------------------------- */
/* ``.kpi--wide`` / ``.kpi--full`` carry no sizing of their own: they are the
   two roles the leads summary hands to its flex row, defined next to it near
   the bottom of this file. They exist nowhere else in the panel. */
.breakdown{display:flex; flex-direction:column; gap:10px; margin-top:14px;}
.bk-row{display:grid; grid-template-columns:96px 1fr auto; align-items:center; gap:12px;}
.bk-row .bk-label{display:flex; align-items:center; gap:7px; font-size:var(--text-sm); font-weight:600; color:var(--text-body);}
.bk-row .bk-swatch{width:9px; height:9px; border-radius:2px; flex-shrink:0;}
.bk-track{height:10px; border-radius:var(--radius-full); background:var(--surface-sunken); overflow:hidden;}
/* ``display:block`` is load-bearing, not cosmetic: this is a <span> inside
   .bk-track, and an INLINE box ignores width and height — the coloured part of
   every breakdown bar measured 0x0 and never drew, on Gabriel's leads screen
   and on the client panel alike. (.bk-swatch gets away with it only because
   .bk-label is a flex container, which blockifies its children.) */
.bk-fill{display:block; height:100%; border-radius:var(--radius-full); width:0; transition:width var(--slow) var(--ease);}
.bk-row .bk-val{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:var(--text-sm); font-weight:600; color:var(--text-strong); min-width:64px; text-align:right;}
.bk-row .bk-val .bk-pct{color:var(--text-muted); font-weight:400; margin-left:6px;}
/* channel colors (categorical data-viz palette) */
.ch-google{background:var(--blue-600);} .ch-google-t{color:var(--blue-600);}
.ch-meta{background:#7C3AED;} .ch-meta-t{color:#7C3AED;}
.ch-tiktok{background:#E11D48;} .ch-tiktok-t{color:#E11D48;}
.ch-organico{background:var(--success);} .ch-organico-t{color:var(--success);}

/* ---- Lead table cells ----------------------------------------------- */
.lead-name{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.lead-name .nm{font-weight:600; color:var(--text-strong);}
.mono-cell{font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--text-body); font-size:var(--text-xs);}
/* source/channel chip in table */
.chan{display:inline-flex; align-items:center; gap:7px;}
.chan .chan-dot{width:8px; height:8px; border-radius:2px; flex-shrink:0;}
.chan .chan-name{font-weight:600; color:var(--text-strong); font-size:var(--text-sm);}
.chan .chan-camp{display:block; font-size:var(--text-2xs); color:var(--text-muted); font-family:var(--font-mono);}
/* stage chip in table — the "Etapa" column, on BOTH audiences. It lives here,
   in the shared sheet, and not in panel-cliente.css (where it was born unused)
   for the reason CL3.T3 spent a batch on: one table, one definition, or the two
   screens drift again. ``inline-flex`` is load-bearing, not cosmetic — .sdot is
   a 7x7 BOX and a bare inline <span> ignores width/height (it painted 0x0 the
   first time this project shipped that pattern, on the breakdown bars). */
.stagechip{display:inline-flex; align-items:center; gap:6px; font-size:var(--text-2xs); font-weight:600; padding:3px 10px; border-radius:var(--radius-full); background:var(--surface-sunken); color:var(--text-body); white-space:nowrap; line-height:1.5;}
.stagechip .sdot{width:7px; height:7px; border-radius:50%; flex-shrink:0;}
/* trackable chip — icon + text, not color alone */
.track{display:inline-flex; align-items:center; gap:5px; font-size:var(--text-2xs); font-weight:600; padding:3px 8px 3px 6px; border-radius:var(--radius-full); white-space:nowrap; line-height:1.4;}
.track--yes{background:var(--success-bg); color:var(--success);}
.track--no{background:var(--warning-bg); color:var(--warning);}
.track svg{flex-shrink:0;}
/* status pills (new / seen / duplicate) */
.pill{display:inline-flex; align-items:center; gap:4px; font-size:var(--text-2xs); font-weight:600; padding:2px 8px; border-radius:var(--radius-full); white-space:nowrap; line-height:1.5;}
.pill--new{background:var(--info-bg); color:var(--info);}
.pill--new .dot{width:5px; height:5px; border-radius:50%; background:currentColor;}
.pill--seen{background:var(--surface-sunken); color:var(--text-muted);}
.pill--dup{background:var(--warning-bg); color:var(--warning);}
.pill svg{flex-shrink:0;}
/* unmatched / raw-fallback row */
tr.row-raw td{box-shadow:inset 3px 0 0 var(--amber-500);}
tr.row-raw td:first-child{background:linear-gradient(90deg, var(--amber-100) 0%, transparent 60%);}
.raw-note{display:flex; align-items:center; gap:6px; font-size:var(--text-2xs); color:var(--warning); font-weight:600; margin-top:3px;}
.raw-data{font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--text-muted); line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px;}
.cellstack{display:flex; flex-direction:column; gap:2px;}

/* ---- Drawer (lead detail side panel — used by Parte 2) -------------- */
.drawer-scrim{
  position:fixed; inset:0; background:rgba(15,23,42,.5); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity var(--base) var(--ease), visibility var(--base) var(--ease); z-index:55;
}
.drawer-scrim.is-open{opacity:1; visibility:visible;}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:640px; max-width:94vw;
  background:var(--surface-card); box-shadow:var(--shadow-xl); z-index:56;
  display:flex; flex-direction:column; transform:translateX(100%);
  transition:transform var(--slow) var(--ease); will-change:transform;
}
.drawer.is-open{transform:translateX(0);}
.drawer__head{
  flex-shrink:0; display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; padding:var(--space-lg); border-bottom:1px solid var(--border-subtle);
}
.drawer__head .eyebrow{margin-bottom:6px;}
.drawer__head h2{font-size:var(--text-xl); display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.drawer__head .meta{font-size:var(--text-sm); color:var(--text-muted); margin-top:6px; font-family:var(--font-mono);}
.drawer__body{flex:1; overflow-y:auto; padding:var(--space-lg);}
.drawer__chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.dl{display:grid; grid-template-columns:120px 1fr; gap:2px var(--space-md); margin:0;}
.dl dt{font-size:var(--text-xs); color:var(--text-muted); font-weight:600; padding:9px 0; border-top:1px solid var(--border-subtle); display:flex; align-items:center;}
.dl dd{margin:0; font-size:var(--text-sm); color:var(--text-strong); padding:9px 0; border-top:1px solid var(--border-subtle); word-break:break-word;}
.dl dd.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:var(--text-xs);}
.dl dt:first-of-type, .dl dd:first-of-type{border-top:none;}
.drawer__block{margin-top:var(--space-lg);}
.drawer__block > .eyebrow{display:block; margin-bottom:8px;}
.raw-pre{background:var(--surface-app); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:12px 14px; font-family:var(--font-mono); font-size:var(--text-xs); line-height:1.7; color:var(--text-body); overflow-x:auto; margin:0;}
.raw-pre .rk{color:var(--blue-600);}
.drawer__close{width:34px; height:34px; border-radius:var(--radius-md); border:1px solid var(--border-subtle); background:var(--surface-card); color:var(--text-muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition:background var(--base), color var(--base);}
.drawer__close:hover{background:var(--surface-sunken); color:var(--text-strong);}
.drawer__close:focus-visible{outline:none; box-shadow:var(--ring-focus);}
.eyebrow-row{display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap;}
.eyebrow-row .eyebrow{margin:0;}
.drawer__divider{height:1px; background:var(--border-subtle); margin:var(--space-xl) calc(-1 * var(--space-lg)) 0;}
.drawer__divider + .drawer__block{margin-top:var(--space-lg);}
.drawer__block.is-soon{opacity:.6;}
.drawer__block.is-soon .stage-select, .drawer__block.is-soon .comment-box, .drawer__block.is-soon .comment-actions{pointer-events:none;}
.drawer__cols{display:grid; grid-template-columns:1fr 1fr; gap:0 var(--space-xl);}
@media (max-width:600px){ .drawer__cols{grid-template-columns:1fr;} }
.dtabs{display:flex; border-bottom:1px solid var(--border-subtle); margin-bottom:2px;}
.dtab{border:none; background:transparent; cursor:pointer; font-family:var(--font-sans); font-size:var(--text-sm); font-weight:600; color:var(--text-muted); padding:9px 2px; margin-right:22px; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color var(--base), border-color var(--base);}
.dtab:hover{color:var(--text-body);}
.dtab.is-active{color:var(--color-primary); border-bottom-color:var(--color-primary);}
.dtab:focus-visible{outline:none; box-shadow:var(--ring-focus); border-radius:var(--radius-sm);}
.stage-select{display:flex; flex-wrap:wrap; gap:6px;}
.stage-opt{font-family:var(--font-sans); font-size:var(--text-xs); font-weight:600; padding:7px 13px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface-card); color:var(--text-muted);}
.stage-opt.is-current{background:var(--blue-50); border-color:var(--color-primary); color:var(--color-primary);}
/* Interactive stage pills (lead drawer): buttons that post on click. */
button.stage-opt{display:inline-flex; align-items:center; gap:7px; cursor:pointer; transition:background var(--base), border-color var(--base), color var(--base), transform var(--base);}
button.stage-opt:hover{border-color:var(--color-primary); color:var(--text-strong);}
button.stage-opt.is-current:hover{color:var(--color-primary);}
button.stage-opt:active{transform:translateY(1px);}
button.stage-opt:focus-visible{outline:none; box-shadow:var(--ring-focus);}
button.stage-opt.is-saving{opacity:.5; pointer-events:none;}
.stage-opt .sw{width:9px; height:9px; border-radius:3px; flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(15,23,42,.14);}
.stage-select.is-empty{opacity:.55;}
.stage-hint{margin-top:9px; font-size:var(--text-sm); color:var(--text-muted); line-height:1.5;}
.stage-hint a{color:var(--color-primary); font-weight:600; text-decoration:none;}
.stage-hint a:hover{text-decoration:underline;}
.comment-box{border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface-app); padding:11px 13px; font-size:var(--text-sm); color:var(--text-faint); min-height:64px;}
.comment-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:8px;}
/* Management notes (lead drawer): free-text, editable, never deletable. */
.notes{display:flex; flex-direction:column; gap:14px;}
.note-input{width:100%; box-sizing:border-box; font-family:var(--font-sans); font-size:var(--text-sm); color:var(--text-strong); line-height:1.55; border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface-card); padding:10px 12px; resize:vertical; min-height:64px;}
.note-input::placeholder{color:var(--text-faint);}
.note-input:focus{outline:none; border-color:var(--color-primary); box-shadow:var(--ring-focus);}
.note-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.note-item{border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-app); padding:11px 13px;}
.note-body{font-size:var(--text-sm); color:var(--text-strong); line-height:1.55; white-space:pre-wrap; word-break:break-word;}
.note-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; flex-wrap:wrap;}
.note-stamp{display:inline-flex; align-items:center; gap:5px; font-size:var(--text-2xs); color:var(--text-muted); font-family:var(--font-mono);}
.note-edited{color:var(--text-faint);}
.note-edit-btn{background:transparent; border:none; cursor:pointer; font-family:var(--font-sans); font-size:var(--text-xs); font-weight:600; color:var(--color-primary); padding:2px 5px; border-radius:var(--radius-sm); transition:background var(--base);}
.note-edit-btn:hover{text-decoration:underline;}
.note-edit-btn:focus-visible{outline:none; box-shadow:var(--ring-focus);}
.note-editform{margin-top:2px;}
.note-empty{font-size:var(--text-sm); color:var(--text-muted); padding:2px 0;}
.timeline{list-style:none; margin:0; padding:0;}
.timeline li{position:relative; padding:0 0 16px 26px;}
.timeline li::before{content:""; position:absolute; left:5px; top:15px; bottom:-1px; width:2px; background:var(--border-subtle);}
.timeline li:last-child::before{display:none;}
.timeline .tl-dot{position:absolute; left:0; top:3px; width:12px; height:12px; border-radius:50%; border:2px solid var(--surface-card); box-shadow:0 0 0 1px var(--border-subtle);}
.timeline .tl-dot--done{background:var(--success); box-shadow:0 0 0 1px var(--success);}
.timeline .tl-dot--soon{background:var(--border-strong);}
.timeline .tl-dot--stage{background:var(--text-muted); box-shadow:0 0 0 1px var(--text-muted);}
.timeline .tl-title{font-size:var(--text-sm); font-weight:600; color:var(--text-strong);}
.timeline .tl-time{font-size:var(--text-xs); color:var(--text-muted); font-family:var(--font-mono); margin-top:2px;}
/* a detail OF the event above it (e.g. the Meta conversion a stage move fired):
   subordinate to its parent — indented, muted, smaller, no dot of its own. */
.timeline .tl-sub{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:4px; padding-left:2px; font-size:var(--text-xs); color:var(--text-muted);}
.timeline .tl-sub-arrow{color:var(--border-strong);}

/* WL4: a WEBSITE-pixel conversion in the lead timeline belongs to the web rail,
   not the CRM path. It reads as web via a globe icon + a "web" lane tag (mirrors
   the client-detail web rail's purple language). Meaning is icon+label, never
   colour alone. */
.timeline .tl-title--web{display:flex; align-items:center; flex-wrap:wrap; gap:6px;}
.timeline .tl-web-ic{color:#7C3AED; flex-shrink:0;}
.timeline .lane-tag{font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#6D28D9; background:#EDE9FE; border-radius:var(--radius-sm); padding:1px 5px;}

/* The leads summary wants a NARROW "Total" card beside a WIDE "Desglose por
   origen" card, with "Desglose por etapa" on its own line under both.

   It is sized by its OWN width, never by the viewport's, and that distinction is
   the entire bug this block replaces. The proportion used to live behind
   ``@media (min-width:769px)``, and a viewport number cannot describe this row:
   the SAME 769px viewport gives the client's screen ~470px more room than
   Gabriel's, because his sidebar appears at exactly that width. Measured, the
   old rule broke in two separate bands — 561-768px the base ``auto-fit`` grid
   opened a THIRD track (the etapa card spans the full row, so the track it
   leaves behind on line one never collapses): both cards came out equal at
   229px with 245px of dead space beside them, the bar track squeezed to 0 and
   the value column pushed 5px past the card's padding — and 769-800px the
   sidebar appeared while ``minmax(220px,1fr)`` still demanded its floor, so the
   card poked out of its own grid. Gabriel's screenshot is the first band.

   Flex with proportional basis AND proportional grow needs no breakpoint: both
   are 1:2, so wherever the two fit on one line the widths are exactly one third
   / two thirds of the available space — identical to what the old rule produced
   in the band where it did work — and where they do not fit, each takes the
   whole line instead of being squeezed. Nothing here reads the viewport, so the
   two shells no longer need to agree about what a "wide screen" is.

   Inline overrides are what broke this element twice. Nothing about this row's
   layout belongs on the tags. */
.kpi-grid--leads{display:flex; flex-wrap:wrap;}
.kpi-grid--leads > .kpi{flex:1 1 160px; min-width:0;}
.kpi-grid--leads > .kpi--wide{flex:2 1 320px;}
.kpi-grid--leads > .kpi--full{flex:1 1 100%;}

/* ---- Leads responsive ------------------------------------------------ */
@media (max-width:768px){
  .filter, .filter--grow{min-width:0; width:100%;}
  .daterange{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .filters__reset{margin-left:0; width:100%;}
  .filters__reset .btn{width:100%; justify-content:center;}
}
@media (max-width:560px){
  .drawer{width:100%; max-width:100%;}
  .dl{grid-template-columns:104px 1fr;}
  .bk-row{grid-template-columns:84px 1fr auto;}
}

/* ---- Field matching (P8) -------------------------------------------- */
/* multi-level breadcrumb trail (extends the detail-head crumb pattern) */
.crumb-trail{display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:var(--text-sm); color:var(--text-muted); margin-bottom:8px;}
.crumb-trail a{color:var(--text-muted); font-weight:500; transition:color var(--base) var(--ease);}
.crumb-trail a:hover{color:var(--text-accent);}
.crumb-trail a:focus-visible{outline:none; box-shadow:var(--ring-focus); border-radius:var(--radius-sm);}
.crumb-trail .sep{color:var(--text-faint); display:inline-flex;}
.crumb-trail .current{color:var(--text-strong); font-weight:600;}

/* info / success band (reuses status tokens — not alarmist) */
.band{display:flex; align-items:flex-start; gap:11px; padding:13px 16px; border-radius:var(--radius-lg); font-size:var(--text-sm); border:1px solid transparent; line-height:1.5;}
.band svg{flex-shrink:0; margin-top:1px;}
.band b{font-weight:700; font-family:var(--font-mono);}
.band--info{background:var(--info-bg); color:var(--blue-900); border-color:var(--blue-100);}
.band--info svg{color:var(--blue-600);}
.band--success{background:var(--success-bg); color:#065F46; border-color:#A7F3D0;}
.band--success svg{stroke:var(--success);}
.band.is-hidden{display:none;}

/* mapping table */
.maphead{display:grid; grid-template-columns:1fr 44px minmax(248px,300px); gap:var(--space-md); padding:12px 16px; background:var(--surface-app); border-bottom:1px solid var(--border-subtle);}
.maphead span{font-size:var(--text-2xs); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-muted); font-weight:600;}
.maprow{display:grid; grid-template-columns:1fr 44px minmax(248px,300px); align-items:center; gap:var(--space-md); padding:var(--space-md); border-top:1px solid var(--border-subtle);}
.maprow:first-of-type{border-top:none;}
.map-raw .rawname{font-family:var(--font-mono); font-size:var(--text-md); font-weight:600; color:var(--text-strong); word-break:break-all;}
.map-raw .rawmeta{display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap;}
.map-raw .rawlabel{font-size:var(--text-xs); color:var(--text-muted);}
.fld-type{display:inline-flex; align-items:center; gap:5px; font-size:var(--text-2xs); font-weight:600; padding:2px 9px; border-radius:var(--radius-full); background:var(--surface-sunken); color:var(--text-muted);}
.fld-type .tdot{width:6px; height:6px; border-radius:2px; background:var(--text-faint);}
.fld-type.t-email .tdot{background:var(--blue-600);} .fld-type.t-tel .tdot{background:#7C3AED;} .fld-type.t-text .tdot{background:var(--slate-400);}
.map-arrow{display:flex; align-items:center; justify-content:center; color:var(--text-faint); transition:color var(--base) var(--ease);}
.map-arrow.is-on{color:var(--blue-600);}
.maprow .select-wrap{width:100%;}
.maprow.is-skip{opacity:.78;}
.maprow.is-skip .rawname{color:var(--text-muted);}
.maplabel{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* inline "crear destino personalizado" */
.cf-creator{display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap;}
.cf-creator[hidden]{display:none;}
.cf-creator__input{flex:1; min-width:150px; margin:0;}
.cf-creator .btn{flex-shrink:0;}

/* button spinner */
.spinner{width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite; flex-shrink:0;}
@keyframes spin{to{transform:rotate(360deg);}}
.btn[disabled]{opacity:.65; cursor:not-allowed; pointer-events:none;}

/* mapping footer actions */
.map-foot{display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:var(--space-lg); flex-wrap:wrap;}

@media (max-width:640px){
  .maphead{display:none;}
  .maprow{grid-template-columns:1fr; gap:10px; padding:var(--space-md) var(--space-md) var(--space-lg);}
  .map-arrow{justify-content:flex-start; transform:rotate(90deg); width:24px;}
  .maprow .select-wrap{max-width:100%;}
  .map-foot .btn{flex:1; justify-content:center;}
}

/* ---- Stages (P10) ---------------------------------------------------- */
/* drag handle cell */
.col-grip{width:44px; padding-left:14px!important; padding-right:0!important;}
th.col-grip{width:44px;}
.drag-handle{
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:34px;
  border:none; background:transparent; color:var(--text-faint); cursor:grab;
  border-radius:var(--radius-sm); transition:color var(--base) var(--ease), background var(--base) var(--ease);
  touch-action:none;
}
.drag-handle:hover{color:var(--text-muted); background:var(--surface-sunken);}
.drag-handle:active{cursor:grabbing;}
.drag-handle:focus-visible{outline:none; box-shadow:var(--ring-focus); color:var(--color-primary);}
/* dragging + drop states (reorder persistence lands in a later phase) */
tr.stage-row{transition:background var(--fast) var(--ease);}
tr.stage-row.is-dragging{background:var(--surface-card); box-shadow:var(--shadow-lg); opacity:.96;}
tr.stage-row.is-dragging td{background:var(--surface-card);}
tr.drop-gap td{box-shadow:inset 0 2px 0 var(--color-primary);}
tr.stage-row.kb-lift{background:var(--blue-50); box-shadow:inset 0 0 0 2px var(--color-primary);}
/* stage name + swatch */
.stage-cell{display:flex; align-items:center; gap:10px;}
.stage-swatch{width:12px; height:12px; border-radius:4px; flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(15,23,42,.12);}
.stage-cell .snm{font-weight:600; color:var(--text-strong);}
.stage-evt{font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--text-body); font-size:var(--text-sm);}
.stage-evt.is-none{color:var(--text-faint);}

/* ---- Switch / toggle ------------------------------------------------- */
.switch-field{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;}
.switch-field .sf-text label{margin-bottom:2px;}
.switch{position:relative; display:inline-flex; flex-shrink:0; width:46px; height:26px;}
.switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;}
.switch .track{
  position:absolute; inset:0; background:var(--border-strong); border-radius:var(--radius-full);
  transition:background var(--base) var(--ease); pointer-events:none;
}
.switch .knob{
  position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow-sm); transition:transform var(--base) var(--ease); pointer-events:none;
}
.switch input:checked + .track{background:var(--color-primary);}
.switch input:checked + .track + .knob{transform:translateX(20px);}
.switch input:focus-visible + .track{box-shadow:var(--ring-focus);}

/* progressive-disclosure block */
.reveal{overflow:hidden; max-height:0; opacity:0; transition:max-height var(--slow) var(--ease), opacity var(--base) var(--ease), margin var(--base) var(--ease); margin-top:0;}
.reveal.is-open{max-height:340px; opacity:1; margin-top:var(--space-lg);}
.reveal__inner{padding:var(--space-md); border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-app);}

/* color swatch picker */
.swatch-picker{display:flex; flex-wrap:wrap; gap:10px;}
.swatch-opt{position:relative; width:32px; height:32px; border-radius:var(--radius-md); border:none; cursor:pointer; padding:0; transition:transform var(--base) var(--ease), box-shadow var(--base) var(--ease); box-shadow:inset 0 0 0 1px rgba(15,23,42,.14);}
.swatch-opt:hover{transform:translateY(-1px);}
.swatch-opt:focus-visible{outline:none; box-shadow:var(--ring-focus);}
.swatch-opt[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface-card), 0 0 0 4px var(--color-primary);}
.swatch-opt[aria-pressed="true"]::after{content:""; position:absolute; inset:0; display:flex; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center; filter:drop-shadow(0 1px 1px rgba(0,0,0,.4));}

/* derived (read-only) value chip */
.derived{display:flex; align-items:center; gap:9px; padding:11px 14px; border:1px dashed var(--border-strong); border-radius:var(--radius-md); background:var(--surface-sunken); color:var(--text-muted); font-size:var(--text-sm);}
.derived .dv{font-family:var(--font-mono); font-weight:600; color:var(--text-body); word-break:break-all;}

/* segmented radio for event mode */
.evt-mode{display:inline-flex; background:var(--surface-sunken); border-radius:var(--radius-md); padding:3px; gap:3px; margin-bottom:var(--space-md);}
.evt-mode label{position:relative; cursor:pointer;}
.evt-mode input{position:absolute; opacity:0; pointer-events:none;}
.evt-mode span{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-sans); font-size:var(--text-sm); font-weight:600; color:var(--text-muted); padding:7px 16px; border-radius:var(--radius-sm); transition:background var(--base), color var(--base), box-shadow var(--base);}
.evt-mode input:checked + span{background:var(--surface-card); color:var(--color-primary); box-shadow:var(--shadow-sm);}
.evt-mode label:has(input:focus-visible) span{box-shadow:var(--ring-focus);}

/* ---- Meta connection (P11) ------------------------------------------ */
.section__head-right{display:flex; align-items:center; gap:12px; flex-wrap:wrap; flex-shrink:0;}
.metacard .dl{grid-template-columns:220px 1fr;}
.metacard .dl dd{color:var(--text-body); font-weight:500;}
.metacard .dl dd .name{color:var(--text-strong); font-weight:600;}
.metacard .dl dd .mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:var(--text-xs); color:var(--text-muted); margin-left:4px;}
.metacard .dl dd.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:var(--text-xs); color:var(--text-body);}
.meta-status{display:flex; align-items:center; gap:7px; font-size:var(--text-xs); color:var(--text-muted); margin-top:var(--space-md);}
.meta-status svg{stroke:var(--success); flex-shrink:0;}
.meta-actions{display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:var(--space-lg); padding-top:var(--space-lg); border-top:1px solid var(--border-subtle); flex-wrap:wrap;}

/* ---- Motor de conversiones (P11-B) — controles dentro de la ficha ---- */
.engine{margin-top:var(--space-lg); padding-top:var(--space-lg); border-top:1px solid var(--border-subtle);}
.engine__state{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px;}
.engine__warns{list-style:none; margin:var(--space-md) 0 0; padding:0; display:flex; flex-direction:column; gap:8px;}
.engine__warns li{display:flex; align-items:flex-start; gap:7px; font-size:var(--text-xs); color:var(--text-body); line-height:1.5;}
.engine__warns li svg{flex:0 0 auto; margin-top:2px; stroke:var(--text-muted);}
.engine__warns strong{color:var(--text-strong); font-weight:600;}
.engine .input:disabled{background:var(--surface-sunken); color:var(--text-muted); cursor:not-allowed;}

/* password field with show/hide toggle */
.pw-wrap{position:relative;}
.pw-wrap .input{padding-right:46px;}
.pw-toggle{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:34px; height:34px; border:none; background:transparent; color:var(--text-faint); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); transition:color var(--base) var(--ease), background var(--base) var(--ease);}
.pw-toggle:hover{color:var(--text-body); background:var(--surface-sunken);}
.pw-toggle:focus-visible{outline:none; box-shadow:var(--ring-focus);}
.pw-toggle svg{pointer-events:none;}
.input--mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}

@media (max-width:560px){
  .metacard .dl{grid-template-columns:1fr;}
  .metacard .dl dt{padding-bottom:0; border-top:1px solid var(--border-subtle);}
  .metacard .dl dd{padding-top:2px; border-top:none;}
  .metacard .dl dt:first-of-type{border-top:none;}
  .meta-actions{flex-direction:column-reverse;}
  .meta-actions .btn{width:100%; justify-content:center;}
  .section__head-right{width:100%;}
  .section__head-right .btn{flex:1; justify-content:center;}
}

/* ---- Searchable combobox (P11) --------------------------------------- */
.combo{position:relative;}
.combo__control{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  font-family:var(--font-sans); font-size:var(--text-base); color:var(--text-strong);
  border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface-card);
  padding:11px 14px; cursor:pointer; min-height:44px;
  transition:border-color var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.combo__control:hover{border-color:var(--text-faint);}
.combo__control:focus-visible,
.combo__control[aria-expanded="true"]{outline:none; border-color:var(--color-primary); box-shadow:var(--ring-focus);}
.combo__control:disabled{background:var(--surface-app); color:var(--text-faint); cursor:not-allowed; border-color:var(--border-subtle);}
.combo__value{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:baseline; gap:8px;}
.combo__value.is-placeholder{color:var(--text-faint);}
.combo__value .cnm{font-weight:600; color:var(--text-strong);}
.combo__value .cid{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-muted);}
.combo__control > svg{color:var(--text-faint); flex-shrink:0; transition:transform var(--base) var(--ease); pointer-events:none;}
.combo__control[aria-expanded="true"] > svg{transform:rotate(180deg);}

.combo__pop{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:20;
  background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden; max-height:290px;
}
.combo__pop[hidden]{display:none;}
.combo__search{position:relative; padding:10px; border-bottom:1px solid var(--border-subtle); flex-shrink:0;}
.combo__search svg{position:absolute; left:21px; top:50%; transform:translateY(-50%); color:var(--text-faint); pointer-events:none;}
.combo__search input{width:100%; height:36px; padding:0 12px 0 34px; font-family:var(--font-sans); font-size:var(--text-sm); color:var(--text-strong); border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface-card); transition:border-color var(--base) var(--ease), box-shadow var(--base) var(--ease);}
.combo__search input:focus{outline:none; border-color:var(--color-primary); box-shadow:var(--ring-focus);}
.combo__list{list-style:none; margin:0; padding:5px; overflow-y:auto; flex:1; min-height:0;}
.combo__opt{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--radius-sm); cursor:pointer; transition:background var(--fast) var(--ease);}
.combo__opt .cnm{font-size:var(--text-sm); font-weight:600; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:1; min-width:0;}
.combo__opt .cid{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-muted); margin-left:auto; white-space:nowrap; flex-shrink:0;}
.combo__opt.is-active{background:var(--blue-50);}
.combo__opt[aria-selected="true"] .cnm{color:var(--color-primary);}
.combo__opt .ck{margin-left:8px; align-self:center; color:var(--color-primary); opacity:0; flex-shrink:0;}
.combo__opt[aria-selected="true"] .ck{opacity:1;}

.combo__state{padding:22px 16px; text-align:center; display:none; flex-direction:column; align-items:center; gap:9px; color:var(--text-muted); font-size:var(--text-sm); line-height:1.4;}
.combo__state.is-shown{display:flex;}
.combo__state .cs-ic{color:var(--text-faint);}
.combo__state .cs-err{stroke:var(--destructive);}
.combo__spin{width:20px; height:20px; border-radius:50%; border:2px solid var(--border-strong); border-top-color:var(--color-primary); animation:spin .7s linear infinite;}
.combo__foot{border-top:1px solid var(--border-subtle); padding:8px 10px; flex-shrink:0; display:flex; justify-content:space-between; align-items:center; gap:8px;}
.combo__foot-hint{font-size:var(--text-xs); color:var(--text-muted); white-space:nowrap;}
.combo__link{background:none; border:none; padding:5px 7px; cursor:pointer; font-family:var(--font-sans); font-size:var(--text-xs); font-weight:600; color:var(--color-primary); border-radius:var(--radius-sm); white-space:nowrap; transition:background var(--base) var(--ease);}
.combo__link:hover{background:var(--blue-50); text-decoration:underline;}
.combo__link:focus-visible{outline:none; box-shadow:var(--ring-focus);}
.combo-manual{display:flex; gap:10px; align-items:center;}
.combo-manual[hidden]{display:none;}
.combo-manual .input{flex:1;}
.combo-manual .combo__link{white-space:nowrap; flex-shrink:0;}
.field.is-error .combo__control{border-color:var(--destructive);}
.field.is-error .combo-manual .input{border-color:var(--destructive);}

/* ==== Formularios instantáneos de Meta (P12 tramo 2B) — solo lectura ==== */
.metaforms{margin-top:var(--space-md); display:flex; flex-direction:column; gap:var(--space-md);}
.metaforms[hidden]{display:none;}
.metaforms__head h3{font-size:var(--text-md); color:var(--text-strong);}
.metaforms__head .sub{font-size:var(--text-sm); color:var(--text-muted); margin-top:2px;}
.metaforms__pagewrap{display:flex; flex-direction:column; gap:6px; max-width:360px;}
.metaforms__pagewrap[hidden]{display:none;}
.metaforms__pagelabel{font-size:var(--text-sm); font-weight:600; color:var(--text-body);}
.metaforms__select{width:100%; padding:9px 12px; font-family:var(--font-sans); font-size:var(--text-sm); color:var(--text-body); background:var(--surface-card); border:1px solid var(--border-strong); border-radius:var(--radius-md); cursor:pointer;}
.metaforms__select:focus-visible{outline:none; box-shadow:var(--ring-focus); border-color:var(--color-primary);}
.metaforms__list{display:flex; flex-direction:column; gap:var(--space-sm);}
.metaforms__state{display:flex; align-items:center; justify-content:center; gap:10px; padding:22px 16px; text-align:center; color:var(--text-muted); font-size:var(--text-sm); border:1px dashed var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-card);}
.metaforms__state--err{color:var(--text-body); flex-wrap:wrap;}
.formrow{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-card); box-shadow:var(--shadow-sm);}
.formrow__main{display:flex; align-items:center; gap:10px; min-width:0;}
.formrow__name{font-size:var(--text-sm); font-weight:600; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.formrow__toggle{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.formrow__note{font-size:var(--text-xs); color:var(--text-faint); white-space:nowrap;}
.metaforms .switch input:disabled{cursor:not-allowed;}
/* Fila de formulario Meta seleccionable (P12 tramo 3, form.html) */
.metaselect[hidden]{display:none;}
.formrow--pick{width:100%; font-family:inherit; text-align:left; cursor:pointer; transition:border-color var(--base), background var(--base), box-shadow var(--base);}
.formrow--pick:hover{border-color:var(--border-strong);}
.formrow--pick:focus-visible{outline:none; box-shadow:var(--ring-focus); border-color:var(--color-primary);}
.formrow__pick{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:var(--radius-full); border:1px solid var(--border-strong); color:transparent; flex-shrink:0; transition:all var(--base);}
.formrow--pick.is-selected{border-color:var(--color-primary); background:var(--blue-50);}
.formrow--pick.is-selected .formrow__pick{background:var(--color-primary); border-color:var(--color-primary); color:#fff;}
.formrow--added{opacity:.55; cursor:default; box-shadow:none; background:var(--surface-muted, var(--surface-card));}
.formrow--added .formrow__name{color:var(--text-muted);}
.formrow__added{font-size:var(--text-xs); font-weight:600; color:var(--text-faint); white-space:nowrap; flex-shrink:0;}

/* ===== Carriles de conversión: cabeceras de carril (CRM + web) (WL4) ===== */
.engine__lane{display:flex; align-items:center; gap:9px; margin-bottom:var(--space-md);}
.engine__lane .ic{width:26px; height:26px; border-radius:var(--radius-sm); background:var(--surface-sunken); display:inline-flex; align-items:center; justify-content:center; color:var(--text-muted); flex-shrink:0;}
.engine__lane .lane-name{font-family:var(--font-mono); font-size:var(--text-sm); font-weight:600; color:var(--text-strong);}
.engine--crm .engine__lane .ic{background:var(--blue-50); color:var(--blue-600);}
.engine--crm .engine__lane .lane-name{color:var(--blue-800);}

/* ===== Carril web (WL4) ===== */
.engine--web .engine__lane .ic{background:#EDE9FE; color:#7C3AED;}
.engine--web .engine__lane .lane-name{color:#6D28D9;}
.engine__pixel{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; padding:11px 14px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-app); margin-top:var(--space-md);}
.engine__pixel .lbl{font-size:var(--text-xs); font-weight:600; color:var(--text-muted);}
.engine__pixel .val{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-muted);}
.engine__pixel .val b{color:var(--text-body);}
.webtest{margin-top:var(--space-md);}
.webtest .hint{font-size:var(--text-xs); color:var(--text-muted);}
.webtest .msg{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--radius-md); font-size:var(--text-sm); line-height:1.5;}
.webtest .msg svg{flex:0 0 auto; margin-top:2px;}
.webtest .msg--info{border:1px solid var(--info); background:var(--info-bg); color:var(--text-body);}
.webtest .msg--ok{border:1px solid var(--success); background:var(--success-bg); color:var(--text-strong);}
.webtest .msg--ok svg{color:var(--success);}
.webtest .error-msg{color:var(--destructive); font-size:var(--text-sm); align-items:center; gap:6px;}
.webtest__actions{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap;}
/* Confirmado + en vivo: línea discreta en vez del aviso grande */
.webtest__ok-line{display:flex; align-items:center; gap:7px; font-size:var(--text-xs); color:var(--text-muted); line-height:1.5;}
.webtest__ok-line svg{flex:0 0 auto; color:var(--success);}
.webtest__retest{margin-left:auto; background:none; border:0; padding:0; font:inherit; color:var(--text-muted); text-decoration:underline; cursor:pointer;}
.webtest__retest:hover{color:var(--text-body);}
.sendlist{border:1px solid var(--border-subtle); border-radius:var(--radius-md); overflow:hidden; margin-top:var(--space-md);}
.sendlist__row{display:grid; grid-template-columns:150px 1fr auto; gap:var(--space-md); align-items:center; padding:11px 14px; border-top:1px solid var(--border-subtle);}
.sendlist__row:first-child{border-top:none;}
.sendlist__when{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-body);}
.sendlist__pixel{font-family:var(--font-mono); font-size:var(--text-2xs,11px); color:var(--text-muted); text-align:right;}
.sendlist__empty{padding:var(--space-lg); text-align:center; font-size:var(--text-sm); color:var(--text-muted);}
.engine__subhead{font-family:var(--font-mono); font-size:var(--text-sm); font-weight:600; color:var(--text-strong); display:flex; align-items:center; gap:8px; margin-top:var(--space-lg);}
.engine__subhead svg{color:var(--text-muted);}
@media (max-width:560px){
  .sendlist__row{grid-template-columns:auto 1fr; gap:8px 12px;}
  .sendlist__pixel{grid-column:1/-1; text-align:left;}
  .webtest__actions .btn{flex:1; justify-content:center;}
}