/* ACC Design System — Fonts (self-hosted, latin subset) */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Display = IBM Plex Sans Condensed (canon DS). Reemplaza Montserrat/Futura
   (retiradas del DS 2026-05-03; Montserrat nunca fue canónica). Fase 0 del
   frente de adopción del DS — sign-off de fuente del operador 2026-06-09. */
@font-face {
    font-family: 'IBM Plex Sans Condensed';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-condensed-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-condensed-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-condensed-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ACC BEAM Dashboard — Go Edition
   Paleta ACC estandarizada (ADR-020)
   Principio: marca, estados y charts constantes; superficies adaptables dark/light */

:root {
    /* ── DS Cut 2b — tokens forkeados BORRADOS; los provee el canon ──
       colors_and_type.css: :root = light (default) + [data-theme="dark"] = overrides dark.
       color-scheme lo da el canon theme-aware. Aquí quedan SOLO los deltas que el canon
       NO define (verificado: KEEP-set = estos + los --btn-*/--field-* de @1929/@2258).
       --bg-input se RETIRÓ: el canon lo provee desde DS v1.2.0 (#ffffff / dark #0b1220). */
    --sidebar-width: 260px;         /* ancho del sidebar propio + kit beam.css */
    --acc-red-gradient:       linear-gradient(135deg, #e11d48, #be123c);   /* avatar/acentos; canon no lo da */
    --acc-red-gradient-hover: linear-gradient(135deg, #be123c, #9f1239);
    /* --accent: acento interactivo (links/atajos/bordes). Antes los usos eran
       var(--accent) con --accent SIN definir → renderizaba azul Bootstrap.
       Alias al token info del DS (azul on-brand, preserva el render previo). */
    --accent: var(--info);
}

* {
    box-sizing: border-box;
}

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    margin: 0;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
}
code, kbd, pre, .mono {
    font-family: var(--font-mono);
}
/* Color de <code> = mismo azul que los códigos en tablas (.beam-tbl code).
   Evita el rosa default de Bootstrap (#d63384) fuera de tablas — p.ej. los
   códigos de producto/almacén en encabezados de modales (traza, doc-detalle). */
code {
    color: var(--info);
}

/* Override Bootstrap .text-muted para respetar tema */
.text-muted {
    color: var(--text-muted) !important;
}

/* Labels del sidebar más visibles en dark */
.beam-side .small.text-muted,
.beam-side label.text-muted {
    color: var(--text-secondary) !important;
}

/* Sidebar — shell migrado al kit beam.css (Fase 4 Cut 1, 2026-06-10).
   El layout (grid cell), bg tematizable (--sidebar-bg), border, sticky, scroll y
   colapso los provee `.beam-side` / `.beam.is-collapsed` del kit. Aquí quedan SOLO
   los deltas de producto: branding del header, badge de agente, selector de empresa,
   filtros, nav (item/section/lock/honestidad) y footer (versión/tier/marca). */

/* Header del sidebar (slot .beam-side-header): la placa blanca del logo la da el kit
   (.beam-side-logo). Estas reglas afinan el tamaño del logo del partner. */
.sidebar-logo-full {
    /* La placa blanca + centrado los da el kit (.beam-side-logo). Aquí solo el tope. */
    max-height: 42px;
    width: auto;
    object-fit: contain;
}

/* Isotipo solo visible cuando colapsado (lo revela .beam.is-collapsed abajo).
   El selector debe ganarle al kit `.beam-side-logo img { display:block }` (0-1-1):
   por eso va calificado bajo .beam-side-logo (0-2-0), si no el isotipo se pinta
   ADEMÁS del logo completo → logo doble. */
.beam-side-logo .sidebar-logo-icon {
    display: none;
}

.sidebar-brand {
    color: var(--acc-red);
    font-weight: 800;
    letter-spacing: 2px;
    margin: 0;
    font-size: 1.4rem;
}

/* Bloque de usuario (slot .beam-user del kit): layout lo da el kit; aquí el acento
   rojo del ícono y el stack nombre/rol. */
.beam-user i, .beam-user .acc-icon {
    font-size: 1.5rem;
    color: var(--acc-red);
    flex: none;
}
.beam-user .meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Badge agente restringido (ADR-027) */
.sidebar-agente-badge {
    padding: 0.3rem 1rem;
    font-size: 0.75rem;
    color: var(--warning);
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(245, 158, 11, 0.08);
}
.sidebar-agente-badge i, .sidebar-agente-badge .acc-icon { margin-right: 0.4rem; }
.beam.is-collapsed .sidebar-agente-badge { text-align: center; padding: 0.3rem; }
.beam.is-collapsed .sidebar-agente-badge .sidebar-text { display: none; }

.sidebar-empresa {
    /* padding-top 0: el estado de conexión (#connStatus) va justo arriba dentro
       de .beam-side-context; sin el top-padding "Empresa activa:" queda pegado y
       no deja un renglón vacío bajo "Conectado". */
    padding: 0 1rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
}

.sidebar-empresa .select {
    /* background-COLOR: el shorthand borraría el background-image (flecha) del canon .select */
    background-color: var(--bg-hover);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-size: 0.8rem;
    border-radius: 6px;
}

.sidebar-empresa .select:focus {
    border-color: var(--border-strong);
    box-shadow: none;
}

.sidebar-nav {
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
    flex: 1;
}

.nav-section {
    padding: 0.75rem 1rem 0.25rem;
    font-size: var(--fs-caption);
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}

.nav-item a {
    display: flex;
    align-items: center;
    /* padding vertical 0.6rem -> 0.45rem: baja el alto de cada opción para que el
       menú completo (hasta ACCito) quepa sin scroll, sin verse apretado. */
    padding: 0.45rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.88rem;
    transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
    border-left: 3px solid transparent;
}

.nav-item a:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.nav-item.active a {
    background: var(--acc-red-soft);
    color: var(--acc-red);
    border-left-color: var(--acc-red);
    font-weight: 500;
}

.nav-item a i {
    margin-right: 0.75rem;
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

/* nav-group-start: el margen de agrupado se retiró (decisión 2026-07-07). Un
   respiro de ~4px no se leía como separación y sí desigualaba los gaps; si algún
   día se quiere separar de verdad sería con una línea, que NO queremos. Gaps
   uniformes (los 2px del kit .beam-nav). La clase se conserva como hook inerte. */
.nav-item.nav-group-start {
    margin-top: 0;
}

/* Modo Grupo: módulos que no consolidan (ADN, Radar/Lupa, Proyectos)
   se pintan grises/deshabilitados mientras hay scope grupal activo.
   Authority: Cut 8 del plan Modo Grupo + scope.NoOperaEnGrupo. */
.nav-item.nav-disabled-grupo a {
    color: var(--text-muted);
    opacity: 0.5;
    cursor: not-allowed;
}

.nav-item.nav-disabled-grupo a:hover {
    background: transparent;
    color: var(--text-muted);
}

.nav-grupo-lock {
    margin-left: auto;
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Delta de producto (DS Cut 3): el kit .beam-kpi trae min-height pero no
   height:100% — está pensado para .beam-kpi-grid (CSS grid auto-iguala filas).
   ACCBeam mete las KPI en columnas Bootstrap: la columna se estira a la card
   más alta de la fila (p.ej. Facturación con netas+variación), así que sin
   height:100% las demás quedan cortas con hueco. Restaura el equalizado que
   tenía .kpi-card. */
.beam-kpi { height: 100%; }

/* KPIs que NO se consolidan en Modo Grupo (identidad de cliente, factura
   máx/mín, etc.): se atenúan en gris para que se vea INTENCIONAL — no un
   cálculo en cero. Authority: frente Modo Grupo (KPI cards por suma). */
.kpi-card.kpi-na-grupo,
.beam-kpi.kpi-na-grupo {
    opacity: 0.4;
}
.kpi-card.kpi-na-grupo .kpi-value,
.beam-kpi.kpi-na-grupo .kpi-value {
    color: var(--text-muted);
}

/* Pestañas de módulo que aún no consolidan en Modo Grupo: grises +
   deshabilitadas (Fase 0 red de honestidad). No se muestran datos
   per-empresa en silencio. */
.nav-link.tab-na-grupo,
.nav-link.tab-na-grupo:hover {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.sidebar-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.75rem;
}

/* Sidebar Collapse Button */
.sidebar-collapse-btn {
    color: var(--text-muted);
    border: none;
    padding: 0.15rem 0.3rem;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.sidebar-collapse-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Sidebar Filters (filtros activos). SU border-bottom es el divisor de cierre del
   bloque de contexto: pegado al texto de la Moneda = visible y parejo con los otros
   dividers (usuario / empresa). El borde del kit (.beam-side-context, abajo) se anula:
   quedaba ~el doble de lejos del texto → "no se veía" + dejaba un hueco antes de
   ANÁLISIS. Una sola línea, visible, pareja. */
.sidebar-filters {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

/* .beam-side-context (kit DS): en ACCBeam el cierre del bloque lo da .sidebar-filters
   (pegado al texto). Se anula borde + padding-bottom del kit para no duplicar la línea
   (era la de "dos líneas apiladas") ni dejar espacio muerto que aleja ANÁLISIS.
   Override de producto en style.css — NO se forkea beam.css. */
.beam-side-context {
    border-bottom: none;
    padding-bottom: 0;
}

.sidebar-filter-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 0.15rem 0;
}

.sidebar-filter-item i, .sidebar-filter-item .acc-icon {
    font-size: 0.7rem;
    color: var(--acc-red);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

/* Sidebar Version */
.sidebar-version {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Aviso de versión más nueva (solo admin). Discreto por default; rojo si es
   una actualización crítica. Es SOLO notificación — no dispara nada. */
.sidebar-update-banner {
    display: block;
    margin-top: 0.3rem;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.62rem;
    line-height: 1.3;
    text-align: center;
    color: var(--warning);
    background: var(--warning-soft, rgba(234, 179, 8, 0.12));
    cursor: default;
}
.sidebar-update-banner.is-critical {
    color: var(--acc-red);
    background: var(--acc-red-soft);
}

/* Teaser corto INLINE junto a "Conectado" — señal sobre la línea de fondo, sin
   agregar renglones. Clickeable (baja al banner con el detalle). Rojo si es
   crítica. nowrap para no crecer la altura de la fila. */
.sidebar-update-teaser {
    margin-left: 0.5rem;
    font-size: 0.62rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--warning);
    cursor: pointer;
}
.sidebar-update-teaser:hover {
    text-decoration: underline;
}
.sidebar-update-teaser.is-critical {
    color: var(--acc-red);
}

/* ── Sidebar Colapsado ── (Fase 4 Cut 1)
   El kit hace el grueso al poner `.is-collapsed` en `.beam`: swap de --sidebar-width
   (248→72px), oculta .beam-user .meta / .beam-side-context / .beam-side-footer / labels
   de grupo / lock, y centra .beam-nav a + .beam-side-header. Aquí van SOLO los deltas
   de producto que el kit no cubre (nav con <i> de Bootstrap, swap de logo, ícono de
   colapso, badge de agente, tooltip de hover). */

/* Labels de nav (ACCBeam usa .sidebar-text, no .beam-nav-label) */
.beam.is-collapsed .beam-nav .sidebar-text { display: none; }

/* Punto de estado (conexión, semáforo de confiabilidad). Reemplaza el glifo
   bi-circle-fill: el owner del DS decidió que el círculo relleno NO es glifo de
   sprite sino un dot por CSS. El color viene de las clases text-* (currentColor). */
.status-dot {
    display: inline-block;
    width: .6em;
    height: .6em;
    border-radius: 50%;
    background-color: currentColor;
    vertical-align: middle;
    flex-shrink: 0; /* el contenedor del estado de conexión (.beam-side-status) es flex → sin esto el dot vacío colapsa a width 0 */
}

/* Colapsado: se oculta la placa de logo completa (no cabe bien en el rail de 72px;
   decisión del operador 2026-06-10). El header colapsado queda solo con el chevron
   de expandir. El isotipo `.sidebar-logo-icon` ya no se usa (queda en markup, inerte). */
.beam.is-collapsed .beam-side-logo { display: none; }

/* Ícono de colapso rota */
.beam.is-collapsed #collapseIcon { transform: rotate(180deg); }

/* Iconos <i> de nav: centrar (el kit centra el <a>, pero el margen del <i> es nuestro) */
.beam.is-collapsed .nav-item a i { margin-right: 0; font-size: 1.2rem; }

/* Tooltip en hover cuando está colapsado */
.beam.is-collapsed .nav-item a { position: relative; }
.beam.is-collapsed .nav-item a:hover::after {
    content: attr(data-title);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    z-index: 1001;
    margin-left: 8px;
    box-shadow: var(--shadow-2);
}

/* Main Content — el ancho/posición lo da la celda grid del kit (.beam-main).
   Sin margin-left (lo manejaba el modelo fixed, ya retirado). */

/* Topbar — migrada al slot .beam-top del kit (Fase 4 Cut 2). El layout (flex
   space-between, padding, border-bottom, bg) lo da el kit; aquí solo el delta
   de producto: sticky al hacer scroll (el kit no lo trae) + el título. */
.beam-top {
    position: sticky;
    top: 0;
    z-index: 100;
}
.beam-top-title h5 {
    color: var(--text-primary);
    font-size: 1.15rem;
}
.beam-top .beam-menu-toggle {
    display: none;
}

.content-area {
    padding: 1.25rem 1.5rem;
}

/* KPI Cards */
.kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-xl);
    padding: var(--sp-5);
    text-align: center;
    transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
    height: 100%;
}

.kpi-card:hover {
    border-color: var(--border-strong);
    background: var(--bg-hover);
}

/* Accent de módulo migrado al kit (.beam-kpi--ventas/compras/cxc/cxp/inv) en DS Cut 3.
   Las reglas .kpi-card.<módulo> quedaron muertas (tp-card/radar-kpi-lg no las usan) y se retiraron. */

.kpi-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--acc-red);
}

.kpi-label {
    font-size: var(--fs-caption);
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.kpi-value {
    font-size: 1.5rem;
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-display);
}

.kpi-variacion {
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.kpi-sub {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    color: var(--text-secondary);
}

.kpi-detail {
    font-size: 0.72rem;
    margin-top: 0.15rem;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.kpi-detail .kpi-tag {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
}

/* ========================================
   Executive Dashboard — Panel Ejecutivo
   Layout distinto a las paginas de modulo
   ======================================== */
/* ── Executive Headline ── */
.executive-headline {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.headline-content {
    font-size: 0.9rem;
    color: var(--text-primary);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    align-items: center;
}
.headline-content .hl-item {
    white-space: nowrap;
}
.headline-content .hl-value {
    font-weight: 700;
    margin-left: 0.25rem;
}
.headline-content .hl-sep {
    color: var(--text-secondary);
    opacity: 0.4;
}
.headline-alerts {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.headline-alerts .hl-alert {
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.3);
    color: var(--danger);
    border-radius: 6px;
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
.headline-alerts .hl-alert.warn {
    background: rgba(245,158,11,0.15);
    border-color: rgba(245,158,11,0.3);
    color: var(--warning);
}

/* ── Alert Badge on Cards ── */
.card-alert-badge {
    background: var(--danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    margin-left: 0.4rem;
    line-height: 1.4;
    animation: badgePulse 2s ease-in-out infinite;
}
.card-alert-badge.warn {
    background: var(--warning);
    color: #1a1a1a;
}
@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ── Collapsible Alert Bar (Ventas/Compras) ── */
.alert-bar-collapsed {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 0.35rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.2s;
}
.alert-bar-collapsed:hover {
    background: rgba(255,255,255,0.06);
}
.alert-bar-chevron {
    transition: transform 0.3s;
    font-size: 0.9rem;
    opacity: 0.6;
}
.alert-bar-collapsed[aria-expanded="true"] .alert-bar-chevron {
    transform: rotate(180deg);
}
.alert-bar-detail {
    padding: 0.5rem 0;
}

/* ── Modal Dark Mode ── */
.modal-content {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}
.modal-header {
    border-bottom-color: var(--border-subtle);
}
.modal-footer {
    border-top-color: var(--border-subtle);
}

/* ── Conditional Value Colors ── */
.val-positive { color: var(--success) !important; }
.val-negative { color: var(--danger) !important; }
.val-warning  { color: var(--warning) !important; }
.val-neutral  { color: var(--text-primary) !important; }

/* ── Salud Card ── */
.summary-card-header.salud {
    /* Relleno sólido de estado (DS v1.2.0 --success-solid + --success-on, AA garantizado).
       Cierra el handoff: antes era color-mix local. */
    background: var(--success-solid);
    color: var(--success-on);
}
.salud-desglose {
    padding: 0.4rem 0.75rem 0.6rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.78rem;
}
.salud-desglose table { margin-bottom: 0 !important; }

/* ── Summary Cards — Panel Ejecutivo (grid uniforme) ── */
.summary-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}
/* El canon subraya <a> al hover (`:where(.beam) a:not(.acc-btn):hover`), pensado para
   enlaces de TEXTO. El card-link envuelve la tarjeta entera → subrayaría TODO su contenido
   (labels, valores, variación). Es block-link, no texto: lo opta-out. Mismo specificity que
   el canon (0,2,1) pero style.css carga después → gana. */
a.summary-card-link:hover { text-decoration: none; }

.summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
    height: 100%;
    /* flex-column + footer margin-top:auto (abajo): las cards de una fila ya
       son de igual altura (height:100%), pero sin esto el footer flota bajo el
       sparkline y su línea divisoria queda a distinta altura entre cards de
       distinto contenido (p.ej. Inventarios con banner MXN/advertencias vs CxP). */
    display: flex;
    flex-direction: column;
}

.summary-card:hover {
    border-color: var(--border-strong);
    background: var(--bg-hover);
}

/* Header con color de modulo */
.summary-card-header {
    padding: 0.65rem 1rem;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mod-on);
    border-bottom: 1px solid var(--border-subtle);
}

/* Relleno de identidad de módulo (DS v1.2.0 --mod-*-solid + --mod-on, AA garantizado).
   Antes usaban --mod-* crudo + blanco → cxc daba blanco-sobre-verde ~1.9:1 (falla AA). */
.summary-card-header.ventas     { background: var(--mod-ventas-solid); }
.summary-card-header.compras    { background: var(--mod-compras-solid); }
.summary-card-header.cxc        { background: var(--mod-cxc-solid); }
.summary-card-header.cxp        { background: var(--mod-cxp-solid); }
.summary-card-header.inventarios { background: var(--mod-inventarios-solid); }

.summary-card-header .summary-card-arrow {
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.2s;
    font-size: 0.8rem;
}
.summary-card:hover .summary-card-header .summary-card-arrow {
    opacity: 0.7;
}

/* Body — filas label/valor */
.summary-card-body {
    padding: 0.75rem 1rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.2rem 0;
}

.summary-label {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.summary-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* Sparkline mini chart entre body y footer */
.summary-card-sparkline {
    height: 40px;
    margin: 2px 8px 0;
    overflow: hidden;
}

/* Footer — variacion */
.summary-card-footer {
    padding: 0.4rem 1rem 0.6rem;
    margin-top: auto; /* pega el footer al fondo -> su línea divisoria alinea entre cards */
    font-size: 0.78rem;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Shortcut secundario dentro de summary-card footer (F4 #14) */
.summary-shortcut {
    font-size: 0.76rem;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    /* Reset defaults para cuando se usa como <button> (evita anchor anidado) */
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}
.summary-shortcut:hover {
    text-decoration: underline;
    color: var(--accent);
}

/* Folio clickeable en "Aplicaciones" del modal de documento — afford de drill
   al documento saldado (mismo patrón que el ícono box-arrow del modal de
   entidad). Color info del DS (var(--info-text), theme-aware) = consistente con badge--info. */
.doc-app-link {
    color: var(--info-text);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.doc-app-link:hover {
    color: var(--info-text);
    text-decoration: underline;
}
.doc-app-link .bi {
    font-size: 0.8em;
    opacity: 0.85;
}

/* Hint Estado de Cuenta (F4 #14) — banner dentro de tabEntidades cuando se llega por shortcut */
.edo-cuenta-hint {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.9rem;
    background: rgba(59, 130, 246, 0.08);
    border-left: 3px solid var(--info);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: 0.86rem;
    color: var(--text-primary);
}
.edo-cuenta-hint .acc-icon {
    color: var(--info);
    font-size: 1.05rem;
}

/* Chart Cards → contenedor `.beam-panel` (Cut 4) + título `.beam-panel-title` (canonizado
   2026-06-11, el owner aceptó `.chart-title` como clase aparte del kit con borde+ícono).
   El CSS de `.chart-title` se retiró: lo provee `beam.css`; `.mb-0`→`.beam-panel-title--flush`. */

/* Ranking List */
.ranking-list {
    max-height: 400px;
    overflow-y: auto;
}

.ranking-item {
    display: flex;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ranking-pos {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.12);
    color: var(--info);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.ranking-pos.top-3 {
    background: rgba(245, 158, 11, 0.18);
    color: var(--warning);
}

.ranking-info {
    flex: 1;
    min-width: 0;
}

.ranking-name {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-code {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.ranking-value {
    font-weight: 600;
    font-size: 0.9rem;
    text-align: right;
    white-space: nowrap;
    padding-left: 1.5rem;   /* separa el monto del nombre (no apretado contra él) */
}

/* El scrollbar vertical de la lista no debe encimarse sobre el monto (números
   "apretados"/cortados contra el borde derecho). */
.ranking-list { padding-right: 8px; scrollbar-gutter: stable; }

/* Una lista de ranking (nombre + monto) estirada a todo el ancho deja un hueco
   enorme entre nombre y monto ("espacio desperdiciado"). La acotamos a un ancho
   legible — el monto queda cerca del nombre, no en el otro extremo de la pantalla. */
.ranking-list--narrow { max-width: 900px; }

/* Top deudores a DOS columnas (10 y 10) sin barra de desplazamiento: aprovecha el
   ancho y evita el scroll. column-count llena columna por columna (1-10 izq, 11-20
   der). Override del max-height/overflow/width de .ranking-list. */
.ranking-list--2col {
    max-height: none;
    overflow: visible;
    max-width: none;
    column-count: 2;
    column-gap: 3rem;
}
.ranking-list--2col .ranking-item { break-inside: avoid; }
@media (max-width: 768px) { .ranking-list--2col { column-count: 1; } }

/* Label de conteo de los detalles paginados ("mostrando X de Y · saldo $Z"): el importe
   debe verse, no enterrado en gris chico. Tamaño normal (no <small>), peso medio. Usar en
   todos los módulos para consistencia. */
.panel-count { font-size: 1rem; font-weight: 500; color: var(--text-secondary); margin-left: 0.5rem; }

/* El spinner .sp del DS no declara `display`; como casi siempre se usa en un <span>
   (inline), el width/height no aplican y colapsa a una rayita. Override de app para que
   rinda como círculo. (Handoff al dueño del DS: el `.sp` base debería traer inline-block.) */
.sp { display: inline-block; vertical-align: middle; }

/* Tooltip sobre un acc-icon: el icono tiene pointer-events:none en el canon DS
   (el clic atraviesa al contenedor). Cuando el icono ES el disparador del tooltip
   (info-icon de títulos de panel: Concentración/Lorenz/DSO…), necesita recibir el
   hover; sin esto no se muestra nada. Override de app (no toca el DS vendoreado). */
.acc-icon[data-bs-toggle="tooltip"] { pointer-events: auto; cursor: help; }

/* Tables — .beam-tbl product affordances ON TOP of the canon (beam.css).
   El canon ya cubre base/hover/striped/sm(padding-only)/sortable/totales/zebra +
   header en mayúsculas + `.num`/`.col-num` + `vertical-align:middle` (todo canonizado
   2026-06-11). Quedan SOLO 2 deltas estéticos de producto que el canon no trae a
   propósito: banda sutil de header y estilo de `<code>` en celda. Sin forks de
   comportamiento. */
.beam-tbl thead th {
    background: rgba(255, 255, 255, 0.04);
}

.beam-tbl code {
    color: var(--info);
    background: rgba(59, 130, 246, 0.1);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.8rem;
}

/* Alerts */
.alert-sm {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
}

/* Form overrides */
.form-control {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

.select option {
    background: var(--bg-elevated);
    color: var(--text-primary);
    padding: 0.35rem 0.5rem;
}

.select option:hover,
.select option:focus,
.select option:checked:not(:disabled) {
    background: var(--acc-red-soft) !important;
    color: var(--text-primary) !important;
}

.select option:disabled {
    background: var(--bg-primary);
    color: var(--text-muted);
}

.form-control:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--border-strong);
    box-shadow: none;
    color: var(--text-primary);
}

.form-label {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* Buttons */
.btn-primary {
    background: var(--acc-red);
    border: none;
    transition: background var(--dur-fast) var(--ease-standard);
}

.btn-primary:hover {
    background: var(--acc-red-hover);
}

.btn-primary:active {
    transform: scale(0.98);
}


/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Filter Bar */
.filter-bar {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-xl);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-bar .filter-group {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.filter-bar .filter-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Sello de frescura "Datos al HH:MM" — junto al botón Actualizar (Contrato B). */
.data-asof {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    align-self: center;
}

.filter-bar .select {
    font-size: 0.8rem;
    padding: 0.25rem 2rem 0.25rem 0.5rem;
    height: auto;
    min-width: 80px;
}

.filter-bar .filter-sep {
    width: 1px;
    height: 28px;
    background: var(--border-subtle);
    margin: 0 0.25rem;
}

.filter-bar .btn-filter {
    font-size: 0.8rem;
    padding: 0.25rem 0.75rem;
    margin-left: auto;
}

/* Componente único de filtros de contexto Cloud. Los filtros propios de cada
   vista permanecen en su panel y no modifican esta composición. */
.cloud-context-filters {
    align-items: flex-end;
    column-gap: 1rem;
    row-gap: 0.75rem;
}

.cloud-context-filters .filter-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    min-width: 0;
}

.cloud-context-filters .filter-label {
    min-height: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1rem;
}

.cloud-context-selects {
    display: flex;
    gap: 0.35rem;
    min-width: 0;
}

.cloud-context-filters .select {
    height: 2.25rem;
    min-width: 0;
    padding: 0.35rem 2rem 0.35rem 0.65rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.cloud-context-date .select:first-child { width: 6.5rem; }
.cloud-context-date .select:last-child { width: 5.5rem; }
.cloud-context-currency .select,
.cloud-context-warehouse .select { width: clamp(12rem, 20vw, 16rem); }

.cloud-context-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    min-height: 2.25rem;
}

.cloud-context-filters .btn-filter {
    height: 2.25rem;
    margin-left: 0;
    padding: 0.35rem 0.9rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

.cloud-context-filters .data-asof {
    margin-left: 0;
    white-space: normal;
    line-height: 1.25rem;
}

@media (max-width: 768px) {
    .cloud-context-filters .cloud-context-date { flex: 1 1 calc(50% - 0.5rem); }
    .cloud-context-filters .cloud-context-selects { width: 100%; }
    .cloud-context-filters .cloud-context-date .select { flex: 1 1 0; width: auto; }
    .cloud-context-filters .cloud-context-currency,
    .cloud-context-filters .cloud-context-warehouse { flex: 1 1 100%; }
    .cloud-context-filters .cloud-context-currency .select,
    .cloud-context-filters .cloud-context-warehouse .select { width: 100%; }
    .cloud-context-actions { width: 100%; margin-left: 0; }
}

@media (max-width: 520px) {
    .cloud-context-filters .cloud-context-date { flex-basis: 100%; }
    .cloud-context-actions { flex-direction: column; align-items: stretch; }
    .cloud-context-filters .btn-filter { width: 100%; }
}

/* Moneda Context (F4 #13 + ADR-075) — chip + microcopy + link al desglose.
   Prominencia subida en v2.3.5 (commit #2) para que la declaración de moneda
   activa sea visualmente inseparable del bloque de KPIs. */
.moneda-context {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    padding: 0.55rem 1rem;
    margin-bottom: 1rem;
    background: rgba(13, 110, 253, 0.10);
    border-left: 4px solid var(--accent);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    min-height: 2.4rem;
}
.moneda-context:empty {
    display: none;
}
/* ── Modo Grupo · cobertura honesta (P1) ──
   Banner que declara cuántas de las N empresas del grupo realmente
   aportaron al consolidado. -ok = cobertura completa (confirmación
   discreta verde); -warn = parcial (alguna empresa no respondió:
   caída, timeout o BD sin las tablas) — prominente, nunca silencioso. */
.grupo-cobertura {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.15rem 0.5rem;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.4rem 0.9rem;
    margin-bottom: 0.85rem;
    border-radius: 0 var(--r-md) var(--r-md) 0;
}
/* "Cómo se consolida" como DESPLEGABLE (antes tooltip): click expande los caveats
   inline; colapsado = una línea. Nativo <details>, sin init de Bootstrap. */
.grupo-cobertura-det { display: inline-block; }
.grupo-cobertura-det > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
.grupo-cobertura-det > summary::-webkit-details-marker { display: none; }
.grupo-det-caret { font-size: 0.72rem; transition: transform 0.15s ease; }
.grupo-cobertura-det[open] > summary { margin-bottom: 0.35rem; }
.grupo-cobertura-det[open] .grupo-det-caret { transform: rotate(180deg); }
.grupo-cobertura-det-body {
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 760px;
    white-space: normal;
}
/* Variante cobertura completa + solo caveats: neutro/info, no amarillo de alerta. */
.grupo-cobertura-info-only {
    color: var(--text-secondary);
    background: rgba(59, 130, 246, 0.08);
    border-left: 4px solid var(--info);
}
.grupo-cobertura:empty {
    display: none;
}
/* Indicador del sidebar en Modo Grupo: reemplaza el selector de empresa
   (que no aplica en grupo) por un chip honesto, coherente con el chip
   "Grupo · N" del topbar. Evita el "Empresa activa: X" contradictorio. */
/* Indicador "Modo Grupo · N empresas" del sidebar. Neutro y token-driven
   (coherente con el toggle .acc-toggle del topbar, DS §21; antes era ámbar
   #ffc107 hardcoded). La señal de "estás en datos consolidados" la lleva el
   TEXTO + la caja elevada, no un color de alarma. */
.sidebar-grupo-activa {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0.4rem 0.6rem;
    background: var(--bg-hover);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
}
.grupo-cobertura-ok {
    color: var(--success-text);
    background: var(--success-bg);
    border-left: 4px solid var(--success);
}
.grupo-cobertura-warn {
    color: var(--warning-text);
    background: var(--warning-bg);
    border-left: 4px solid var(--warning);
}
.grupo-cobertura-detalle {
    font-size: 0.82rem;
    font-weight: 400;
    opacity: 0.85;
    margin-top: 0.15rem;
}
/* Variante invariante (ADR-075 Decisión 2): módulos MXN fijos
   (Rentabilidad, Radar Margen-bajo). Color distinto para señalar
   "regla por diseño de fuente" vs "filtro activo del usuario". */
.moneda-context--invariante {
    background: rgba(108, 117, 125, 0.12);
    border-left-color: var(--text-secondary);
}
.moneda-context--invariante .moneda-chip {
    background: var(--text-secondary);
}
/* Badge compacto para la tarjeta Inventarios del dashboard: hereda el
   look del chip/microcopy pero más pequeño y embebido en la card. */
.summary-card-moneda-badge {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.65rem;
    margin: 0 0.6rem 0.4rem 0.6rem;
    background: rgba(108, 117, 125, 0.12);
    border-left: 3px solid var(--text-secondary);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.summary-card-moneda-badge .moneda-chip {
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    background: var(--text-secondary);
}
.summary-card-moneda-badge .moneda-microcopy {
    font-size: 0.78rem;
    line-height: 1.1;
}
.moneda-chip {
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.25rem 0.65rem;
    border-radius: var(--r-sm);
    background: var(--accent);
    color: #fff;
    letter-spacing: 0.05em;
    line-height: 1;
}
.moneda-microcopy {
    flex: 1;
}
.moneda-desglose-link {
    font-size: 0.8rem;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}
.moneda-desglose-link:hover {
    text-decoration: underline;
    color: var(--accent);
}

/* Almacén multi-select: migrado al canon DS (componente createMultiselect →
 * .multiselect__*, components.css §18). Las clases .almacen-* quedaron retiradas. */

/* Nav Tabs */
.nav-tabs {
    border-bottom: 1px solid var(--border-subtle);
}

.nav-tabs .nav-link {
    color: var(--text-secondary);
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    padding: 0.6rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
}

.nav-tabs .nav-link:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--acc-red);
    background: var(--bg-card);
    border-color: var(--border-subtle) var(--border-subtle) var(--bg-primary);
    font-weight: 600;
}

/* Nav Pills (sub-tabs Rankings) */
.nav-pills .nav-link {
    color: var(--text-secondary);
    font-size: 0.8rem;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    transition: all 0.2s;
}

.nav-pills .nav-link:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.nav-pills .nav-link.active {
    color: #fff;
    background: var(--acc-red);
}

/* Top Performers Cards */
.tp-card {
    border-left: 3px solid var(--border-subtle);
}

.tp-card.tp-cliente { border-left-color: var(--chart-1); }
.tp-card.tp-agente { border-left-color: var(--chart-4); }
.tp-card.tp-producto { border-left-color: var(--success); }
.tp-card.tp-servicio { border-left-color: var(--warning); }
.tp-card.tp-devuelto { border-left-color: var(--danger); }

.tp-card .kpi-value {
    font-size: 0.85rem;
}

/* Toast notification */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

/* Loading overlay — showLoading()/hideLoading() en dashboard.js */
.accbeam-loading {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Anclado cerca del tope (no centrado): showLoading() se adhiere a paneles de
       altura muy variable; centrar dejaba el spinner a media página en los altos. */
    justify-content: flex-start;
    padding-top: 2.75rem;
    border-radius: inherit;
    gap: 0.5rem;
}
.accbeam-loading .sp { margin: 0; }
.accbeam-loading span { font-size: 0.8rem; color: var(--text-secondary); }
[data-theme="light"] .accbeam-loading {
    background: rgba(241, 245, 249, 0.75);
}

/* Connection status pulse */
.conn-pulse { animation: connPulse 1.5s infinite; }
@keyframes connPulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }

/* ========================================
   Light Theme
   Solo cambian superficies, texto y bordes.
   Marca, estados y charts permanecen iguales.
   ======================================== */
/* (--bg-input local retirado: el canon lo provee desde DS v1.2.0.) */

/* Light theme component overrides.
   El sidebar ya no necesita override de tema: `.beam-side` sigue --sidebar-bg
   (= --bg-secondary, claro u oscuro) y la placa del logo es blanca constante
   por diseño (--acc-blanco). Se retiraron los overrides de `.sidebar` /
   `.sidebar-logo-full` (Fase 4 Cut 1). */
[data-theme="light"] .beam-top {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ranking-item {
    border-bottom-color: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ranking-pos {
    background: rgba(59, 130, 246, 0.08);
}

[data-theme="light"] .ranking-pos.top-3 {
    background: rgba(245, 158, 11, 0.12);
}

[data-theme="light"] .beam-tbl thead th {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .beam-tbl code {
    color: var(--info);
    background: rgba(59, 130, 246, 0.08);
}

[data-theme="light"] .form-control {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

[data-theme="light"] .form-control:focus {
    background-color: var(--bg-secondary);
    border-color: var(--border-strong);
    box-shadow: none;
    color: var(--text-primary);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .btn-close-white {
    filter: none;
}

[data-theme="light"] .alert-bar-collapsed {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .alert-bar-collapsed:hover {
    background: rgba(0,0,0,0.04);
}

[data-theme="light"] .modal-content {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

[data-theme="light"] .badge.bg-dark {
    background-color: var(--border-strong) !important;
    color: var(--text-secondary);
}

/* Cards internas con Bootstrap .bg-dark (Recomendaciones, ADN, inventarios,
   proyectos) deben adaptarse al theme activo — su color-scheme es contenido,
   no chrome fijo. Sin este override se ven cards negras sobre fondo claro. */
[data-theme="light"] .card.bg-dark {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary);
    border-color: var(--border-strong) !important;
}
[data-theme="light"] .card.bg-dark .card-title,
[data-theme="light"] .card.bg-dark .card-text {
    color: var(--text-primary);
}
[data-theme="light"] .card.bg-dark .text-muted {
    color: var(--text-secondary) !important;
}

/* Responsive — el kit es grid 2-col; en móvil colapsamos a 1 columna y el sidebar
   pasa a drawer off-canvas (toggleSidebar añade .show a #sidebar = .beam-side). */
@media (max-width: 768px) {
    /* El título y las acciones deben poder ocupar filas distintas: conservar
       el reloj completo y todos los botones incluso con Modo Grupo visible. */
    .beam-top {
        flex-wrap: wrap;
        gap: 10px;
    }
    .beam-top-title {
        min-width: 0;
        flex: 1 1 220px;
    }
    .beam-top-title h5 {
        overflow-wrap: anywhere;
    }
    .beam-top-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-left: auto;
        max-width: 100%;
    }
    /* El botón sigue el mismo límite inclusivo que el drawer. */
    .beam-top .beam-menu-toggle {
        display: inline-flex;
        flex-shrink: 0;
    }
    /* La preferencia de colapso de escritorio no debe reponer dos columnas
       cuando el sidebar sale del grid para convertirse en drawer móvil. */
    .beam,
    .beam.is-collapsed {
        grid-template-columns: minmax(0, 1fr);
    }

    .beam-side {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: 100vh;
        width: var(--sidebar-width);
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform var(--dur-slow) var(--ease-standard);
        box-shadow: var(--shadow-3);
    }

    .beam-side.show {
        transform: translateX(0);
    }
}

/* Lupa móvil: mostrar las secciones y salidas completas sin ensanchar la
   página. Las tablas conservan su desplazamiento horizontal propio. */
@media (max-width: 991.98px) {
    #lupa-root .tabs--pills,
    #lupa-root .lupa-tabs,
    #lupa-root [data-lupa-acciones],
    #cloudLupa360 > [role="tablist"] {
        flex-wrap: wrap;
        max-width: 100%;
    }
}

/* ========================================
   ADN Comercial Historico — Estilos
   ======================================== */

/* Modal ADN: respeta dark/light theme via variables CSS */
.adn-modal-content {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}
.adn-modal-header {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-subtle);
}
.adn-btn-print {
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
}
.adn-btn-print:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
[data-theme="light"] .adn-modal-content .btn-close {
    filter: none; /* quita el invert blanco de btn-close-white en light mode */
}
[data-theme="light"] .adn-modal-content .btn-close-white {
    filter: none;
}

.adn-section {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border-subtle);
}
.adn-section:last-child {
    border-bottom: none;
}
.adn-section h5 {
    color: var(--info);
    margin-bottom: 1rem;
}
/* Insight Principal — frase WOW arriba del diagnostico */
.adn-insight {
    background: var(--bg-card);
    border: 1px solid var(--info);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}
.adn-insight-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--info);
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.adn-insight-text {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.5;
}

.adn-narrativa-box {
    background: var(--bg-card);
    border-left: 3px solid var(--info);
    padding: 1rem 1.25rem;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    line-height: 1.7;
}
.adn-narrativa-text {
    white-space: pre-wrap;
    margin-bottom: 0;
    color: var(--text-primary);
}
.adn-kpi {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--info);
}

/* Tablas ADN: forzar colores de texto para visibilidad */
.adn-table {
    font-size: 0.85rem;
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
}
.adn-table th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: var(--text-secondary) !important;
    background: var(--bg-card) !important;
}
.adn-table td {
    color: var(--text-primary) !important;
}
.adn-table .text-end {
    color: var(--text-primary) !important;
}

/* Barras horizontales de segmentos */
.adn-barras {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.adn-barra-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.adn-barra-label {
    flex: 0 0 180px;
    font-size: 0.85rem;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}
.adn-barra-track {
    flex: 1;
    background: var(--bg-card);
    border-radius: 4px;
    height: 20px;
    overflow: hidden;
}
.adn-barra-fill {
    height: 100%;
    background: var(--info);
    border-radius: 4px;
    transition: width 0.6s ease;
}
.adn-barra-value {
    flex: 0 0 50px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: right;
    color: var(--text-primary);
}

/* Alertas */
.adn-alertas {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.adn-alerta {
    padding: 0.6rem 1rem;
    background: var(--bg-card);
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--text-primary);
}

/* Timeline cambios */
.adn-timeline {
    position: relative;
    padding-left: 2rem;
}
.adn-timeline::before {
    content: '';
    position: absolute;
    left: 0.75rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-subtle);
}
.adn-timeline-item {
    position: relative;
    padding-bottom: 1rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.adn-timeline-item::before {
    content: '';
    position: absolute;
    left: -1.6rem;
    top: 0.4rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--info);
    border: 2px solid var(--bg-secondary);
}
.adn-timeline-year {
    flex: 0 0 40px;
    font-weight: 700;
    color: var(--info);
    font-size: 0.9rem;
}
.adn-timeline-content {
    font-size: 0.9rem;
    color: var(--text-primary);
}

/* ADN — Impresion se maneja via window.open() con CSS inline
   (patron de Estado de Cuenta). No necesita @media print aqui. */

/* ======================================================
   ACC Design System — Components (delta from DS library)
   Applied 2026-04-18 — see D:\Desarrollo\ACC Design System\components\
   ====================================================== */

/* ── Button system enhancements ── */
:root {
    --btn-h-xs: 28px; --btn-h-sm: 34px; --btn-h-md: 40px; --btn-h-lg: 48px;
    --btn-px-xs: 10px; --btn-px-sm: 14px; --btn-px-md: 18px; --btn-px-lg: 22px;
    --btn-fs-xs: 12px; --btn-fs-sm: 13px; --btn-fs-md: 14px; --btn-fs-lg: 15px;
}
/* Bootstrap .btn override: DS spec */
.btn {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    letter-spacing: .01em;
    border-radius: var(--r-md);
    transition: background var(--dur-fast) var(--ease-standard),
                color var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard);
    line-height: 1;
}
.btn:focus-visible {
    outline: 2px solid var(--acc-red);
    outline-offset: 2px;
    box-shadow: none;
}
.btn:active:not([disabled]) {
    transform: scale(0.98);
    transition-duration: var(--dur-fast);
}
.btn-sm { font-size: var(--btn-fs-sm); }
.btn-lg { font-size: var(--btn-fs-lg); }

/* La barra de "Atajos" migró al canon .acc-cmdbar + .acc-btn--ghost (DS §22,
   launcher stateless). Las reglas .btn-chip se retiraron; la honestidad de
   grupo sigue siendo ocultar (display:none), no opacity. La regla
   .btn-chip.is-na-grupo{opacity:.55} era CSS muerto (ningún JS la añadía). */

/* ── Badge system — DS semantic variants ── */
/* Base badge override */
.badge {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    letter-spacing: .02em;
    border-radius: var(--r-pill);
}
/* Badges semánticos — rampa del DS (theme-aware + AA-tuned). Un solo bloque: los
   tokens *-bg/-text/-border flipan por tema → se eliminan los overrides manuales
   [dark]/[light] y los hex Tailwind-400 del modo oscuro. */
.badge--success { background: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-border); }
.badge--warning { background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-border); }
.badge--danger  { background: var(--danger-bg);  color: var(--danger-text);  border: 1px solid var(--danger-border); }
.badge--info    { background: var(--info-bg);    color: var(--info-text);    border: 1px solid var(--info-border); }
.badge--neutral { background: var(--border-strong); color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.badge--brand   { background: var(--acc-red-soft); color: var(--acc-red); border: 1px solid color-mix(in srgb, var(--acc-red) 30%, transparent); }
/* Counter chip */
.count-chip {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    background: var(--acc-red); color: #fff;
    font: var(--fw-bold) 11px/1 var(--font-display);
    border-radius: var(--r-pill);
}
.count-chip--neutral { background: rgba(255,255,255,0.12); color: var(--text-secondary); }
.count-chip--sm { min-width: 16px; height: 16px; font-size: 10px; padding: 0 5px; }

/* ══════════════════════════════════════════════════════════════════
   Widget "Prioridades del negocio" (ADR-063 · v2.0 F1)
   — Visibilidad de hallazgos Pro+ en primera pantalla.
   — Consume /api/diagnostico (arreglado en v1.9.18).
   — Ubicado en Centro de Control bajo headline, 2-col con Salud.
   ══════════════════════════════════════════════════════════════════ */
.prioridades-widget {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
}
.prioridades-header {
    padding: 14px 16px;
    background: linear-gradient(90deg, rgba(225, 29, 72, 0.06), transparent);
    border-bottom: 1px solid var(--border-subtle);
}
.prioridades-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.prioridades-title i { color: var(--acc-red); font-size: 17px; }
.prioridades-subtitulo {
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: 27px;
    margin-top: 3px;
    line-height: 1.4;
}
.prioridades-subtitulo .criticas { color: var(--danger); font-weight: 600; }
.prioridades-subtitulo .importantes { color: var(--warning); font-weight: 600; }

.prioridades-lista { padding: 4px 0; }
.prioridad-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    transition: background 0.15s, border-color 0.15s;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    position: relative;
}
.prioridad-item:hover { background: var(--bg-hover); }
.prioridad-item.critica { border-left-color: var(--danger); }
.prioridad-item.critica:hover { background: rgba(239, 68, 68, 0.06); }
.prioridad-item.importante { border-left-color: var(--warning); }
.prioridad-item.importante:hover { background: rgba(245, 158, 11, 0.06); }
.prioridad-icono {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-size: 17px;
}
.prioridad-icono.critica { background: rgba(239, 68, 68, 0.12); color: var(--danger); }
.prioridad-icono.importante { background: rgba(245, 158, 11, 0.12); color: var(--warning); }
.prioridad-body { flex: 1; min-width: 0; }
.prioridad-titulo {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 3px;
    line-height: 1.3;
}
.prioridad-detalle {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.45;
}
.prioridad-metrica {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    white-space: nowrap;
    min-width: 80px;
}
.prioridad-metrica-valor {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.prioridad-metrica-valor.critica { color: var(--danger); }
.prioridad-metrica-valor.importante { color: var(--warning); }
.prioridad-metrica-label {
    font-size: 10.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}
/* Chevron affordance (CTA minimal) + hover label
   Visibilidad balanceada: sutil en idle pero claro como "fila clicable";
   rojo ACC + slide en hover para confirmar acción. */
.prioridad-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--text-secondary);
    font-size: 18px;
    font-weight: 700;
    transition: all 0.18s;
    border-radius: 6px;
    flex-shrink: 0;
    opacity: 0.85;
}
.prioridad-item:hover .prioridad-chevron {
    color: var(--acc-red);
    transform: translateX(3px);
    opacity: 1;
}
.prioridad-chevron-label {
    position: absolute;
    right: 52px;
    font-size: 11px;
    color: var(--acc-red);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    opacity: 0;
    transform: translateX(8px);
    transition: all 0.18s;
    pointer-events: none;
    white-space: nowrap;
}
.prioridad-item:hover .prioridad-chevron-label {
    opacity: 1;
    transform: translateX(0);
}
.prioridades-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 18px;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid var(--border-subtle);
    font-size: 12px;
    color: var(--text-muted);
}
.prioridades-footer a {
    color: var(--text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}
.prioridades-footer a:hover { color: var(--acc-red); }
.prioridades-footer .overflow-note { color: var(--warning); font-weight: 500; }

/* Empty state */
.prioridades-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--text-secondary);
}
.prioridades-empty i, .prioridades-empty .acc-icon { font-size: 32px; color: var(--success); margin-bottom: 10px; }
.prioridades-empty .titulo {
    font-size: 14px; font-weight: 600;
    color: var(--text-primary); margin-bottom: 4px;
}
.prioridades-empty .detalle { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.prioridades-empty .tier-footer {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
    margin-top: 12px;
    width: 100%;
    justify-content: center;
}
.prioridades-empty .tier-footer i, .prioridades-empty .tier-footer .acc-icon { color: var(--acc-red); font-size: 12px; }

/* Lite placeholder */
.prioridades-lite {
    padding: 24px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(90deg, rgba(225, 29, 72, 0.04), transparent);
    min-height: 120px;
}
.prioridades-lite-icono {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--acc-red-soft);
    color: var(--acc-red);
    font-size: 24px;
}
.prioridades-lite-body { flex: 1; }
.prioridades-lite .titulo {
    font-size: 14px; font-weight: 600;
    color: var(--text-primary); margin-bottom: 4px;
}
.prioridades-lite .detalle {
    font-size: 12px; color: var(--text-secondary);
    line-height: 1.5;
}
.prioridades-lite .cta {
    background: var(--acc-red);
    color: #fff;
    border: 0;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.prioridades-lite .cta:hover { background: var(--acc-red-hover); }

/* ── Form field tokens + focus ring ── */
:root {
    --field-h:      40px;
    /* Densidad de producto: el chrome denso de ACCBeam (barras de filtros,
     * admin) usa controles compactos. 31px iguala a la densidad Bootstrap -sm
     * que ya tenía la app (en vez de los 34px del canon) y alinea .input--sm,
     * .select y el trigger del multiselect a una sola altura. */
    --field-h-sm:   31px;
    --field-h-lg:   48px;
    --field-px:     12px;
    --field-border: rgba(255,255,255,0.12);
    --field-border-hover: rgba(255,255,255,0.22);
    --field-border-focus: var(--acc-red);
}
[data-theme="light"] {
    /* DS Cut 2b — field-border light: el canon no los da (viven en components.css §03, aún no cargado) */
    --field-border: #D4D4D4;
    --field-border-hover: #9CA3AF;
}
/* DS focus ring: replace Bootstrap's "no box-shadow" with DS ring */
.form-control:focus {
    border-color: var(--field-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.18) !important;
}
[data-theme="light"] .form-control:focus {
    box-shadow: 0 0 0 3px rgba(230, 51, 41, 0.12) !important;
}
/* Field wrapper helper */
.field-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.field-label {
    font: var(--fw-semibold) 12px/1.2 var(--font-display);
    color: var(--text-secondary);
    letter-spacing: .01em;
    display: flex; align-items: center; gap: 6px;
}
.field-label .req { color: var(--acc-red); font-weight: var(--fw-bold); }
.field-hint { font: 400 11px/1.5 var(--font-body); color: var(--text-muted); }
.field-err  { font: var(--fw-medium) 11px/1.5 var(--font-body); color: var(--danger); }

/* ── Delta / change indicators ── */
.d {
    font-family: var(--font-mono);
    font-weight: var(--fw-medium);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.d.up   { color: var(--success); }
.d.down { color: var(--danger); }
.d.flat { color: var(--text-muted); }

/* ── Sidebar active rail — DS pill pattern ── */
/* Override current border-left approach with ::before pill */
.nav-item a {
    position: relative;
    border-left: none !important;
    overflow: visible;
}
.nav-item.active a {
    border-left: none !important;
}
.nav-item.active a::before {
    content: '';
    position: absolute;
    left: -3px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--acc-red);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
/* Collapsed sidebar: hide the pill when collapsed since there's no room */
.beam.is-collapsed .nav-item.active a::before {
    display: none;
}

/* ── Nav tabs — DS underline pattern ── */
.nav-tabs .nav-link.active {
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 2px solid var(--acc-red) !important;
    background: transparent;
    color: var(--acc-red);
    font-weight: var(--fw-semibold);
}
.nav-tabs .nav-link {
    border-bottom: 2px solid transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
}

/* ── Toast DS pattern ── */
.toast {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    color: var(--text-primary);
}
.toast .toast-header {
    background: transparent;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: 13px;
}
.toast .toast-body {
    font-size: 13px;
    font-family: var(--font-body);
    color: var(--text-secondary);
}
/* (.toast--* del DS retiradas — el feedback usa el canon .acc-toast; 0 usos.) */

/* ── CxC / CxP aging bar ── */
.aging-bar {
    display: flex;
    height: 6px;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--bg-hover);
    width: 100%;
    min-width: 80px;
}
.aging-bar > span { display: block; height: 100%; }
.aging-bar .s0 { background: var(--success); }
.aging-bar .s1 { background: var(--warning); }
.aging-bar .s2 { background: var(--danger); }
.aging-bar .s3 { background: var(--danger-solid); }
.aging-legend {
    display: flex;
    gap: 10px;
    font: var(--fw-medium) 10px/1 var(--font-mono);
    color: var(--text-muted);
    margin-top: 4px;
}
.aging-legend span::before { content: "●"; margin-right: 3px; }
.aging-legend .s0::before { color: var(--success); }
.aging-legend .s1::before { color: var(--warning); }
.aging-legend .s2::before { color: var(--danger); }
.aging-legend .s3::before { color: var(--danger-solid); }

/* ── Module tag pills (table/badge context) ── */
.mod-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font: var(--fw-semibold) 10px/1 var(--font-display);
    letter-spacing: .04em;
}
/* Identidad de módulo — relleno sólido del DS (v1.2.0 --mod-*-solid + --mod-on,
   AA garantizado, theme-invariante). Reemplaza el mapeo a rampa semántica (que
   tenía mismatch cxp→danger) por la identidad real del módulo. */
.mod-tag.ventas    { background: var(--mod-ventas-solid);      color: var(--mod-on); }
.mod-tag.cxc       { background: var(--mod-cxc-solid);         color: var(--mod-on); }
.mod-tag.compras   { background: var(--mod-compras-solid);     color: var(--mod-on); }
.mod-tag.cxp       { background: var(--mod-cxp-solid);         color: var(--mod-on); }
.mod-tag.inv       { background: var(--mod-inventarios-solid); color: var(--mod-on); }

/* ── Tooltip DS spec ── */
[data-bs-toggle="tooltip"],
[title].ds-tip {
    cursor: help;
}
.tooltip .tooltip-inner {
    background: var(--acc-negro);
    color: #fff;
    font: var(--fw-medium) 11px/1.4 var(--font-body);
    padding: 6px 10px;
    border-radius: var(--r-sm);
    max-width: 240px;
}
.tooltip .tooltip-arrow::before {
    border-color: transparent;
}
.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--acc-negro); }
.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--acc-negro); }
.bs-tooltip-start .tooltip-arrow::before { border-left-color: var(--acc-negro); }
.bs-tooltip-end .tooltip-arrow::before { border-right-color: var(--acc-negro); }

