/* ==========================================================================
   Consolidado multisede · Liquid Glass — mismo lenguaje que
   cierre-caja-liquid-glass.css: vidrio real solo en el panel y el encabezado,
   tarjetas internas translúcidas y uniformes (el color va en el ícono, el
   punto y la cifra, nunca en el borde de cada tarjeta), curva de resorte.
   Toma el color de cada óptica con --glass-primary (ver js/theme.js).
   Aplica solo a #modal-consolidado.
   ========================================================================== */

#modal-consolidado {
    --cmx-spring: cubic-bezier(.22, 1, .36, 1);
    --cmx-p: var(--glass-primary, #4f46e5);
    --cmx-ink: #0f172a;
    --cmx-muted: #64748b;
    --cmx-line: rgba(148, 163, 184, .28);
    --cmx-card: rgba(255, 255, 255, .5);
    --cmx-bien: #059669;
    --cmx-mal: #dc2626;
}

#modal-consolidado.modal-overlay {
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 100050;
    background: rgba(10, 15, 30, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#modal-consolidado .modal-content.cmx-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(1180px, 100%);
    max-width: none;
    height: min(92dvh, 940px);
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 28px;
    color: var(--cmx-ink);
    text-align: left;
    background: linear-gradient(155deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .46));
    backdrop-filter: blur(28px) saturate(1.8);
    -webkit-backdrop-filter: blur(28px) saturate(1.8);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, .95),
        0 36px 70px -26px rgba(10, 15, 40, .5),
        0 12px 28px -14px rgba(10, 15, 40, .28);
    animation: cmx-entra .32s var(--cmx-spring);
}

/* Ambiente de color detrás del vidrio (sin blur propio: solo degradados). */
#modal-consolidado .cmx-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(46% 40% at 4% -8%, color-mix(in srgb, var(--cmx-p) 50%, transparent), transparent 68%),
        radial-gradient(40% 36% at 104% 0%, rgba(56, 189, 248, .42), transparent 68%),
        radial-gradient(46% 40% at 100% 108%, rgba(16, 185, 129, .26), transparent 70%),
        radial-gradient(40% 36% at -4% 100%, rgba(217, 70, 239, .22), transparent 70%);
}

/* Barrido especular: lo que hace que se lea como vidrio. */
#modal-consolidado .cmx-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 46%, transparent 62%);
    mix-blend-mode: screen;
    opacity: .55;
}

#modal-consolidado .cmx-panel > * { position: relative; z-index: 1; }

@keyframes cmx-entra { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* ── Encabezado ─────────────────────────────────────────────────────────── */
#modal-consolidado .cmx-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px 14px 22px;
    border-bottom: 1px solid var(--cmx-line);
    background: rgba(255, 255, 255, .32);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
}
#modal-consolidado .cmx-head-ic {
    display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 15px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--cmx-p) 80%, #fff), var(--cmx-p));
    color: #fff;
    box-shadow: 0 12px 22px -12px var(--cmx-p), inset 0 1px 0 rgba(255, 255, 255, .45);
}
#modal-consolidado .cmx-head-ic .material-symbols-outlined { font-size: 25px; color: #fff; }
#modal-consolidado .cmx-head-txt { flex: 1; min-width: 0; }
#modal-consolidado .cmx-head h2 { margin: 0; font-size: 1.32rem; font-weight: 850; letter-spacing: -.02em; color: var(--cmx-ink); }
#modal-consolidado .cmx-head p { margin: 2px 0 0; font-size: .8rem; font-weight: 600; color: var(--cmx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal-consolidado .cmx-head-acciones { display: flex; align-items: center; gap: 6px; }

#modal-consolidado button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* Los botones y selects de la app traen `transition: all`, que también anima la
   visibilidad heredada del overlay al abrir: en celulares lentos las filas de
   sedes y el selector quedaban un rato en blanco. Aquí no se anima eso. */
#modal-consolidado :is(button, select, input) {
    visibility: inherit;
    transition-property: transform, background-color, color, box-shadow, opacity, border-color;
}
#modal-consolidado button:focus-visible,
#modal-consolidado select:focus-visible,
#modal-consolidado input:focus-visible { outline: 3px solid color-mix(in srgb, var(--cmx-p) 45%, transparent); outline-offset: 2px; }

