/* cx.css — estilos del módulo Customer Experience (portado de CEXMANAGER, scoped a #page-cx). */
/* ============================================================
   CX — Customer Experience · estilos scoped a #page-cx
   (tokens Atlas: --accent esmeralda, --surface, --radius…)
   ============================================================ */

/* —— barra de filtro global —— */
#page-cx .cx-dealer { display:inline-flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill); padding:5px 6px 5px 6px; }
#page-cx .cx-dealer__mark { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#0e1c17; color:#8ee6c0; font-family:var(--font-num); font-size:9.5px; font-weight:700; letter-spacing:.02em; }
#page-cx .cx-dealer__txt { line-height:1.15; padding-right:6px; }
#page-cx .cx-dealer__name { font-size:12.5px; font-weight:700; color:var(--text); }
#page-cx .cx-dealer__meta { font-size:10px; color:var(--text-3); font-family:var(--font-num); }

/* —— toolbar: tabs de sección + etiqueta de periodo —— */
#page-cx .cx-tools { display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; margin-bottom:var(--s-5); }
#page-cx .cx-fresh { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--text-2); background:var(--surface); border:1px solid var(--border); padding:7px 12px; border-radius:var(--radius-pill); }
#page-cx .cx-fresh::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--pos); box-shadow:0 0 0 3px var(--pos-bg); }
#page-cx .cx-fresh b { font-weight:600; color:var(--text); }
#page-cx .cx-periodtag { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--text-2); }
#page-cx .cx-periodtag b { font-family:var(--font-num); font-weight:500; color:var(--text); }
#page-cx .cx-periodtag::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-weak); }

/* control de tiempo (MTD/YTD + mes) */
#page-cx .cx-timefilter { display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; }
#page-cx .cx-timefilter__lbl { font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
#page-cx .cx-yearsel, #page-cx .cx-monthsel { padding-top:7px; padding-bottom:7px; font-size:12.5px; }
#page-cx .cx-yearsel { min-width:84px; }
#page-cx .cx-monthsel { min-width:130px; }

/* bastidor (VIN) en el detalle de encuestas */
#page-cx .cx-vin { letter-spacing:.03em; color:var(--text-2); font-size:11.5px; }
#page-cx .cx-reg { min-height:26px; display:inline-flex; align-items:center; gap:6px; border:1px solid color-mix(in srgb, var(--accent) 32%, var(--border)); background:var(--accent-weak); color:var(--accent-strong); border-radius:7px; padding:4px 8px; font-family:var(--font-num); font-size:11.5px; font-weight:700; cursor:pointer; white-space:nowrap; transition:background .14s, border-color .14s, transform .14s; }
#page-cx .cx-reg:hover { background:color-mix(in srgb, var(--accent-weak) 72%, #fff); border-color:var(--accent); transform:translateY(-1px); }
#page-cx .cx-reg span { font-size:9px; letter-spacing:.06em; color:var(--text-3); }
#page-cx .cx-reg b { color:var(--accent-strong); font-weight:800; }
#page-cx .cx-reg__more { min-width:18px; height:18px; display:inline-grid; place-items:center; border-radius:6px; background:var(--surface); color:var(--text-2); border:1px solid var(--border); font-size:10px; }
#page-cx .cx-reg--empty { cursor:default; border-color:var(--border); background:var(--surface-2); color:var(--text-3); transform:none; }
/* acciones de la cabecera del modal */
#page-cx .cx-modalactions { display:flex; align-items:center; gap:var(--s-3); }

/* acciones CEM (canal + detalle) */
#page-cx .cx-cemactions { display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; }
#page-cx .cx-detailbtn { white-space:nowrap; }

/* —— secciones (mostrar/ocultar) —— */
#page-cx .cx-section { display:none; }
#page-cx .cx-section.is-active { display:block; animation:cxIn .22s var(--ease-out); }
@keyframes cxIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

