/* ════════════════════════════════════════════════════
   Rediseño visual (Fase 1) — docs/propuesta-fase1.md
   Se carga DESPUÉS de main.css.
   Reglas:
   · Tokens nuevos con prefijo --cx-*; los de main.css no cambian.
   · Componentes nuevos con prefijo .cx-*; no se reestilan
     .btn, .card, .badge, .kpi ni .form-input (eso es la Fase 3).
   · Selectores del marco con alcance: .sidebar, .topbar, .cx-bottomnav.
     Nada aquí debe alcanzar el contenido de #page-content salvo .cx-*.
   ════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────── */
:root {
  /* Marca */
  --cx-sidebar-bg:     #0c1f44;                 /* azul noche del mockup (fijo, P2) */
  --cx-sidebar-line:   rgba(255,255,255,.08);
  --cx-sidebar-text:   rgba(255,255,255,.74);
  --cx-sidebar-muted:  rgba(255,255,255,.42);   /* títulos de sección */
  --cx-sidebar-hover:  rgba(255,255,255,.07);
  --cx-accent:         var(--c2);               /* ítem activo; lo cambia Configuración */
  --cx-accent-text:    #ffffff;
  --cx-brand-green:    #22c55e;                 /* "ix" del logo */

  /* Superficies y texto */
  --cx-bg:       #f3f6fb;
  --cx-surface:  #ffffff;
  --cx-line:     #e6ebf2;
  --cx-text:     #0f172a;
  --cx-text-2:   #475569;
  --cx-text-3:   #94a3b8;

  /* Semánticos */
  --cx-pos:    #16a34a;  --cx-pos-bg:    #e9f8ef;
  --cx-neg:    #e11d48;  --cx-neg-bg:    #fdecef;
  --cx-warn:   #d97706;  --cx-warn-bg:   #fff4e0;
  --cx-info:   #2563eb;  --cx-info-bg:   #e8f0fe;
  --cx-violet: #6d5bd0;  --cx-violet-bg: #efedfb;

  /* Gráficas (Fase 2) */
  --cx-chart-ing: #16a34a;  --cx-chart-egr: #ef4444;
  --cx-chart-1: #2563eb;  --cx-chart-2: #ef4444;  --cx-chart-3: #f59e0b;
  --cx-chart-4: #10b981;  --cx-chart-5: #6d5bd0;  --cx-chart-otros: #94a3b8;

  /* Tipografía (DM Sans ya cargada) */
  --cx-fs-xs: 11px;  --cx-fs-sm: 12.5px;  --cx-fs-md: 14px;
  --cx-fs-lg: 16px;  --cx-fs-xl: 22px;    --cx-fs-kpi: 26px;
  --cx-fw-med: 500;  --cx-fw-semi: 600;   --cx-fw-bold: 700;
  --cx-label-spacing: .08em;

  /* Forma */
  --cx-radius-sm: 8px;  --cx-radius: 12px;  --cx-radius-lg: 16px;  --cx-radius-pill: 999px;
  --cx-shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 2px 6px rgba(16,24,40,.05);
  --cx-shadow-pop:  0 12px 32px rgba(16,24,40,.16);

  /* Espacio (escala de 4) */
  --cx-sp-1: 4px;  --cx-sp-2: 8px;  --cx-sp-3: 12px;
  --cx-sp-4: 16px; --cx-sp-5: 20px; --cx-sp-6: 24px;

  /* Layout */
  --cx-sidebar-w:   240px;
  --cx-topbar-h:    56px;
  --cx-bottomnav-h: 64px;
}

/* ── Ícono SVG genérico ─────────────────────────────── */
.cx-icon { display: block; flex-shrink: 0; }

/* ════════════════════════════════════════════════════
   Barra lateral (lote 1.3) — alcance .cx-sidebar
   main.css sigue controlando el cajón móvil (.mob-open, z 200).
   ════════════════════════════════════════════════════ */