#modal-consolidado .cmx-ic-btn,
#modal-consolidado .cmx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 38px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 12px;
    background: rgba(255, 255, 255, .55); color: #334155; font-size: .8rem; font-weight: 750;
    transition: transform .2s var(--cmx-spring), background .2s, color .2s, box-shadow .2s;
}
#modal-consolidado .cmx-ic-btn { width: 38px; padding: 0; }
#modal-consolidado .cmx-btn { padding: 0 13px; }
#modal-consolidado .cmx-ic-btn:hover,
#modal-consolidado .cmx-btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .85); color: var(--cmx-p); box-shadow: 0 8px 18px -12px rgba(15, 23, 42, .4); }
#modal-consolidado .cmx-ic-btn[aria-pressed="true"] { background: var(--cmx-ink); color: #fff; }
#modal-consolidado .cmx-btn--primario { border-color: transparent; background: var(--cmx-p); color: #fff; box-shadow: 0 10px 20px -12px var(--cmx-p); }
#modal-consolidado .cmx-btn--primario:hover { background: color-mix(in srgb, var(--cmx-p) 88%, #000); color: #fff; }
#modal-consolidado .cmx-ic-btn .material-symbols-outlined,
#modal-consolidado .cmx-btn .material-symbols-outlined { font-size: 19px; }

/* ── Barra de filtros ───────────────────────────────────────────────────── */
#modal-consolidado .cmx-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 12px 22px; border-bottom: 1px solid var(--cmx-line);
}
#modal-consolidado .cmx-seg {
    display: inline-flex; gap: 2px; padding: 4px; border-radius: 14px;
    background: rgba(148, 163, 184, .18); border: 1px solid rgba(255, 255, 255, .6);
}
#modal-consolidado .cmx-seg button {
    padding: 7px 13px; border: 0; border-radius: 10px; background: none;
    color: #475569; font-size: .8rem; font-weight: 750;
    transition: background .2s, color .2s, box-shadow .2s;
}
#modal-consolidado .cmx-seg button:hover { color: var(--cmx-ink); }
#modal-consolidado .cmx-seg button.activo { background: #fff; color: var(--cmx-p); box-shadow: 0 3px 10px -4px rgba(15, 23, 42, .35); }
#modal-consolidado .cmx-seg--mini button { padding: 5px 10px; font-size: .72rem; }

#modal-consolidado .cmx-fechas { display: inline-flex; align-items: center; gap: 6px; color: var(--cmx-muted); font-size: .78rem; font-weight: 700; }
#modal-consolidado .cmx-fechas input,
#modal-consolidado .cmx-select select {
    height: 36px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 11px;
    background: rgba(255, 255, 255, .6); color: var(--cmx-ink); font: inherit; font-size: .8rem; font-weight: 650;
}
#modal-consolidado .cmx-select { display: inline-flex; align-items: center; gap: 6px; padding-left: 10px; border-radius: 12px; background: rgba(255, 255, 255, .35); color: var(--cmx-muted); }
#modal-consolidado .cmx-select .material-symbols-outlined { font-size: 18px; }
#modal-consolidado .cmx-select select { min-width: 150px; cursor: pointer; }

#modal-consolidado .cmx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
#modal-consolidado .cmx-chip {
    display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 10px;
    border: 1px solid rgba(255, 255, 255, .8); border-radius: 99px; background: rgba(255, 255, 255, .6);
    color: var(--cmx-ink); font-size: .75rem; font-weight: 750;
    transition: opacity .2s, transform .2s var(--cmx-spring);
}
#modal-consolidado .cmx-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
#modal-consolidado .cmx-chip:hover { transform: translateY(-1px); }
#modal-consolidado .cmx-chip.apagada { opacity: .45; text-decoration: line-through; }
#modal-consolidado .cmx-chip.apagada i { background: #94a3b8; box-shadow: none; }

/* ── Cuerpo ─────────────────────────────────────────────────────────────── */
#modal-consolidado .cmx-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 22px 24px; overscroll-behavior: contain; }

#modal-consolidado .cmx-card {
    padding: 15px 16px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 20px;
    background: var(--cmx-card);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 26px -22px rgba(15, 23, 42, .45);
}