#page-cx .cx-secphead { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; margin-bottom:var(--s-4); }
#page-cx .cx-secphead h2 { font-size:17px; font-weight:800; letter-spacing:-.01em; }
#page-cx .cx-secphead p { font-size:12.5px; color:var(--text-3); margin-top:3px; max-width:70ch; }
#page-cx .cx-note { font-size:11.5px; color:var(--text-3); line-height:1.5; margin-bottom:var(--s-4); display:flex; gap:7px; }
#page-cx .cx-note::before { content:"ⓘ"; color:var(--text-3); flex-shrink:0; }
#page-cx .cx-note b { color:var(--text-2); font-weight:600; }

/* ============ CEM ============ */
#page-cx .cx-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4); }
@media (max-width:1080px){ #page-cx .cx-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ #page-cx .cx-grid{ grid-template-columns:1fr; } }

#page-cx .cx-card { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:var(--kpi-pad); display:flex; flex-direction:column; gap:15px; }
#page-cx .cx-card.is-ok   { border-left:3px solid var(--accent); }
#page-cx .cx-card.is-warn { border-left:3px solid var(--warn); }
#page-cx .cx-card.is-bad  { border-left:3px solid var(--neg); }
#page-cx .cx-card__top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
#page-cx .cx-card__id { min-width:0; }
#page-cx .cx-card__q { font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-strong); font-family:var(--font-num); }
#page-cx .cx-card__t { display:block; font-size:14px; font-weight:700; color:var(--text); margin-top:3px; letter-spacing:-.01em; }
#page-cx .cx-card__badge { font-size:9.5px; font-weight:700; letter-spacing:.03em; padding:3px 9px; border-radius:var(--radius-pill); white-space:nowrap; flex-shrink:0; }
#page-cx .cx-card__badge--ok   { color:var(--pos); background:var(--pos-bg); }
#page-cx .cx-card__badge--warn { color:var(--warn); background:var(--warn-bg); }
#page-cx .cx-card__badge--bad  { color:var(--neg); background:var(--neg-bg); }
#page-cx .cx-card__chip { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-size:14px; background:var(--accent-weak); color:var(--accent-strong); flex-shrink:0; }
#page-cx .cx-card__chip--mut { background:var(--surface-3); color:var(--text-3); }

#page-cx .cx-card__metrics { display:flex; align-items:flex-end; gap:var(--s-5); }
#page-cx .cx-metric { display:flex; flex-direction:column; gap:4px; }
#page-cx .cx-metric__v { font-family:var(--font-num); font-size:20px; font-weight:600; color:var(--text-2); line-height:1; letter-spacing:-.01em; }
#page-cx .cx-metric__v small { font-size:11px; color:var(--text-3); font-weight:500; }
#page-cx .cx-metric--primary .cx-metric__v { font-size:32px; color:var(--text); }
#page-cx .cx-metric--primary .cx-metric__v small { font-size:15px; }
#page-cx .cx-metric__k { font-size:10px; color:var(--text-3); font-weight:600; letter-spacing:.02em; }

#page-cx .cx-gauge { display:flex; flex-direction:column; gap:6px; }
#page-cx .cx-gauge__track { position:relative; height:7px; background:var(--surface-2); border-radius:6px; }
#page-cx .cx-gauge__fill { position:absolute; inset:0 auto 0 0; border-radius:6px; transition:width .5s var(--ease); }
#page-cx .cx-gauge__fill.is-ok { background:var(--accent); }
#page-cx .cx-gauge__fill.is-warn { background:var(--warn); }
#page-cx .cx-gauge__fill.is-bad { background:var(--neg); }
#page-cx .cx-gauge__target { position:absolute; top:-3px; bottom:-3px; right:0; width:2px; background:var(--text-2); border-radius:2px; }
#page-cx .cx-gauge__legend { display:flex; align-items:center; justify-content:space-between; font-size:10.5px; color:var(--text-3); font-family:var(--font-num); }
#page-cx .cx-gap.pos { color:var(--pos); font-weight:600; }
#page-cx .cx-gap.neg { color:var(--neg); font-weight:600; }

#page-cx .cx-card__foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:12px; border-top:1px solid var(--row-border); }
#page-cx .cx-card__delta-lbl { font-size:10.5px; color:var(--text-3); }
#page-cx .cx-card__deltas { display:flex; gap:6px; }

/* card de pregunta clicable → abre modal de detalle */
#page-cx .cx-card--q { cursor:pointer; transition:border-color .14s, box-shadow .14s, transform .14s; }
#page-cx .cx-card--q:hover { box-shadow:var(--shadow-pop); transform:translateY(-2px); }
#page-cx .cx-card--q::after { content:"⊞ detalle"; position:absolute; top:12px; right:14px; font-size:9.5px; font-weight:700; letter-spacing:.03em; color:var(--text-3); opacity:0; transition:opacity .14s; }
#page-cx .cx-card--q:hover::after { opacity:1; }

/* nota individual en el modal de detalle */
#page-cx .cx-nota { display:inline-grid; place-items:center; min-width:26px; height:22px; padding:0 6px; border-radius:6px; font-family:var(--font-num); font-weight:600; font-size:12px; background:var(--surface-2); color:var(--text-2); }
#page-cx .cx-nota.is-top { background:var(--pos-bg); color:var(--pos); }
#page-cx #surveyModalTable th, #page-cx #surveyModalTable td { white-space:nowrap; }
#page-cx #surveyModalTable td.cx-c { text-align:center; }
#page-cx #surveyModalTable th.cx-c { text-align:center; }

/* card N encuestas */
#page-cx .cx-card--n .cx-n__v { font-family:var(--font-num); font-size:32px; font-weight:600; color:var(--text); line-height:1; display:flex; align-items:baseline; gap:8px; }
#page-cx .cx-card--n .cx-n__v small { font-size:12px; color:var(--text-3); font-weight:500; }
#page-cx .cx-n__grid { display:flex; gap:var(--s-5); }
#page-cx .cx-n__grid > div { display:flex; flex-direction:column; gap:2px; }
#page-cx .cx-n__grid b { font-family:var(--font-num); font-size:15px; font-weight:600; color:var(--text); }
#page-cx .cx-n__grid span { font-size:10px; color:var(--text-3); font-weight:600; }
#page-cx .cx-n__bar { height:7px; border-radius:6px; background:var(--surface-2); overflow:hidden; margin-top:auto; }
#page-cx .cx-n__bar div { height:100%; background:var(--accent); border-radius:6px; }

/* card Mystery pendiente */
#page-cx .cx-card--pending { background:var(--surface-2); border-style:dashed; border-color:var(--border-strong); border-left:1px dashed var(--border-strong); box-shadow:none; }
#page-cx .cx-pend { display:flex; flex-direction:column; gap:9px; }
#page-cx .cx-pend__tag { align-self:flex-start; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); border:1px dashed var(--border-strong); border-radius:var(--radius-pill); padding:5px 11px; }
#page-cx .cx-pend__note { font-size:11.5px; color:var(--text-3); line-height:1.5; }
#page-cx .cx-pend__src { font-size:10px; color:var(--text-3); font-family:var(--font-num); }

/* ============ KPI genérico (RGPD / Conectividad) ============ */
#page-cx .cx-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4); margin-bottom:var(--s-5); }
@media (max-width:1080px){ #page-cx .cx-kpis{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ #page-cx .cx-kpis{ grid-template-columns:1fr; } }
#page-cx .cx-kpis--3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:1080px){ #page-cx .cx-kpis--3{ grid-template-columns:1fr; } }

#page-cx .cx-kpi { gap:11px; }
#page-cx .cx-kpi .kpi__top { align-items:center; }
#page-cx .cx-kpi__ico { width:26px; height:26px; border-radius:7px; display:grid; place-items:center; font-size:13px; background:var(--accent-weak); color:var(--accent-strong); flex-shrink:0; }
#page-cx .cx-kpi__foot { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#page-cx .cx-kpi__pct { font-size:11px; color:var(--text-3); }
#page-cx .cx-ext { margin-left:auto; width:18px; height:18px; border-radius:6px; display:grid; place-items:center; font-size:13px; font-weight:700; color:var(--text-3); background:var(--surface-2); border:1px dashed var(--border-strong); cursor:help; }
/* Pilltabs (VN/VO/PV, Todos…) — componente del CEXMANAGER no portado; scoped a #page-cx. */
#page-cx .pilltabs { display:flex; gap:6px; flex-wrap:wrap; }
#page-cx .pilltab { border:1px solid var(--border); background:var(--surface); color:var(--text-2); font-size:13px; font-weight:600; padding:8px 15px; border-radius:var(--radius-pill); transition:all .14s; cursor:pointer; }
#page-cx .pilltab:hover { color:var(--text); }
#page-cx .pilltab.is-active { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:var(--shadow-accent,0 4px 12px rgba(15,155,108,.3)); }
#page-cx .cx-splitbar { height:7px; border-radius:6px; background:var(--surface-2); overflow:hidden; }
#page-cx .cx-splitbar__fill { height:100%; background:var(--accent); border-radius:6px; transition:width .5s var(--ease); }

/* ============ RGPD tabla ============ */
#page-cx .cx-toolsrow { display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; }
#page-cx .cx-search { position:relative; }
#page-cx .cx-search input { width:230px; max-width:52vw; font-family:inherit; font-size:12.5px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:7px 11px 7px 30px; }
#page-cx .cx-search input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak); }
#page-cx .cx-search::before { content:"⌕"; position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:14px; }
#page-cx .cx-statussel { min-width:150px; max-width:220px; }
#page-cx .cx-td-bool, #page-cx .cx-th-bool { text-align:center !important; }
#page-cx .cx-bool { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:6px; font-size:11px; font-weight:700; }
#page-cx .cx-bool--yes { color:var(--pos); background:var(--pos-bg); }
#page-cx .cx-bool--no { color:var(--neg); background:var(--neg-bg); }
#page-cx .cx-bool--unk { color:var(--text-3); background:var(--surface-2); }
#page-cx .cx-empty { text-align:center !important; color:var(--text-3); padding:var(--s-6) !important; font-style:italic; }
#page-cx .ledger tbody td.num { color:var(--text-3); }
#page-cx .cx-answer { display:inline-flex; align-items:center; min-height:22px; max-width:260px; padding:3px 8px; border-radius:var(--radius-sm); background:var(--surface-2); color:var(--text-2); font-size:11.5px; font-weight:600; white-space:normal; line-height:1.25; text-align:left; }
#page-cx .cx-rowbtn { border:1px solid var(--border); background:var(--surface); color:var(--text-2); min-width:34px; height:26px; padding:0 8px; border-radius:var(--radius-sm); font-size:11.5px; font-weight:700; cursor:pointer; }
#page-cx .cx-rowbtn:hover { background:var(--hover); color:var(--text); border-color:var(--accent); }

/* ============ CONECTIVIDAD matrices ============ */
#page-cx .cx-matrices { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
@media (max-width:900px){ #page-cx .cx-matrices{ grid-template-columns:1fr; } }
#page-cx .cx-mx { display:grid; grid-template-columns:70px 1fr 1fr; gap:8px; }
#page-cx .cx-mx__corner { display:flex; flex-direction:column; justify-content:space-between; font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-3); padding:4px; }
#page-cx .cx-mx__col { display:grid; place-items:center; font-size:11px; font-weight:700; color:var(--text-2); padding-bottom:2px; }
#page-cx .cx-mx__row { display:grid; place-items:center; font-size:11px; font-weight:700; color:var(--text-2); text-align:center; line-height:1.2; }
#page-cx .cx-mx__cell { border-radius:var(--radius-sm); padding:14px 12px; display:flex; flex-direction:column; gap:3px; min-height:92px; justify-content:center; border:1px solid var(--border); }
#page-cx .cx-mx__cell.is-ok   { background:color-mix(in srgb, var(--accent) calc(var(--i) * 42%), var(--surface)); border-color:color-mix(in srgb, var(--accent) 22%, var(--border)); }
#page-cx .cx-mx__cell.is-warn { background:color-mix(in srgb, var(--warn) calc(var(--i) * 36%), var(--surface)); border-color:color-mix(in srgb, var(--warn) 20%, var(--border)); }
#page-cx .cx-mx__cell.is-bad  { background:color-mix(in srgb, var(--neg) calc(var(--i) * 34%), var(--surface)); border-color:color-mix(in srgb, var(--neg) 20%, var(--border)); }
#page-cx .cx-mx__v { font-family:var(--font-num); font-size:24px; font-weight:600; color:var(--text); line-height:1; }
#page-cx .cx-mx__p { font-family:var(--font-num); font-size:12px; font-weight:600; color:var(--text-2); }
#page-cx .cx-mx__lbl { font-size:10px; color:var(--text-2); font-weight:600; margin-top:2px; }

/* ============================================================
   Componentes base del CEXMANAGER (kpi/tablas/modal/select/seg/chip…) portados y
   scopeados a #page-cx — AVISA los define por-página pero no para #page-cx. Tokens Atlas compartidos.
   ============================================================ */
#page-cx .ledger .num, #page-cx .kpi__val { font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1; }
#page-cx .field { display: flex; flex-direction: column; gap: 2px; }
#page-cx .field__lbl { font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
#page-cx .select { appearance: none; border: 1px solid var(--border); background: var(--surface) var(--select-arrow) no-repeat right 9px center;
  color: var(--text); font-family: inherit; font-size: 13px; font-weight: 500;
  padding: 6px 28px 6px 11px; border-radius: var(--radius-sm); min-width: 132px; }
#page-cx .select:focus { outline: 2px solid var(--accent-weak); border-color: var(--accent); }
#page-cx .seg { display: flex; gap: 2px; padding: 3px; background: var(--emp-track); border: var(--emp-track-border); border-radius: var(--emp-radius); }
#page-cx .seg__btn { border: 0; background: transparent; color: var(--text-2); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: var(--emp-btn-radius); transition: all .15s; }
#page-cx .seg__btn:hover { color: var(--text); }
#page-cx .seg__btn.is-active { background: var(--emp-active-bg); color: var(--emp-active-fg); box-shadow: var(--emp-active-shadow); }
#page-cx .kpi { position: relative; background: var(--surface); border: var(--card-border);
  border-radius: var(--radius); padding: var(--kpi-pad); box-shadow: var(--shadow-card);
  overflow: hidden; display: flex; flex-direction: column; gap: var(--kpi-inner-gap); }
#page-cx .kpi__top { display: flex; align-items: center; gap: 8px; }
#page-cx .kpi__chip { width: 24px; height: 24px; border-radius: var(--radius-sm); display: none; place-items: center; font-size: 12px; flex-shrink: 0; }
#page-cx .kpi__label { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
#page-cx .kpi__val { font-size: var(--kpi-val-fs); font-weight: var(--kpi-val-fw); letter-spacing: -.01em; color: var(--text); line-height: 1; white-space: nowrap; }
#page-cx .kpi__sub { font-size: 11.5px; color: var(--text-3); }
#page-cx .kpi__delta { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-num); font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: var(--radius-pill); width: fit-content; }
#page-cx .kpi__delta.is-pos { color: var(--pos); background: var(--pos-bg); }
#page-cx .kpi__delta.is-neg { color: var(--neg); background: var(--neg-bg); }
#page-cx .kpi__delta.is-neu { color: var(--text-2); background: var(--hover); }
#page-cx .kpi__bar { position: absolute; top: 0; left: 0; right: 0; height: var(--kpi-bar-h); background: var(--kpi-accent, var(--accent)); }
#page-cx .tablecard { background: var(--surface); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
#page-cx .tablecard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
#page-cx .tablecard__title { min-width: 0; flex: 1 1 280px; }
#page-cx .tablecard__title h2 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-cx .tablecard__meta { display: block; font-size: 11.5px; color: var(--text-3); }
#page-cx .tablecard__tools { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
#page-cx .ghostbtn { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 11.5px; font-weight: 600; padding: 6px 11px; border-radius: var(--radius-sm); transition: all .14s; }
#page-cx .ghostbtn:hover { background: var(--hover); color: var(--text); border-color: var(--border-strong); }
#page-cx .tablewrap { overflow-x: auto; }
#page-cx .ledger { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
#page-cx .ledger thead th { position: sticky; top: 0; z-index: 2;
  background: var(--thead-bg); color: var(--text-3);
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  text-align: right; padding: var(--cell-py) var(--cell-px); white-space: nowrap;
  border-bottom: 1px solid var(--border-strong); }