/* ── Empty state para tablas (F1 #2 ROADMAP v2.0) ── */
.table-empty-cell {
    color: var(--text-muted);
}
.table-empty-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.35rem;
    opacity: 0.5;
}

/* ── Radar Comercial — frente ADR-069 ── */
.radar-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: 1.1rem 1.25rem;
    height: 100%;
    transition: transform 0.12s ease, border-color 0.12s ease;
}
.radar-card-active {
    cursor: pointer;
}
.radar-card-active:hover,
.radar-card-active:focus {
    border-color: var(--acc-red);
    transform: translateY(-1px);
    outline: none;
}
.radar-card-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.radar-card-skeleton .radar-skeleton-line {
    height: 0.85rem;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    margin: 0.45rem 0;
}
.radar-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}
.radar-card-icon {
    font-size: 1.1rem;
    color: var(--acc-red);
}
.radar-card-title {
    font: var(--fw-semibold) 0.95rem/1.2 var(--font-body);
}
.radar-card-figure {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.15rem;
}
.radar-card-unit {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
}
.radar-card-monto {
    font-size: 0.95rem;
    margin-bottom: 0.7rem;
}
.radar-card-monto small {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-left: 0.25rem;
}
.radar-card-copy {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0.5rem 0 0.85rem;
    line-height: 1.35;
}
.radar-card-cta {
    color: var(--acc-red);
    font-weight: 600;
    font-size: 0.9rem;
}
/* Herramientas: la card es contenedor (sin hover de tarjeta completa); cada
   tool es un tile propio con su hover, para que sea claro dónde se da clic. */