#modal-consolidado .cmx-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
#modal-consolidado .cmx-kpi-nota { margin-top: 2px; color: var(--cmx-muted); font-size: .7rem; font-weight: 650; line-height: 1.3; }
#modal-consolidado .cmx-kpi { position: relative; overflow: hidden; min-height: 118px; transition: transform .25s var(--cmx-spring), box-shadow .25s; }
#modal-consolidado .cmx-kpi:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 30px -22px rgba(15, 23, 42, .5); }
#modal-consolidado .cmx-kpi-top { display: flex; align-items: center; gap: 9px; }
#modal-consolidado .cmx-kpi-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); }
#modal-consolidado .cmx-kpi-ic .material-symbols-outlined { font-size: 19px; }
#modal-consolidado .cmx-kpi-t { color: var(--cmx-muted); font-size: .76rem; font-weight: 750; }
#modal-consolidado .cmx-kpi-v { margin-top: 10px; font-size: 1.36rem; font-weight: 850; letter-spacing: -.025em; color: var(--cmx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal-consolidado .cmx-kpi-pie { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--cmx-muted); font-size: .66rem; font-weight: 650; white-space: nowrap; overflow: hidden; }
#modal-consolidado .cmx-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30px; opacity: .9; pointer-events: none; }
#modal-consolidado .cmx-kpi:has(.cmx-spark) { padding-bottom: 34px; }

#modal-consolidado .cmx-neg { color: var(--cmx-mal) !important; }

#modal-consolidado .cmx-delta {
    display: inline-flex; align-items: center; gap: 1px; flex: 0 0 auto; padding: 2px 7px 2px 5px; border-radius: 99px;
    background: rgba(148, 163, 184, .18); color: #475569; font-size: .68rem; font-weight: 800;
}
#modal-consolidado .cmx-delta .material-symbols-outlined { font-size: 13px; }
#modal-consolidado .cmx-delta--bien { background: rgba(16, 185, 129, .14); color: var(--cmx-bien); }
#modal-consolidado .cmx-delta--mal { background: rgba(239, 68, 68, .12); color: var(--cmx-mal); }
#modal-consolidado .cmx-delta--nuevo { background: color-mix(in srgb, var(--cmx-p) 14%, transparent); color: var(--cmx-p); }

/* Las tarjetas de una misma fila quedan del mismo alto (stretch): antes una
   columna terminaba mucho antes que la otra y dejaba un hueco grande. */
#modal-consolidado .cmx-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); align-items: stretch; gap: 14px; margin-bottom: 14px; }
#modal-consolidado .cmx-grid3 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 14px; margin-bottom: 14px; }
#modal-consolidado .cmx-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); align-items: start; gap: 14px; margin-bottom: 14px; }
#modal-consolidado .cmx-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* En la columna ancha la dona va al lado de la lista. */
#modal-consolidado .cmx-card { container-type: inline-size; }
@container (min-width: 520px) {
    #modal-consolidado .cmx-pagos { flex-direction: row; align-items: center; gap: 22px; }
    #modal-consolidado .cmx-pagos-lista { flex: 1; }
}
#modal-consolidado .cmx-lateral { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

#modal-consolidado .cmx-sec-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
#modal-consolidado .cmx-sec-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .95rem; font-weight: 850; color: var(--cmx-ink); }
#modal-consolidado .cmx-sec-head h3 .material-symbols-outlined { font-size: 20px; color: var(--cmx-p); }
#modal-consolidado .cmx-vacio { margin: 8px 0; color: var(--cmx-muted); font-size: .82rem; }