#page-cx .ledger thead th.col-concept { text-align: left; }
#page-cx .ledger thead th.col-act { width: 38px; }
#page-cx .ledger tbody td { padding: var(--cell-py) var(--cell-px); text-align: right; white-space: nowrap; border-bottom: 1px solid var(--row-border); }
#page-cx .ledger tbody td.col-concept { text-align: left; }
#page-cx .ledger .num { font-size: var(--fs-num); }
#page-cx .ledger tbody td.dev--pos { color: var(--pos); }
#page-cx .ledger tbody td.dev--neg { color: var(--neg); }
#page-cx .modal { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
#page-cx .modal.is-open { visibility: visible; }
#page-cx .modal__scrim { position: absolute; inset: 0; background: rgba(10,12,16,.5); opacity: 0; transition: opacity .2s; }
#page-cx .modal.is-open .modal__scrim { opacity: 1; }
#page-cx .modal__panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-46%); width: 760px; max-width: 94vw; max-height: 86vh; background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 24px 70px rgba(0,0,0,.34); display: flex; flex-direction: column; opacity: 0; transition: opacity .2s, transform .2s; }
#page-cx .modal.is-open .modal__panel { opacity: 1; transform: translate(-50%,-50%); }
#page-cx .modal__head { display: flex; align-items: flex-start; justify-content: space-between; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); }
#page-cx .modal__eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 3px; }
#page-cx .modal__head h3 { font-size: 17px; font-weight: 700; }
#page-cx .modal__close { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); width: 32px; height: 32px; border-radius: var(--radius-sm); font-size: 13px; }
/* Sangría del cuerpo del modal: el canon (.modal__body de anomalias.css) va a padding 0 y el
   contenido queda pegado a los bordes del panel. Mismo ritmo que .modal__head (--s-4/--s-5). */
