html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===================== Dashboard ===================== */
html, body {
    background: #f4f5f7;
    color: #1f2937;
}

/* Tarjetas de panel (DashboardLayout) estilo card */
.dashboard-canvas .e-panel {
    border: none !important;
    border-radius: 14px !important;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    overflow: hidden;
}

.dashboard-canvas .e-panel:hover {
    box-shadow: 0 6px 18px rgba(16, 24, 40, .10);
}

/* Encabezado de panel con degradado, contenido centrado verticalmente.
   El degradado va por defecto en .e-panel-header; un color por panel se aplica
   inline sobre .panel-header (que lo cubre). */
.dashboard-canvas .e-panel .e-panel-header {
    background: linear-gradient(90deg, #d24b46 0%, #a8302b 100%) !important;
    border-bottom: none !important;
    min-height: 46px;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
}

/* Sin padding propio en el panel: el espaciado lo da el contenedor de la página
   (.tablero-scroll) y el CellSpacing entre paneles. Así el contenido llega a los bordes. */
.dashboard-canvas .e-panel-container {
    padding: 0;
}

/* Banner de marca: degradado rojo, esquinas redondeadas, título blanco + ícono. */
.dashboard-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 20px;
    margin-top: 5px;
    margin-bottom: 8px;
    margin-right: 5px;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--jt-brand, #F01E29) 0%, var(--jt-brand-dark, #900A0B) 100%);
    box-shadow: 0 2px 10px rgba(144, 10, 11, .22);
}

.dashboard-title {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* Ícono del título dentro de un chip translúcido (como la referencia). */
.dashboard-title-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    background: rgba(255, 255, 255, .18);
    border-radius: 12px;
}

.dashboard-title-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dashboard-title h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    font-family: var(--jt-font-display, 'Funnel Display', 'Segoe UI', system-ui);
}

.dashboard-source {
    font-size: .82rem;
    color: rgba(255, 255, 255, .85);
}