/* Ranking de sedes */
#modal-consolidado .cmx-sedes { display: flex; flex-direction: column; gap: 8px; }
#modal-consolidado .cmx-sede {
    border: 1px solid rgba(255, 255, 255, .8); border-radius: 16px; background: rgba(255, 255, 255, .45);
    transition: background .2s, box-shadow .25s var(--cmx-spring);
}
#modal-consolidado .cmx-sede:hover,
#modal-consolidado .cmx-sede.abierta { background: rgba(255, 255, 255, .78); box-shadow: 0 14px 26px -22px rgba(15, 23, 42, .5); }
#modal-consolidado .cmx-sede-fila {
    display: grid; grid-template-columns: 28px 42px minmax(0, 1fr) 138px 124px 100px 22px; align-items: center; gap: 12px;
    width: 100%; padding: 11px 12px; border: 0; background: none; text-align: left; color: var(--cmx-ink);
}
#modal-consolidado .cmx-pos { display: grid; place-items: center; color: var(--cmx-muted); font-size: .85rem; font-weight: 850; }
#modal-consolidado .cmx-pos .material-symbols-outlined { font-size: 22px; color: #f59e0b; font-variation-settings: 'FILL' 1; }
#modal-consolidado .cmx-avatar {
    display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; border-radius: 13px;
    background: color-mix(in srgb, var(--c) 16%, #fff); color: var(--c); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent);
}
#modal-consolidado .cmx-avatar img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 3px; box-sizing: border-box; }
#modal-consolidado .cmx-avatar b { font-size: .85rem; font-weight: 850; }
#modal-consolidado .cmx-sede-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#modal-consolidado .cmx-sede-nombre { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; font-size: .9rem; font-weight: 800; line-height: 1.2; }
#modal-consolidado .cmx-sede-nombre em { flex: 0 0 auto; padding: 1px 7px; border-radius: 99px; background: color-mix(in srgb, var(--cmx-p) 13%, transparent); color: var(--cmx-p); font-size: .62rem; font-style: normal; font-weight: 800; }
#modal-consolidado .cmx-sede-nombre .cmx-em-error { background: rgba(239, 68, 68, .12); color: var(--cmx-mal); }
#modal-consolidado .cmx-barra { display: block; height: 6px; border-radius: 99px; background: rgba(148, 163, 184, .22); overflow: hidden; }
#modal-consolidado .cmx-barra i { display: block; height: 100%; border-radius: inherit; background: var(--c); transition: width .6s var(--cmx-spring); }
#modal-consolidado .cmx-sede-meta { color: var(--cmx-muted); font-size: .7rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal-consolidado .cmx-sede-col { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; text-align: right; }
#modal-consolidado .cmx-sede-col b { font-size: .9rem; font-weight: 850; white-space: nowrap; }
#modal-consolidado .cmx-sede-col small { color: var(--cmx-muted); font-size: .64rem; font-weight: 700; }
#modal-consolidado .cmx-col-ventas b { font-size: 1rem; }
#modal-consolidado .cmx-flecha { color: #94a3b8; font-size: 20px; transition: transform .3s var(--cmx-spring); }
#modal-consolidado .cmx-sede.abierta .cmx-flecha { transform: rotate(180deg); }

#modal-consolidado .cmx-detalle { padding: 2px 14px 14px 94px; animation: cmx-baja .28s var(--cmx-spring); }
/* Solo desplazamiento: con opacidad, cada repintado (ordenar, filtrar) dejaba el
   detalle invisible un instante. */
@keyframes cmx-baja { from { transform: translateY(-6px); } to { transform: none; } }
#modal-consolidado .cmx-det-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#modal-consolidado .cmx-det-grid > div { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 12px; background: rgba(255, 255, 255, .6); }
#modal-consolidado .cmx-det-grid small { color: var(--cmx-muted); font-size: .64rem; font-weight: 750; }
#modal-consolidado .cmx-det-grid b { font-size: .92rem; font-weight: 850; }
#modal-consolidado .cmx-det-grid span:not(.cmx-delta) { color: var(--cmx-muted); font-size: .66rem; font-weight: 600; }
#modal-consolidado .cmx-det-grid .cmx-delta { align-self: flex-start; }
#modal-consolidado .cmx-mini { display: flex; align-items: flex-end; gap: 3px; height: 54px; margin-top: 10px; padding: 6px 8px; border-radius: 12px; background: rgba(255, 255, 255, .45); }
#modal-consolidado .cmx-mini i { flex: 1; min-width: 2px; border-radius: 3px 3px 1px 1px; background: var(--c); opacity: .85; }
#modal-consolidado .cmx-mini i:hover { opacity: 1; }
#modal-consolidado .cmx-det-nota { margin: 6px 0 0; color: var(--cmx-muted); font-size: .72rem; }
#modal-consolidado .cmx-det-medios { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#modal-consolidado .cmx-det-medios span { padding: 4px 9px; border-radius: 99px; background: rgba(255, 255, 255, .65); color: #334155; font-size: .7rem; font-weight: 650; }

/* Hallazgos */
#modal-consolidado .cmx-hallazgos { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
#modal-consolidado .cmx-hallazgos li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border-radius: 13px; background: rgba(255, 255, 255, .55); color: #334155; font-size: .8rem; font-weight: 600; line-height: 1.35; }
#modal-consolidado .cmx-hallazgos li > .material-symbols-outlined { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; font-size: 16px; background: rgba(148, 163, 184, .18); color: #475569; }
#modal-consolidado .cmx-h--ok > .material-symbols-outlined { background: rgba(16, 185, 129, .15); color: var(--cmx-bien); }
#modal-consolidado .cmx-h--alerta > .material-symbols-outlined { background: rgba(239, 68, 68, .13); color: var(--cmx-mal); }
#modal-consolidado .cmx-h--aviso > .material-symbols-outlined { background: rgba(245, 158, 11, .16); color: #b45309; }
#modal-consolidado .cmx-h--info > .material-symbols-outlined { background: color-mix(in srgb, var(--cmx-p) 14%, transparent); color: var(--cmx-p); }