.cx-sidebar {
  width: var(--cx-sidebar-w);
  background: var(--cx-sidebar-bg);
  box-shadow: none;
  overflow: hidden;                    /* el scroll va en .cx-sb-nav; el pie queda fijo */
}
.cx-sidebar .cx-sb-brand {
  padding: 22px 22px 18px; flex-shrink: 0;
}
.cx-sidebar .cx-sb-logo {
  font-size: 25px; font-weight: 800; line-height: 1; letter-spacing: -.5px;
}
.cx-sidebar .cx-sb-sub {
  margin-top: 6px; font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--cx-label-spacing); color: var(--cx-sidebar-muted);
}
.cx-sidebar .cx-sb-nav {
  flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px 12px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
}
.cx-sidebar .nav-section { padding: 0; }
.cx-sidebar .nav-label {
  padding: 18px 10px 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: var(--cx-label-spacing); color: var(--cx-sidebar-muted);
}
.cx-sidebar .nav-item {
  gap: 12px; padding: 9px 12px; margin-bottom: 2px;
  border-radius: 10px; font-size: 13.5px; font-weight: var(--cx-fw-med);
  color: var(--cx-sidebar-text); outline: none;
}
.cx-sidebar .nav-item:hover { background: var(--cx-sidebar-hover); color: #fff; }
.cx-sidebar .nav-item:focus-visible { box-shadow: 0 0 0 2px var(--cx-accent); }
.cx-sidebar .nav-item.active,
.cx-sidebar .nav-item--active {
  background: var(--cx-accent); color: var(--cx-accent-text); font-weight: var(--cx-fw-semi);
}
.cx-sidebar .nav-item.active::before,
.cx-sidebar .nav-item--active::before { display: none; }
.cx-sidebar .nav-icon { width: 20px; height: 20px; font-size: 0; display: flex; }
.cx-sidebar .nav-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pie: avatar, nombre, cuenta y salir */
.cx-sidebar .cx-sb-footer {
  margin-top: 0; flex-shrink: 0; gap: 10px; justify-content: flex-start;
  padding: 14px 14px 14px 18px; border-top: 1px solid var(--cx-sidebar-line);
}
.cx-sidebar .cx-sb-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--cx-pos); color: #fff; font-size: 15px; font-weight: 700;
}
.cx-sidebar .cx-sb-user { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cx-sidebar .cx-sb-user strong {
  color: #fff; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cx-sidebar .cx-sb-user span {
  color: var(--cx-sidebar-muted); font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cx-sidebar .cx-sb-footer .cx-sb-logout {
  width: 34px; height: 34px; padding: 0; flex-shrink: 0; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cx-sidebar-muted);
}
.cx-sidebar .cx-sb-footer .cx-sb-logout:hover { background: var(--cx-sidebar-hover); color: #fff; }

@media (max-width: 768px) {
  .cx-sidebar { width: min(var(--cx-sidebar-w), 86vw); }
}

/* ════════════════════════════════════════════════════
   Barra superior (lote 1.4) — alcance .topbar
   Alto: --cx-topbar-h (main.css lo usa en .topbar y en #modal-root).
   El chip de Borradores (#mm-chip-wrap) no se toca.
   ════════════════════════════════════════════════════ */
.main > .topbar {
  background: var(--cx-surface);
  border-bottom: 1px solid var(--cx-line);
  box-shadow: none;
  gap: 12px;
}
.topbar .topbar-left { min-width: 0; }
.topbar .cx-tb-titles { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.topbar .topbar-title {
  font-size: 17px; font-weight: var(--cx-fw-bold); color: var(--cx-text); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar .topbar-sub {
  font-size: var(--cx-fs-sm); color: var(--cx-text-2); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar .topbar-sub:empty { display: none; }
.topbar .topbar-actions { flex-shrink: 0; }
.topbar .mob-menu-btn {
  width: 40px; height: 40px; margin-left: -6px; border-radius: 10px;
  background: transparent; color: var(--cx-text);
}
.topbar .mob-menu-btn:hover { background: var(--gray-100); }

@media (max-width: 768px) {
  .main > .topbar { padding: 0 12px; }
  .topbar .topbar-title { font-size: 16px; }
}

/* ════════════════════════════════════════════════════
   Navegación inferior móvil (lote 1.5)
   Hijo flex de .main debajo de #page-content (no fixed), z 30:
   #modal-root (z 40, bottom: 0 de .main) la tapa cuando hay modal;
   #sidebar-overlay (z 199) la tapa con el menú abierto.
   ════════════════════════════════════════════════════ */
.cx-bottomnav { display: none; }

@media (max-width: 768px) {
  .cx-bottomnav {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch;
    flex-shrink: 0; position: relative; z-index: 30;
    height: calc(var(--cx-bottomnav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--cx-surface); border-top: 1px solid var(--cx-line);
    box-shadow: 0 -2px 10px rgba(16,24,40,.04);
  }
  .cx-bottomnav .cx-bn-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 44px; color: var(--cx-text-3);
    font-size: 10.5px; font-weight: var(--cx-fw-semi);
  }
  .cx-bottomnav .cx-bn-item.active { color: var(--cx-accent); }
  .cx-bottomnav .cx-bn-plus {
    align-self: start; justify-self: center; margin-top: -18px;
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--cx-accent); color: #fff;
    box-shadow: 0 0 0 4px var(--cx-surface), 0 6px 16px rgba(16,24,40,.22);
  }
  .cx-bottomnav .cx-bn-plus:active { transform: scale(.96); }
  .cx-bottomnav button:focus-visible { outline: 2px solid var(--cx-accent); outline-offset: 2px; }

  /* Teclado abierto en un campo de la página: la barra se oculta */
  .main:has(#page-content :is(input, select, textarea):focus) .cx-bottomnav { display: none; }

  /* El aviso (toast) sube por encima de la barra (solo dentro de la app, no en el login) */
  .main ~ .toast { bottom: calc(var(--cx-bottomnav-h) + 12px + env(safe-area-inset-bottom, 0px)); }
}

/* ════════════════════════════════════════════════════
   Componentes base .cx-* (lote 1.6)
   Los usa el Dashboard nuevo (Fase 2); ninguna vista actual.
   ════════════════════════════════════════════════════ */
.cx-num { font-variant-numeric: tabular-nums; }

/* Encabezado de página (título, subtítulo y acciones) */
.cx-page-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--cx-sp-3); margin-bottom: var(--cx-sp-5);
}
.cx-page-head__title { font-size: var(--cx-fs-xl); font-weight: var(--cx-fw-bold); color: var(--cx-text); line-height: 1.2; }
.cx-page-head__sub   { margin-top: 4px; font-size: 13px; color: var(--cx-text-2); }
.cx-page-head__actions { display: flex; flex-wrap: wrap; gap: var(--cx-sp-2); }

/* Tarjeta */
.cx-card {
  background: var(--cx-surface); border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius-lg); box-shadow: var(--cx-shadow-card);
  padding: var(--cx-sp-5); min-width: 0;
}
.cx-card__head   { display: flex; align-items: center; gap: 10px; margin-bottom: var(--cx-sp-4); min-width: 0; }
.cx-card__title  { font-size: 15px; font-weight: var(--cx-fw-bold); color: var(--cx-text); }
.cx-card__action { margin-left: auto; flex-shrink: 0; }
.cx-card__note   { font-size: var(--cx-fs-xs); color: var(--cx-text-3); }

/* Botón */
.cx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid transparent;
  font-size: 13px; font-weight: var(--cx-fw-semi); line-height: 1; white-space: nowrap;
  cursor: pointer; transition: background var(--transition), border-color var(--transition);
}
.cx-btn:disabled { opacity: .55; cursor: not-allowed; }
.cx-btn:focus-visible { outline: 2px solid var(--cx-accent); outline-offset: 2px; }
.cx-btn--primary { background: var(--cx-accent); color: #fff; }
.cx-btn--primary:hover { filter: brightness(1.06); }
.cx-btn--ghost { background: var(--cx-surface); color: var(--cx-text); border-color: var(--cx-line); }
.cx-btn--ghost:hover { background: var(--gray-50); border-color: var(--gray-300); }
.cx-btn--link { height: auto; padding: 2px 0; background: none; color: var(--cx-accent); }
.cx-btn--link:hover { text-decoration: underline; }
.cx-btn--sm { height: 32px; padding: 0 11px; font-size: 12.5px; }

/* Badge (pastilla) */
.cx-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px;
  border-radius: 7px; font-size: 11.5px; font-weight: var(--cx-fw-semi); white-space: nowrap;
  background: var(--gray-100); color: var(--cx-text-2);
}
.cx-badge--pos  { background: var(--cx-pos-bg);  color: var(--cx-pos); }
.cx-badge--neg  { background: var(--cx-neg-bg);  color: var(--cx-neg); }
.cx-badge--warn { background: var(--cx-warn-bg); color: var(--cx-warn); }
.cx-badge--info { background: var(--cx-info-bg); color: var(--cx-info); }

/* Mosaico de ícono */
.cx-icon-tile {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--cx-info-bg); color: var(--cx-info);
}
.cx-icon-tile--sm     { width: 34px; height: 34px; border-radius: 10px; }
.cx-icon-tile--pos    { background: var(--cx-pos-bg);    color: var(--cx-pos); }
.cx-icon-tile--neg    { background: var(--cx-neg-bg);    color: var(--cx-neg); }
.cx-icon-tile--warn   { background: var(--cx-warn-bg);   color: var(--cx-warn); }
.cx-icon-tile--violet { background: var(--cx-violet-bg); color: var(--cx-violet); }