.radar-card--tools { cursor: default; }
.radar-card--tools:hover,
.radar-card--tools:focus {
    border-color: var(--border-subtle);
    transform: none;
}
/* Títulos de las herramientas (enlaces): texto neutro, el acento rojo lo lleva
   el CTA. Cada link es un tile clickeable con borde/fondo en hover. */
.radar-tool-link {
    color: var(--text-primary);
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    transition: background 0.12s ease, border-color 0.12s ease;
}
.radar-tool-link:hover,
.radar-tool-link:focus {
    background: rgba(255,255,255,0.04);
    border-color: var(--acc-red);
    outline: none;
}
.radar-card-cta-disabled {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
}
.radar-card-status {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-bottom: 0.6rem;
}
/* .radar-chip ahora es .tab del canon (.tabs--pills, components.css §16);
   el estado activo = .tab.is-active. radar-chip queda solo como hook de JS. */
#radar-table tbody tr:hover {
    background: var(--acc-red-soft);
}
/* Drawer 360 del Radar — migrado al canon .drawer (components.css §19, DS Fase 2).
   El shell (backdrop / panel-slide / .is-open / header) lo da el canon; el ancho 720
   ahora lo da la variante canónica .drawer--wide (canonizada 2026-06-11). Aquí solo
   quedan deltas de producto: header con la acción "Volver" a la izquierda
   (space-between), y padding/sizing de contenido propios. */
