/* ============================================================
   CRO board · estilos del Funnel
   Portados verbatim de target-app; sus variables se remapean
   aquí a los tokens de CRO board.
   ============================================================ */
:root{
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-muted: var(--faint);
  --accent: var(--brand);
  --bg-secondary: var(--surface-1);
  --bg-card: var(--surface-2);
  --bg-card-hover: var(--surface-3);
  --radius-sm: var(--r-sm);
  --radius-lg: var(--r);
  --modal-shadow: 0 20px 60px rgba(0,0,0,.5);
  --overlay-bg: rgba(6,8,12,.62);
  --overlay-blur: blur(3px);
}
.btn-funnel { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--radius-sm); font-size: var(--fs-sm); cursor: pointer; padding: 10px 20px; transition: all 0.15s;}
.btn-funnel:hover { background: var(--bg-card-hover);}
.score-high { color: var(--ok-ink); background: var(--ok-bg);}
.score-med { color: var(--warn-ink); background: var(--warn-bg);}
.score-low { color: var(--orange); background: rgba(251,146,60,0.12);}
.score-very-low { color: var(--bad); background: var(--bad-bg);}
.funnel-window { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 96vw; max-width: 1600px; height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--modal-shadow);}
.funnel-window-header { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); flex-shrink: 0;}
.funnel-window-title-block { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0;}
.funnel-window-title { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary);}
.funnel-window-subtitle { font-size: var(--fs-xs); color: var(--text-muted);}
.funnel-window-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: 0;}
.funnel-window-close { background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: var(--radius-sm); width: 30px; height: 30px; cursor: pointer; font-size: var(--fs-sm); flex-shrink: 0; transition: all 0.15s;}
.funnel-window-close:hover { color: var(--text-primary); background: var(--bg-card-hover);}
.funnel-window-body { flex: 1; min-height: 0; overflow: hidden; padding: 0;}
.funnel-window-body .funnel-grid-wrapper {
    height: 100%;
    margin: 0;
    padding: 20px 24px;
    overflow: auto;
    cursor: grab;
    scrollbar-width: none;}