/* KPI */
.cx-kpi { display: flex; gap: 14px; align-items: flex-start; }
.cx-kpi__body  { min-width: 0; flex: 1; container-type: inline-size; }
.cx-kpi__label { font-size: 13px; color: var(--cx-text-2); }
.cx-kpi__value {
  /* La cifra se ajusta al ancho de su tarjeta (de 18 a 26 px) en vez de cortarse */
  margin-top: 4px; font-size: clamp(18px, 14cqw, var(--cx-fs-kpi)); font-weight: var(--cx-fw-bold); line-height: 1.15;
  color: var(--cx-text); font-variant-numeric: tabular-nums; letter-spacing: -.3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cx-kpi__value--pos { color: var(--cx-pos); }
.cx-kpi__value--neg { color: var(--cx-neg); }
.cx-kpi__sub   { margin-top: 2px; font-size: 12.5px; color: var(--cx-text-3); }
.cx-kpi__foot  { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cx-trend      { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: var(--cx-fw-semi); color: var(--cx-text-2); }
.cx-trend--pos { color: var(--cx-pos); }
.cx-trend--neg { color: var(--cx-neg); }

/* Alerta */
.cx-alert {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-radius: var(--cx-radius); border: 1px solid rgba(225,29,72,.22);
  background: var(--cx-neg-bg);
}
.cx-alert__icon {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--cx-neg); color: #fff; font-weight: 800; font-size: 17px;
}
.cx-alert__body  { flex: 1; min-width: 0; }
.cx-alert__title { font-size: 15px; font-weight: var(--cx-fw-bold); color: var(--cx-neg); }
.cx-alert__text  { margin-top: 2px; font-size: 13px; color: var(--cx-text-2); }
.cx-alert__text strong { color: var(--cx-neg); }
.cx-alert__action { flex-shrink: 0; }
.cx-alert--warn { background: var(--cx-warn-bg); border-color: rgba(217,119,6,.25); }
.cx-alert--warn .cx-alert__icon { background: var(--cx-warn); }
.cx-alert--warn .cx-alert__title,
.cx-alert--warn .cx-alert__text strong { color: var(--cx-warn); }
.cx-alert--info { background: var(--cx-info-bg); border-color: rgba(37,99,235,.2); }
.cx-alert--info .cx-alert__icon { background: var(--cx-info); }
.cx-alert--info .cx-alert__title,
.cx-alert--info .cx-alert__text strong { color: var(--cx-info); }

@media (max-width: 640px) {
  .cx-card { padding: var(--cx-sp-4); border-radius: var(--cx-radius); }
  .cx-alert { align-items: flex-start; }
  .cx-alert__action { align-self: center; }
}

/* ════════════════════════════════════════════════════
   Gráficas SVG (lote 2.1) — charts.js
   ════════════════════════════════════════════════════ */
.cx-chart { display: block; max-width: 100%; overflow: visible; }
.cx-chart .cx-ch-eje { font-size: 11px; fill: var(--cx-text-3); font-family: var(--font); }
.cx-chart .cx-ch-centro { font-size: 17px; font-weight: 700; fill: var(--cx-text); font-family: var(--font); }
.cx-chart .cx-ch-centro-sub { font-size: 11px; fill: var(--cx-text-3); font-family: var(--font); }
.cx-chart .cx-ch-anillo { font-size: 17px; font-weight: 700; fill: var(--cx-text); font-family: var(--font); }
.cx-chart [data-cx-tip] { cursor: pointer; }
.cx-tip {
  position: fixed; z-index: 60; pointer-events: none; max-width: 260px;
  padding: 7px 10px; border-radius: 8px; background: var(--cx-text); color: #fff;
  font-size: 12px; font-weight: 500; line-height: 1.35; box-shadow: var(--cx-shadow-pop);
}
.cx-tip[hidden] { display: none; }

/* ════════════════════════════════════════════════════
   Dashboard nuevo (Fase 2) — views/dashboard-nuevo.js
   La rejilla se adapta al ancho del contenido (container queries),
   así responde igual con o sin barra lateral.
   ════════════════════════════════════════════════════ */
.cx-dash {
  margin: -22px; padding: 22px; min-height: calc(100% + 44px);
  background: var(--cx-bg); container-type: inline-size; container-name: cxdash;
}
.cx-neg-txt { color: var(--cx-neg) !important; }
.cx-pos-txt { color: var(--cx-pos) !important; }

/* Barra de controles: mes, corte actual, privacidad */
.cx-dash-bar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--cx-sp-2); margin-bottom: var(--cx-sp-4); }
.cx-dash-mes {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 12px;
  background: var(--cx-surface); border: 1px solid var(--cx-line); border-radius: 10px; color: var(--cx-text-2);
}
.cx-dash-mes select {
  height: 36px; border: 0; background: transparent; outline: none; cursor: pointer;
  font: 600 13px var(--font); color: var(--cx-text); padding-right: 4px;
}
.cx-dash-mes:focus-within { border-color: var(--cx-accent); box-shadow: 0 0 0 3px var(--cx-info-bg); }
.cx-dash-bar .cx-btn { color: var(--cx-text); }
.cx-dash-bar .cx-btn .cx-icon { color: var(--cx-text-2); }