/* Medios de pago */
#modal-consolidado .cmx-medios { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
#modal-consolidado .cmx-medios button {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; width: 100%; padding: 7px 8px;
    border: 0; border-radius: 11px; background: none; text-align: left; color: var(--cmx-ink); transition: background .2s;
}
#modal-consolidado .cmx-medios button:hover { background: rgba(255, 255, 255, .7); }
#modal-consolidado .cmx-medio-n { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal-consolidado .cmx-medio-n i { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
#modal-consolidado .cmx-medio-v { color: var(--cmx-muted); font-size: .76rem; font-weight: 650; white-space: nowrap; }
#modal-consolidado .cmx-medio-v b { margin-left: 4px; color: var(--cmx-ink); }
#modal-consolidado .cmx-medio-barra { grid-column: 1 / -1; height: 5px; border-radius: 99px; background: rgba(148, 163, 184, .2); overflow: hidden; }
#modal-consolidado .cmx-medio-barra i { display: block; height: 100%; border-radius: inherit; background: var(--c); }
#modal-consolidado .cmx-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 6px 10px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--cmx-p) 10%, transparent); color: var(--cmx-p); font-size: .74rem; font-weight: 750; }
#modal-consolidado .cmx-link .material-symbols-outlined { font-size: 15px; }

/* Tendencia por día */
#modal-consolidado .cmx-leyenda { display: flex; flex-wrap: wrap; gap: 10px; }
#modal-consolidado .cmx-leyenda span { display: inline-flex; align-items: center; gap: 6px; color: #475569; font-size: .72rem; font-weight: 700; }
#modal-consolidado .cmx-leyenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
#modal-consolidado .cmx-chart { display: block; width: 100%; height: auto; max-height: 260px; }
#modal-consolidado .cmx-chart text { fill: #94a3b8; font-size: 11px; font-weight: 600; }
#modal-consolidado .cmx-chart-guias line { stroke: rgba(148, 163, 184, .35); stroke-dasharray: 4 5; }
#modal-consolidado .cmx-chart-barras rect { transition: opacity .2s; }
#modal-consolidado .cmx-chart-barras:hover rect { opacity: .55; }
#modal-consolidado .cmx-chart-barras rect:hover { opacity: 1; }


/* ── Facturado y recaudado por sede / recaudo de meses anteriores ────────── */
#modal-consolidado .cmx-grid--par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#modal-consolidado .cmx-sec-total { color: var(--cmx-bien); font-size: 1rem; font-weight: 850; }
#modal-consolidado .cmx-fr { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
#modal-consolidado .cmx-fr li { padding: 2px 4px; }
#modal-consolidado .cmx-fr-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
#modal-consolidado .cmx-fr .cmx-medio-n i { background: var(--c); }
#modal-consolidado .cmx-fr-chip { flex: 0 0 auto; padding: 2px 8px; border-radius: 99px; background: rgba(16, 185, 129, .13); color: var(--cmx-bien); font-size: .66rem; font-weight: 800; }
#modal-consolidado .cmx-fr-chip--aviso { background: rgba(245, 158, 11, .16); color: #b45309; }
#modal-consolidado .cmx-fr-linea { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 4px; }
#modal-consolidado .cmx-fr-linea small { color: var(--cmx-muted); font-size: .68rem; font-weight: 700; }
#modal-consolidado .cmx-fr-linea .cmx-medio-barra { grid-column: auto; height: 8px; }
#modal-consolidado .cmx-fr-linea b { text-align: right; font-size: .8rem; font-weight: 800; white-space: nowrap; }
#modal-consolidado .cmx-fr-nota { margin: 5px 0 0 72px; color: var(--cmx-muted); font-size: .68rem; font-weight: 600; }
#modal-consolidado .cmx-fr-nota b { color: var(--cmx-ink); }
#modal-consolidado .cmx-fr-nota { display: flex; flex-wrap: wrap; gap: 0 6px; }
#modal-consolidado .cmx-fr-nota span { white-space: nowrap; }
#modal-consolidado .cmx-fr-nota i { font-style: normal; opacity: .6; }
#modal-consolidado .cmx-ant-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; padding: 8px; border-radius: 11px; }
#modal-consolidado .cmx-ant-fila:hover { background: rgba(255, 255, 255, .7); }
#modal-consolidado .cmx-ant-fila .cmx-medio-n .material-symbols-outlined { font-size: 17px; color: var(--cmx-bien); }
#modal-consolidado .cmx-ant-sedes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 12px; }
#modal-consolidado .cmx-ant-sedes span { display: inline-flex; align-items: center; gap: 5px; color: var(--cmx-muted); font-size: .68rem; font-weight: 650; }
#modal-consolidado .cmx-ant-sedes i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }

/* ── Día a día: una barra por día, promedio y mejor día ───────────────────── */
#modal-consolidado .cmx-dias { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: end; gap: clamp(2px, .6vw, 8px); height: 220px; padding: 26px 4px 22px; }
#modal-consolidado .cmx-dias-prom { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed rgba(100, 116, 139, .55); pointer-events: none; z-index: 1; }
#modal-consolidado .cmx-dias-prom span { position: absolute; right: 0; bottom: 3px; padding: 1px 7px; border-radius: 99px; background: rgba(255, 255, 255, .85); color: #475569; font-size: .64rem; font-weight: 800; white-space: nowrap; }
#modal-consolidado .cmx-dia { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; outline: none; }
#modal-consolidado .cmx-dia-barra {
    position: relative; width: 100%; min-height: 0; border-radius: 7px 7px 3px 3px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--cmx-p) 55%, #fff), color-mix(in srgb, var(--cmx-p) 35%, #fff));
    transition: background .2s, transform .25s var(--cmx-spring);
    transform-origin: bottom;
}
#modal-consolidado .cmx-dia--finde .cmx-dia-barra { background: linear-gradient(180deg, color-mix(in srgb, var(--cmx-p) 40%, #fff), color-mix(in srgb, var(--cmx-p) 22%, #fff)); }
#modal-consolidado .cmx-dia--mejor .cmx-dia-barra { background: linear-gradient(180deg, color-mix(in srgb, var(--cmx-p) 90%, #fff), var(--cmx-p)); box-shadow: 0 10px 18px -10px var(--cmx-p); }
#modal-consolidado .cmx-dia-barra em { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); padding: 2px 7px; border-radius: 99px; background: var(--cmx-p); color: #fff; font-size: .62rem; font-style: normal; font-weight: 800; white-space: nowrap; }
#modal-consolidado .cmx-dia:hover .cmx-dia-barra,
#modal-consolidado .cmx-dia:focus .cmx-dia-barra { background: linear-gradient(180deg, color-mix(in srgb, var(--cmx-p) 95%, #fff), var(--cmx-p)); transform: scaleY(1.02); }
#modal-consolidado .cmx-dia-l { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); color: #94a3b8; font-size: .62rem; font-weight: 700; white-space: nowrap; }
#modal-consolidado .cmx-dia-tip {
    position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 5; display: none; min-width: 170px; padding: 9px 11px;
    transform: translateX(-50%); border-radius: 12px; background: rgba(15, 23, 42, .94); color: #fff; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .6);
    font-size: .7rem; text-align: left; pointer-events: none;
}
#modal-consolidado .cmx-dia:nth-child(-n+4) .cmx-dia-tip { left: 0; transform: none; }
#modal-consolidado .cmx-dia:nth-last-child(-n+3) .cmx-dia-tip { left: auto; right: 0; transform: none; }
#modal-consolidado .cmx-dia:hover .cmx-dia-tip,
#modal-consolidado .cmx-dia:focus .cmx-dia-tip { display: block; }
#modal-consolidado .cmx-dia-tip strong { display: block; color: #cbd5e1; font-size: .66rem; font-weight: 700; }
#modal-consolidado .cmx-dia-total { display: block; margin: 1px 0 5px; font-size: .95rem; font-weight: 850; }
#modal-consolidado .cmx-dia-tip span { display: flex; align-items: center; gap: 6px; padding: 2px 0; color: #e2e8f0; }
#modal-consolidado .cmx-dia-tip span i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--c); }
#modal-consolidado .cmx-dia-tip span b { margin-left: auto; padding-left: 10px; font-weight: 800; }
#modal-consolidado .cmx-ocupado { opacity: .6; pointer-events: none; }