#page-cx .modal__body { padding: var(--s-4) var(--s-5) var(--s-5); overflow-y: auto; }
#page-cx .apuntes { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#page-cx .apuntes th { text-align: right; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); padding: 10px var(--s-4); border-bottom: 1px solid var(--border-strong); background: var(--thead-bg); position: sticky; top: 0; }
#page-cx .apuntes th:first-child, #page-cx .apuntes td:first-child { text-align: left; }
#page-cx .apuntes td { padding: 9px var(--s-4); text-align: right; border-bottom: 1px solid var(--row-border); }
#page-cx .apuntes td.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
#page-cx .apuntes tr:hover td { background: var(--row-hover); }
#page-cx .apuntes tfoot td { font-weight: 700; border-top: 2px solid var(--border-strong); background: var(--row-total-bg); }
#page-cx .header__controls .field { display: none; }
#page-cx .ledger thead th.col-pct, #page-cx .ledger tbody td.col-pct { display: none; }
#page-cx .badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; letter-spacing:.02em; padding:4px 10px; border-radius:var(--radius-pill); white-space:nowrap; }
#page-cx .badge--pos { color:var(--pos); background:var(--pos-bg); }
#page-cx .badge--neg { color:var(--neg); background:var(--neg-bg); }
#page-cx .badge--warn { color:var(--warn); background:var(--warn-bg); }
#page-cx .badge--info { color:#2563c9; background:#e8eefb; }
#page-cx .badge--neu { color:var(--text-2); background:var(--surface-2); }
#page-cx .chip { font-size:11px; font-weight:600; color:var(--text-2); background:var(--surface-2); border:1px solid var(--border); padding:3px 9px; border-radius:var(--radius-pill); }
#page-cx .toaster { position:fixed; right:18px; bottom:18px; z-index:90; display:flex; flex-direction:column; gap:8px; }
#page-cx .toast { display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); box-shadow:var(--shadow-modal); border-radius:var(--radius); padding:11px 15px; font-size:13px; color:var(--text); min-width:220px; transform:translateY(8px); opacity:0; transition:all .25s var(--ease); }
#page-cx .toast.is-in { transform:translateY(0); opacity:1; }
#page-cx .toast__ico { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:11px; background:var(--accent-weak); color:var(--accent-strong); }

