/* /Components/MiSesion/PreferenciasPanel.razor.rz.scp.css */
.loading-container[b-3bp1jta3l8] {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.preferencias-item[b-3bp1jta3l8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.preferencias-item-text[b-3bp1jta3l8] {
    flex: 1;
    min-width: 0;
}

.preferencias-label[b-3bp1jta3l8] {
    display: block;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    cursor: pointer;
}

.preferencias-description[b-3bp1jta3l8] {
    font-size: var(--fs-caption);
    color: var(--text-muted);
    margin: 0;
}

.preferencias-switch[b-3bp1jta3l8] {
    flex-shrink: 0;
    margin: 0;
    padding-top: 0.125rem;
}

.preferencias-switch .form-check-input[b-3bp1jta3l8] {
    width: 2.5rem;
    height: 1.25rem;
    cursor: pointer;
}

.preferencias-saving[b-3bp1jta3l8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: var(--fs-caption);
    color: var(--text-muted);
}

@media (max-width: 480px) {
    .preferencias-item[b-3bp1jta3l8] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .preferencias-switch[b-3bp1jta3l8] {
        align-self: flex-start;
    }
}
/* /Components/MiSesion/SesionesPanel.razor.rz.scp.css */
.loading-container[b-k0k638k2gq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    color: var(--text-muted);
}

.sesiones-card[b-k0k638k2gq] {
    background: white;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.sesiones-card-header[b-k0k638k2gq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem 0.5rem 1.25rem;
}

.sesiones-card-title[b-k0k638k2gq] {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin: 0;
}

.sesiones-badge[b-k0k638k2gq] {
    background: var(--color-primary);
    color: white;
    font-size: var(--fs-overline);
    font-weight: var(--fw-semibold);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    line-height: 1.3;
}

.sesiones-list[b-k0k638k2gq] {
    padding: 0;
}

.sesion-item[b-k0k638k2gq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #f0f0f0;
}

.sesion-item-actual[b-k0k638k2gq] {
    background: #f8fafc;
}

.sesion-datos[b-k0k638k2gq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
    width: 100%;
}

.sesion-actual-badge[b-k0k638k2gq] {
    grid-column: 1 / -1;
    display: inline-flex;
    align-self: flex-start;
    background: var(--color-primary);
    color: white;
    font-size: var(--fs-overline);
    font-weight: var(--fw-semibold);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sesion-info[b-k0k638k2gq] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.sesion-label[b-k0k638k2gq] {
    font-size: var(--fs-overline);
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sesion-value[b-k0k638k2gq] {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
}

.sesion-btn[b-k0k638k2gq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 1.25rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid #dc3545;
    background: white;
    color: #dc3545;
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: all 0.15s ease;
}

.sesion-btn:hover:not(:disabled)[b-k0k638k2gq] {
    background: #dc3545;
    color: white;
}

.sesion-btn:disabled[b-k0k638k2gq] {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .sesiones-card-header[b-k0k638k2gq] {
        padding: 0.875rem 1rem 0.5rem 1rem;
    }

    .sesion-item[b-k0k638k2gq] {
        padding: 0.625rem 1rem;
        gap: 0.75rem;
    }
}
/* /Components/MobileBottomNav.razor.rz.scp.css */
.mobile-bottom-nav[b-jr5vdh71je] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 180;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    height: calc(4rem + env(safe-area-inset-bottom));
    padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom));
    background: #ffffff;
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.12);
}

[b-jr5vdh71je] .mobile-bottom-nav-link,
.mobile-bottom-nav-button[b-jr5vdh71je] {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.2rem 0.1rem;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    color: #9aa3ad;
    text-decoration: none;
    font-size: var(--fs-label);
    font-weight: var(--fw-semibold);
    line-height: 1.1;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

[b-jr5vdh71je] .mobile-bottom-nav-link:hover,
.mobile-bottom-nav-button:hover[b-jr5vdh71je] {
    color: var(--bottom-nav-active);
    background: var(--blue-soft);
}

[b-jr5vdh71je] .mobile-bottom-nav-link.active {
    color: var(--bottom-nav-active);
}

[b-jr5vdh71je] .mobile-bottom-nav-link.active::before {
    content: "";
    position: absolute;
    top: -0.35rem;
    width: 2rem;
    height: 0.18rem;
    border-radius: 999px;
    background: var(--bottom-nav-active);
}

.mobile-bottom-nav-icon[b-jr5vdh71je] {
    font-size: 1.1rem;
    line-height: 1;
}

.mobile-bottom-nav-text[b-jr5vdh71je] {
    white-space: nowrap;
}

@media (min-width: 641px) {
    .mobile-bottom-nav[b-jr5vdh71je] {
        display: none;
    }
}
/* /Components/Panel/ArticulosFiltrosBar.razor.rz.scp.css */
.art-bar[b-4ktz7q5dgl] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.art-bar-titulo-row[b-4ktz7q5dgl] {
    display: flex;
    align-items: center;
    margin-bottom: 0.15rem;
}

.art-bar-titulo[b-4ktz7q5dgl] {
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
}

.art-bar-acciones[b-4ktz7q5dgl] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.art-buscador[b-4ktz7q5dgl] {
    flex: 1 1 auto;
    min-width: 0;
}

.art-buscador .search-icon[b-4ktz7q5dgl] {
    font-size: var(--fs-body);
}

.art-buscador .search-input[b-4ktz7q5dgl] {
    height: 44px;
    font-size: var(--fs-body-sm);
}

.art-filtros-btn[b-4ktz7q5dgl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-shrink: 0;
    height: 44px;
    padding: 0 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: #fff;
    color: var(--text-primary);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.art-filtros-btn i[b-4ktz7q5dgl] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.art-filtros-btn:hover[b-4ktz7q5dgl] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.art-filtros-btn:hover i[b-4ktz7q5dgl] {
    color: var(--color-primary);
}

.art-filtros-btn--activo[b-4ktz7q5dgl],
.art-filtros-btn--abierto[b-4ktz7q5dgl] {
    background: var(--blue-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.art-filtros-btn--activo i[b-4ktz7q5dgl],
.art-filtros-btn--abierto i[b-4ktz7q5dgl] {
    color: var(--color-primary);
}

.art-panel[b-4ktz7q5dgl] {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    margin-top: 0.15rem;
    padding: 1rem 1rem 1.1rem;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

.art-panel-seccion[b-4ktz7q5dgl] {
    padding-bottom: 1.15rem;
    border-bottom: 1px solid var(--border-color);
}

.art-panel-seccion--ultima[b-4ktz7q5dgl] {
    padding-bottom: 0;
    border-bottom: none;
}

.art-panel-titulo[b-4ktz7q5dgl] {
    margin: 0 0 0.5rem;
    font-size: var(--fs-overline);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.art-switch[b-4ktz7q5dgl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.art-switch-texto[b-4ktz7q5dgl] {
    min-width: 0;
}

.art-switch-label[b-4ktz7q5dgl] {
    display: block;
    margin: 0;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    cursor: pointer;
}

.art-switch-hint[b-4ktz7q5dgl] {
    margin: 0.15rem 0 0;
    font-size: var(--fs-label);
    color: var(--text-muted);
}

.art-switch-control[b-4ktz7q5dgl] {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.art-switch-control .form-check-input[b-4ktz7q5dgl] {
    width: 2.5rem;
    height: 1.25rem;
    margin: 0;
    cursor: pointer;
}

.art-jerarquia[b-4ktz7q5dgl] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.art-jerarquia-nivel[b-4ktz7q5dgl] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.art-jerarquia-label[b-4ktz7q5dgl] {
    margin: 0;
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
}

.art-orden[b-4ktz7q5dgl]  .list-item-header-sucursal-controls {
    flex-wrap: wrap;
    gap: 0.4rem;
}

.art-orden[b-4ktz7q5dgl]  .sort-label {
    flex: 0 1 auto;
    justify-content: flex-start;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: #f8fafc;
}

.art-orden[b-4ktz7q5dgl]  .sort-label i,
.art-orden[b-4ktz7q5dgl]  .sort-label--currency {
    font-size: var(--fs-body-sm);
}

.art-orden[b-4ktz7q5dgl]  .sort-label--active {
    background: var(--blue-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Leyenda informativa: bajo peso visual, no se confunde con controles */
.art-leyenda[b-4ktz7q5dgl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.9rem;
    margin-top: 0.25rem;
    margin-bottom: 0.15rem;
    padding: 0.45rem 0.65rem;
    border-radius: var(--border-radius-sm);
    background: #f3f5f7;
    font-size: var(--fs-overline);
    font-weight: var(--fw-regular);
    color: #9aa5b1;
    pointer-events: none;
    user-select: none;
}

.art-leyenda-item[b-4ktz7q5dgl] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.art-leyenda-item i[b-4ktz7q5dgl] {
    width: 0.85rem;
    text-align: center;
    opacity: 0.7;
    font-size: 0.7rem;
}
/* /Components/Panel/DetalleCard.razor.rz.scp.css */
/* ==========================================================================
   DetalleCard - Tarjeta de detalle con lista de items
   ========================================================================== */

.detalle-card[b-9amazfzwsn] {
    background: white;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

/* Header */
.detalle-card-header[b-9amazfzwsn] {
    padding: 1.25rem 1.25rem 0.5rem 1.25rem;
}

.detalle-card-title-row[b-9amazfzwsn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detalle-card-color[b-9amazfzwsn] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.detalle-card-title[b-9amazfzwsn] {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin: 0;    
}

.detalle-card-subtitle[b-9amazfzwsn] {
    font-size: var(--fs-label);
    color: var(--text-muted);
    display: block;
    margin-top: 0.25rem;
}

/* Lista de items */
.detalle-card-list[b-9amazfzwsn] {
    padding: 0;
}

.detalle-card-item[b-9amazfzwsn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.25rem;
}

/* Ícono a la izquierda del item */
.detalle-card-item-icon[b-9amazfzwsn] {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    background: var(--icon-support-bg);
    color: var(--icon-support);
    font-size: var(--fs-body-sm);
}

/* Info del item (descripción + observación) */
.detalle-card-item-info[b-9amazfzwsn] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    min-width: 0;
}

.detalle-card-item-descripcion[b-9amazfzwsn] {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
}

.detalle-card-item-observacion[b-9amazfzwsn] {
    font-size: var(--fs-overline);
    color: #999;
}

/* Valor */
.detalle-card-item-valor[b-9amazfzwsn] {
    align-self: flex-start;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    text-align: right;
    flex-shrink: 0;
    margin-left: 1rem;
}

.detalle-card-item-valor--negativo[b-9amazfzwsn] {
    color: #dc3545;
}

/* Responsive */
@media (max-width: 480px) {
    .detalle-card-header[b-9amazfzwsn] {
        padding: 1.25rem 1rem 0.5rem 1rem;
    }
    
    .detalle-card-item[b-9amazfzwsn] {
        padding: 0.75rem 1rem;
    }
    
    .detalle-card-item-descripcion[b-9amazfzwsn] {
        font-size: var(--fs-caption);
    }
    
    .detalle-card-item-valor[b-9amazfzwsn] {
        font-size: var(--fs-body-sm);
    }
}

/* /Components/Panel/EvolucionChart.razor.rz.scp.css */
/* ==========================================================================
   EvolucionChart - Gráfico de evolución con barras verticales
   ========================================================================== */

.evolucion-chart[b-zp3sinu1hh] {
    background: white;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    padding: 1.25rem;
}

.evolucion-chart-header[b-zp3sinu1hh] {
    margin-bottom: 1rem;
}

.evolucion-chart-title[b-zp3sinu1hh] {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin-bottom: 0.25rem;    
}

.evolucion-chart-subtitle[b-zp3sinu1hh] {
    font-size: var(--fs-label);
    color: var(--text-muted);
}

.evolucion-chart-container[b-zp3sinu1hh] {
    overflow-x: auto;
}

/* Cuerpo del gráfico: Eje Y + Main (área + eje X) */
.evolucion-chart-body[b-zp3sinu1hh] {
    display: flex;
    align-items: flex-start; /* Alinear arriba, no estirar */
}

/* Eje Y con valores de escala */
.evolucion-chart-yaxis[b-zp3sinu1hh] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 0.5rem;
    min-width: fit-content;
    height: 230px;
}

.evolucion-chart-yaxis-item[b-zp3sinu1hh] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 0;
}

.evolucion-chart-yaxis-item:first-child[b-zp3sinu1hh] {
    align-items: flex-start;
}

.evolucion-chart-yaxis-item:last-child[b-zp3sinu1hh] {
    align-items: flex-end;
}

.evolucion-chart-yaxis-label[b-zp3sinu1hh] {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
    line-height: 1;
}

/* Contenedor principal (área + eje X) */
.evolucion-chart-main[b-zp3sinu1hh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Área del gráfico con líneas de referencia y barras */
.evolucion-chart-area[b-zp3sinu1hh] {
    height: 230px;
    position: relative;
    min-width: 0;
    border-left: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
}

/* Líneas horizontales punteadas de referencia */
.evolucion-chart-gridlines[b-zp3sinu1hh] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.evolucion-chart-gridline[b-zp3sinu1hh] {
    width: 100%;
    height: 0;
    border-top: 1px dashed #d0d0d0;
}

.evolucion-chart-gridline:last-child[b-zp3sinu1hh] {
    border-top: none;
}

/* Contenedor de barras */
.evolucion-chart-bars[b-zp3sinu1hh] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    gap: 0.2rem;
    padding: 0 0.5rem;
}

.evolucion-chart-bar-wrapper[b-zp3sinu1hh] {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    min-width: 0;
}

.evolucion-chart-bar[b-zp3sinu1hh] {
    width: 100%;
    max-width: 28px;
    min-height: 2px;
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
    background: linear-gradient(180deg, var(--chart-bar-color) 0%, var(--chart-bar-color-dark) 100%);
    transition: opacity 0.2s ease, transform 0.2s ease;
    cursor: default;
}

/* Barras clickeables */
.evolucion-chart-bar.evolucion-chart-bar--clickeable[b-zp3sinu1hh] {
    cursor: pointer;
}

/* Barras resaltadas (ej: fines de semana) - color naranja */
.evolucion-chart-bar.evolucion-chart-bar--resaltado[b-zp3sinu1hh] {
    background: linear-gradient(180deg, var(--chart-bar-weekend-color) 0%, var(--chart-bar-weekend-color-dark) 100%);
}

/* Barras vacías (sin datos) - ocultar visualmente pero mantener espacio */
.evolucion-chart-bar.evolucion-chart-bar--vacio[b-zp3sinu1hh] {
    background: transparent !important;
    min-height: 0;
}

.evolucion-chart-bar:hover[b-zp3sinu1hh] {
    opacity: 0.8;
    transform: scaleY(1.02);
    transform-origin: bottom;
}

/* Eje X */
.evolucion-chart-xaxis[b-zp3sinu1hh] {
    display: flex;
    flex-direction: column;
    margin-left: 2px; /* Compensar el borde del eje Y */
}

.evolucion-chart-xaxis-row[b-zp3sinu1hh] {
    display: flex;
    gap: 0.2rem;
    padding: 0.4rem 0.5rem 0;
}

.evolucion-chart-xaxis-label[b-zp3sinu1hh] {
    flex: 1;
    text-align: center;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
}

/* Responsive */
@media (max-width: 768px) {
    .evolucion-chart[b-zp3sinu1hh] {
        padding: 1.25rem 1rem 1rem 1rem;
    }
    
    .evolucion-chart-yaxis[b-zp3sinu1hh] {
        height: 180px;
    }
    
    .evolucion-chart-area[b-zp3sinu1hh] {
        height: 180px;
    }
    
    .evolucion-chart-yaxis-label[b-zp3sinu1hh] {
        font-size: 0.5rem;
    }
    
    .evolucion-chart-bars[b-zp3sinu1hh] {
        gap: 0.1rem;
    }
    
    .evolucion-chart-xaxis-row[b-zp3sinu1hh] {
        gap: 0.1rem;
    }
    
    .evolucion-chart-xaxis-label[b-zp3sinu1hh] {
        font-size: 0.5rem;
    }
    
    /* Ocultar valores alternos del eje X en pantallas medianas */
    .evolucion-chart-xaxis-label:nth-child(2n)[b-zp3sinu1hh] {
        visibility: hidden;
    }
}

/* Pantallas muy angostas: mostrar solo cada 3 valores */
@media (max-width: 480px) {
    .evolucion-chart-xaxis-label:nth-child(2n)[b-zp3sinu1hh] {
        visibility: visible;
    }
    
    .evolucion-chart-xaxis-label:not(:nth-child(3n+1))[b-zp3sinu1hh] {
        visibility: hidden;
    }
}
/* /Components/Panel/HeatMapChart.razor.rz.scp.css */
/* ==========================================================================
   HeatMapChart - Mapa de calor para ventas por rango horario y día de semana
   ========================================================================== */

.heatmap-card[b-ow7jpfb4xg] {
    background: white;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

/* Header */
.heatmap-header[b-ow7jpfb4xg] {
    padding: 1.25rem 1.25rem 0.5rem 1.25rem;
}

.heatmap-title[b-ow7jpfb4xg] {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin: 0;    
}

.heatmap-subtitle[b-ow7jpfb4xg] {
    font-size: var(--fs-label);
    color: var(--text-muted);
    display: block;
    margin-top: 0.25rem;
}

/* Escala de colores */
.heatmap-scale[b-ow7jpfb4xg] {
    padding: 0.5rem 1rem 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.heatmap-scale-label[b-ow7jpfb4xg] {
    width: 80px;
    flex-shrink: 0;
    padding-right: 8px;
}

.heatmap-scale-gradient[b-ow7jpfb4xg] {
    flex: 1;
    height: 16px;
    border-radius: 6px;
    background: linear-gradient(to right, 
        hsla(140, 50%, 50%, 0.1) 0%, 
        hsla(140, 60%, 45%, 0.5) 50%, 
        hsl(140, 80%, 30%) 100%
    );
    position: relative;
}

.heatmap-scale-value[b-ow7jpfb4xg] {
    font-size: var(--fs-overline);
    color: var(--text-muted);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 6px;
}

.heatmap-scale-value--min[b-ow7jpfb4xg] {
    left: 0;
}

.heatmap-scale-value--max[b-ow7jpfb4xg] {
    right: 0;
    color: whitesmoke;
}

/* Grilla del mapa de calor */
.heatmap-grid[b-ow7jpfb4xg] {
    padding: 0.5rem 1rem 1rem 1rem;
    overflow-x: auto;
}

.heatmap-row[b-ow7jpfb4xg] {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}

.heatmap-row:last-child[b-ow7jpfb4xg] {
    margin-bottom: 0;
}

.heatmap-row--header[b-ow7jpfb4xg] {
    margin-bottom: 8px;
}

.heatmap-cell[b-ow7jpfb4xg] {
    flex-shrink: 0;
}

/* Celda de etiqueta (rango horario) */
.heatmap-cell--label[b-ow7jpfb4xg] {
    width: 80px;
    font-size: var(--fs-overline);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    padding-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Celda de cabecera (día de semana) */
.heatmap-cell--header[b-ow7jpfb4xg] {
    flex: 1;
    min-width: 36px;
    height: 24px;
    font-size: var(--fs-overline);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

/* Celda de datos (con color) */
.heatmap-cell--data[b-ow7jpfb4xg] {
    flex: 1;
    min-width: 36px;
    height: 36px;
    border-radius: 6px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: default;
}

.heatmap-cell--data:hover[b-ow7jpfb4xg] {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1;
}

/* Footer con nota */
.heatmap-footer[b-ow7jpfb4xg] {
    padding: 0.75rem 1.25rem;
    background: #f8f9fa;
    border-top: 1px solid var(--border-color);
}

.heatmap-note[b-ow7jpfb4xg] {
    font-size: var(--fs-overline);
    color: var(--text-muted);
    font-style: italic;
}

/* Estado vacío */
.heatmap-empty[b-ow7jpfb4xg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: var(--fs-body-sm);
}

.heatmap-empty .oi[b-ow7jpfb4xg] {
    font-size: var(--fs-display);
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

/* Responsive */
@media (max-width: 479px) {
    .heatmap-cell--label[b-ow7jpfb4xg] {
        width: 60px;
        font-size: var(--fs-overline);
    }
    
    .heatmap-scale-label[b-ow7jpfb4xg] {
        width: 60px;
        padding-right: 8px;
    }
    
    .heatmap-cell--header[b-ow7jpfb4xg] {
        min-width: 28px;
        font-size: 0.6rem;
    }
    
    .heatmap-cell--data[b-ow7jpfb4xg] {
        min-width: 28px;
        height: 28px;
        border-radius: 4px;
    }
    
    .heatmap-scale-value[b-ow7jpfb4xg] {
        font-size: 0.6rem;
        padding: 0 4px;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .heatmap-cell--label[b-ow7jpfb4xg] {
        width: 70px;
    }
    
    .heatmap-scale-label[b-ow7jpfb4xg] {
        width: 70px;
        padding-right: 8px;
    }
    
    .heatmap-cell--header[b-ow7jpfb4xg] {
        min-width: 32px;
    }
    
    .heatmap-cell--data[b-ow7jpfb4xg] {
        min-width: 32px;
        height: 32px;
    }
}
/* /Components/Panel/HeroCard.razor.rz.scp.css */
/* ==========================================================================
   HeroCard - Tarjeta principal hero con valor destacado
   ========================================================================== */

.hero-card[b-1kz2u2bby9] {
    background: var(--hero-card-bg);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* Comparaciones bajo proyección: alinear bloques por arriba entre columnas */
.hero-card:has(.hero-card-comparisons--debajo-proyeccion)[b-1kz2u2bby9] {
    align-items: flex-start;
}

.hero-card-main[b-1kz2u2bby9] {
    flex: 1;
}

.hero-card-label[b-1kz2u2bby9] {
    font-size: var(--fs-body-sm);
    opacity: 0.9;
    margin-bottom: 0.25rem;
}

.hero-card-value[b-1kz2u2bby9] {
    font-size: var(--fs-display);
    font-weight: var(--fw-bold);
    margin-bottom: 0.5rem;
}

.hero-card-value--solo[b-1kz2u2bby9] {
    margin-bottom: 0;
}

.hero-card-comparisons[b-1kz2u2bby9] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
}

.hero-card-comparisons--debajo-proyeccion[b-1kz2u2bby9] {
    margin-top: 0.75rem;
    align-items: center;
    width: 100%;
}

.hero-card-comparison[b-1kz2u2bby9] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--fs-caption);
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius-sm);
}

.hero-card-comparison--positive[b-1kz2u2bby9] {
    color: #15803d;
    background-color: #dcfce7;
}

.hero-card-comparison--negative[b-1kz2u2bby9] {
    color: #dc2626;
    background-color: #fee2e2;
}

.hero-card-comparison-icon[b-1kz2u2bby9] {
    font-weight: var(--fw-bold);
}

.hero-card-leyenda[b-1kz2u2bby9] {
    font-size: var(--fs-caption);
    opacity: 0.92;
    line-height: 1.35;
    max-width: 22rem;
}

.hero-card-side[b-1kz2u2bby9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-left: 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.hero-card-side-label[b-1kz2u2bby9] {
    font-size: var(--fs-label);
    opacity: 0.8;
    margin-bottom: 0.25rem;
}

.hero-card-side-value[b-1kz2u2bby9] {
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    margin-bottom: 0.25rem;
}

.hero-card-side-subtitle[b-1kz2u2bby9] {
    font-size: var(--fs-overline);
    opacity: 0.7;
}

/* Variante para egresos (rojo) */
.hero-card.hero-card--egresos[b-1kz2u2bby9] {
    background: #c82333;
}

/* Variante para ingresos por venta (verde) */
.hero-card.hero-card--verde[b-1kz2u2bby9] {
    background: var(--hero-ingresos-venta-dark);
}

/* Variante para otros movimientos (azul de marca) */
.hero-card.hero-card--azul[b-1kz2u2bby9] {
    background: var(--hero-otros-movimientos);
}

/* Responsive */
@media (max-width: 576px) {
    .hero-card[b-1kz2u2bby9] {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem;
    }
    
    .hero-card-comparisons[b-1kz2u2bby9] {
        align-items: center;
    }
    
    .hero-card-comparisons--debajo-proyeccion[b-1kz2u2bby9] {
        align-items: center;
    }
    
    .hero-card:has(.hero-card-comparisons--debajo-proyeccion)[b-1kz2u2bby9] {
        align-items: center;
    }
    
    .hero-card-value[b-1kz2u2bby9] {
        font-size: var(--fs-h1);
    }
    
    .hero-card-side[b-1kz2u2bby9] {
        text-align: center;
        padding-left: 0;
        padding-top: 1rem;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        width: 100%;
    }
}

/* /Components/Panel/KpiCard.razor.rz.scp.css */
/* ==========================================================================
   KpiCard - Tarjeta de indicador KPI
   ========================================================================== */

.kpi-card[b-87conp2qbk] {
    background: white;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    padding: 1rem;
    text-align: center;
}

/* Variante con ícono: encabezado (ícono + título) a la izquierda y cuerpo centrado */
.kpi-card--con-icono[b-87conp2qbk] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.kpi-card--con-icono .kpi-card-header[b-87conp2qbk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
}

.kpi-card-icon[b-87conp2qbk] {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-md);
    background: var(--icon-support-bg);
    color: var(--icon-support);
    font-size: var(--fs-h3);
}

.kpi-card--con-icono .kpi-card-body[b-87conp2qbk] {
    text-align: center;
}

.kpi-card--con-icono .kpi-card-label[b-87conp2qbk] {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.kpi-card--con-icono .kpi-card-comparison[b-87conp2qbk] {
    margin-top: 0.25rem;
}

.kpi-card-label[b-87conp2qbk] {
    font-size: var(--fs-label);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.kpi-card-value[b-87conp2qbk] {
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.kpi-card-subtitle[b-87conp2qbk] {
    font-size: var(--fs-overline);
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.kpi-card-comparison[b-87conp2qbk] {
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-sm);
    display: inline-block;
}

.kpi-card-comparison--positive[b-87conp2qbk] {
    color: #15803d;
    background-color: #dcfce7;
}

.kpi-card-comparison--negative[b-87conp2qbk] {
    color: #dc2626;
    background-color: #fee2e2;
}

.kpi-card-comparison--neutral[b-87conp2qbk] {
    color: var(--text-muted);
    background-color: #f3f4f6;
}

.kpi-card-leyenda[b-87conp2qbk] {
    font-size: var(--fs-caption);
    color: var(--text-muted);
    line-height: 1.35;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .kpi-card[b-87conp2qbk] {
        padding: 0.75rem;
    }

    .kpi-card--con-icono[b-87conp2qbk] {
        gap: 0.6rem;
    }

    .kpi-card-icon[b-87conp2qbk] {
        width: 2.25rem;
        height: 2.25rem;
        font-size: var(--fs-body);
    }
    
    .kpi-card-value[b-87conp2qbk] {
        font-size: var(--fs-h2);
    }
    
    .kpi-card-label[b-87conp2qbk] {
        font-size: var(--fs-overline);
    }
}

/* /Components/Panel/PanelBottomNav.razor.rz.scp.css */
/* ==========================================================================
   PanelBottomNav - Botonera inferior de navegación
   ========================================================================== */

.panel-bottom-nav[b-i67n3lnpmc] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3rem;
    background-color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    z-index: 50;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}

.panel-nav-btn[b-i67n3lnpmc] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: white;
    font-size: var(--fs-h3);
    padding: 0 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    height: 100%;
    min-width: 2.5rem;
}

.panel-nav-btn:hover:not(:disabled)[b-i67n3lnpmc] {
    background-color: rgba(255, 255, 255, 0.15);
}

.panel-nav-btn:disabled[b-i67n3lnpmc] {
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
}

/* Botón anterior */
.panel-nav-prev[b-i67n3lnpmc] {
    padding: 0 0.75rem;
}

/* Botón siguiente */
.panel-nav-next[b-i67n3lnpmc] {
    padding: 0 0.75rem;
}

/* Botón central */
.panel-nav-center[b-i67n3lnpmc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    flex: 1;
    font-size: var(--fs-body);
    color: white;
}

.panel-nav-center:hover[b-i67n3lnpmc] {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.panel-nav-center .oi[b-i67n3lnpmc] {
    font-size: var(--fs-body);
}

.panel-nav-center-text[b-i67n3lnpmc] {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
}

/* ==========================================================================
   Responsive - Desktop
   ========================================================================== */
@media (min-width: 641px) {
    .panel-bottom-nav[b-i67n3lnpmc] {
        left: 240px; /* Ancho del sidebar en desktop */
    }
}
/* /Components/Panel/PanelDateNav.razor.rz.scp.css */
.panel-date-nav[b-9481c27tff] {
    position: sticky;
    top: 3.5rem;
    z-index: 45;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.75rem;
    padding: 0.45rem 1rem;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.panel-date-nav--no-buttons[b-9481c27tff] {
    grid-template-columns: 1fr;
}

.panel-date-nav-btn[b-9481c27tff] {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: #fff;
    color: var(--text-secondary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
}

.panel-date-nav-btn i[b-9481c27tff] {
    font-size: 1.25rem;
    line-height: 1;
}

.panel-date-nav-btn:hover:not(:disabled)[b-9481c27tff] {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.05);
}

.panel-date-nav-btn:disabled[b-9481c27tff] {
    color: var(--text-muted);
    opacity: 0.35;
    cursor: not-allowed;
}

.panel-date-nav-current[b-9481c27tff] {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
}

.panel-date-nav-picker-btn[b-9481c27tff] {
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 0.2rem 0.45rem;
    border: 0;
    border-radius: var(--border-radius-md);
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: background-color 0.2s ease;
}

.panel-date-nav-picker-btn:hover[b-9481c27tff] {
    background: rgba(var(--color-primary-rgb), 0.05);
}

.panel-date-nav-picker-btn:hover .panel-date-nav-title[b-9481c27tff],
.panel-date-nav-picker-btn:hover .panel-date-nav-calendar-icon[b-9481c27tff] {
    color: var(--color-primary);
}

.panel-date-nav-date-input[b-9481c27tff] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}

.panel-date-nav-calendar-icon[b-9481c27tff] {
    margin-left: 0.4rem;
    font-size: 0.85em;
    color: var(--text-muted);
    vertical-align: -0.05em;
}

.panel-date-nav-badge[b-9481c27tff] {
    width: 2.25rem;
    height: 2.5rem;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--color-primary-rgb), 0.22);
    border-radius: var(--border-radius-md);
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-primary);
    line-height: 1;
}

.panel-date-nav-badge-value[b-9481c27tff] {
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
}

.panel-date-nav-badge-label[b-9481c27tff] {
    margin-top: 0.15rem;
    font-size: 0.58rem;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.panel-date-nav-text[b-9481c27tff] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.panel-date-nav-title[b-9481c27tff] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}

.panel-date-nav-subtitle[b-9481c27tff] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-caption);
    color: var(--text-muted);
}

@media (max-width: 420px) {
    .panel-date-nav[b-9481c27tff] {
        gap: 0.45rem;
        padding-inline: 0.75rem;
    }

    .panel-date-nav-btn[b-9481c27tff] {
        width: 2.25rem;
        height: 2.25rem;
    }

    .panel-date-nav-current[b-9481c27tff] {
        gap: 0.5rem;
    }
}
/* /Components/Panel/PanelTabs.razor.rz.scp.css */
/* ==========================================================================
   PanelTabs - Selector de tabs para paneles
   ========================================================================== */

.panel-tabs[b-hptbugmanz] {
    display: flex;
    gap: 0.25rem;
    background-color: #f4f6f8;
    border-bottom: 1px solid var(--border-color);
    padding: 0.5rem 0.5rem 0.6rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.panel-tabs[b-hptbugmanz]::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.panel-tab[b-hptbugmanz] {
    flex: 1;
    min-width: max-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    background: transparent;
    border: none;
    border-radius: var(--border-radius-md);
    color: var(--text-muted);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.panel-tab-icon[b-hptbugmanz] {
    font-size: 1em;
    opacity: 0.85;
}

.panel-tab:hover[b-hptbugmanz] {
    color: var(--color-primary);
    background-color: rgba(var(--color-primary-rgb), 0.06);
}

.panel-tab.active[b-hptbugmanz] {
    color: var(--color-primary);
    background-color: #fff;
    font-weight: var(--fw-semibold);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.panel-tab.active .panel-tab-icon[b-hptbugmanz] {
    opacity: 1;
}
/* /Components/Panel/PanelTitleBar.razor.rz.scp.css */
/* ==========================================================================
   PanelTitleBar - Barra de título fija para paneles
   ========================================================================== */

.panel-title-bar[b-i3qnhuebj6] {
    position: sticky;
    top: 3.5rem; /* Debajo de la barra principal */
    z-index: 50;
    background-color: white;
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.panel-title[b-i3qnhuebj6] {
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}

.panel-subtitle[b-i3qnhuebj6] {
    font-size: var(--fs-body);
    color: var(--text-muted);
}
/* /Components/Panel/PieChart.razor.rz.scp.css */
/* ==========================================================================
   PieChart - Gráfico de torta genérico para distribución de datos
   ========================================================================== */

.pie-chart-card[b-yfvsbk4x3f] {
    background: white;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

/* Header */
.pie-chart-header[b-yfvsbk4x3f] {
    padding: 1.25rem 1.25rem 0.5rem 1.25rem;
}

.pie-chart-title[b-yfvsbk4x3f] {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin: 0;    
}

.pie-chart-subtitle[b-yfvsbk4x3f] {
    font-size: var(--fs-label);
    color: var(--text-muted);
    display: block;
    margin-top: 0.25rem;
}

/* Contenido principal */
.pie-chart-content[b-yfvsbk4x3f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1.25rem;
    gap: 1rem;
}

/* Contenedor del SVG */
.pie-chart-svg-container[b-yfvsbk4x3f] {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}

.pie-chart-svg[b-yfvsbk4x3f] {
    width: 100%;
    height: 100%;
}

.pie-slice[b-yfvsbk4x3f] {
    transition: opacity 0.2s ease;
}

.pie-slice:hover[b-yfvsbk4x3f] {
    opacity: 0.85;
}

/* Leyenda */
.pie-chart-legend[b-yfvsbk4x3f] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pie-chart-legend-item[b-yfvsbk4x3f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.pie-chart-legend-color[b-yfvsbk4x3f] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0.25rem;
}

.pie-chart-legend-text[b-yfvsbk4x3f] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pie-chart-legend-label[b-yfvsbk4x3f] {
    font-size: var(--fs-caption);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pie-chart-legend-detail[b-yfvsbk4x3f] {
    font-size: var(--fs-overline);
    color: var(--text-muted);
    margin-top: 0.1rem;
}

.pie-chart-legend-value[b-yfvsbk4x3f] {
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0.1rem;
}

/* Total */
.pie-chart-total[b-yfvsbk4x3f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1.25rem;
    background: #f8f9fa;
    border-top: 1px solid var(--border-color);
}

.pie-chart-total-label[b-yfvsbk4x3f] {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
}

.pie-chart-total-value[b-yfvsbk4x3f] {
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
}

.pie-chart-total-value--negativo[b-yfvsbk4x3f] {
    color: #dc3545;
}

/* Estado vacío */
.pie-chart-empty[b-yfvsbk4x3f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: var(--fs-body-sm);
}

.pie-chart-empty .oi[b-yfvsbk4x3f] {
    font-size: var(--fs-display);
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

/* Responsive */
@media (min-width: 480px) {
    .pie-chart-content[b-yfvsbk4x3f] {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding: 1rem 1.25rem;
    }
    
    .pie-chart-legend[b-yfvsbk4x3f] {
        width: auto;
        flex: 1;
        max-width: 55%;
    }
}

@media (max-width: 479px) {
    .pie-chart-svg-container[b-yfvsbk4x3f] {
        width: 120px;
        height: 120px;
    }
    
    .pie-chart-legend-item[b-yfvsbk4x3f] {
        padding: 0.125rem 0;
    }
}

/* /Components/Panel/SectorCard.razor.rz.scp.css */
/* ==========================================================================
   SectorCard - Tarjeta de resumen por sector
   ========================================================================== */

.sector-card[b-c68itd2mba] {
    background: white;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.sector-card-header[b-c68itd2mba] {
    padding: 1.25rem 1.25rem 0.5rem 1.25rem;
}

.sector-card-title-row[b-c68itd2mba] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sector-card-color[b-c68itd2mba] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sector-card-title[b-c68itd2mba] {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin: 0;
    flex: 1;
    min-width: 0;
}

.sector-card-porcentaje[b-c68itd2mba] {
    font-size: var(--fs-label);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    flex-shrink: 0;
}

.sector-card-metrics[b-c68itd2mba] {
    padding: 0 0 0.5rem 0;
}

.sector-card-metric[b-c68itd2mba] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1.25rem;
}

.sector-card-metric-icon[b-c68itd2mba] {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    background: var(--icon-support-bg);
    color: var(--icon-support);
    font-size: var(--fs-body-sm);
}

.sector-card-metric-label[b-c68itd2mba] {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
}

.sector-card-metric-value[b-c68itd2mba] {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    text-align: right;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .sector-card-header[b-c68itd2mba] {
        padding: 1.25rem 1rem 0.75rem 1rem;
    }

    .sector-card-metric[b-c68itd2mba] {
        padding: 0.5rem 1rem;
    }
}
/* /Components/ScrollToTop.razor.rz.scp.css */
/* ==========================================================================
   Componente ScrollToTop - Botón flotante para volver arriba
   ========================================================================== */
.btn-scroll-top[b-9m7fmae816] {
    position: fixed;
    /* En móvil queda por encima de la barra de navegación inferior */
    bottom: calc(4rem + env(safe-area-inset-bottom) + 1rem);
    right: 1.25rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-primary);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 170;
}

.btn-scroll-top.visible[b-9m7fmae816] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.btn-scroll-top:hover[b-9m7fmae816] {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.btn-scroll-top.visible:hover[b-9m7fmae816] {
    transform: translateY(-4px);
}

.btn-scroll-top:active[b-9m7fmae816] {
    transform: translateY(-2px);
}

/* En escritorio (sin barra inferior) vuelve a la esquina, sin tapar el scrollbar */
@media (min-width: 641px) {
    .btn-scroll-top[b-9m7fmae816] {
        bottom: 2rem;
        right: 2rem;
        z-index: 999;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================================
   Layout Principal
   ========================================================================== */
.page[b-i5lqmtygk3] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--page-bg);
}

/* ==========================================================================
   Barra Superior
   ========================================================================== */
.top-bar[b-i5lqmtygk3] {
    background: var(--topbar-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    height: 3.5rem;
    display: flex;
    align-items: center;
    padding: 0 1rem 0 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Botón hamburguesa */
.hamburger-btn[b-i5lqmtygk3] {
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hamburger-icon[b-i5lqmtygk3] {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--topbar-text);
    position: relative;
}

.hamburger-icon[b-i5lqmtygk3]::before,
.hamburger-icon[b-i5lqmtygk3]::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: var(--topbar-text);
    left: 0;
}

.hamburger-icon[b-i5lqmtygk3]::before {
    top: -7px;
}

.hamburger-icon[b-i5lqmtygk3]::after {
    top: 7px;
}

/* Logo en barra superior - ocupa todo el alto */
.topbar-logo[b-i5lqmtygk3] {
    width: 3.5rem;
    height: 3.5rem;
    padding: 0.4rem;
    object-fit: contain;
    flex-shrink: 0;
    background: transparent;
}

/* Info de empresa */
.company-info[b-i5lqmtygk3] {
    display: flex;
    flex-direction: column;
    margin-left: 0;
    flex: 1;
}


.company-name[b-i5lqmtygk3] {
    color: var(--topbar-text);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3);
    line-height: 1.2;
}

.branch-row[b-i5lqmtygk3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.branch-name[b-i5lqmtygk3] {
    color: var(--topbar-text-secondary);
    font-style: italic;
    font-size: var(--fs-body-sm);
    line-height: 1.2;
}

/* Acciones de la derecha (sucursal / consolidado) */
.topbar-actions[b-i5lqmtygk3] {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.topbar-action-btn[b-i5lqmtygk3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.12);
    color: var(--topbar-text);
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 1.1rem;
}

.topbar-action-btn:hover:not(:disabled)[b-i5lqmtygk3] {
    background: rgba(255, 255, 255, 0.22);
}

.topbar-action-btn:disabled[b-i5lqmtygk3] {
    opacity: 0.6;
    cursor: wait;
}


/* ==========================================================================
   Barra superior - Ajustes Mobile
   ========================================================================== */
@media (max-width: 640px) {
    /* Empresa y sucursal alineados a la izquierda, mismo margen que desktop */
    .company-info[b-i5lqmtygk3] {
        margin-left: 20px;
        text-align: left;
    }
}

/* ==========================================================================
   Sidebar
   ========================================================================== */
.sidebar[b-i5lqmtygk3] {
    background-color: var(--menu-bg);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(18rem, 85vw);
    height: auto;
    max-height: 100dvh;
    z-index: 250;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.18);
}

/* Overlay móvil */
.mobile-overlay[b-i5lqmtygk3] {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 200;
}

/* Estado del menú móvil abierto */
.mobile-menu-open .sidebar[b-i5lqmtygk3] {
    transform: translateX(0);
}

.mobile-menu-open .mobile-overlay[b-i5lqmtygk3] {
    display: block;
}

/* ==========================================================================
   Contenido Principal
   ========================================================================== */
.main-content[b-i5lqmtygk3] {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.panel-consolidado-loading[b-i5lqmtygk3] {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--page-bg) 82%, transparent);
    backdrop-filter: blur(2px);
}

.content[b-i5lqmtygk3] {
    padding-top: 1.1rem;
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
    flex: 1;
}

/* ==========================================================================
   Utilidades
   ========================================================================== */
.desktop-only[b-i5lqmtygk3] {
    display: none;
}

.mobile-only[b-i5lqmtygk3] {
    display: flex;
}

/* ==========================================================================
   Media Queries - Desktop (641px+)
   ========================================================================== */
@media (min-width: 641px) {
    .page[b-i5lqmtygk3] {
        display: grid;
        grid-template-columns: 240px 1fr;
        grid-template-rows: 3.5rem 1fr;
        grid-template-areas:
            "topbar topbar"
            "sidebar content";
    }
    
    /* Barra superior en desktop - ocupa todo el ancho */
    .top-bar[b-i5lqmtygk3] {
        grid-area: topbar;
    }
    
    /* Ocultar hamburguesa en desktop */
    .hamburger-btn[b-i5lqmtygk3] {
        display: none;
    }
    
    /* Logo: icono a la izquierda */
    .topbar-logo[b-i5lqmtygk3] {
        width: 3.5rem;
    }

    /* En desktop, separar el texto de empresa/sucursal del logo */
    .company-info[b-i5lqmtygk3] {
        margin-left: 20px;
    }

    /* Con menú fijo a la izquierda, ocultar acciones del topbar */
    .topbar-actions[b-i5lqmtygk3] {
        display: none;
    }
    
    /* Sidebar en desktop - debajo de la barra superior */
    .sidebar[b-i5lqmtygk3] {
        grid-area: sidebar;
        position: fixed;
        top: 3.5rem;
        bottom: auto;
        left: 0;
        width: 240px;
        height: calc(100vh - 3.5rem); /* fallback */
        height: calc(100dvh - 3.5rem);
        max-height: none;
        background-color: var(--menu-bg);
        border-right: 1px solid var(--menu-border);
        box-shadow: none;
        transform: none;
        z-index: 99;
    }
    
    /* Contenido principal */
    .main-content[b-i5lqmtygk3] {
        grid-area: content;
    }
    
    .content[b-i5lqmtygk3] {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        padding-bottom: 1.1rem;
    }
    
    /* Utilidades responsive */
    .desktop-only[b-i5lqmtygk3] {
        display: flex;
    }
    
    .mobile-only[b-i5lqmtygk3] {
        display: none;
    }
    
    /* Ocultar overlay en desktop */
    .mobile-overlay[b-i5lqmtygk3] {
        display: none !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* ==========================================================================
   NavMenu - Estilos Mobile (por defecto)
   ========================================================================== */
.nav-menu[b-7ezz2a5mpu] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
    padding: 0;
    background-color: var(--menu-bg);
    overflow: hidden;
}

.mobile-menu-header[b-7ezz2a5mpu] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.5rem;
    padding: 0 1rem;
    background: var(--menu-header-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--topbar-text);
}

.mobile-menu-title[b-7ezz2a5mpu] {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
}

.mobile-menu-close[b-7ezz2a5mpu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--topbar-text);
    cursor: pointer;
}

.mobile-menu-close:hover[b-7ezz2a5mpu] {
    background: rgba(255, 255, 255, 0.2);
}

.nav-items[b-7ezz2a5mpu] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.75rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Links de navegación - Mobile */
[b-7ezz2a5mpu] a.nav-link,
.nav-link[b-7ezz2a5mpu] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0.875rem 1.25rem;
    color: var(--menu-icon);
    text-decoration: none;
    border-radius: 0;
    transition: background-color 0.2s, color 0.2s;
    gap: 1rem;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 1rem;
}

[b-7ezz2a5mpu] a.nav-link:hover,
.nav-link:hover[b-7ezz2a5mpu] {
    background-color: var(--menu-item-hover-bg);
    color: var(--menu-text);
}

[b-7ezz2a5mpu] a.nav-link:hover .menu-text,
.nav-link:hover .menu-text[b-7ezz2a5mpu] {
    color: var(--menu-text);
}

[b-7ezz2a5mpu] a.nav-link.active,
.nav-link.active[b-7ezz2a5mpu] {
    background-color: var(--menu-item-active-bg);
    color: var(--menu-icon-active);
}

[b-7ezz2a5mpu] a.nav-link:disabled,
.nav-link:disabled[b-7ezz2a5mpu] {
    opacity: 0.6;
    cursor: wait;
}

/* Icono Font Awesome / SVG */
[b-7ezz2a5mpu] .menu-icon,
.menu-icon[b-7ezz2a5mpu] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px;
    min-width: 24px;
    height: 24px;
    flex-shrink: 0;
    font-size: 1.25rem;
}

[b-7ezz2a5mpu] .menu-icon svg,
.menu-icon svg[b-7ezz2a5mpu] {
    width: 20px;
    height: 20px;
    display: block;
}

/* Texto */
[b-7ezz2a5mpu] .menu-text,
.menu-text[b-7ezz2a5mpu] {
    display: inline-block !important;
    white-space: nowrap;
    color: var(--menu-text);
    flex: 1;
}

.nav-separator[b-7ezz2a5mpu] {
    height: 1px;
    margin: 0.5rem 1.25rem;
    background-color: var(--menu-border);
}

.nav-version[b-7ezz2a5mpu] {
    flex-shrink: 0;
    padding: 0.35rem 1.25rem 0.25rem;
    margin-top: auto;
    text-align: right;
    font-size: 0.7rem;
    line-height: 1;
    color: var(--menu-icon);
    opacity: 0.7;
}

/* Sección de logout: siempre visible al pie del menú */
.nav-logout[b-7ezz2a5mpu] {
    flex-shrink: 0;
    border-top: 1px solid var(--menu-border);
    padding-top: 0.25rem;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
}

.logout-link[b-7ezz2a5mpu] {
    color: var(--menu-icon) !important;
}

.logout-link:hover[b-7ezz2a5mpu] {
    background-color: var(--menu-item-hover-bg) !important;
    color: var(--menu-text) !important;
}

/* Utilidades */
.mobile-only[b-7ezz2a5mpu] {
    display: flex;
}

.desktop-only[b-7ezz2a5mpu] {
    display: none;
}

/* ==========================================================================
   Modal de confirmación de cierre de sesión
   ========================================================================== */
.logout-modal-overlay[b-7ezz2a5mpu] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.logout-modal[b-7ezz2a5mpu] {
    background-color: white;
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-card);
}

.logout-modal-icon[b-7ezz2a5mpu] {
    width: 60px;
    height: 60px;
    background-color: #FEE2E2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.logout-modal-icon i[b-7ezz2a5mpu] {
    font-size: 1.5rem;
    color: #DC2626;
}

.logout-modal h3[b-7ezz2a5mpu] {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.logout-modal p[b-7ezz2a5mpu] {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.logout-modal-buttons[b-7ezz2a5mpu] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.logout-modal-buttons button[b-7ezz2a5mpu] {
    padding: 0.625rem 1.25rem;
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
    max-width: 140px;
}

.btn-cancel[b-7ezz2a5mpu] {
    background-color: #F3F4F6;
    border: 1px solid #D1D5DB;
    color: var(--text-primary);
}

.btn-cancel:hover[b-7ezz2a5mpu] {
    background-color: #E5E7EB;
}

.btn-confirm[b-7ezz2a5mpu] {
    background-color: #DC2626;
    border: none;
    color: white;
}

.btn-confirm:hover[b-7ezz2a5mpu] {
    background-color: #B91C1C;
}

/* ==========================================================================
   NavMenu - Estilos Desktop (641px+)
   ========================================================================== */
@media (min-width: 641px) {
    .nav-menu[b-7ezz2a5mpu] {
        padding: 0.75rem 0 0;
    }

    .mobile-menu-header[b-7ezz2a5mpu] {
        display: none;
    }
    
    .nav-items[b-7ezz2a5mpu] {
        width: 100%;
        gap: 0.25rem;
        padding-top: 0;
    }
    
    /* Links de navegación - Desktop (icono + texto, igual que el desplegable) */
    [b-7ezz2a5mpu] a.nav-link,
    .nav-link[b-7ezz2a5mpu] {
        width: 100%;
        padding: 0.875rem 1.25rem !important;
        justify-content: flex-start !important;
        border-radius: 0;
        color: var(--menu-icon);
        gap: 1rem !important;
    }
    
    [b-7ezz2a5mpu] a.nav-link:hover,
    .nav-link:hover[b-7ezz2a5mpu] {
        background-color: var(--menu-item-hover-bg);
        color: var(--menu-text);
    }
    
    [b-7ezz2a5mpu] a.nav-link.active,
    .nav-link.active[b-7ezz2a5mpu] {
        background-color: var(--menu-item-active-bg);
        color: var(--menu-icon-active);
    }
    
    /* Mostrar texto en desktop */
    [b-7ezz2a5mpu] .menu-text,
    .menu-text[b-7ezz2a5mpu] {
        display: inline-block !important;
    }
    
    /* Logout en desktop - mismo estilo que otros items */
    .nav-logout[b-7ezz2a5mpu] {
        border-top: 1px solid var(--menu-border);
        padding-top: 0.5rem;
        padding-bottom: 0.75rem;
    }
    
    .nav-logout .logout-link[b-7ezz2a5mpu] {
        width: 100%;
        padding: 0.875rem 1.25rem !important;
        justify-content: flex-start !important;
        border-radius: 0;
    }
    
    /* Utilidades */
    .mobile-only[b-7ezz2a5mpu] {
        display: none !important;
    }
    
    .desktop-only[b-7ezz2a5mpu] {
        display: flex;
    }
}
/* /Layout/PanelLayout.razor.rz.scp.css */
/* ==========================================================================
   Layout Principal (heredado de MainLayout)
   ========================================================================== */
.page[b-szmjbbdbfk] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--page-bg);
}

/* ==========================================================================
   Barra Superior
   ========================================================================== */
.top-bar[b-szmjbbdbfk] {
    background: var(--topbar-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    height: 3.5rem;
    display: flex;
    align-items: center;
    padding: 0 1rem 0 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Botón hamburguesa */
.hamburger-btn[b-szmjbbdbfk] {
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hamburger-icon[b-szmjbbdbfk] {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--topbar-text);
    position: relative;
}

.hamburger-icon[b-szmjbbdbfk]::before,
.hamburger-icon[b-szmjbbdbfk]::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: var(--topbar-text);
    left: 0;
}

.hamburger-icon[b-szmjbbdbfk]::before {
    top: -7px;
}

.hamburger-icon[b-szmjbbdbfk]::after {
    top: 7px;
}

/* Logo en barra superior - ocupa todo el alto */
.topbar-logo[b-szmjbbdbfk] {
    width: 3.5rem;
    height: 3.5rem;
    padding: 0.4rem;
    object-fit: contain;
    flex-shrink: 0;
    background: transparent;
}

/* Info de empresa */
.company-info[b-szmjbbdbfk] {
    display: flex;
    flex-direction: column;
    margin-left: 0;
    flex: 1;
}


.company-name[b-szmjbbdbfk] {
    color: var(--topbar-text);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3);
    line-height: 1.2;
}

.branch-row[b-szmjbbdbfk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Acciones de la derecha (sucursal / consolidado) */
.topbar-actions[b-szmjbbdbfk] {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.topbar-action-btn[b-szmjbbdbfk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.12);
    color: var(--topbar-text);
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 1.1rem;
}

.topbar-action-btn:hover:not(:disabled)[b-szmjbbdbfk] {
    background: rgba(255, 255, 255, 0.22);
}

.topbar-action-btn:disabled[b-szmjbbdbfk] {
    opacity: 0.6;
    cursor: wait;
}

.branch-name[b-szmjbbdbfk] {
    color: var(--topbar-text-secondary);
    font-style: italic;
    font-size: var(--fs-body-sm);
    line-height: 1.2;
}


/* ==========================================================================
   Barra superior - Ajustes Mobile
   ========================================================================== */
@media (max-width: 640px) {
    /* Empresa y sucursal alineados a la izquierda, mismo margen que desktop */
    .company-info[b-szmjbbdbfk] {
        margin-left: 20px;
        text-align: left;
    }
}

/* ==========================================================================
   Sidebar
   ========================================================================== */
.sidebar[b-szmjbbdbfk] {
    background-color: var(--menu-bg);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(18rem, 85vw);
    height: auto;
    max-height: 100dvh;
    z-index: 250;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.18);
}

/* Overlay móvil */
.mobile-overlay[b-szmjbbdbfk] {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 200;
}

/* Estado del menú móvil abierto */
.mobile-menu-open .sidebar[b-szmjbbdbfk] {
    transform: translateX(0);
}

.mobile-menu-open .mobile-overlay[b-szmjbbdbfk] {
    display: block;
}

/* ==========================================================================
   Contenido Principal - SIN PADDING para paneles
   ========================================================================== */
.main-content[b-szmjbbdbfk] {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Overlay de carga al entrar en modo consolidado (mismo mensaje que en paneles) */
.panel-consolidado-loading[b-szmjbbdbfk] {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--page-bg) 82%, transparent);
    backdrop-filter: blur(2px);
}

.panel-page-content[b-szmjbbdbfk] {
    flex: 1;
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
    /* Sin padding para que los componentes de panel ocupen todo el ancho */
}

/* ==========================================================================
   Media Queries - Desktop (641px+)
   ========================================================================== */
@media (min-width: 641px) {
    .page[b-szmjbbdbfk] {
        display: grid;
        grid-template-columns: 240px 1fr;
        grid-template-rows: 3.5rem 1fr;
        grid-template-areas:
            "topbar topbar"
            "sidebar content";
    }
    
    /* Barra superior en desktop - ocupa todo el ancho */
    .top-bar[b-szmjbbdbfk] {
        grid-area: topbar;
    }
    
    /* Ocultar hamburguesa en desktop */
    .hamburger-btn[b-szmjbbdbfk] {
        display: none;
    }

    /* Logo: icono a la izquierda */
    .topbar-logo[b-szmjbbdbfk] {
        width: 3.5rem;
    }

    /* En desktop, separar el texto de empresa/sucursal del logo */
    .company-info[b-szmjbbdbfk] {
        margin-left: 20px;
    }

    /* Con menú fijo a la izquierda, ocultar acciones del topbar */
    .topbar-actions[b-szmjbbdbfk] {
        display: none;
    }
    
    /* Sidebar en desktop - debajo de la barra superior */
    .sidebar[b-szmjbbdbfk] {
        grid-area: sidebar;
        position: fixed;
        top: 3.5rem;
        bottom: auto;
        left: 0;
        width: 240px;
        height: calc(100vh - 3.5rem); /* fallback */
        height: calc(100dvh - 3.5rem);
        max-height: none;
        background-color: var(--menu-bg);
        border-right: 1px solid var(--menu-border);
        box-shadow: none;
        transform: none;
        z-index: 99;
    }
    
    /* Contenido principal */
    .main-content[b-szmjbbdbfk] {
        grid-area: content;
    }

    .panel-page-content[b-szmjbbdbfk] {
        padding-bottom: 0;
    }
    
    /* Ocultar overlay en desktop */
    .mobile-overlay[b-szmjbbdbfk] {
        display: none !important;
    }
}
/* /Pages/Login.razor.rz.scp.css */
/* Fondo sólido (sobreescribe el degradé global para esta página) */
.auth-container[b-c0lgwznvqz] {
    background: #002952;
}

/* Brand superior */
.login-brand[b-c0lgwznvqz] {
    margin-bottom: -1rem;
    text-align: center;
}

.login-brand-logo[b-c0lgwznvqz] {
    height: 150px;
    width: auto;
}

/* Encabezado de la tarjeta - alineado a la izquierda */
.login-card-header[b-c0lgwznvqz] {
    text-align: left;
    margin-bottom: 1.75rem;
}

.login-card-header h2[b-c0lgwznvqz] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.35rem;
    line-height: 1.2;
}

.login-card-header p[b-c0lgwznvqz] {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0;
    line-height: 1.4;
}

/* Punto rojo decorativo del título */
.login-title-dot[b-c0lgwznvqz] {
    color: #e53e3e;
    font-size: 0.55em;
    vertical-align: middle;
}

/* Labels en mayúsculas */
.login-label[b-c0lgwznvqz] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
    display: block;
}

/* Ícono prefijo de inputs */
.login-input-icon[b-c0lgwznvqz] {
    background: white;
    border-right: none;
    color: #adb5bd;
    font-size: 0.85rem;
}

.login-input-icon + .form-control[b-c0lgwznvqz] {
    border-left: none;
    padding-left: 0.5rem;
}

.login-input-icon + .form-control:focus[b-c0lgwznvqz] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-input-focus);
}

/* Versión inferior */
.login-version[b-c0lgwznvqz] {
    margin-top: 1.25rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-align: center;
}
/* /Pages/MiSesion.razor.rz.scp.css */
.mi-sesion-container[b-tcfryf6hs3] {
    max-width: 600px;
    margin: 0 auto;
    padding: 1rem;
}

.mi-sesion-header[b-tcfryf6hs3] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.mi-sesion-header h2[b-tcfryf6hs3] {
    color: var(--text-primary);
    font-weight: var(--fw-semibold);
    margin-bottom: 0.5rem;
}

.mi-sesion-header p[b-tcfryf6hs3] {
    margin-bottom: 0;
}

.mi-sesion-tabs-wrapper[b-tcfryf6hs3] {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    overflow: hidden;
}

.mi-sesion-content[b-tcfryf6hs3] {
    background: white;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
    padding: 1.25rem;
}

.mi-sesion-content .sesiones-card[b-tcfryf6hs3] {
    border: none;
    border-radius: 0;
}

@media (max-width: 480px) {
    .mi-sesion-container[b-tcfryf6hs3] {
        padding: 0.75rem;
    }

    .mi-sesion-content[b-tcfryf6hs3] {
        padding: 1rem;
    }
}
/* /Pages/PanelAnual.razor.rz.scp.css */
/* ==========================================================================
   PanelAnual - Estilos específicos de la página
   ========================================================================== */

/* Contenido principal del panel */
.panel-content[b-e4gb3do9zr] {
    padding: 1rem;
    padding-bottom: 2rem;
    min-height: calc(100vh - 3.5rem - 3.75rem - 3rem);
}

/* Grid de KPIs sin cubiertos - mantiene 2 columnas en todas las pantallas */
.resumen-kpis--sin-cubiertos[b-e4gb3do9zr] {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* ==========================================================================
   Solapa de Caja
   ========================================================================== */

/* Contenedor principal de la solapa de caja */
.panel-caja[b-e4gb3do9zr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Grid de HeroCards para ingresos y egresos */
.caja-heroes[b-e4gb3do9zr] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 576px) {
    .caja-heroes[b-e4gb3do9zr] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Grid de gráficos de torta */
.caja-pies[b-e4gb3do9zr] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 576px) {
    .caja-pies[b-e4gb3do9zr] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Si solo hay un gráfico de torta, que ocupe todo el ancho */
.caja-pies > :only-child[b-e4gb3do9zr] {
    grid-column: 1 / -1;
    max-width: 500px;
    margin: 0 auto;
}

/* ==========================================================================
   Solapa de Venta por Sector
   ========================================================================== */

.panel-sectores[b-e4gb3do9zr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sectores-pies[b-e4gb3do9zr] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 576px) {
    .sectores-pies[b-e4gb3do9zr] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

.sectores-pies > :only-child[b-e4gb3do9zr] {
    grid-column: 1 / -1;
    max-width: 500px;
    margin: 0 auto;
}

.sectores-cards[b-e4gb3do9zr] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 576px) {
    .sectores-cards[b-e4gb3do9zr] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .sectores-cards[b-e4gb3do9zr] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   Solapa de Articulos
   ========================================================================== */

.panel-articulos[b-e4gb3do9zr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.articulo-item[b-e4gb3do9zr] {
    cursor: default;
}

.articulo-content[b-e4gb3do9zr] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.articulo-descripcion[b-e4gb3do9zr] {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    line-height: 1.2;
}

.articulo-clasificacion[b-e4gb3do9zr] {
    font-size: var(--fs-caption);
    font-weight: var(--fw-normal);
    color: var(--text-muted);
    line-height: 1.25;
}

.articulo-cantidades[b-e4gb3do9zr] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: var(--fs-caption);
    color: var(--text-muted);
}

.articulo-totales[b-e4gb3do9zr] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 0.25rem 0.75rem;
    width: 100%;
    font-size: var(--fs-caption);
    color: var(--text-muted);
}

.articulo-m-cant-total[b-e4gb3do9zr] {
    justify-self: start;
}

.articulo-m-precio[b-e4gb3do9zr] {
    justify-self: center;
}

.articulo-m-monto[b-e4gb3do9zr] {
    justify-self: end;
}

.articulo-cantidades .list-item-metric[b-e4gb3do9zr],
.articulo-totales .list-item-metric[b-e4gb3do9zr] {
    white-space: nowrap;
}

.articulo-cantidades .list-item-metric-icon[b-e4gb3do9zr],
.articulo-totales .list-item-metric-icon[b-e4gb3do9zr] {
    width: 1rem;
    text-align: center;
}

.articulo-m-monto .list-item-metric-value[b-e4gb3do9zr] {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue-brand);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
    white-space: nowrap;
}


/* /Pages/PanelDiario.razor.rz.scp.css */
/* ==========================================================================
   PanelDiario - Estilos específicos de la página
   ========================================================================== */

/* Contenido principal del panel */
.panel-content[b-qprgfjq4w1] {
    padding: 1rem;
    padding-bottom: 2rem;
    min-height: calc(100vh - 3.5rem - 3.75rem - 3rem);
}

/* Placeholder para contenido de tabs (temporal) */
.tab-content-placeholder[b-qprgfjq4w1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background-color: white;
    border-radius: var(--border-radius-md);
    border: 2px dashed var(--border-color);
    color: var(--text-muted);
}

.tab-content-placeholder .oi[b-qprgfjq4w1] {
    font-size: var(--fs-icon-lg);
    margin-bottom: 1rem;
    opacity: 0.5;
}

.tab-content-placeholder p[b-qprgfjq4w1] {
    font-size: var(--fs-body);
    margin: 0;
}

/* Grid de KPIs sin cubiertos - mantiene 2 columnas en todas las pantallas */
.resumen-kpis--sin-cubiertos[b-qprgfjq4w1] {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* ==========================================================================
   Solapa de Articulos
   ========================================================================== */

.panel-articulos[b-qprgfjq4w1] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.articulo-item[b-qprgfjq4w1] {
    cursor: default;
}

.articulo-codigo[b-qprgfjq4w1] {
    width: 5rem;
}

.articulo-codigo .list-item-indicator-day[b-qprgfjq4w1] {
    color: var(--text-primary);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
    text-transform: none;
}

/* Contenido del artículo: 4 renglones apilados */
.articulo-content[b-qprgfjq4w1] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* Renglón 1: descripción */
.articulo-descripcion[b-qprgfjq4w1] {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    line-height: 1.2;
}

/* Renglón 2: Grupo / Familia / Subfamilia */
.articulo-clasificacion[b-qprgfjq4w1] {
    font-size: var(--fs-caption);
    font-weight: var(--fw-normal);
    color: var(--text-muted);
    line-height: 1.25;
}

/* Renglón 3: cantidad individual y en combo */
.articulo-cantidades[b-qprgfjq4w1] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: var(--fs-caption);
    color: var(--text-muted);
}

/* Renglón 4: cantidad total, precio unitario y monto (alineado con el sort header) */
.articulo-totales[b-qprgfjq4w1] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 0.25rem 0.75rem;
    width: 100%;
    font-size: var(--fs-caption);
    color: var(--text-muted);
}

.articulo-m-cant-total[b-qprgfjq4w1] {
    justify-self: start;
}

.articulo-m-precio[b-qprgfjq4w1] {
    justify-self: center;
}

.articulo-m-monto[b-qprgfjq4w1] {
    justify-self: end;
}

.articulo-cantidades .list-item-metric[b-qprgfjq4w1],
.articulo-totales .list-item-metric[b-qprgfjq4w1] {
    white-space: nowrap;
}

.articulo-cantidades .list-item-metric-icon[b-qprgfjq4w1],
.articulo-totales .list-item-metric-icon[b-qprgfjq4w1] {
    width: 1rem;
    text-align: center;
}

/* Total de venta: badge tipo píldora con fondo celeste y texto azul oscuro */
.articulo-m-monto .list-item-metric-value[b-qprgfjq4w1] {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue-brand);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
    white-space: nowrap;
}

/* ==========================================================================
   Solapa de Caja
   ========================================================================== */

/* Contenedor principal de la solapa de caja */
.panel-caja[b-qprgfjq4w1] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Grid de HeroCards para ingresos y egresos */
.caja-heroes[b-qprgfjq4w1] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 576px) {
    .caja-heroes[b-qprgfjq4w1] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Grid de gráficos de torta */
.caja-pies[b-qprgfjq4w1] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 576px) {
    .caja-pies[b-qprgfjq4w1] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Si solo hay un gráfico de torta, que ocupe todo el ancho */
.caja-pies > :only-child[b-qprgfjq4w1] {
    grid-column: 1 / -1;
    max-width: 500px;
    margin: 0 auto;
}

/* ==========================================================================
   Solapa de Venta por Sector
   ========================================================================== */

/* Contenedor principal de la solapa de sectores */
.panel-sectores[b-qprgfjq4w1] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Grid de gráficos de torta para sectores y clasificaciones */
.sectores-pies[b-qprgfjq4w1] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 576px) {
    .sectores-pies[b-qprgfjq4w1] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

.sectores-pies > :only-child[b-qprgfjq4w1] {
    grid-column: 1 / -1;
    max-width: 500px;
    margin: 0 auto;
}

.sectores-cards[b-qprgfjq4w1] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 576px) {
    .sectores-cards[b-qprgfjq4w1] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .sectores-cards[b-qprgfjq4w1] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Totales del sector */
.sector-totales[b-qprgfjq4w1] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: var(--border-radius-md);
    padding: 1rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    border-left: 4px solid var(--color-primary);
}

.sector-total-item[b-qprgfjq4w1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.sector-total-label[b-qprgfjq4w1] {
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    font-size: var(--fs-body);
}

.sector-total-valor[b-qprgfjq4w1] {
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3);
    color: var(--color-primary);
}

.sector-total-metricas[b-qprgfjq4w1] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.sector-metrica[b-qprgfjq4w1] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--fs-body-sm);
    color: var(--text-secondary);
}

.sector-metrica .oi[b-qprgfjq4w1],
.sector-metrica i[b-qprgfjq4w1] {
    font-size: var(--fs-caption);
    opacity: 0.7;
}
/* /Pages/PanelMensual.razor.rz.scp.css */
/* ==========================================================================
   PanelMensual - Estilos específicos de la página
   ========================================================================== */

/* Contenido principal del panel */
.panel-content[b-0g1zfpplhx] {
    padding: 1rem;
    padding-bottom: 2rem;
    min-height: calc(100vh - 3.5rem - 3.75rem - 3rem);
}

/* Placeholder para contenido de tabs (temporal) */
.tab-content-placeholder[b-0g1zfpplhx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background-color: white;
    border-radius: var(--border-radius-md);
    border: 2px dashed var(--border-color);
    color: var(--text-muted);
}

.tab-content-placeholder .oi[b-0g1zfpplhx] {
    font-size: var(--fs-icon-lg);
    margin-bottom: 1rem;
    opacity: 0.5;
}

.tab-content-placeholder p[b-0g1zfpplhx] {
    font-size: var(--fs-body);
    margin: 0;
}

/* Grid de KPIs principales: 2 cols (móvil) / 4 cols (desktop) */
.resumen-kpis--principales[b-0g1zfpplhx] {
    grid-template-columns: repeat(2, 1fr) !important;
}

@media (min-width: 992px) {
    .resumen-kpis--principales[b-0g1zfpplhx] {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Cubiertos: siempre 2 columnas */
.resumen-kpis--cubiertos[b-0g1zfpplhx] {
    grid-template-columns: repeat(2, 1fr) !important;
}

@media (min-width: 992px) {
    .resumen-kpis--cubiertos[b-0g1zfpplhx] {
        max-width: 50%;
    }
}

/* Grid de KPIs sin cubiertos - mantiene 2 columnas en todas las pantallas */
.resumen-kpis--sin-cubiertos[b-0g1zfpplhx] {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* ==========================================================================
   Solapa de Caja
   ========================================================================== */

/* Contenedor principal de la solapa de caja */
.panel-caja[b-0g1zfpplhx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Grid de HeroCards para ingresos y egresos */
.caja-heroes[b-0g1zfpplhx] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 576px) {
    .caja-heroes[b-0g1zfpplhx] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Grid de gráficos de torta */
.caja-pies[b-0g1zfpplhx] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 576px) {
    .caja-pies[b-0g1zfpplhx] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Si solo hay un gráfico de torta, que ocupe todo el ancho */
.caja-pies > :only-child[b-0g1zfpplhx] {
    grid-column: 1 / -1;
    max-width: 500px;
    margin: 0 auto;
}

/* ==========================================================================
   Solapa de Venta por Sector
   ========================================================================== */

/* Contenedor principal de la solapa de sectores */
.panel-sectores[b-0g1zfpplhx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Grid de gráficos de torta para sectores y clasificaciones */
.sectores-pies[b-0g1zfpplhx] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 576px) {
    .sectores-pies[b-0g1zfpplhx] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

.sectores-pies > :only-child[b-0g1zfpplhx] {
    grid-column: 1 / -1;
    max-width: 500px;
    margin: 0 auto;
}

.sectores-cards[b-0g1zfpplhx] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 576px) {
    .sectores-cards[b-0g1zfpplhx] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .sectores-cards[b-0g1zfpplhx] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   Solapa de Articulos
   ========================================================================== */

.panel-articulos[b-0g1zfpplhx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.articulo-item[b-0g1zfpplhx] {
    cursor: default;
}

.articulo-content[b-0g1zfpplhx] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.articulo-descripcion[b-0g1zfpplhx] {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    line-height: 1.2;
}

.articulo-clasificacion[b-0g1zfpplhx] {
    font-size: var(--fs-caption);
    font-weight: var(--fw-normal);
    color: var(--text-muted);
    line-height: 1.25;
}

.articulo-cantidades[b-0g1zfpplhx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: var(--fs-caption);
    color: var(--text-muted);
}

.articulo-totales[b-0g1zfpplhx] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 0.25rem 0.75rem;
    width: 100%;
    font-size: var(--fs-caption);
    color: var(--text-muted);
}

.articulo-m-cant-total[b-0g1zfpplhx] {
    justify-self: start;
}

.articulo-m-precio[b-0g1zfpplhx] {
    justify-self: center;
}

.articulo-m-monto[b-0g1zfpplhx] {
    justify-self: end;
}

.articulo-cantidades .list-item-metric[b-0g1zfpplhx],
.articulo-totales .list-item-metric[b-0g1zfpplhx] {
    white-space: nowrap;
}

.articulo-cantidades .list-item-metric-icon[b-0g1zfpplhx],
.articulo-totales .list-item-metric-icon[b-0g1zfpplhx] {
    width: 1rem;
    text-align: center;
}

.articulo-m-monto .list-item-metric-value[b-0g1zfpplhx] {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue-brand);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
    white-space: nowrap;
}
/* /Pages/Sucursales.razor.rz.scp.css */
/* ==========================================================================
   Página de Selección de Sucursales
   ========================================================================== */

.sucursales-container[b-xqm1jdrgwz] {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.25rem 1rem 2rem;
}

/* ==========================================================================
   Encabezado
   ========================================================================== */
.sucursales-header[b-xqm1jdrgwz] {
    margin-bottom: 1.25rem;
}

.sucursales-title[b-xqm1jdrgwz] {
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold, 700);
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.sucursales-subtitle[b-xqm1jdrgwz] {
    font-size: var(--fs-body-sm);
    color: var(--text-muted);
    margin: 0;
}

/* ==========================================================================
   Buscador
   ========================================================================== */
.sucursales-search[b-xqm1jdrgwz] {
    margin-bottom: 1.25rem;
}

.search-results-count[b-xqm1jdrgwz] {
    display: block;
    text-align: left;
    margin-top: 0.85rem;
    padding-left: 0.25rem;
    color: var(--text-muted);
    font-size: var(--fs-caption);
}

.search-results-count strong[b-xqm1jdrgwz] {
    color: var(--text-primary);
    font-weight: var(--fw-semibold, 600);
}

/* No results */
.no-results[b-xqm1jdrgwz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-muted);
}

.no-results svg[b-xqm1jdrgwz] {
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-results p[b-xqm1jdrgwz] {
    margin-bottom: 1rem;
}

.no-results strong[b-xqm1jdrgwz] {
    color: var(--text-primary);
}

/* Loading state */
.loading-container[b-xqm1jdrgwz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 3rem;
    color: var(--text-muted);
}

/* Grid de sucursales */
.sucursales-grid[b-xqm1jdrgwz] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Card de sucursal */
.sucursal-card[b-xqm1jdrgwz] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 0.875rem;
    background: white;
    border-radius: var(--card-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    position: relative;
}

.sucursal-card:hover[b-xqm1jdrgwz] {
    border-color: var(--color-primary);
    box-shadow: var(--card-shadow-hover);
}

.sucursal-card.sucursal-actual[b-xqm1jdrgwz] {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.04);
}

/* Icono a la izquierda (diferencia consolidado vs sucursal) */
.sucursal-icon[b-xqm1jdrgwz] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sucursal-icon.icon-sucursal[b-xqm1jdrgwz] {
    background: #f1f3f5;
    color: var(--text-muted);
}

.sucursal-icon.icon-consolidado[b-xqm1jdrgwz] {
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
}

/* Info de sucursal */
.sucursal-info[b-xqm1jdrgwz] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.sucursal-empresa[b-xqm1jdrgwz] {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold, 600);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sucursal-meta[b-xqm1jdrgwz] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: var(--fs-caption);
    color: var(--text-muted);
    min-width: 0;
}

.sucursal-nombre[b-xqm1jdrgwz] {
    display: block;
    font-size: var(--fs-caption);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sucursal-meta--consolidado[b-xqm1jdrgwz] {
    color: var(--color-primary);
    font-weight: var(--fw-medium, 500);
}

/* Renglón vacío para igualar la altura de los cards consolidados */
.sucursal-meta--placeholder[b-xqm1jdrgwz] {
    visibility: hidden;
}

.sucursal-meta-sep[b-xqm1jdrgwz] {
    color: var(--border-color);
}

/* Punto de color de estado */
.estado-dot[b-xqm1jdrgwz] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
}

.estado-dot--actualizada[b-xqm1jdrgwz] {
    background: #22c55e;
}

.estado-dot--pendiente[b-xqm1jdrgwz] {
    background: #f59e0b;
}

.estado-dot--cerrada[b-xqm1jdrgwz] {
    background: #adb5bd;
}

.estado-text[b-xqm1jdrgwz],
.estado-fecha[b-xqm1jdrgwz] {
    white-space: nowrap;
}

/* Punto indicador de sucursal actual */
.sucursal-actual-dot[b-xqm1jdrgwz] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* Arrow */
.sucursal-arrow[b-xqm1jdrgwz] {
    flex-shrink: 0;
    color: #c0c4c9;
    display: flex;
    align-items: center;
    transition: transform 0.15s ease, color 0.15s ease;
}

.sucursal-card:hover .sucursal-arrow[b-xqm1jdrgwz] {
    transform: translateX(3px);
    color: var(--color-primary);
}

/* Modal "Cambiando a sucursal..." (no usar .modal-content: Bootstrap le pone width: 100%) */
.selecting-overlay[b-xqm1jdrgwz] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.selecting-dialog[b-xqm1jdrgwz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-width: 14rem;
    max-width: min(22rem, 100%);
    background: white;
    padding: 2rem 2.5rem;
    border-radius: var(--border-radius-md);
    text-align: center;
    overflow-wrap: anywhere;
    box-shadow: var(--shadow-card);
}

/* ==========================================================================
   Responsive - Desktop
   ========================================================================== */
@media (min-width: 768px) {
    .sucursales-container[b-xqm1jdrgwz] {
        padding: 1.5rem 2rem 2.5rem;
    }

    .sucursal-card[b-xqm1jdrgwz] {
        padding: 0.875rem 1rem;
    }
}
/* /Pages/SucursalOnline.razor.rz.scp.css */
/* ==========================================================================
   SucursalOnline - Estilos específicos de la página
   ========================================================================== */

/* Contenido principal del panel */
.panel-content[b-ivezcmbdox] {
    padding: 1rem;
    padding-bottom: 5rem; /* Espacio para el footer */
    min-height: calc(100vh - 3.5rem - 3.75rem - 3rem - 4rem);
}

/* ==========================================================================
   Footer con última actualización
   ========================================================================== */

.online-footer[b-ivezcmbdox] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 97;
}

@media (max-width: 640px) {
    .panel-content[b-ivezcmbdox] {
        padding-bottom: calc(9rem + env(safe-area-inset-bottom));
    }

    .online-footer[b-ivezcmbdox] {
        bottom: calc(4rem + env(safe-area-inset-bottom));
    }
}

@media (min-width: 641px) {
    .online-footer[b-ivezcmbdox] {
        left: 240px;
    }
}

.online-footer-info[b-ivezcmbdox] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #94a3b8;
    font-size: var(--fs-body-sm);
}

.online-footer-info .oi[b-ivezcmbdox] {
    font-size: var(--fs-body-sm);
}

.btn-refresh[b-ivezcmbdox] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius-md);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-refresh:hover:not(:disabled)[b-ivezcmbdox] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-refresh:disabled[b-ivezcmbdox] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-refresh .spin[b-ivezcmbdox] {
    animation: spin-b-ivezcmbdox 1s linear infinite;
}

@keyframes spin-b-ivezcmbdox {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Solapa Ventas (En Curso / Finalizadas)
   ========================================================================== */

.panel-ventas[b-ivezcmbdox] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Resumen de ventas */
.ventas-resumen[b-ivezcmbdox] {
    display: flex;
    justify-content: space-around;
    padding: 1.25rem 1rem;
    background: var(--hero-card-bg);
    border-radius: var(--border-radius-lg);
    color: white;
}

.ventas-resumen-item[b-ivezcmbdox] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.ventas-resumen-label[b-ivezcmbdox] {
    font-size: var(--fs-label);
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ventas-resumen-value[b-ivezcmbdox] {
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
}

/* Grupo de sector */
.sector-group[b-ivezcmbdox] {
    background: white;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.sector-header[b-ivezcmbdox] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--blue-soft);
    border-bottom: 1px solid var(--border-color);
}

.sector-nombre[b-ivezcmbdox] {
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    font-size: var(--fs-body);
}

.sector-total[b-ivezcmbdox] {
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    font-size: var(--fs-body);
}

/* Lista de ventas */
.ventas-lista[b-ivezcmbdox] {
    padding: 0.5rem;
}

/* Tarjeta de venta */
.venta-card[b-ivezcmbdox] {
    margin-bottom: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    transition: all 0.2s ease;
}

.venta-card:last-child[b-ivezcmbdox] {
    margin-bottom: 0;
}

.venta-card.venta-anulada[b-ivezcmbdox] {
    border-color: #fecaca;
    background: #fef2f2;
}

.venta-card.venta-incidencia[b-ivezcmbdox] {
    border-color: #fde68a;
    background: #fffbeb;
}

.venta-header[b-ivezcmbdox] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.venta-header:hover[b-ivezcmbdox] {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Icono de alerta (anulada / incidencia) */
.venta-alerta[b-ivezcmbdox] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: var(--fs-caption);
    flex-shrink: 0;
}

.venta-alerta.alerta-rojo[b-ivezcmbdox] {
    background: #ef4444;
    color: white;
}

.venta-alerta.alerta-amarillo[b-ivezcmbdox] {
    background: #f59e0b;
    color: white;
}

/* Columna izquierda: 2 filas de info */
.venta-col-info[b-ivezcmbdox] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.venta-row-top[b-ivezcmbdox],
.venta-row-bottom[b-ivezcmbdox] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.venta-sep[b-ivezcmbdox] {
    color: var(--text-muted);
    font-size: var(--fs-caption);
}

.venta-id[b-ivezcmbdox] {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    font-family: monospace;
}

.venta-vendedor[b-ivezcmbdox] {
    color: var(--text-secondary);
    font-size: var(--fs-body-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.venta-mesa[b-ivezcmbdox] {
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    font-size: var(--fs-caption);
}

.venta-hora[b-ivezcmbdox] {
    font-size: var(--fs-caption);
    color: var(--text-muted);
}

/* Columna derecha: monto + chevron */
.venta-col-monto[b-ivezcmbdox] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.venta-monto[b-ivezcmbdox] {
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    font-size: var(--fs-body);
    white-space: nowrap;
}

.venta-expand[b-ivezcmbdox] {
    color: var(--text-muted);
    transition: transform 0.2s ease;
    font-size: var(--fs-label);
}

.venta-expand.expanded[b-ivezcmbdox] {
    transform: rotate(180deg);
}

/* Items de la venta */
.venta-items[b-ivezcmbdox] {
    padding: 0.75rem;
    background: #f8fafc;
    border-top: 1px solid var(--border-color);
}

.venta-tiempos[b-ivezcmbdox] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    background: white;
    border-radius: var(--border-radius-sm);
    font-size: var(--fs-caption);
    color: var(--text-secondary);
}

.venta-item[b-ivezcmbdox] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px dashed #e2e8f0;
}

.venta-item:last-child[b-ivezcmbdox] {
    border-bottom: none;
}

.venta-item.item-incidencia[b-ivezcmbdox] {
    background: rgba(245, 158, 11, 0.1);
    padding: 0.4rem 0.5rem;
    margin: 0.25rem 0;
    border-radius: var(--border-radius-sm);
    border-bottom: none;
}

.item-alerta[b-ivezcmbdox] {
    color: #f59e0b;
    font-size: var(--fs-label);
}

.item-cantidad[b-ivezcmbdox] {
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    min-width: 40px;
    text-align: right;
    font-size: var(--fs-body-sm);
}

.item-descripcion[b-ivezcmbdox] {
    flex: 1;
    color: var(--text-secondary);
    font-size: var(--fs-body-sm);
}

.item-monto[b-ivezcmbdox] {
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    font-size: var(--fs-body-sm);
    min-width: 70px;
    text-align: right;
}

/* ==========================================================================
   Solapa Cubiertos
   ========================================================================== */

.panel-cubiertos[b-ivezcmbdox] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ==========================================================================
   Grid de KPIs sin cubiertos
   ========================================================================== */

.resumen-kpis--sin-cubiertos[b-ivezcmbdox] {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* ==========================================================================
   Estados vacíos y carga
   ========================================================================== */

.list-loading[b-ivezcmbdox] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--text-muted);
}

.list-empty[b-ivezcmbdox] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: white;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

.list-empty-icon[b-ivezcmbdox] {
    font-size: var(--fs-icon-lg);
    opacity: 0.4;
    margin-bottom: 1rem;
}

.list-empty p[b-ivezcmbdox] {
    font-size: var(--fs-body);
    margin: 0;
}
/* /Pages/VentaRangoHorario.razor.rz.scp.css */
/* ==========================================================================
   VentaRangoHorario - Estilos específicos de la página
   ========================================================================== */

/* Contenido principal */
.page-content[b-yple844gls] {
    padding: 1rem;
    padding-bottom: 2rem;
    min-height: calc(100vh - 3.5rem - 3.75rem);
}

/* Contenedor de la página */
.page-rangohorario[b-yple844gls] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Información del período */
.periodo-info[b-yple844gls] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: white;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    font-size: var(--fs-body-sm);
}

.periodo-label[b-yple844gls] {
    color: var(--text-muted);
}

.periodo-rango[b-yple844gls] {
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}

/* Responsive */
@media (max-width: 479px) {
    .periodo-info[b-yple844gls] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}