.drawer__header { justify-content: space-between; }
.drawer__body {
    padding: 1.25rem 1.75rem 2rem;
    font-size: 0.95rem;
}
.drawer__body .kpi-card {
    padding: 0.85rem 1rem;
}
.drawer__body .kpi-value {
    font-size: 1.25rem;
}
.radar-kpi-lg .kpi-label {
    font-size: 0.95rem;
}
.radar-kpi-lg .kpi-value {
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1.15;
}
.radar-kpi-lg {
    padding: 1.1rem 1.25rem;
    min-height: 120px;
}
.radar-table-wrap {
    min-height: 60vh;
}
.radar-table-lg {
    font-size: 1rem;
}
.radar-table-lg th,
.radar-table-lg td {
    padding: 0.85rem 0.9rem;
    vertical-align: middle;
}
/* (.radar-toast legacy retirado — vista-entidad.js delega al canon .acc-toast global.) */
.radar-drawer-title h5 {
    margin: 0;
}

/* ========================================
 * Frente "Ventas con PDV" v2.2 — chip + tooltip + toast
 * ========================================
 * Una verdad por empresa: el chip es transparencia sobre el universo
 * aplicado, no control. Estilo neutro (no accent), clickeable abre
 * modal con criterio CONTPAQi completo.
 */
