/* ============================================================
   Campañas Comerciales (card v2 + card compacta del dashboard).
   ============================================================
   Extraído VERBATIM de styles.css el 20-ago-2026, espejando `js/campanas.js`.
   ⚠⚠ EL ORDEN DE CARGA ES LA CASCADA: va DESPUÉS de styles.css y en el mismo orden
   RELATIVO que tenía adentro (ver los <link> de index.html). Este par va entre
   polizas-recuotificar y mobile porque ahí estaba en el archivo original.
   ============================================================ */
/* ===== Campañas Comerciales (js/campanas.js) ===== */
.camp-vacio { color:#64748b; font-size:13.5px; padding:24px; text-align:center; background:#fff; border:1px solid #e2e8f0; border-radius:12px; }
.camp-seccion { font-size:13px; font-weight:600; color:#64748b; margin:18px 0 8px; text-transform:uppercase; letter-spacing:.4px; }
.camp-kpis { display:flex; gap:12px; margin-bottom:14px; }
.camp-kpi { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:10px 18px; text-align:center; }
.camp-kpi-num { font-size:22px; font-weight:700; color:#0f172a; }
.camp-kpi-lbl { font-size:11.5px; color:#64748b; }
.camp-card { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:16px 18px; margin-bottom:14px; }
.camp-card-cerrada { opacity:.85; }
.camp-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px; }
.camp-card-titulo { font-size:15px; font-weight:600; color:#0f172a; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.camp-card-sub { font-size:12.5px; color:#64748b; margin-top:2px; }
.camp-card-acciones { display:flex; gap:6px; flex-shrink:0; }
.camp-btn-mini { font-size:11.5px; padding:4px 10px; }
/* ⚠ `.btn-secondary` no tiene regla `:disabled` propia: sin esto, el ↑ de la primera campaña
   se ve IGUAL que uno vivo y clickearlo no hace nada — el modo de falla mudo de siempre. */
.camp-btn-mini:disabled { opacity:.35; cursor:not-allowed; }
.camp-badge { font-size:11px; padding:2px 10px; border-radius:999px; font-weight:600; white-space:nowrap; }
.camp-badge-activa { background:#dcfce7; color:#166534; }
.camp-badge-borrador { background:#fef3c7; color:#92400e; }
.camp-badge-fin { background:#f1f5f9; color:#475569; }
.camp-badge-dias { background:#e0f2fe; color:#075985; flex-shrink:0; }
.camp-prog-num { font-size:28px; font-weight:700; color:#0f172a; margin-top:6px; }
.camp-prog-de { font-size:13px; font-weight:400; color:#94a3b8; margin-left:4px; }
.camp-bar { position:relative; height:10px; background:#f1f5f9; border-radius:999px; margin:8px 0 6px; }
.camp-bar-fill { height:100%; background:linear-gradient(90deg,#22c55e,#16a34a); border-radius:999px; transition:width .4s; }
.camp-bar-full { background:linear-gradient(90deg,#f59e0b,#d97706); }
.camp-bar-hito { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:16px; height:16px; box-sizing:border-box; border-radius:50%; background:#fff; border:2px solid #cbd5e1; box-shadow:0 0 0 1px #e2e8f0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:10px; font-weight:800; line-height:1; }
.camp-bar-hito-ok { background:#16a34a; border-color:#fff; box-shadow:0 0 0 1px #16a34a; }
.camp-lbl-ok { color:#16a34a; }
.camp-prog-texto { font-size:13px; color:#475569; }
.camp-prog-texto b { color:#0f172a; }
.camp-rank { margin-top:12px; display:grid; gap:5px; }
.camp-rank-row { display:flex; align-items:center; gap:10px; font-size:12.5px; }
.camp-rank-propio { background:#eff6ff; border-radius:6px; padding:2px 6px; margin:0 -6px; font-weight:600; }
.camp-rank-pos-n { width:16px; text-align:center; color:#94a3b8; font-weight:600; }
.camp-rank-nombre { flex:0 0 150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.camp-rank-bar { flex:1; height:7px; background:#f1f5f9; border-radius:999px; overflow:hidden; }
.camp-rank-fill { height:100%; background:#60a5fa; border-radius:999px; }
.camp-rank-n { min-width:26px; text-align:right; color:#475569; font-weight:600; }
.camp-rank-premio { min-width:90px; text-align:right; color:#166534; font-size:12px; }
.camp-rank-pago { min-width:120px; text-align:right; }
.camp-rank-pos { font-size:13px; color:#475569; margin-top:10px; }
.camp-muted { color:#94a3b8; font-size:12.5px; }
.camp-builder { border-color:#bfdbfe; }
.camp-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin:10px 0; }
.camp-form-grid-3 { grid-template-columns:1fr 1fr 1fr; }
.camp-form-grid label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:#475569; font-weight:600; }
.camp-form-grid input, .camp-form-grid select { font-size:13px; padding:7px 10px; border:1px solid #cbd5e1; border-radius:8px; }
.camp-fieldset { border:1px solid #e2e8f0; border-radius:10px; padding:0 12px 10px; overflow:hidden; background:#fff; }
.camp-fieldset-t { font-size:12px; font-weight:600; color:#334155; padding:9px 12px; background:#f8fafc; border-bottom:1px solid #e2e8f0; margin:0 -12px 8px; }
.camp-fieldset-t label { display:flex !important; flex-direction:row !important; align-items:center; gap:7px; cursor:pointer; }
.camp-checks { display:flex; flex-direction:column; gap:2px; max-height:170px; overflow-y:auto; font-size:12.5px; }
/* ⚠ flex-direction:row explícito: sin esto hereda el column de .camp-form-grid label
   y los checkbox quedaban centrados ARRIBA del texto (bug visto en prod 2-jul). */
.camp-checks label { display:flex !important; flex-direction:row !important; align-items:center; justify-content:flex-start; gap:7px; font-weight:400; color:#334155; padding:4px 6px; border-radius:6px; cursor:pointer; }
.camp-checks label:hover { background:#f1f5f9; }
/* Grupos de membresía dentro del fieldset de productores: mismo eje ("quién participa"), y por
   eso comparten scroll y el casillero "Todos" en vez de ser una cuarta columna. Los separadores
   quedan pegajosos porque en bds la lista de sueltos son 179 PAS y el rótulo se pierde al bajar. */
.camp-memb-grupos { display:contents; }
.camp-memb-t { position:sticky; top:0; z-index:1; font-size:10.5px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.4px; background:#fff; padding:6px 6px 3px; border-bottom:1px solid #e2e8f0; }
.camp-memb-n { color:#94a3b8; font-size:11.5px; }
.camp-memb-huerfana { text-decoration:line-through; opacity:.65; }
.camp-sec-t { font-size:12px; font-weight:700; color:#475569; text-transform:uppercase; letter-spacing:.5px; margin:16px 0 2px; padding-bottom:5px; border-bottom:1px solid #e2e8f0; }
.camp-esc-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12.5px; color:#64748b; }
.camp-esc-row input { width:110px; font-size:13px; padding:6px 8px; border:1px solid #cbd5e1; border-radius:8px; }
.camp-preview { font-size:12.5px; color:#075985; background:#f0f9ff; border-radius:8px; padding:8px 12px; margin:10px 0; min-height:18px; }
.camp-preview:empty { display:none; }
.camp-error { color:#b91c1c; }
.camp-builder-botones { display:flex; gap:8px; margin-top:4px; }
.camp-check-inline { display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:#334155; margin:2px 0 10px; background:#fffbeb; border:1px solid #fde68a; border-radius:10px; padding:9px 13px; cursor:pointer; }
.camp-check-inline input { margin-top:2px; flex-shrink:0; }
.camp-check-inline b { color:#92400e; }
.camp-card-click { cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.camp-card-click:hover { border-color:#93c5fd; box-shadow:0 1px 6px rgba(var(--c-secondary-rgb),.12); }
/* --- card v2 (más comercial) --- */
.camp-card-v2 { position:relative; overflow:hidden; padding-top:20px; }
/* Franja en la familia DORADA de la sección (el ámbar es el color de "campaña" en el Home);
   el degradé a rojo anterior se leía como alarma, no como oportunidad (Martín, 24-ago-2026). */
.camp-card-v2::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#fcd34d,#f59e0b); }
/* Layout GEMELO: el bloque de cabecera (chips + título + descripción) tiene ALTURA FIJA,
   así el título arranca en la misma línea y la barra/callout/ranking quedan a la misma
   altura en TODAS las cards del grid. Cambia el contenido, no la geometría. */
.camp-head-left { flex:1; min-width:0; height:142px; overflow:hidden; }
.camp-titulo-xl { font-size:17px; margin-top:8px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.camp-desc { margin-top:4px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.camp-bar-ghost { visibility:hidden; }
.camp-callout { min-height:40px; box-sizing:border-box; }
.camp-head-der { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }
.camp-chips { display:flex; flex-wrap:wrap; gap:6px; }
.camp-chips + .camp-chips { margin-top:6px; }
.camp-chip { font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px; background:#eff6ff; color:var(--c-primary-strong); white-space:nowrap; }
.camp-chip-cia { background:#dbeafe; color:var(--c-primary-700); }
.camp-chip-soft { background:#f1f5f9; color:#64748b; font-weight:500; }
.camp-premio-box { display:flex; align-items:center; gap:9px; background:linear-gradient(135deg,#fffbeb,#fef3c7); border:1px solid #fde68a; border-radius:12px; padding:8px 14px; }
.camp-premio-tr { font-size:22px; line-height:1; }
.camp-premio-monto { font-size:16px; font-weight:700; color:#92400e; white-space:nowrap; }
.camp-premio-sub { font-size:10.5px; color:#b45309; }
.camp-prog-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:8px; }
.camp-pct { font-size:12px; font-weight:700; color:#0369a1; background:#e0f2fe; padding:2px 10px; border-radius:999px; }
.camp-pct-full { color:#92400e; background:#fef3c7; }
.camp-bar-xl { height:14px; margin-top:10px; }
.camp-bar-xl .camp-bar-hito { width:20px; height:20px; font-size:12px; }
.camp-bar-labels { position:relative; height:15px; margin-top:2px; font-size:10.5px; color:#94a3b8; font-weight:600; }
.camp-bar-labels span { position:absolute; transform:translateX(-50%); }
.camp-callout { display:flex; align-items:center; gap:9px; background:#eff6ff; border:1px solid #dbeafe; border-radius:10px; padding:9px 13px; margin-top:10px; font-size:13.5px; color:var(--c-primary); }
.camp-callout b { color:var(--c-primary-700); }
.camp-callout-ok { background:#f0fdf4; border-color:#bbf7d0; color:#166534; }
.camp-callout-ok b { color:#14532d; }
.camp-callout-ico { font-size:17px; line-height:1; flex-shrink:0; }
.camp-callout-txt { flex:1; min-width:0; }
.camp-callout-pos { flex-shrink:0; white-space:nowrap; font-size:12.5px; color:var(--c-primary-700); background:#dbeafe; border-radius:999px; padding:3px 11px; }
.camp-callout-ok .camp-callout-pos { color:#14532d; background:#bbf7d0; }
.camp-rank-avatar { width:22px; height:22px; border-radius:50%; color:#fff; font-size:9.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
/* align-items default (stretch): las cards de una misma fila quedan con el MISMO alto. */
.camp-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(430px, 1fr)); gap:14px; margin-bottom:14px; }
.camp-grid .camp-card { margin-bottom:0; display:flex; flex-direction:column; }
.camp-grid .camp-card .camp-rank, .camp-grid .camp-card .camp-rank-pos { margin-top:auto; padding-top:12px; }
/* Campañas embebidas en el dashboard: más compactas que en la vista de gestión —
   sin la descripción, header al alto natural (el grid iguala las alturas) y menos aire
   vertical (paddings, número de progreso y márgenes achicados). */
/* Home: la sección se resalta como una "franja premiada" — panel ámbar suave con borde
   cálido que la despega de la grilla de KPIs de abajo. Las cards de adentro no cambian. */
#dash-campanas { margin-bottom:14px; background:linear-gradient(180deg,#fffbeb,#fff7ed); border:1.5px solid #fcd34d; border-radius:16px; padding:14px 16px 16px; }
.dash-camp-hdr { display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.dash-camp-ico { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; background:#f59e0b; font-size:16px; line-height:1; flex-shrink:0; }
.dash-camp-t { font-size:16px; font-weight:600; color:#78350f; }
.dash-camp-count { margin-left:auto; font-size:11.5px; font-weight:600; color:#b45309; background:#fef3c7; padding:3px 10px; border-radius:999px; white-space:nowrap; }
#dash-campanas .camp-grid { margin-bottom:0; }   /* evita el doble margen bajo las cards */
/* Chips uniformes en el Home (la info es el TEXTO; el arcoíris por ramo queda para la vista
   de gestión) y el badge de días en la familia ámbar del panel, no azul. */
#dash-campanas .camp-chip { background:#f8fafc; border:1px solid #e2e8f0; color:#475569; font-weight:500; }
#dash-campanas .camp-chip-cia { background:#fff; color:#334155; font-weight:600; }
#dash-campanas .camp-badge-dias { background:#fef3c7; color:#92400e; }
#dash-campanas .camp-desc { display:none; }
#dash-campanas .camp-head-left { height:auto; }
#dash-campanas .camp-card { padding:12px 16px; }
#dash-campanas .camp-card-v2 { padding-top:14px; }
#dash-campanas .camp-prog-head { margin-top:4px; }
#dash-campanas .camp-prog-num { font-size:22px; margin-top:2px; }
#dash-campanas .camp-bar-xl { height:11px; margin:6px 0 4px; }
#dash-campanas .camp-bar-xl .camp-bar-hito { width:17px; height:17px; font-size:11px; }
#dash-campanas .camp-bar-labels { height:13px; margin-bottom:8px; }
#dash-campanas .camp-bar-labels:empty { height:0; margin:0; }   /* meta-fija: sin escalones → sin hueco */
/* Compacta: las etiquetas salen del flujo (capa bajo la barra) y la fila reserva su alto abajo. */
#dash-campanas .camp-card-compacta .camp-bar-labels { position:absolute; left:0; right:0; top:100%; height:13px; margin:1px 0 0; }
#dash-campanas .camp-card-compacta .camp-bar-labels:empty { height:0; }   /* meta-fija: sin caja fantasma */
#dash-campanas .camp-card-compacta .camp-prog-row:has(.camp-bar-labels:not(:empty)) { padding-bottom:16px; }
/* En la fila compacta el número va AL LADO de la barra, no encima: los margin-top del layout
   grande (que lo separaban de la barra de arriba) lo hundían respecto de la barra y la píldora.
   Con margin simétrica en la barra, número/barra/premio quedan sobre la misma línea. */
#dash-campanas .camp-card-compacta .camp-prog-head,
#dash-campanas .camp-card-compacta .camp-prog-num { margin-top:0; }
#dash-campanas .camp-card-compacta .camp-bar-xl { margin:5px 0; }
#dash-campanas .camp-callout { min-height:0; margin-top:8px; padding:7px 12px; font-size:13px; }
/* El callout (caja azul) va SIEMPRE pegado abajo cuando es el último elemento (ranking
   oculto/anónimo): el grid iguala la altura de las cards y margin-top:auto lo empuja al
   fondo → queda alineado entre una card con etiquetas de escalones y otra sin ellas. */
#dash-campanas .camp-callout:last-child { margin-top:auto; }

/* --- Card COMPACTA del dashboard (CAMP_DASH_COMPACTA en js/campanas.js) ---------------
   Mismo contenido que la card grande, ~22% menos alto: título arriba con los días al lado,
   compañía + ramos en UNA fila de chips, y el número/barra/premio fusionados en una fila
   (el 🏆 es la META al final de la barra). Volver al formato anterior = flag en false. */
.camp-card-compacta .camp-card-head { margin-bottom:6px; align-items:flex-start; }
.camp-card-compacta .camp-titulo-xl { margin-top:0; }
.camp-card-compacta .camp-chips-1f { margin-top:5px; }
.camp-card-compacta .camp-prog-row { display:flex; align-items:center; gap:11px; margin-top:7px; }
/* Las etiquetas de escalón (2, 4 · 5, 10) cuelgan como CAPA ABSOLUTA bajo la barra en vez de
   apilarse dentro del barwrap: así la fila centra el número y la píldora del premio contra la
   BARRA (su ancla visual) y no contra barra+etiquetas, que los hundía ~10px. El padding-bottom
   reserva el hueco de las etiquetas para que el callout no las pise (solo cuando hay escalones). */
.camp-card-compacta .camp-prog-barwrap { flex:1; min-width:0; position:relative; }
.camp-card-compacta .camp-prog-head { margin:0; }
.camp-card-compacta .camp-prog-num { font-size:19px; margin:0; white-space:nowrap; }
.camp-card-compacta .camp-bar-xl { height:10px; margin:0; }
.camp-card-compacta .camp-bar-xl .camp-bar-hito { width:16px; height:16px; font-size:10px; }
.camp-card-compacta .camp-bar-labels { height:12px; margin:1px 0 0; }
.camp-card-compacta .camp-bar-labels:empty { height:0; }
.camp-card-compacta .camp-callout { margin-top:7px; padding:6px 11px; font-size:13px; flex-wrap:wrap; }
/* basis 0 (no auto): con flex-wrap el corte de línea se decide con el flex-basis ANTES de
   encoger, así que con `auto` (= max-content) el texto se iba solo a la 2ª línea y dejaba
   al emoji huérfano arriba. Con 0 siempre acompaña al ícono y crece al espacio libre. */
.camp-card-compacta .camp-callout-txt { flex:1 1 0; min-width:0; }
.camp-premio-pill { flex-shrink:0; white-space:nowrap; font-size:14px; font-weight:700; color:#92400e; background:linear-gradient(135deg,#fffbeb,#fef3c7); border:1px solid #fde68a; border-radius:999px; padding:4px 11px; }
/* Renglón PROPIO, alineada a la derecha — en las dos cards (compacta y completa) y en todos los
   anchos. Al costado le comía ancho a la frase del callout, que es lo que el PAS lee: con el
   desglose ("8 nuevas · 6 anulaciones · 2 netas") la partía en dos incluso en el Home de 2
   campañas. `flex-basis:100%` la baja sola porque el callout es `flex-wrap:wrap`. */
/* Desglose del avance ("5 nuevas · 2 anulaciones · 3 netas"): SEGUNDA LÍNEA del callout, en
   chico, debajo de la frase. Al costado no entra (medido a 1000px: la frase sola se come el
   ancho del callout, y hasta un texto de 33px la parte en dos) y pegado al número le comía la
   barra. `display:block` dentro de .camp-callout-txt es lo que lo baja de renglón. */
/* La frase en su propio span: el bloque de texto ahora tiene DOS hijos y medir el contenedor
   mezclaría los dos renglones. Es además el ancla del pin que exige que la frase no se parta. */
.camp-callout-frase { display:block; }
.camp-callout-sub { display:block; margin-top:2px; font-size:10.5px; font-weight:400; color:#7b8ba6; }
.camp-callout-ok .camp-callout-sub { color:#4d7c63; }
.camp-chip-logo { width:15px; height:15px; object-fit:contain; border-radius:3px; vertical-align:-3px; margin-right:5px; }
.camp-chip-cia { display:inline-flex; align-items:center; }
.camp-chip-ramo { background:#f1f5f9; color:#475569; }
.camp-chip-ramo-auto { background:#dbeafe; color:var(--c-primary-strong); }
.camp-chip-ramo-hogar { background:#dcfce7; color:#166534; }
.camp-chip-ramo-comercio { background:#fee2e2; color:#991b1b; }
.camp-chip-ramo-consorcio { background:#fef3c7; color:#92400e; }

/* Tira de compañías del dashboard. Va JUSTO ABAJO de #dash-campanas (decisión de Martín,
   17-jul): las dos franjas juntas se leen como "lo que la organización te ofrece", y los KPIs
   quedan enteros abajo sin nada intercalado.
   Destacada como campañas pero en AZUL (decisión de Martín, 17-jul): con su propio título y otro
   color se lee como sección hermana, no como dos carteles compitiendo. El azul es la familia del
   sidebar y los KPIs → la tira es parte del tablero; el ÁMBAR queda como el único color de
   "oportunidad/urgencia" (campañas), que es lo que tiene que saltar.
   Oculta en mobile: desde el celular se muestra lo mínimo (decisión de Martín, 17-jul). */

/* ── Campañas: tablero de SEGUIMIENTO por ejecutivo (spec 2026-08-22) ── */
.camp-con-seg { display:flex; flex-direction:column; gap:6px; }
.camp-con-seg .camp-btn-seg { align-self:flex-end; }
.camp-seg-toolbar { margin-bottom:12px; }
.camp-seg-dias { margin-left:auto; font-size:12.5px; }
.camp-seg-titulo { font-weight:600; font-size:14px; color:#0f172a; padding:0 6px; }
.camp-seg-kpis .camp-kpi { flex:1 1 0; padding:8px 12px; }
.camp-seg-kpis .camp-kpi-num { font-size:20px; }
.camp-seg-wrap { border-radius:var(--r-md); overflow-x:auto; }
table.camp-seg-tabla td { padding:7px 14px; white-space:nowrap; height:44px; }
table.camp-seg-tabla th { padding:9px 14px; }
.camp-seg-td-nombre { overflow:hidden; text-overflow:ellipsis; }
.camp-seg-nombre { font-weight:600; color:#0f172a; }
.camp-seg-sub { font-size:11.5px; color:#94a3b8; }
.camp-seg-av { display:flex; align-items:center; gap:6px; }
.camp-seg-av b { font-size:13.5px; color:#0f172a; min-width:14px; text-align:right; }
.camp-seg-av .camp-seg-bar { flex:1; }
.camp-seg-premio { min-width:64px; text-align:right; }
.camp-seg-bar { height:6px; background:#eef0f3; border-radius:3px; overflow:hidden; min-width:50px; }
.camp-seg-bar i { display:block; height:100%; background:var(--c-secondary); border-radius:3px; }
.camp-seg-bar i.camp-seg-ok { background:#16a34a; }
.camp-seg-bar i.camp-seg-warn { background:#f59e0b; }
.camp-seg-bar i.camp-seg-bad { background:#e5e7eb; }
.camp-seg-pill { display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.camp-seg-pill.camp-seg-ok { background:#dcfce7; color:#166534; }
.camp-seg-pill.camp-seg-warn { background:#fef3c7; color:#92400e; }
.camp-seg-pill.camp-seg-bad { background:#fee2e2; color:#991b1b; }
.camp-seg-ok-t { color:#15803d; }
.camp-seg-warn-t { color:#b45309; }
.camp-seg-bad-t { color:#b91c1c; }
/* Empujón por WhatsApp (🚩 bds #229). Verde de WhatsApp; apagado —pero NO deshabilitado— cuando
   el PAS no tiene celular en la ficha: al tocarlo se lo pide para ese mensaje. */
.camp-seg-td-push { text-align:right; }
/* ⚠ El rótulo NO entra en el ancho de la columna (salía cortado, "EM…"): queda sólo para lectores
   de pantalla. El ícono de WhatsApp se explica solo y cada botón lleva su propio title. En mobile
   ni se plantea: el thead entero va display:none y las filas se dibujan como fichas. */
.camp-seg-th-push { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.camp-seg-push { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:6px; border:1px solid #e2e8f0; color:#25d366; text-decoration:none; line-height:1; vertical-align:middle; }
.camp-seg-push:hover { background:#f0fdf4; border-color:#86efac; }
.camp-seg-push-off { color:#cbd5e1; border-style:dashed; }
.camp-seg-push-off:hover { background:#f8fafc; border-color:#cbd5e1; }
table.camp-seg-tabla tr.camp-seg-row-open td { background:#f8fafc; border-bottom-color:transparent; }
table.camp-seg-tabla tr.camp-seg-det td { background:#f8fafc; white-space:normal; padding:4px 14px 12px; }
.camp-seg-det-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.camp-seg-det-t { font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.camp-seg-lista { margin:0; padding-left:16px; font-size:12px; line-height:1.6; color:#334155; }
.camp-seg-det-anul { margin-top:10px; }
.camp-seg-lista-anul { color:#94a3b8; text-decoration:line-through; text-decoration-color:#cbd5e1; }
/* El "−N" que explica por qué el neto es menor que las altas (tooltip con el desglose). */
.camp-seg-anul { font-size:11.5px; font-weight:700; color:#dc2626; cursor:help; }
.camp-seg-curva { display:flex; align-items:flex-end; gap:5px; height:64px; }
.camp-seg-sem { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; font-size:10.5px; color:#64748b; }
.camp-seg-sem i { display:block; width:100%; background:var(--c-secondary); border-radius:2px 2px 0 0; min-height:2px; }
/* card del Home con el resumen del GRUPO (org/socio/ejecutivo) — opción B del mock (24-ago-2026):
   el semáforo es una BARRA DE DISTRIBUCIÓN proporcional + leyenda con puntos; el color vive en la
   barra y los puntos, el texto va neutro. El premio proyectado es un mini-stat del header. */
.camp-dist { display:flex; gap:2px; height:8px; border-radius:999px; overflow:hidden; background:#f1f5f9; margin:10px 0 8px; }
.camp-dist i { display:block; min-width:6px; }
.camp-dist-ok { background:#22c55e; }
.camp-dist-warn { background:#fbbf24; }
.camp-dist-bad { background:#f87171; }
.camp-sem { display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:#64748b; margin:0 0 2px; }
.camp-sem-item { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.camp-sem-item b { color:#0f172a; font-weight:600; }
.camp-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.camp-sem-stats { color:#64748b; }
.camp-sem-stats b { color:#0f172a; font-weight:600; }
.camp-proy { text-align:right; }
.camp-proy-monto { font-size:15px; font-weight:700; color:#92400e; white-space:nowrap; }
.camp-proy-lbl { font-size:10.5px; color:#b45309; }
.camp-sem-pie { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; margin-top:7px; }
.camp-mio { display:flex; align-items:center; gap:8px; border-top:1px dashed #e2e8f0; margin-top:8px; padding-top:8px; font-size:12.5px; }
.camp-mio b { font-size:15px; color:#0f172a; }
.camp-mio .camp-seg-bar { flex:1; }
.camp-premio-mini { font-weight:600; color:#b45309; white-space:nowrap; }
.camp-link { font-size:12px; color:var(--c-secondary); font-weight:500; white-space:nowrap; }
@media (max-width:720px){
  .camp-seg-kpis { flex-wrap:wrap; }
  .camp-seg-kpis .camp-kpi { flex:1 1 30%; }
  table.camp-seg-tabla { table-layout:auto; }
  table.camp-seg-tabla thead { display:none; }
  table.camp-seg-tabla tr.clickable { display:grid; grid-template-columns:1fr 1fr; gap:2px 10px; padding:8px 12px; border-bottom:1px solid #f1f5f9; }
  table.camp-seg-tabla tr.clickable td { border:0; padding:1px 0; white-space:normal; }
  table.camp-seg-tabla tr.clickable td:nth-child(1), table.camp-seg-tabla tr.clickable td:nth-child(2) { grid-column:1/-1; }
  table.camp-seg-tabla tr.camp-seg-det td { display:block; }
  .camp-seg-det-grid { grid-template-columns:1fr; }
}

/* ---------- builder v2: pasos + buscador de alcance + resumen vivo (25-ago-2026) ---------- */
.camp-b-top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.camp-b-pasos { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.camp-b-paso { font-size:12px; font-weight:600; padding:3px 11px; border-radius:999px; border:1px solid #dbeafe; background:#eff6ff; color:var(--c-primary-strong); cursor:pointer; }
.camp-b-paso:hover { background:#dbeafe; }
.camp-b-paso-on { background:var(--c-secondary); border-color:var(--c-secondary); color:#fff; }
.camp-b-paso-sep { color:#94a3b8; font-size:12px; }
.camp-b-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:14px; align-items:start; }
.camp-b-cols { display:flex; flex-direction:column; gap:10px; min-width:0; }
.camp-b-sec { border:1px solid #e2e8f0; border-radius:10px; background:#fff; padding:12px 14px; scroll-margin-top:70px; }
.camp-b-sec-t { font-size:13px; font-weight:700; color:#334155; margin-bottom:9px; display:flex; align-items:center; gap:7px; }
.camp-b-sec-n { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:#eff6ff; color:var(--c-primary-strong); font-size:11px; font-weight:700; }
.camp-b-buscar { display:flex; align-items:center; gap:7px; border:1px solid #cbd5e1; border-radius:8px; padding:6px 11px; background:#fff; font-size:13px; color:#64748b; }
.camp-b-buscar input { border:0; outline:0; flex:1 1 0; font-size:13px; background:transparent; padding:0; }
.camp-b-sugs { border:1px solid #e2e8f0; border-radius:8px; margin-top:4px; background:#fff; box-shadow:0 4px 14px rgba(15,23,42,.08); overflow:hidden; }
.camp-b-sug { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left; padding:7px 12px; border:0; background:#fff; font-size:13px; cursor:pointer; }
.camp-b-sug:hover { background:#f0f9ff; }
.camp-b-sug small { color:#94a3b8; font-size:11px; white-space:nowrap; }
.camp-b-sug-vacio { padding:7px 12px; font-size:12.5px; color:#94a3b8; }
.camp-b-eje { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:10px; }
.camp-b-eje-t { font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.4px; flex:0 0 90px; }
.camp-b-eje-chips { display:flex; gap:6px; flex-wrap:wrap; flex:1 1 0; min-width:0; }
.camp-b-eje-aviso { font-size:11.5px; color:#b45309; }
.camp-b-chip { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.camp-b-chip-todas { border:1px dashed #cbd5e1; background:#f8fafc; color:#64748b; cursor:pointer; }
.camp-b-chip-todas:hover { border-color:var(--c-secondary); color:var(--c-primary-strong); }
.camp-b-chip-todas.camp-b-chip-on { border-style:solid; border-color:#bfdbfe; background:#eff6ff; color:var(--c-primary-strong); }
.camp-b-chip-sel { background:#dbeafe; color:var(--c-primary-700); }
.camp-b-chip-x { border:0; background:transparent; color:inherit; font-size:11px; cursor:pointer; padding:0 0 0 2px; line-height:1; opacity:.7; }
.camp-b-chip-x:hover { opacity:1; }
.camp-b-pills { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.camp-b-pill { font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:8px; border:1px solid #cbd5e1; background:#fff; color:#475569; cursor:pointer; }
.camp-b-pill:hover { border-color:var(--c-secondary); }
.camp-b-pill-on { border:2px solid var(--c-secondary); color:var(--c-primary-strong); background:#eff6ff; padding:4px 11px; }
.camp-b-flag { margin-top:10px; background:#eff6ff; border:1px solid #dbeafe; border-radius:8px; padding:8px 11px; }
.camp-b-flag label { display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:var(--c-primary); cursor:pointer; }
.camp-b-flag input { margin-top:2px; }
.camp-b-res { position:sticky; top:12px; border:1px solid #e2e8f0; border-radius:10px; background:#fff; padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.camp-b-res-t { font-size:13px; font-weight:700; color:#334155; }
.camp-b-mini-card { border:1px solid #e2e8f0; border-radius:10px; padding:10px 12px; }
.camp-b-mini-t { font-size:13.5px; font-weight:700; color:#0f172a; margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.camp-b-mini-fila { display:flex; align-items:center; gap:8px; }
.camp-b-mini-fila .camp-bar { flex:1 1 0; height:7px; }
.camp-b-mini-n { font-size:19px; font-weight:800; color:#0f172a; }
.camp-b-mini-n small { font-size:12px; color:#94a3b8; font-weight:600; }
.camp-b-mini-nota { font-size:11.5px; color:#075985; margin-top:7px; }
.camp-b-mini-src { font-size:11px; color:#94a3b8; margin-top:6px; }
.camp-b-sim { margin:0; }
.camp-b-sim-t { font-weight:700; margin-bottom:4px; }
.camp-b-sim-linea { margin-top:3px; }
.camp-b-botones { flex-direction:column; }
.camp-b-botones button { width:100%; }
@media (max-width: 900px){
  .camp-b-grid { grid-template-columns:1fr; }
  .camp-b-res { position:static; }
  .camp-b-eje-t { flex-basis:100%; }
}