/* Detalle completo CEM */
#page-cx #cemDetailModal .modal__panel { width:1120px; }
#page-cx .cx-detailgrp { margin-bottom:var(--s-5); }
#page-cx .cx-detailgrp:last-child { margin-bottom:0; }
#page-cx .cx-detailgrp h4 { font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin-bottom:var(--s-3); }
#page-cx .cx-detailgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-3); }
#page-cx .cx-detailitem { border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); padding:10px 12px; display:grid; grid-template-columns:auto 1fr; gap:4px 9px; align-items:start; }
#page-cx .cx-detailitem__id { grid-row:1 / span 2; min-width:54px; font-family:var(--font-num); font-size:10.5px; font-weight:800; color:var(--accent-strong); padding-top:1px; }
#page-cx .cx-detailitem__label { min-width:0; color:var(--text-3); font-size:11.5px; line-height:1.3; }
#page-cx .cx-detailitem b { min-width:0; color:var(--text); font-size:13px; font-weight:650; line-height:1.35; overflow-wrap:anywhere; }
#page-cx .cx-detailitem.is-empty { background:var(--surface-2); border-style:dashed; }
#page-cx .cx-detailitem.is-empty b { color:var(--text-3); font-weight:600; }
#page-cx .cx-detailloading { color:var(--text-3); font-size:13px; padding:var(--s-6); text-align:center; }
@media (max-width:760px){
  #page-cx .cx-detailgrid { grid-template-columns:1fr; }
  #page-cx .cx-detailitem { grid-template-columns:1fr; }
  #page-cx .cx-detailitem__id { grid-row:auto; }
}