.pdv-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    letter-spacing: 0.03em;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.pdv-chip:hover {
    background: rgba(255, 255, 255, 0.14);
    color: var(--text-primary);
}
.pdv-chip i, .pdv-chip .acc-icon {
    font-size: 0.85em;
    opacity: 0.85;
}
/* PDV: linea de desglose Facturado/Mostrador bajo "Ventas Netas" (clic abre el recibo). */
.pdv-desglose {
    cursor: pointer;
    border-top: 1px dashed var(--border-subtle);
    padding-top: 0.2rem;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    transition: color 0.15s ease;
}
.pdv-desglose:hover { color: var(--text-primary); }
.pdv-desglose strong { color: var(--text-primary); font-weight: 600; }
/* PDV: recibo de reconciliacion en el modal del criterio (cuadra con el Estado del Negocio). */
.pdv-recibo-tbl { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pdv-recibo-tbl td {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: baseline;
}
.pdv-recibo-tbl td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pdv-recibo-nota { color: var(--text-secondary); font-size: 0.78rem; }
.pdv-recibo-total td {
    border-top: 2px solid var(--border-subtle);
    border-bottom: none;
    font-weight: 700;
    color: var(--text-primary);
    padding-top: 0.45rem;
}
/* ⓘ tooltip discreto en headers de rankings/drilldown — sin chip por card. */
.pdv-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-left: 0.4rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
    cursor: help;
    opacity: 0.7;
}
.pdv-info-icon:hover {
    opacity: 1;
    color: var(--text-primary);
}
/* Toast 1×/sesión-empresa al cambiar a empresa con PDV vigente. */
.pdv-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--text-secondary);
    padding: 0.65rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 1100;
    pointer-events: none;
    max-width: 360px;
}
.pdv-toast.visible {
    opacity: 1;
    transform: translateY(0);
}
/* Aviso plegable de exclusiones (sólo si hubo facturas globales excluidas
 * en el rango). Usado en drilldown — dejado neutral, no warning. */