.funnel-window-body .funnel-grid-wrapper::-webkit-scrollbar { width: 0; height: 0;}
.funnel-window-body .funnel-grid-wrapper.dragging { cursor: grabbing; user-select: none;}
.funnel-window-body .funnel-grid { align-items: stretch; min-height: 100%;}
.funnel-selector { font-size: var(--fs-sm); background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 10px; min-width: 180px;}
.funnel-empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 80px 20px; text-align: center;}
.funnel-empty-icon { font-size: 40px; opacity: 0.3;}
.funnel-empty-msg { font-size: var(--fs-xl); font-weight: 600; color: var(--text-primary);}
.funnel-empty-sub { font-size: var(--fs-sm); color: var(--text-muted); max-width: 360px;}
.funnel-grid-wrapper { overflow-x: auto; padding: 16px 32px; margin: 0 -32px;}
.funnel-grid { display: flex; flex-direction: row; gap: 0; align-items: flex-start; min-width: max-content;}
.funnel-level-col { width: 240px; flex-shrink: 0; border-right: 1px solid var(--border); padding: 0 16px 24px;}
.funnel-level-col:last-child { border-right: none;}
.funnel-add-level-col { width: 160px; flex-shrink: 0; padding: 0 16px;}
.funnel-level-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 0 6px; border-bottom: 1px solid var(--border); margin-bottom: 8px;}
.funnel-level-num { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600;}
.funnel-level-day { font-size: var(--fs-xs); color: var(--text-secondary); font-weight: 500;}
.funnel-level-subheader { min-height: 52px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px;}
.funnel-level-vpu-block { display: flex; flex-direction: column; gap: 1px; margin-top: 4px;}
.funnel-level-vpu-day { font-size: var(--fs-xs); font-weight: 600; color: var(--text-primary);}
.funnel-level-vpu { font-size: 10px; color: #818cf8; font-weight: 500;}
.funnel-level-day-solo { font-size: var(--fs-xs); font-weight: 600; color: var(--text-primary); display: block; margin-top: 4px;}
.funnel-level-delete { background: transparent; border: none; cursor: pointer; color: var(--text-muted); font-size: var(--fs-xs); padding: 1px 4px; border-radius: 3px;}
.funnel-level-delete:hover { color: var(--bad); background: var(--bad-bg);}
.funnel-bar-wrap { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; min-height: 20px;}
.funnel-dropoff { margin: 4px 0 8px;}
.funnel-dropoff-pct { font-size: var(--fs-lg); font-weight: 700; display: block;}
.funnel-dropoff-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em;}
.funnel-dropoff.high .funnel-dropoff-pct, .funnel-dropoff.high .funnel-dropoff-label { color: var(--bad);}
.funnel-dropoff.med .funnel-dropoff-pct, .funnel-dropoff.med .funnel-dropoff-label { color: var(--warn);}
.funnel-dropoff.low .funnel-dropoff-pct, .funnel-dropoff.low .funnel-dropoff-label { color: var(--text-muted);}
.funnel-dropoff.first-level { opacity: 0.3;}
.funnel-dropoff.first-level .funnel-dropoff-pct { font-size: var(--fs-xs);}
.funnel-steps-list { display: flex; flex-direction: column; gap: 8px;}
.funnel-step-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px;}
.funnel-step-card-header { margin-bottom: 6px;}
.funnel-step-card-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; margin-bottom: 2px;}
.funnel-step-card-name { font-size: var(--fs-xs); font-weight: 600; color: var(--text-primary);}
.funnel-step-card-btns { display: flex; gap: 3px; flex-shrink: 0;}
.funnel-card-edit-step, .funnel-card-delete-step { background: transparent; border: none; cursor: pointer; color: var(--text-muted); font-size: var(--fs-xs); padding: 1px 3px;}
.funnel-card-edit-step:hover { color: var(--accent);}
.funnel-card-delete-step:hover { color: var(--bad);}
.funnel-step-card-url { display: block; font-size: 10px; color: var(--text-muted);}
.funnel-step-visitors-block { display: flex; flex-direction: column; gap: 1px; margin-top: 3px;}
.funnel-step-card-visitors-period { font-size: 10px; color: var(--text-secondary); font-weight: 500;}
.funnel-step-card-visitors { font-size: 10px; color: #818cf8; font-weight: 500;}
.funnel-btn-add-step, .funnel-btn-add-level { width: 100%; padding: 6px; font-size: var(--fs-xs); background: transparent; border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; margin-top: 4px;}
.funnel-btn-add-step:hover, .funnel-btn-add-level:hover { border-color: var(--accent); color: var(--accent);}
.funnel-assigned-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px;}
.funnel-assigned-empty { font-size: 10px; color: var(--text-muted); padding: 2px 0;}
.funnel-level-global { border-left: 2px solid rgba(99,102,241,0.4); background: rgba(99,102,241,0.03);}
.funnel-level-num-global { color: #818cf8; font-size: var(--fs-xs); font-weight: 700;}
.funnel-global-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; align-self: flex-start;}
.funnel-global-stat { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-xs);}
.funnel-global-stat-label { color: var(--text-muted);}
.funnel-global-stat-val { font-weight: 600; color: var(--text-primary);}
.funnel-global-date-val { font-size: var(--fs-xs); color: var(--text-secondary); font-weight: 500;}
.funnel-global-divider { height: 1px; background: var(--border); margin: 6px 0;}
.funnel-global-block-title { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; margin-top: 2px;}
.funnel-col-section-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 6px;}
.funnel-conversion { color: var(--ok-ink);}
.funnel-modal { position: fixed; inset: 0; background: var(--overlay-bg); backdrop-filter: var(--overlay-blur); display: flex; align-items: center; justify-content: center; z-index: 1300;}
.funnel-modal-box { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); width: 380px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--modal-shadow);}
.funnel-modal-title { font-size: var(--fs-lg); font-weight: 600; margin: 0 0 6px; color: var(--text-primary);}
.funnel-modal-label { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px;}
.funnel-modal-input { width: 100%; font-size: var(--fs-sm); background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; box-sizing: border-box;}
.funnel-modal-input:focus { outline: none; border-color: var(--accent);}
.funnel-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px;}
.funnel-modal-row { display: flex; gap: 10px;}
.funnel-modal-row > div { flex: 1; display: flex; flex-direction: column; gap: 4px;}
.funnel-exp-score { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; font-size: 10px; font-weight: 800; flex-shrink: 0; margin-left: 2px;}