/* Rejilla */
.cx-dash-grid { display: flex; flex-direction: column; gap: var(--cx-sp-4); }
.cx-dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cx-sp-4); }
.cx-dash-fila { display: grid; gap: var(--cx-sp-4); align-items: stretch; }
.cx-dash-fila--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.cx-dash-fila--3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cx-dash-fila:empty, .cx-dash-kpis:empty { display: none; }

@container cxdash (max-width: 1100px) {
  .cx-dash-fila--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-dash-fila--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container cxdash (max-width: 900px) {
  .cx-dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-dash-fila--7-5 { grid-template-columns: minmax(0, 1fr); }
}
@container cxdash (max-width: 640px) {
  .cx-dash-fila--3 { grid-template-columns: minmax(0, 1fr); }
  .cx-dash-kpis { gap: var(--cx-sp-3); }
}

/* Estados */
.cx-skel { background: linear-gradient(90deg, #e9edf4, #f1f4f9); border-radius: var(--cx-radius-lg); }
.cx-skel--kpi  { height: 132px; }
.cx-skel--card { height: 260px; }
.cx-dash-error { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cx-dash-error > div:nth-child(2) { flex: 1; min-width: 180px; }
.cx-dash-vacio { padding: 18px 4px; text-align: center; color: var(--cx-text-3); }
.cx-dash-vacio__txt { font-size: 13px; color: var(--cx-text-2); margin-top: 2px; }

@media (max-width: 768px) {
  .cx-dash { margin: -12px; padding: 12px; min-height: calc(100% + 24px); }
  .cx-dash-bar { justify-content: stretch; }
  .cx-dash-mes { flex: 1; min-width: 0; }
  .cx-dash-mes select { flex: 1; min-width: 0; }
  .cx-dash-bar .cx-dash-priv .cx-dash-bar__txt { display: none; }
}

/* KPIs del Dashboard (lote 2.4) */
.cx-dash-kpis .cx-kpi { min-height: 132px; }
.cx-kpi__check { display: block; margin-top: 2px; font-size: 11.5px; font-weight: var(--cx-fw-semi); }
.cx-kpi__foot { align-items: flex-end; flex-wrap: wrap; row-gap: 6px; }
.cx-kpi__tend { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cx-kpi__tend .cx-trend { white-space: nowrap; }
.cx-trend__vs { font-size: 11px; color: var(--cx-text-3); white-space: nowrap; }
.cx-kpi__spark { flex-shrink: 0; display: block; line-height: 0; margin-left: auto; }
@container cxdash (max-width: 640px) {
  .cx-dash-kpis .cx-kpi { flex-direction: column; align-items: stretch; gap: 10px; min-height: 0; padding: 14px; }
  .cx-dash-kpis .cx-kpi__body { width: 100%; }
  .cx-dash-kpis .cx-icon-tile { width: 36px; height: 36px; border-radius: 10px; }
  .cx-dash-kpis .cx-kpi__label { font-size: 12.5px; }
  .cx-dash-kpis .cx-kpi__sub { display: none; }
  .cx-dash-kpis .cx-kpi__foot { flex-wrap: wrap; margin-top: 6px; }
  .cx-dash-kpis .cx-trend { font-size: 11.5px; }
}

/* Tarjetas del Dashboard: cabecera y estados (lote 2.5) */
.cx-dash-c { display: flex; flex-direction: column; container-type: inline-size; }
.cx-dash-c__tit { min-width: 0; }
.cx-dash-c .cx-card__head .cx-card__note { margin-top: 1px; }
.cx-dash-vacio__tit { font-size: 14px; font-weight: var(--cx-fw-semi); color: var(--cx-text-2); }
.cx-dash-c .cx-dash-vacio { margin: auto 0; }

/* Patrimonio neto */
.cx-pat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cx-pat__col { padding: 0 16px; min-width: 0; }
.cx-pat__col:first-child { padding-left: 0; }
.cx-pat__col + .cx-pat__col { border-left: 1px solid var(--cx-line); }
.cx-pat__etq { font-size: 13px; color: var(--cx-text-2); }
.cx-pat__val {
  margin-top: 4px; font-size: clamp(17px, 2.4cqw, 24px); font-weight: var(--cx-fw-bold); letter-spacing: -.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-pat__sub { margin-top: 2px; font-size: 12px; color: var(--cx-text-3); }
.cx-pat__barra {
  display: flex; height: 12px; margin-top: 22px; border-radius: 999px; overflow: hidden; background: var(--cx-neg);
}
.cx-pat__a { background: var(--cx-pos); }
.cx-pat__p { flex: 1; }
.cx-pat__leyenda { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--cx-text-2); }
.cx-pat__leyenda strong { color: var(--cx-text); }

/* Liquidez y cobertura */
.cx-liq { display: flex; align-items: center; gap: 18px; }
.cx-liq__anillo { flex-shrink: 0; }
.cx-liq__tit { font-size: 15px; font-weight: var(--cx-fw-bold); color: var(--cx-text); margin-bottom: 4px; }
.cx-liq__datos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--cx-line);
}
.cx-liq__dato { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cx-liq__dato > div:last-child { min-width: 0; }
.cx-liq__etq { font-size: 12px; color: var(--cx-text-3); }
.cx-liq__val { font-size: 16px; font-weight: var(--cx-fw-bold); color: var(--cx-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@container cxdash (max-width: 640px) {
  .cx-pat__col { padding: 0 8px; }
  .cx-pat__val { font-size: 16px; }
  .cx-pat__sub { display: none; }
  .cx-liq { gap: 14px; }
  .cx-liq .cx-chart { width: 92px; height: 92px; }
}

/* Flujo mensual y gastos por categoría (lote 2.6) */
.cx-barras { width: 100%; min-height: 230px; }
.cx-leyenda { display: flex; justify-content: center; gap: 18px; margin-top: 6px; font-size: 12.5px; color: var(--cx-text-2); }
.cx-leyenda i, .cx-cat__lista i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; flex-shrink: 0; }
.cx-cat { display: flex; align-items: center; gap: 18px; }
.cx-cat__dona { flex-shrink: 0; }
.cx-cat__lista { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.cx-cat__lista li { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.cx-cat__lista i { margin-right: 0; }
.cx-cat__nom { flex: 1; min-width: 0; color: var(--cx-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-cat__nom .cx-badge { padding: 1px 6px; font-size: 10.5px; margin-left: 4px; }
.cx-cat__pct { width: 46px; text-align: right; color: var(--cx-text-3); flex-shrink: 0; }
.cx-cat__monto { width: 96px; text-align: right; font-weight: var(--cx-fw-semi); color: var(--cx-text); flex-shrink: 0; }
.cx-cat__aviso { margin-top: 12px; }
/* La tarjeta mide su propio ancho: angosta → dona arriba y lista abajo */
@container (max-width: 560px) {
  .cx-cat { flex-direction: column; align-items: stretch; }
  .cx-cat__dona { align-self: center; }
}

/* Próximos pagos, cuentas y fondos, acciones (lote 2.7) */
.cx-pagos { display: flex; flex-direction: column; }
.cx-pago { border-bottom: 1px solid var(--cx-line); }
.cx-pago > summary {
  display: flex; align-items: center; gap: 10px; padding: 10px 2px; cursor: pointer; list-style: none;
}
.cx-pago > summary::-webkit-details-marker { display: none; }
.cx-pago > summary:focus-visible { outline: 2px solid var(--cx-accent); outline-offset: 2px; border-radius: 8px; }
.cx-pago__tile {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, #fff);
}
.cx-pago__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cx-pago__nom { font-size: 13.5px; font-weight: var(--cx-fw-semi); color: var(--cx-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-pago__inact { font-weight: 400; color: var(--cx-text-3); }
.cx-pago__sub { font-size: 11.5px; color: var(--cx-text-3); white-space: nowrap; }
.cx-pago__info .cx-pago__sub { overflow: hidden; text-overflow: ellipsis; }
.cx-pago__monto { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.cx-pago__est { font-size: 14px; font-weight: var(--cx-fw-bold); color: var(--cx-text); }
.cx-pago > summary > .cx-badge { flex-shrink: 0; min-width: 62px; justify-content: center; }
.cx-pago__desg {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  margin: 0 0 10px 44px; padding: 10px 12px; border-radius: 10px; background: var(--cx-bg); font-size: 12px;
}
.cx-pago__desg > div { display: flex; flex-direction: column; min-width: 0; }
.cx-pago__desg span { color: var(--cx-text-3); }
.cx-pago__desg strong { color: var(--cx-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-pago__desg p { grid-column: 1 / -1; margin: 0; color: var(--cx-text-3); }
.cx-pago__mas { margin-top: 8px; align-self: flex-start; }
.cx-pago__pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; }
.cx-pago__pie--falta { padding: 9px 12px; border-radius: 10px; background: var(--cx-neg-bg); color: var(--cx-neg); font-weight: var(--cx-fw-semi); }
.cx-pago__nota { margin-top: 8px; }

.cx-ctas__grupo + .cx-ctas__grupo { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cx-line); }
.cx-ctas__cab { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase;
                letter-spacing: .05em; color: var(--cx-text-3); margin-bottom: 6px; }
.cx-ctas__cab .cx-num { text-transform: none; letter-spacing: 0; color: var(--cx-text); }
.cx-dash-c ul { list-style: none; margin: 0; padding: 0; }
.cx-ctas__grupo li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13px; }
.cx-ctas__grupo li span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cx-text); }
.cx-ctas__grupo li .cx-num { font-weight: var(--cx-fw-semi); white-space: nowrap; }
.cx-ctas__cuadre { margin-top: 12px; font-size: 12.5px; font-weight: var(--cx-fw-semi); }

.cx-acc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cx-acc__btn {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 10px;
  text-align: left; color: var(--cx-text-3); font: inherit;
}
.cx-acc__btn:hover { background: var(--cx-bg); }
.cx-acc__btn:focus-visible { outline: 2px solid var(--cx-accent); outline-offset: 1px; }
.cx-acc__num {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--cx-info); color: #fff; font-weight: 700; font-size: 13px;
}
.cx-acc__btn--alta .cx-acc__num { background: var(--cx-neg); }
.cx-acc__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cx-acc__txt strong { font-size: 13.5px; color: var(--cx-text); }
.cx-acc__txt span { font-size: 12px; color: var(--cx-text-2); }

@container (max-width: 380px) {
  .cx-pago__desg { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 0; }
  .cx-pago > summary > .cx-badge { min-width: 0; }
}

/* Dashboard en celular (lote 2.8): una columna en el orden del mockup móvil.
   Las filas se "abren" para que cada tarjeta tome su propio orden. */
@container cxdash (max-width: 640px) {
  .cx-dash-grid { gap: var(--cx-sp-3); }
  .cx-dash-fila { display: contents; }
  .cx-dash-grid > .cx-alert             { order: 1; }
  .cx-dash-kpis                         { order: 2; }
  .cx-dash-c--patrimonio                { order: 3; }
  .cx-dash-c--liquidez                  { order: 4; }
  .cx-dash-c--flujo                     { order: 5; }
  .cx-dash-c--pagos                     { order: 6; }
  .cx-dash-c--acciones                  { order: 7; }
  .cx-dash-c--categorias                { order: 8; }
  .cx-dash-c--cuentas                   { order: 9; }
  .cx-dash .cx-card { padding: 14px; border-radius: var(--cx-radius); }
  .cx-dash .cx-card__head { margin-bottom: 12px; }
  .cx-alert { padding: 12px; gap: 10px; }
  .cx-alert__icon { width: 28px; height: 28px; font-size: 15px; }
  .cx-barras { min-height: 200px; }
}