/* ── Cómo pagan (mismo diseño de la pestaña Reportes) ─────────────────────── */
#modal-consolidado .cmx-pagos { display: flex; flex-direction: column; align-items: center; gap: 12px; }
#modal-consolidado .cmx-dona { position: relative; width: 150px; height: 150px; flex: 0 0 auto; }
#modal-consolidado .cmx-dona svg { width: 100%; height: 100%; }
#modal-consolidado .cmx-dona-arco { transition: stroke-width .2s var(--cmx-spring), opacity .2s; }
#modal-consolidado .cmx-dona svg:hover .cmx-dona-arco { opacity: .45; }
#modal-consolidado .cmx-dona svg .cmx-dona-arco:hover { opacity: 1; stroke-width: 15; }
#modal-consolidado .cmx-dona-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
#modal-consolidado .cmx-dona-centro b { font-size: 1.05rem; font-weight: 850; letter-spacing: -.02em; }
#modal-consolidado .cmx-dona-centro span { color: var(--cmx-muted); font-size: .66rem; font-weight: 700; }
#modal-consolidado .cmx-pagos-lista { align-self: stretch; display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
#modal-consolidado .cmx-pagos-lista li + li { border-top: 1px solid rgba(148, 163, 184, .2); }
#modal-consolidado .cmx-pagos-lista button {
    display: grid; grid-template-columns: 9px 22px minmax(0, 1fr) auto; align-items: center; gap: 8px;
    width: 100%; padding: 6px 6px; border: 0; border-radius: 10px; background: none; text-align: left; color: var(--cmx-ink);
}
#modal-consolidado .cmx-pagos-lista button:hover,
#modal-consolidado .cmx-pagos-lista button.activo { background: rgba(255, 255, 255, .75); }
#modal-consolidado .cmx-pagos-lista i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
#modal-consolidado .cmx-pago-logo { display: grid; place-items: center; width: 22px; height: 22px; overflow: hidden; }
#modal-consolidado .cmx-pago-logo img { max-width: 22px !important; max-height: 20px !important; width: auto !important; height: auto !important; object-fit: contain; border-radius: 4px; }
#modal-consolidado .cmx-pago-logo .material-symbols-outlined { font-size: 17px; color: var(--cmx-muted); }
#modal-consolidado .cmx-pago-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; font-weight: 650; color: #334155; }
#modal-consolidado .cmx-pago-v { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
#modal-consolidado .cmx-pago-v b { font-size: .8rem; font-weight: 800; white-space: nowrap; }
#modal-consolidado .cmx-pago-v small { font-size: .64rem; font-weight: 800; }

/* Esqueleto de carga */
#modal-consolidado .cmx-esqueleto { min-height: 118px; background: linear-gradient(100deg, rgba(255, 255, 255, .35) 30%, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, .35) 70%) 0 0 / 300% 100%; animation: cmx-brillo 1.3s linear infinite; }
#modal-consolidado .cmx-esqueleto--alto { min-height: 320px; }
@keyframes cmx-brillo { to { background-position: -150% 0; } }