/* Paginación de la tabla RGPD (patrón matriculaciones), scoped a #page-cx. */
#page-cx .pager { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-3) var(--s-5); border-top:1px solid var(--border); flex-wrap:wrap; }
#page-cx .pager:empty { display:none; }
#page-cx .pager__info { font-size:12px; color:var(--text-3); font-family:var(--font-num); }
#page-cx .pager__ctrls { display:flex; gap:6px; align-items:center; }
#page-cx .pgbtn { border:1px solid var(--border); background:var(--surface); color:var(--text-2); font-size:12px; font-weight:600; min-width:32px; height:32px; padding:0 12px; border-radius:var(--radius-sm); font-family:var(--font-num); transition:all .12s; cursor:pointer; }
#page-cx .pgbtn:hover:not(:disabled) { background:var(--hover); color:var(--text); border-color:var(--border-strong); }
#page-cx .pgbtn:disabled { opacity:.4; cursor:not-allowed; }

/* Modales de DETALLE (tablas anchas de 8-9 columnas): panel más ancho + tabla densa para que quepan.
   min-width:0 en el body es CLAVE: sin él la tabla (flex child) estira/descoloca el panel en vez de
   hacer scroll. Mantienen max-width:94vw + max-height:86vh del panel base → responsive + scroll interno. */
#page-cx #surveyModal .modal__panel,
#page-cx #connModal .modal__panel { width: 1200px; }
#page-cx .modal__body { min-width: 0; overflow-x: auto; overflow-y: auto; }
#page-cx .modal__body .apuntes { font-size: 12px; }
#page-cx .modal__body .apuntes th, #page-cx .modal__body .apuntes td { padding: 8px 12px; }
#page-cx .modal__body .apuntes td.num, #page-cx .modal__body .apuntes .cx-vin { font-size: 11px; }