.pdv-exclusion-notice {
    margin: 0.5rem 0;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border-left: 2px solid var(--text-secondary);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.pdv-exclusion-notice .pdv-exclusion-icon {
    margin-right: 0.4rem;
}
/* Nota contextual de adopción reciente (rango cruza primer doc tipo 35).
 * Más sutil que exclusion-notice — informativa, no alerta. */
.pdv-adopcion-note {
    margin: 0.4rem 0 0.75rem 0;
    padding: 0.4rem 0.7rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid var(--text-secondary);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.pdv-adopcion-note i, .pdv-adopcion-note .acc-icon {
    margin-right: 0.35rem;
    opacity: 0.8;
}

/* Multiselect: migrado al canon DS (.multiselect__*, components.css §18).
 * El componente createMultiselect (multiselect.js) emite el markup canónico;
 * las clases .acc-multiselect-* quedaron retiradas. */

/* Delta de producto: en ACCBeam el multiselect SIEMPRE vive en barras de
 * filtros densas. El canon usa --field-h (40px), que lo deja más alto que sus
 * hermanos. Se compacta a la altura densa --field-h-sm (31px), la misma que
 * usan .input--sm y .select tras la migración de forms → un solo alto en todo
 * el chrome denso. */
.multiselect__trigger {
    min-height: 0;
    height: var(--field-h-sm);
    padding: 0 2rem 0 0.5rem;
    font-size: 0.8rem;
}
.multiselect__caret { height: 100%; width: 2rem; }

/* La trazabilidad del Kárdex (modal de Inventarios) vive en un header flex
 * space-between; sin ancho propio el .multiselect (width:100%) empujaría el
 * título. Se le da ancho de contenido acotado, como tenía el <select> width:auto. */
.multiselect[data-for="filtroInvTrazabilidad"] { width: auto; min-width: 210px; }

/* Aviso discreto inline si la persistencia falla */
.acc-filter-save-error {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* ============================================================
 * Autocomplete Picker Component (v2.2.0)
 * Single-select con búsqueda en input + dropdown de sugerencias.
 * Usado en sub-vista Por Cliente (lista larga donde multiselect no
 * sería operativo). Authority: docs/PLAN-FILTROS-PERSISTENTES.md.
 * ============================================================ */
.acc-autocomplete {
    position: relative;
    display: inline-block;
    width: 100%;
}

.acc-autocomplete-input-wrap {
    position: relative;
}

.acc-autocomplete-input {
    padding-right: 1.75rem; /* hueco para botón Limpiar */
}

.acc-autocomplete-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    padding: 0 0.15rem;
}

.acc-autocomplete-clear:hover {
    color: var(--text-primary);
}

.acc-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 1060;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    max-height: 320px;
    overflow-y: auto;
}

.acc-autocomplete-dropdown[hidden] {
    display: none;
}

.acc-autocomplete-option {
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.acc-autocomplete-option:last-child {
    border-bottom: none;
}

.acc-autocomplete-option:hover,
.acc-autocomplete-option.acc-autocomplete-highlighted {
    background: rgba(255, 255, 255, 0.06);
}

.acc-autocomplete-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acc-autocomplete-label mark {
    background: var(--acc-red-soft);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

.acc-autocomplete-meta {
    font-size: 0.72rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acc-autocomplete-empty {
    padding: 0.6rem 0.75rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-style: italic;
    text-align: center;
}

/* Light theme adjustments */
[data-theme="light"] .acc-autocomplete-dropdown {
    background: var(--bg-elevated);
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .acc-autocomplete-option:hover,
[data-theme="light"] .acc-autocomplete-option.acc-autocomplete-highlighted {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .acc-autocomplete-option {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

/* ════════════════════════════════════════════════════════════
   Perfil Operativo — banda contextual de Inventarios (v2.4.0)
   ADR-071: caja blanca, color neutral (no verde/rojo).
   ════════════════════════════════════════════════════════════ */

.perfil-banda {
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 8px 0 12px 0;
}
/* Acento neutro por perfil (ADR-071: neutral, no verde/rojo) — tokens DS. */
.perfil-banda--stock { border-left: 4px solid var(--text-secondary); }
.perfil-banda--bajo-pedido { border-left: 4px solid var(--text-secondary); }
.perfil-banda--incierto { border-left: 4px solid var(--text-muted); }

[data-theme="light"] .perfil-banda {
    background: var(--bg-secondary);
    border-color: var(--border-strong);
}

.perfil-banda__head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.perfil-banda__icon {
    font-size: 1.3em;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.perfil-banda__main {
    flex: 1;
    min-width: 0;
}
.perfil-banda__label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.perfil-banda__microcopy {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.4;
}
.perfil-banda__toggle {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.82rem;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.perfil-banda__toggle:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.perfil-banda__toggle .acc-icon {
    transition: transform 0.2s ease;
}
.perfil-banda__toggle[aria-expanded="true"] .acc-icon {
    transform: rotate(180deg);
}
.perfil-banda__signals {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-subtle);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 768px) {
    .perfil-banda__signals { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .perfil-banda__head {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }
    .perfil-banda__toggle {
        grid-column: 2;
        justify-self: start;
        padding-left: 0;
    }
    /* Sólo el Resumen de Inventarios: conservar acciones y lente dentro del móvil. */
    .beam-main:has(#perfilBanda) > .beam-top { flex-wrap: wrap; }
    .beam-main:has(#perfilBanda) > .beam-top .beam-top-actions { margin-left: auto; }
    #lenteValorToggle { max-width: 100%; white-space: normal; text-align: left; }
}
.perfil-banda__signal {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.perfil-banda__signal-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    font-weight: 600;
}
.perfil-banda__signal-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.perfil-banda__signal-desc {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.35;
}
.perfil-banda__veredicto {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-subtle);
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* ════════════════════════════════════════════════════════════
   Hallazgos "No aplicable a tu perfil" (C2 reframe en bajo_pedido)
   Tratamiento semántico: fondo neutro suave + borde punteado +
   badge gris. NO opacity sobre todo el bloque — legibilidad
   preservada (Decisión 4 ADR-071 + decisión Alonso 2026-05-14).
   ════════════════════════════════════════════════════════════ */
.hallazgo-no-aplica {
    background: rgba(108, 117, 125, 0.05);
    border: 1px dashed rgba(108, 117, 125, 0.4) !important;
    border-radius: 6px;
    padding: 10px 14px;
    position: relative;
}
[data-theme="light"] .hallazgo-no-aplica {
    background: rgba(108, 117, 125, 0.04);
}
.hallazgo-no-aplica .badge-no-aplica {
    display: inline-block;
    background: var(--text-secondary);
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}
.hallazgo-no-aplica .hallazgo-no-aplica__microcopy {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
    line-height: 1.4;
}
/* Suprime CTAs primarios y de peligro dentro de no-aplica */
.hallazgo-no-aplica .btn-primary,
.hallazgo-no-aplica .btn-danger,
.hallazgo-no-aplica .text-danger {
    color: var(--text-secondary) !important;
    background-color: transparent !important;
    border-color: rgba(108, 117, 125, 0.4) !important;
}

/* Resumen por intención (2026-06-16): hero de Ventas Netas + letreros de grupo.
   NO minimiza KPIs — solo le pone gafete al almacén. El letrero reusa el idiom
   de sección del kit DS (.beam-nav .group / .beam-side-context .lbl). */
.kpi-group-label {
    font: 600 10px/1 var(--font-display);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 16px 2px 8px;
}
.beam-kpi--hero { padding: 14px 22px; min-height: 0; }
.kpi-value--hero { font-size: 2rem; line-height: 1.1; font-weight: 600; }
/* Ícono de acento del hero: grande, al lado del número (no encima, no compite).
   Hereda el color de acento del módulo (.beam-kpi--ventas/compras → acc-icon). */
.hero-icon { width: 38px; height: 38px; flex: none; opacity: .9; }
.hero-comparativo { font-size: 12px; margin-top: 8px; color: var(--text-muted); }
.hero-comparativo .acc-icon { width: 13px; height: 13px; vertical-align: -1px; }

/* Consumo mensual (Ventas > Clientes): plegado de las 12 columnas de mes.
   Con los 12 meses visibles, Total / promedios / comparativo se salen de la
   pantalla y hay que desplazarse justo para leer lo que se presupuesta. El
   toggle "Ocultar meses" solo deja de PINTAR el detalle mensual — no
   re-consulta, no cambia ningun numero, y el Excel sigue llevando los meses. */
#cmTabla.cm-oculta-meses .cm-mes { display: none; }

/* Plegado: con los meses ocultos la tabla debe CABER, que es el punto del
   toggle. Con el padding normal se pasaba por ~26px en una pantalla de 1680
   (medido) y seguia scrolleando horizontalmente — el ajuste lo cierra sin
   apretar la tabla cuando los meses estan visibles. */
#cmTabla.cm-oculta-meses th,
#cmTabla.cm-oculta-meses td { padding-left: .35rem; padding-right: .35rem; }

/* Ocultar un bloque que lleva utilidades de display de Bootstrap (.d-flex y
   compania se declaran `!important`, asi que el `style.display` inline NO las
   vence). Selector con ID para ganar por especificidad, no por orden de carga. */
#pipAlcanceBloque.is-oculto { display: none !important; }

/* CxC/CxP: las entradas de Antigüedad conservan texto y orden en móvil. */
#antiguedadPills { flex-wrap: wrap; max-width: 100%; }

/* Resumen: multi-almacén en el filtro canónico, sin altura de select simple. */
#cloudInventarioResumen .cloud-context-warehouse select[multiple] { height: auto; min-height: 5.5rem; }
/* Calidad Compras: todas las subvistas siguen accesibles en anchos móviles. */
.compras-calidad-pills { max-width: 100%; flex-wrap: wrap; }