/* ── Tamaños ────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    #modal-consolidado .cmx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #modal-consolidado .cmx-kpis > :nth-child(-n+2) { grid-column: span 1; }
    #modal-consolidado .cmx-grid { grid-template-columns: minmax(0, 1fr); }
    /* Una sola columna: las secciones se ordenan por importancia (los
       hallazgos primero), no por la columna en la que estaban. */
    #modal-consolidado .cmx-cols { display: flex; flex-direction: column; align-items: stretch; }
    #modal-consolidado .cmx-col { display: contents; }
    #modal-consolidado .cmx-o-hallazgos { order: 1; }
    #modal-consolidado .cmx-o-ranking { order: 2; }
    #modal-consolidado .cmx-o-medios { order: 3; }
    #modal-consolidado .cmx-o-facturado { order: 4; }
    #modal-consolidado .cmx-o-anteriores { order: 5; }
    #modal-consolidado .cmx-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #modal-consolidado .cmx-grid3 > :first-child { grid-column: 1 / -1; }
    #modal-consolidado .cmx-chips { margin-left: 0; }
}
@media (max-width: 820px) {
    #modal-consolidado .cmx-sede-fila { grid-template-columns: 24px 38px minmax(0, 1fr) auto 18px; }
    #modal-consolidado .cmx-sede-fila > .cmx-sede-col:not(.cmx-col-ventas) { display: none; }
    #modal-consolidado .cmx-detalle { padding-left: 14px; }
    #modal-consolidado .cmx-det-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #modal-consolidado .cmx-dias { height: 180px; }
    #modal-consolidado .cmx-grid3 { grid-template-columns: minmax(0, 1fr); }
    #modal-consolidado .cmx-dia-barra em { display: none; }
}
@media (max-width: 640px) {
    #modal-consolidado.modal-overlay { padding: 0; align-items: stretch; }
    #modal-consolidado .modal-content.cmx-panel { width: 100%; height: 100dvh; border-radius: 0; }
    #modal-consolidado .cmx-head { flex-wrap: wrap; padding: max(12px, env(safe-area-inset-top)) 14px 12px; gap: 10px; }
    #modal-consolidado .cmx-head-ic { width: 40px; height: 40px; flex-basis: 40px; border-radius: 13px; }
    #modal-consolidado .cmx-head h2 { font-size: 1.1rem; }
    #modal-consolidado .cmx-head p { white-space: normal; padding-right: 44px; }
    #modal-consolidado .cmx-head-acciones { width: 100%; }
    #modal-consolidado .cmx-head-acciones .cmx-btn { flex: 1; }
    #modal-consolidado .cmx-head-acciones [data-cmx-accion="cerrar"] { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 14px; }
    #modal-consolidado .cmx-toolbar { padding: 10px 14px; gap: 8px; }
    #modal-consolidado .cmx-toolbar > .cmx-seg { width: 100%; overflow-x: auto; scrollbar-width: none; }
    #modal-consolidado .cmx-seg button { flex: 0 0 auto; }
    #modal-consolidado .cmx-select { flex: 1; }
    #modal-consolidado .cmx-select select { flex: 1; min-width: 0; }
    #modal-consolidado .cmx-chips { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    #modal-consolidado .cmx-chip { flex: 0 0 auto; }
    #modal-consolidado .cmx-body { padding: 12px 12px 24px; }
    #modal-consolidado .cmx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    #modal-consolidado .cmx-kpis > :first-child { grid-column: 1 / -1; }
    #modal-consolidado .cmx-head-acciones .cmx-btn span:not(.material-symbols-outlined) { font-size: .74rem; }
    #modal-consolidado .cmx-fr-linea { grid-template-columns: 62px minmax(0, 1fr) auto; gap: 8px; }
    #modal-consolidado .cmx-fr-nota { margin-left: 0; }
    #modal-consolidado .cmx-kpi { min-height: 0; padding: 12px; }
    #modal-consolidado .cmx-kpi-v { font-size: 1.15rem; }
    #modal-consolidado .cmx-kpi-pie span:last-child { display: none; }
    #modal-consolidado .cmx-card { padding: 12px; border-radius: 18px; }
    #modal-consolidado .cmx-sec-head .cmx-seg--mini { width: 100%; overflow-x: auto; }
    #modal-consolidado .cmx-sede-fila { grid-template-columns: 20px 34px minmax(0, 1fr) auto 16px; gap: 9px; padding: 10px; }
    #modal-consolidado .cmx-avatar { width: 34px; height: 34px; border-radius: 11px; }
    #modal-consolidado .cmx-sede-nombre { font-size: .84rem; }
    #modal-consolidado .cmx-col-ventas b { font-size: .9rem; }
    #modal-consolidado .cmx-chart text { font-size: 22px; }
}

/* ── Oscuro ─────────────────────────────────────────────────────────────── */
[data-theme="dark"] #modal-consolidado {
    --cmx-ink: #f1f5f9; --cmx-muted: #94a3b8; --cmx-line: rgba(255, 255, 255, .1); --cmx-card: rgba(30, 41, 59, .5);
}
[data-theme="dark"] #modal-consolidado .modal-content.cmx-panel {
    background: linear-gradient(155deg, rgba(30, 41, 59, .78), rgba(15, 23, 42, .7));
    border-color: rgba(255, 255, 255, .12);
}
[data-theme="dark"] #modal-consolidado .cmx-sede,
[data-theme="dark"] #modal-consolidado .cmx-hallazgos li,
[data-theme="dark"] #modal-consolidado .cmx-det-grid > div,
[data-theme="dark"] #modal-consolidado .cmx-chip,
[data-theme="dark"] #modal-consolidado .cmx-ic-btn,
[data-theme="dark"] #modal-consolidado .cmx-btn:not(.cmx-btn--primario) { background: rgba(30, 41, 59, .55); border-color: rgba(255, 255, 255, .1); color: var(--cmx-ink); }
[data-theme="dark"] #modal-consolidado .cmx-seg button.activo { background: rgba(255, 255, 255, .14); color: #fff; }

@media (prefers-reduced-motion: reduce) {
    #modal-consolidado .modal-content.cmx-panel,
    #modal-consolidado .cmx-head,
    #modal-consolidado.modal-overlay { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    #modal-consolidado * { transition: none !important; animation: none !important; }
}