.dashboard-source strong { color: #fff; }

.dashboard-process {
    display: block;
    font-size: .76rem;
    color: rgba(255, 255, 255, .72);
    margin-top: 1px;
}

.badge-demo {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    background: #f59e0b;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    vertical-align: middle;
}

.dashboard-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Botones de acción redondos (solo ícono). El texto vive en el tooltip. */
.dashboard-actions .e-btn.e-round {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

.dashboard-actions .e-btn.e-round .e-btn-icon {
    font-size: 1.05rem;
    margin: 0;
}

/* Botones: fondo blanco, ícono rojo de marca. Resaltan sobre el banner rojo. */
.dashboard-actions .e-btn.jt-toolbar-btn,
.dashboard-actions .e-btn.jt-toolbar-btn-primary,
.dashboard-actions .e-btn.e-primary.jt-toolbar-btn-primary {
    background: #fff;
    border: 1px solid #fff;
    color: var(--jt-brand, #F01E29);
}

.dashboard-actions .e-btn.jt-toolbar-btn:hover,
.dashboard-actions .e-btn.jt-toolbar-btn:focus,
.dashboard-actions .e-btn.jt-toolbar-btn-primary:hover,
.dashboard-actions .e-btn.e-primary.jt-toolbar-btn-primary:hover {
    background: var(--jt-gray-bg, #F8F8F8);
    border-color: #fff;
    color: var(--jt-brand-dark, #900A0B);
}

/* Guardar: un poco más de énfasis (sombra) para que siga leyéndose como CTA. */
.dashboard-actions .e-btn.jt-toolbar-btn-primary,
.dashboard-actions .e-btn.e-primary.jt-toolbar-btn-primary {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

.dashboard-saved {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    padding: 6px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: .85rem;
}

.dashboard-canvas {
    min-height: 70vh;
    position: relative; /* ancla el overlay de estado vacío / carga */
}

/* Mientras Syncfusion calcula posiciones, ocultamos SOLO la grilla (opacity:0, no display:none,
   para que siga siendo medible) y la revelamos con un fade al terminar. Evita ver el
   "amontonamiento" inicial de los paneles. */
.dashboard-canvas .e-dashboardlayout {
    transition: opacity .25s ease;
}

.dashboard-canvas.is-positioning .e-dashboardlayout {
    opacity: 0;
}

/* ===== Efecto "cambio de página" al refrescar ===== */
/* Toda la ventana del tablero (toolbar + canvas) sale y entra como una página nueva: la actual
   se desliza a la izquierda con fade, y la nueva entra desde la derecha (patrón "shared axis X").
   Se anima el .dashboard-view-inner; el .dashboard-view lo RECORTA (overflow:hidden SOLO durante
   el swap) para que el deslizamiento no genere scroll horizontal. El transform es TEMPORAL y su
   frame final es identidad → no altera el cálculo de posiciones de Syncfusion (que además se
   recalcula con el resize de jtRefreshCharts al terminar). */
/* El wrapper DEBE ocupar todo el ancho: si el contenedor del shell es flex, sin esto queda como
   un ítem que se encoge al contenido y el SfDashboardLayout mide un ancho chico → paneles
   amontonados. width:100% + flex-basis:100% + min-width:0 cubren padre block y padre flex. */
.dashboard-view {
    position: relative;
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
}

.dashboard-view-inner { width: 100%; }

/* Recorte solo mientras dura la transición (fuera del swap queda visible, para no cortar
   tooltips/menús que se salen del área). */
.dashboard-view.is-swapping { overflow: hidden; }

.dashboard-view.is-swapping .dashboard-view-inner {
    animation: jt-page-swap .5s cubic-bezier(.4, 0, .2, 1) both;
    will-change: transform, opacity;
}

@keyframes jt-page-swap {
    0%   { opacity: 1; transform: translateX(0); }
    42%  { opacity: 0; transform: translateX(-7%); }   /* la página actual sale por la izquierda */
    43%  { opacity: 0; transform: translateX(7%); }     /* la nueva entra desde la derecha */
    100% { opacity: 1; transform: translateX(0); }
}

/* Ícono del botón refrescar girando mientras dura la operación. */
.dashboard-actions .e-btn.is-refreshing .e-btn-icon,
.dashboard-actions .e-btn.is-refreshing .e-icons::before {
    display: inline-block;
    animation: jt-refresh-spin .55s cubic-bezier(.4, 0, .2, 1);
}

@keyframes jt-refresh-spin {
    to { transform: rotate(360deg); }
}

/* Accesibilidad: sin deslizamiento si el usuario pidió menos movimiento — solo un fade sobrio. */
@media (prefers-reduced-motion: reduce) {
    .dashboard-view.is-swapping .dashboard-view-inner { animation: jt-page-fade .3s ease both; }
    .dashboard-actions .e-btn.is-refreshing .e-btn-icon,
    .dashboard-actions .e-btn.is-refreshing .e-icons::before { animation: none; }
    @keyframes jt-page-fade { 0% { opacity: 1; } 50% { opacity: .35; } 100% { opacity: 1; } }
}

.dashboard-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #6b7280;
    font-size: .9rem;
}

/* Estado vacío: tablero sin paneles. Se superpone al layout (vacío) y centra el CTA. */
.dashboard-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    color: var(--jt-gray-mid, #3D3D3D);
    pointer-events: none; /* deja pasar el mouse al layout; el botón lo rehabilita */
}

.dashboard-empty-icon {
    font-size: 2.6rem;
    line-height: 1;
    opacity: .85;
}

.dashboard-empty p {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.dashboard-empty .e-btn.jt-empty-add {
    pointer-events: auto; /* el botón sí recibe clics */
    background: var(--jt-brand, #F01E29);
    border-color: var(--jt-brand, #F01E29);
    color: #fff;
}

.dashboard-empty .e-btn.jt-empty-add:hover {
    background: var(--jt-brand-dark, #900A0B);
    border-color: var(--jt-brand-dark, #900A0B);
}

/* Mensaje cuando el usuario no tiene permiso para ver el dashboard. */
.dashboard-denied {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 50vh;
    color: var(--jt-gray-mid, #3D3D3D);
    text-align: center;
}

.dashboard-denied .e-icons {
    font-size: 2.4rem;
    color: var(--jt-brand, #F01E29);
}

.dashboard-denied p {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

/* El SfDashboardLayout no fija altura propia en este setup; sin un piso, su área de
   arrastre/drop queda en 0 y no se pueden mover paneles hacia abajo ("llego al límite").
   min-height (no height) da área sin topar: Syncfusion crece por encima al arrastrar. */
.dashboard-canvas .e-dashboardlayout {
    min-height: 70vh;
}

/* Cabecera de cada panel */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 14px;
    font-weight: 600;
}

.panel-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
}

.panel-header-icon {
    font-size: 1.1rem;
    line-height: 1;
    flex: 0 0 auto;
}

.panel-header-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    color: #fff;
    opacity: .85;
    padding: 4px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.panel-header-btn:hover {
    background: rgba(255,255,255,.18);
    opacity: 1;
    color: #fff;
}

/* Cuerpo del panel: que el contenido ocupe todo el alto disponible.
   container-type habilita unidades cqw/cqh para texto responsive al panel. */
.panel-body {
    width: 100%;
    height: 100%;
    overflow: auto;
    container-type: inline-size;
    container-name: panel;
}

.panel-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    min-height: 80px;
    color: #6b7280;
    font-size: .9rem;
    text-align: center;
    padding: 12px;
}

.panel-error { color: #b91c1c; }

.panel-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #cbd5e1;
    border-top-color: #2563eb;
    border-radius: 50%;
    display: inline-block;
    animation: panel-spin .7s linear infinite;
}

@keyframes panel-spin { to { transform: rotate(360deg); } }

/* KPI */
/* container-type:size + cqmin: el texto escala con el lado MENOR del panel (igual que la
   tarjeta DualPeriod), así llena el espacio disponible sin desbordar cuando el panel es bajo. */
.kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1cqmin;            /* casi sin separación: el valor manda */
    padding: 3cqmin;        /* menos margen perdido */
    container-type: size;
    container-name: kpi;
}

.kpi-icon {
    width: clamp(28px, 18cqmin, 64px);
    height: clamp(28px, 18cqmin, 64px);
    border-radius: 50%;
    background: #eef1f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(.9rem, 10cqmin, 1.8rem);
    margin-bottom: 2px;
}

.kpi-value {
    font-size: clamp(1.3rem, 42cqmin, 5rem);
    font-weight: 800;
    color: #1f2937;
    line-height: 1.05;
    letter-spacing: -.02em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpi-label {
    background: transparent;
    font-size: clamp(.5rem, 5cqmin, .8rem);
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Comparativo de medidas */
.cmp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    height: 100%;
    padding: 12px 14px;
}

.cmp-row {
    display: grid;
    grid-template-columns: minmax(80px, 28%) 1fr auto;
    align-items: center;
    gap: 10px;
}

.cmp-name {
    font-size: clamp(.7rem, 4cqw, .9rem);
    font-weight: 600;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmp-track {
    background: #eef2f7;
    border-radius: 6px;
    height: 18px;
    overflow: hidden;
}

.cmp-bar {
    height: 100%;
    border-radius: 6px;
    min-width: 2px;
    transition: width .3s ease;
}

.cmp-val {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: clamp(.72rem, 4.5cqw, .95rem);
    color: #111827;
    white-space: nowrap;
}

.cmp-delta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
    font-weight: 700;
}

.cmp-delta.pos { color: #047857; }
.cmp-delta.neg { color: #b91c1c; }
.cmp-pct {
    padding: 1px 8px;
    border-radius: 10px;
    color: #fff;
    font-size: .8rem;
}
.cmp-delta.pos .cmp-pct { background: #047857; }
.cmp-delta.neg .cmp-pct { background: #b91c1c; }

/* Tarjeta comparativa de 2 periodos */
.dual {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.dual-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: #fdecec;
    padding: 16px 12px;
    margin: 0 0 8px;
}

.dual-col { text-align: center; overflow: hidden; }

.dual-cap {
    font-size: clamp(.55rem, 3cqw, .72rem);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8a8f98;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.dual-val {
    font-size: clamp(.7rem, 4.6cqw, 1.5rem);
    font-weight: 800;
    color: #c0392b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dual-ring {
    flex: 1 1 auto;
    min-height: 90px;
    position: relative;
    /* Igual que .arc-ring-host: contenedor de tamaño para que el texto use cqmin. */
    container-type: size;
    container-name: ring;
}

.dual-pct {
    font-size: clamp(1.4rem, 16cqw, 3rem);
    font-weight: 800;
}

.dual-status {
    text-align: center;
    font-size: clamp(.65rem, 4cqw, .9rem);
    font-weight: 600;
    color: #6b7280;
    padding: 2px 0 10px;
}

/* Anillos de progreso (estilo Apple Watch): SVG concéntrico + leyenda al lado. */
.rings {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    width: 100%;
    padding: 10px 12px;
    container-type: inline-size;
}

.rings-chart {
    flex: 0 0 auto;
    height: 100%;
    max-height: 220px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.rings-svg { width: 100%; height: 100%; max-height: 100%; display: block; }

.rings-legend {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: auto;
}

.rings-legend-item {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    align-items: baseline;
    gap: 4px 8px;
    font-size: clamp(.72rem, 3.5cqw, .9rem);
}

.rings-dot { width: 11px; height: 11px; border-radius: 50%; align-self: center; }

.rings-name {
    color: var(--jt-gray-dark, #282828);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.rings-val {
    font-variant-numeric: tabular-nums;
    color: var(--jt-gray-mid, #3D3D3D);
    font-size: .85em;
    white-space: nowrap;
}

.rings-pct {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    color: var(--jt-gray-dark, #282828);
    white-space: nowrap;
}

/* En paneles angostos, apila anillos arriba y leyenda abajo. */
@container (max-width: 320px) {
    .rings { flex-direction: column; }
}

/* Gauges (radial / lineal) */
.gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    gap: 4px;
    padding: 6px;
}

.gauge > .e-control {
    flex: 1;
    min-height: 0;
    width: 100%;
}

.gauge-value {
    font-size: clamp(1rem, 10cqw, 1.8rem);
    font-weight: 700;
    color: #1d4ed8;
}

/* Valor central del velocímetro (anotación) — azul y grande, como el demo. */
.gauge-speedo-value {
    color: #2563eb;
    font-weight: 800;
    font-size: clamp(1rem, 9cqmin, 2rem);
    white-space: nowrap;
    text-align: center;
}

.gauge-label {
    font-size: clamp(.62rem, 4cqw, .85rem);
    color: #6b7280;
    text-align: center;
}

/* Anillo SVG propio (ArcRing): usado por ArcGauge y la tarjeta DualPeriod.
   Se posiciona ABSOLUTO para llenar la caja real del contenedor (su padre debe ser
   position:relative). Así evita la trampa de flexbox donde height:100% no resuelve. */
.arc-ring {
    position: absolute;
    inset: 0;
}

/* Tooltip de los gráficos (template propio): con Template, Syncfusion NO dibuja su fondo
   por defecto, así que el .chart-tt debe ser una píldora oscura autónoma (si no, el texto
   blanco quedaba invisible sobre el dashboard claro → "se perdían" los tooltips). */
.chart-tt {
    display: inline-block;
    background: #1f2937;
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 5px 9px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* Contenedor para el anillo cuando va junto a otra cosa (ej. la etiqueta del ArcGauge). */
.arc-ring-host {
    position: relative;
    flex: 1 1 auto;
    min-height: 90px;
    width: 100%;
    /* container-type:size habilita cqmin: el texto escala con el lado MENOR (igual que el
       anillo, que se ajusta al lado menor por preserveAspectRatio="meet"). Evita que el
       texto crezca con el ancho cuando el panel es ancho y bajo. */
    container-type: size;
    container-name: ring;
}

.arc-ring-svg {
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: block;
}

.arc-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.05;
}

.arc-ring-value {
    /* cqmin (no cqw): escala con el lado menor del anillo, no con el ancho del panel. */
    font-size: clamp(1.1rem, 22cqmin, 3.2rem);
    font-weight: 800;
}

.arc-ring-sub {
    margin-top: 4px;
    font-size: clamp(.6rem, 7cqmin, .95rem);
    font-weight: 700;
    color: #64748b;
}

/* Comparativo por periodo (tabla A vs B) */
.period {
    height: 100%;
    overflow: auto;
    padding: 4px;
}

.period-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

.period-table th,
.period-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #eef2f7;
    text-align: left;
    white-space: nowrap;
}

.period-table th {
    position: sticky;
    top: 0;
    background: #f8fafc;
    font-weight: 600;
    color: #374151;
    z-index: 1;
}

.period-table td.num,
.period-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.period-table tfoot td {
    border-top: 2px solid #d1d5db;
    border-bottom: none;
    font-weight: 700;
    background: #f8fafc;
}

.period-table .pos { color: #047857; }
.period-table .neg { color: #b91c1c; }

/* Selector de ícono del panel */
.icon-field {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.icon-field .form-select {
    flex: 1 1 160px;
    max-width: 220px;
}

.icon-preview {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    border: 1px solid var(--jt-gray-light, #D8D8D8);
    border-radius: 8px;
    background: var(--jt-gray-bg, #F8F8F8);
    color: #9ca3af;
}

.editor-error {
    flex-basis: 100%;
    color: var(--jt-danger, #dc3545);
    font-size: .75rem;
}

.req {
    color: var(--jt-danger, #dc3545);
    font-weight: 700;
}

/* Editor de panel */
.editor-grid {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: 12px 14px;
}

.editor-grid > label {
    font-weight: 600;
    font-size: .85rem;
}

.editor-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.editor-footer .spacer { flex: 1; }

.editor-hint {
    display: block;
    margin-top: 4px;
    color: #6b7280;
    font-size: .72rem;
}

.hdr-color {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hdr-color input[type=color] {
    width: 44px;
    height: 30px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
}

.hdr-color-reset {
    border: 1px solid #d1d5db;
    background: #fff;
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: .8rem;
    color: #374151;
}

.hdr-color-reset:hover { background: #f3f4f6; }

.editor-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: .85rem;
}

.editor-checks {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.editor-check input { width: auto; }

.combo-types {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.combo-type-row {
    display: grid;
    grid-template-columns: 1fr 120px auto;
    align-items: center;
    gap: 8px;
}

.combo-axis {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .76rem;
    white-space: nowrap;
    font-weight: 400;
}

.combo-axis input { width: auto; }

.combo-type-name {
    font-size: .82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editor-filters {
    grid-column: 1 / -1;
}

/* El diálogo del editor no debe pasarse del viewport en pantallas chicas. */
.panel-editor-dialog { max-width: 95vw; max-height: 95vh; }

/* El contenido del editor scrollea dentro del diálogo (que ahora es 90%×90% fijo). */
.panel-editor-dialog .e-dlg-content { overflow: auto; }

/* ===== Constructor de valores (fórmula de chips) ===== */
.editor-value,
.editor-side-value { grid-column: 1 / -1; }

.vexpr {
    border: 1px solid var(--jt-gray-light, #D8D8D8);
    border-radius: 8px;
    background: var(--jt-white, #fff);
    padding: 12px;
}

.vexpr-labelrow {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.vexpr-lbl {
    font-weight: 700;
    font-size: var(--jt-font-size-sm, .72rem);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--jt-gray-mid, #3D3D3D);
}

/* La fórmula: = chip op chip op chip … ＋ */
.vexpr-formula {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    background: var(--jt-gray-bg, #F8F8F8);
    border-radius: 8px;
    min-height: 44px;
}

.vexpr-eq {
    font-weight: 800;
    color: var(--jt-brand, #F01E29);
    font-size: 1.1rem;
    padding-right: 2px;
}

.vexpr-formula-empty { color: #9ca3af; font-size: .85rem; font-style: italic; }

.vexpr-op-sym {
    font-weight: 800;
    color: var(--jt-gray-mid, #3D3D3D);
    font-size: 1rem;
    padding: 0 2px;
}

/* Chip-término: botón redondeado. Medida = azulado; número = ámbar; activo = rojo de marca.
   Arrastrable (grab) para reordenar. */
.vexpr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #c7d2fe;
    background: #eef2ff;
    color: #3730a3;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: .85rem;
    font-weight: 700;
    cursor: grab;
    transition: transform .06s ease, box-shadow .12s ease, opacity .1s ease;
}

.vexpr-chip.is-dragging,
.vexpr-paren.is-dragging { opacity: .4; }

.vexpr-chip.is-const {
    border-color: #fcd9a8;
    background: #fff7ed;
    color: #9a3412;
}

.vexpr-chip:hover { box-shadow: 0 2px 6px rgba(16, 24, 40, .12); }
.vexpr-chip:active { transform: translateY(1px); }

.vexpr-chip.is-active {
    border-color: var(--jt-brand, #F01E29);
    background: var(--jt-brand, #F01E29);
    color: #fff;
    box-shadow: 0 2px 8px rgba(240, 30, 41, .3);
}

.vexpr-chip-filter { font-size: .7rem; opacity: .8; }

/* Chips de paréntesis: grises, monoespaciados, para leerlos como agrupadores. */
.vexpr-paren {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 30px;
    border: 1px solid var(--jt-gray-light, #D8D8D8);
    background: #fff;
    color: var(--jt-gray-dark, #282828);
    border-radius: 6px;
    padding: 0 8px;
    font-weight: 800;
    font-size: 1.05rem;
    cursor: pointer;
}

.vexpr-paren { cursor: grab; }
.vexpr-paren:hover { background: var(--jt-gray-bg, #F8F8F8); }

/* Botones de reordenar series (◀ ▶) en el encabezado de cada serie. */
.side-move { display: inline-flex; gap: 2px; margin-left: auto; }

.side-move-btn {
    border: 1px solid var(--jt-gray-light, #D8D8D8);
    background: #fff;
    color: var(--jt-gray-mid, #3D3D3D);
    border-radius: 5px;
    width: 24px;
    height: 22px;
    cursor: pointer;
    font-size: .72rem;
    line-height: 1;
    padding: 0;
}

.side-move-btn:hover:not([disabled]) { background: var(--jt-gray-bg, #F8F8F8); border-color: var(--jt-gray-mid, #3D3D3D); }
.side-move-btn[disabled] { opacity: .4; cursor: default; }

/* Con .side-move empujando a la derecha, el ✕ de quitar ya no necesita margin-left auto. */
.editor-side-head .side-move + .calc-del { margin-left: 6px; }

.editor-side-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.vexpr-paren.is-active {
    border-color: var(--jt-brand, #F01E29);
    background: var(--jt-brand, #F01E29);
    color: #fff;
}

/* Grupo de botones de agregar (término / paréntesis) al final de la fórmula. */
.vexpr-add-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
    padding-left: 8px;
    border-left: 1px solid var(--jt-gray-light, #D8D8D8);
}

.vexpr-chip-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px dashed var(--jt-brand, #F01E29);
    background: #fff;
    color: var(--jt-brand, #F01E29);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.vexpr-chip-add:hover { background: #fdecec; }

.vexpr-paren-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px dashed var(--jt-gray-light, #D8D8D8);
    background: #fff;
    color: var(--jt-gray-mid, #3D3D3D);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

.vexpr-paren-add:hover { background: var(--jt-gray-bg, #F8F8F8); border-color: var(--jt-gray-mid, #3D3D3D); }

/* Aviso de paréntesis desbalanceados. */
.vexpr-warn {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fcd9a8;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: .78rem;
    font-weight: 600;
}

.vexpr-paren-note {
    align-self: center;
    color: #6b7280;
    font-size: .8rem;
    font-style: italic;
}

/* Panel de configuración del término (se abre al pulsar su chip). */
.vexpr-config {
    margin-top: 10px;
    border: 1px solid var(--jt-gray-light, #D8D8D8);
    border-top: 3px solid var(--jt-brand, #F01E29);
    border-radius: 8px;
    background: var(--jt-white, #fff);
    padding: 12px;
}

.vexpr-config-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.vexpr-cfg-field { display: flex; flex-direction: column; gap: 3px; }
.vexpr-cfg-field > label {
    font-size: var(--jt-font-size-xs, .68rem);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--jt-gray-mid, #3D3D3D);
    font-weight: 700;
}
.vexpr-cfg-field .form-select,
.vexpr-cfg-field .form-control { min-width: 120px; }
.vexpr-cfg-grow { flex: 1 1 200px; }
.vexpr-cfg-grow .form-select { width: 100%; }

.vexpr-cfg-del {
    border: 1px solid var(--jt-gray-light, #D8D8D8);
    background: #fff;
    color: #9ca3af;
    border-radius: 6px;
    padding: 7px 9px;
    cursor: pointer;
}
.vexpr-cfg-del:hover { color: var(--jt-brand, #F01E29); border-color: var(--jt-brand, #F01E29); }

.vexpr-cfg-filters {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--jt-gray-light, #D8D8D8);
}

.vexpr-filters-cap {
    display: block;
    font-size: var(--jt-font-size-xs, .68rem);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #8a8f98;
    font-weight: 700;
    margin-bottom: 4px;
}

.vexpr-config-foot { display: flex; justify-content: flex-end; margin-top: 10px; }

.vexpr-done {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: var(--jt-brand, #F01E29);
    color: #fff;
    border-radius: 6px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
}
.vexpr-done:hover { background: var(--jt-brand-dark, #900A0B); }

/* Ejemplo del valor calculado (en vivo). */
.vexpr-preview {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--jt-gray-light, #D8D8D8);
}

.vexpr-preview-lbl {
    font-size: var(--jt-font-size-xs, .68rem);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8a8f98;
    font-weight: 700;
}

.vexpr-preview-val {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--jt-gray-dark, #282828);
    letter-spacing: -.01em;
}

.vexpr-preview-hint {
    margin-left: auto;
    font-size: .72rem;
    color: #9ca3af;
    font-style: italic;
}

/* Comparativos: bloque a ancho completo de la grilla del editor. */
.editor-sides-wrap,
.editor-side-list {
    grid-column: 1 / -1;
}

.editor-sides-title {
    font-weight: 700;
    font-size: .9rem;
    color: #111827;
    margin-bottom: 8px;
}

/* Lado A | Lado B (o las series) en dos columnas 50/50. */
.editor-sides {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}

/* En pantallas angostas se apilan en una sola columna. */
@media (max-width: 760px) {
    .editor-sides { grid-template-columns: 1fr; }
}

.editor-side {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fafafa;
    min-width: 0; /* permite que el contenido (filtros) se encoja sin desbordar */
}

/* Acento de color por lado para distinguir A de B de un vistazo. */
.editor-side-a { border-top: 3px solid #2563eb; }
.editor-side-b { border-top: 3px solid #d97706; }

.editor-side-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: .82rem;
    color: #1f2937;
    margin-bottom: 8px;
}

.side-role {
    font-weight: 500;
    font-size: .72rem;
    color: #6b7280;
}

.side-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #6b7280;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}

.side-badge-a { background: #2563eb; }
.side-badge-b { background: #d97706; }

/* El botón "✕" de quitar serie se empuja a la derecha del encabezado. */
.editor-side-head .calc-del { margin-left: auto; }

/* Campos calculados */
.calc-intro { font-size: .85rem; color: #4b5563; margin: 0 0 12px; }
.calc-empty { color: #6b7280; font-size: .85rem; padding: 8px 0; }

.calc-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: #fafafa;
}

.calc-row {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    align-items: start;
    gap: 10px;
    margin-bottom: 8px;
}

.calc-row:last-child { margin-bottom: 0; }
.calc-row > label { font-weight: 600; font-size: .82rem; padding-top: 6px; }
.calc-dax { font-family: Consolas, "Courier New", monospace; font-size: .82rem; }

.calc-del {
    border: none; background: transparent; color: #9ca3af; cursor: pointer;
    font-size: .9rem; padding: 4px 6px;
}
.calc-del:hover { color: #ef4444; }

.calc-add {
    border: 1px dashed #9ca3af; border-radius: 6px; background: #fff;
    padding: 8px 12px; cursor: pointer; font-size: .85rem; color: #374151; width: 100%;
}
.calc-add:hover { background: #f3f4f6; }

.calc-validate { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.calc-test {
    border: 1px solid #d1d5db; background: #fff; border-radius: 6px;
    padding: 4px 12px; cursor: pointer; font-size: .8rem; color: #374151;
}
.calc-test:hover:not([disabled]) { background: #f3f4f6; }
.calc-test[disabled] { opacity: .6; cursor: default; }
.calc-ok { color: #047857; font-size: .8rem; font-weight: 600; }
.calc-err {
    color: #b91c1c; font-size: .78rem; max-width: 360px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.calc-help { margin-top: 12px; font-size: .8rem; color: #4b5563; }
.calc-help summary { cursor: pointer; font-weight: 600; }
.calc-help code { background: #f3f4f6; padding: 1px 5px; border-radius: 4px; font-size: .78rem; }
.calc-help ul { margin: 8px 0; padding-left: 18px; }
.calc-help li { margin-bottom: 4px; }

.editor-filters > label {
    font-weight: 600;
    font-size: .85rem;
    display: block;
    margin-bottom: 6px;
}

/* Barra de filtros (slicers) */
.filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    margin-bottom: 14px;
}

.filter-bar-label {
    font-weight: 600;
    font-size: .85rem;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 4px 6px 4px 10px;
}

.filter-chip-name {
    font-size: .8rem;
    font-weight: 600;
    color: #1d4ed8;
}

.filter-chip-remove {
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    font-size: .8rem;
    padding: 0 2px;
}

.filter-chip-remove:hover { color: #ef4444; }

.filter-add {
    border: 1px dashed #9ca3af;
    border-radius: 6px;
    padding: 6px 10px;
    background: #fff;
    font-size: .82rem;
    color: #374151;
    cursor: pointer;
}

/* Chip de valor dinámico (ej. "📅 Mes actual"): se recalcula cada mes. */
.filter-dyn-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    padding: 3px 8px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #3730a3;
    font-size: .78rem;
    white-space: nowrap;
}

.filter-dyn-remove {
    cursor: pointer;
    color: #6366f1;
    font-size: .72rem;
}

.filter-dyn-remove:hover { color: #ef4444; }

.filter-dyn-add {
    border-style: dotted;
    color: #4338ca;
}

/* Barra de drill-down del gráfico */
/* Gráfico con barra de drill: columna flex para que la barra tome su alto y el
   gráfico ocupe el resto (si no, el SfChart usa 100% y la barra corta el eje X). */
.chart-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chart-fill {
    flex: 1 1 auto;
    min-height: 0; /* permite que el gráfico se encoja dentro del flex y no desborde */
    position: relative;
}

.drill-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 2px 4px 6px;
    font-size: .78rem;
}

.drill-crumb {
    border: none;
    background: transparent;
    color: #1d4ed8;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .78rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.drill-crumb:hover:not([disabled]) { background: #eef2ff; }
.drill-crumb[disabled] { color: #6b7280; cursor: default; }
.drill-sep { color: #9ca3af; }
.drill-hint { color: #9ca3af; font-style: italic; margin-left: 4px; }