/* --- Aliases de botones de target-app --- */
.btn-sm{ padding:6px 11px; font-size:var(--fs-xs) }
.funnel-window .btn-primary,.funnel-modal .btn-primary{ background:linear-gradient(180deg,var(--brand-2),var(--brand)); border-color:transparent; color:#fff }
.funnel-window .btn-secondary,.funnel-modal .btn-secondary{ background:var(--surface-2) }
.funnel-window .btn.danger,.funnel-window .btn-secondary.danger,.funnel-modal .danger{ color:var(--bad-ink); border-color:var(--bad-bd) }

/* --- Modo embebido: el funnel es un módulo, no un popup --- */
.funnel-window.funnel-embedded{ position:static; width:100%; max-width:none; height:auto; background:transparent; border:none; border-radius:0; box-shadow:none; overflow:visible }
.funnel-embedded .funnel-window-header{ padding:0 0 16px; margin-bottom:16px }
.funnel-embedded .funnel-window-body{ overflow:visible; height:auto }
.funnel-embedded .funnel-window-body .funnel-grid-wrapper{ overflow-x:auto; overflow-y:visible; height:auto; cursor:grab; padding:8px 0; margin:0 }
/* GLOBAL alineada a la izquierda, con margen cómodo (sin el sangrado del popup) */
.funnel-embedded .funnel-level-global{ padding-left:14px }
.funnel-embedded .funnel-global-card{ padding:12px }
/* Botón "+ Step N" alineado con los títulos STEP */
.funnel-embedded .funnel-add-level-col .funnel-level-header{ align-items:flex-start }
.funnel-embedded .funnel-add-level-col .funnel-btn-add-level{ margin-top:0 }

/* P-Prioriza · pestañas Mapa/Prioriza + tablero Pain × Tráfico */
.funnel-tabs{ display:inline-flex; border:1px solid var(--border); border-radius:var(--r-sm); overflow:visible }
.funnel-tab{ background:transparent; border:none; color:var(--muted); padding:6px 14px; font-size:13px; font-weight:600; cursor:pointer; transition:.12s; border-radius:var(--r-sm) }
.funnel-tab:hover{ color:var(--text) }
.funnel-tab.active{ background:var(--brand-bg); color:var(--brand-2) }
.funnel-tab:focus-visible{ outline:none; box-shadow:var(--ring) }
/* Separa las lentes (izq.) de las acciones de gestión (der.) en la barra de controles */
.funnel-window-controls .funnel-tabs{ margin-right:auto }
.funnel-prio{ padding:4px 2px 16px }
.funnel-prio-lead{ font-size:13px; color:var(--muted); margin:0 0 12px; max-width:760px }
.funnel-prio-hint{ font-size:12.5px; color:var(--warn-ink); background:var(--warn-bg); border:1px solid var(--warn-bd); border-radius:var(--r-sm); padding:9px 12px; margin-bottom:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.funnel-prio-empty{ text-align:center; color:var(--muted); padding:40px 24px; border:1px dashed var(--border-strong); border-radius:var(--r); display:flex; flex-direction:column; align-items:center; gap:12px; font-size:14px }
.funnel-prio-table{ table-layout:auto; max-width:1000px }
.funnel-prio-table td{ padding:9px 10px; vertical-align:middle }
.funnel-prio-arrow{ color:var(--faint); margin:0 4px }
.funnel-prio-sub{ font-size:11px; color:var(--faint); font-weight:400 }
.funnel-prio-stake{ font-weight:700; font-variant-numeric:tabular-nums }
.funnel-prio-drop{ font-weight:700; font-variant-numeric:tabular-nums }
.funnel-prio-drop.high{ color:var(--bad) }
.funnel-prio-drop.med{ color:var(--warn) }
.funnel-prio-drop.low{ color:var(--muted) }
.funnel-prio-research{ white-space:nowrap }
.funnel-prio-go{ background:none; border:1px solid var(--border-strong); color:var(--brand-2); cursor:pointer; font-size:11.5px; font-weight:600; border-radius:var(--r-sm); padding:4px 9px; margin-right:5px; transition:.12s }
.funnel-prio-go:hover{ background:var(--brand-bg); border-color:var(--brand-bd) }
.funnel-prio-go:focus-visible{ outline:none; box-shadow:var(--ring) }