/* ==========================================================================
   Dashboard VitAlino - estilos propios MINIMOS (solo presentacion).
   Todo lo demas sigue siendo MudBlazor nativo (sin JS ni frameworks extra).
   Estas reglas solo afinan lo que el artifact muestra:
   - pagina blanca y plana, ancho maximo 1200px centrado
   - una tarjeta por bloque, sin sombra, borde gris claro, esquinas redondeadas
   - chips pill con acento violeta (Aurora), toggle segmentado violeta
   - TODOS los colores salen de las variables de app.css (--color-*); sin hex sueltos
   - tablas: cabeceras en mayusculas y grises, sin zebra, sin bordes verticales,
     separadores horizontales muy tenues, columna Total en negrita
   - fila de resultado (fondo gris muy claro), celdas negativas (rosa tenue)
   - primera columna sticky en las tablas anchas
   ========================================================================== */

/* ---------- Contenedor del reporte ---------- */
.dashboard-layout,
.dashboard-content {
    background: var(--color-bg-surface);
    min-height: 100%;
}

/* pagina blanca solo mientras se muestra el dashboard */
body.mp-app:has(.dashboard-layout) {
    background: var(--color-bg-surface);
}

.vitalino-dashboard {
    /* Paleta Aurora (violeta) del MFE. Todo sale de app.css (--color-*): sin hex sueltos.
       app.css define --color-primary / --color-text / --color-border / etc. */
    --vl-acento: var(--color-primary);
    --vl-acento-hover: var(--color-primary-dark);
    --vl-texto: var(--color-text);
    --vl-texto-apagado: var(--color-text-secondary);
    --vl-borde: var(--color-border);
    --vl-borde-suave: var(--color-bg-elevated);
    --vl-panel: var(--color-bg-page);
    --vl-total: var(--color-bg-elevated);
    --vl-neg-texto: var(--color-error);
    --vl-neg-fondo: color-mix(in srgb, var(--color-error) 10%, var(--color-bg-surface));
    --vl-info: var(--color-info);

    /* acento violeta Aurora para chips seleccionados, toggle y elementos activos */
    --mud-palette-primary: var(--vl-acento);
    --mud-palette-primary-hover: var(--vl-acento-hover);
    --mud-palette-primary-text: var(--color-text-on-light);
    --mud-palette-secondary: var(--vl-info);
    --mud-palette-secondary-text: var(--color-text-on-light);

    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 16px 56px;
    background: var(--color-bg-surface);
    color: var(--vl-texto);
}

/* ---------- Cabecera ---------- */
.vl-cabecera {
    margin-bottom: 20px;
}

.vitalino-dashboard .vl-titulo {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--vl-texto);
    line-height: 1.15;
}

.vitalino-dashboard .vl-resumen {
    color: var(--vl-texto-apagado);
    font-size: 13px;
    margin-top: 6px;
}

/* ---------- Panel de filtros ---------- */
.vitalino-dashboard .vl-panel {
    background: var(--vl-panel);
    border: 1px solid var(--vl-borde);
    border-radius: 12px;
    box-shadow: none !important;
}

.vitalino-dashboard .vl-etiqueta {
    color: var(--vl-texto-apagado);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.vitalino-dashboard .vl-mostrando {
    color: var(--vl-texto);
    font-size: 13px;
}

.vitalino-dashboard .vl-nota {
    color: var(--vl-texto-apagado);
    font-size: 12px;
}

/* rango de fechas compacto */
.vitalino-dashboard .vl-fecha {
    flex: 0 0 auto;
}

.vitalino-dashboard .vl-fecha .mud-input {
    width: 118px;
}

.vitalino-dashboard .vl-fecha .mud-input-text {
    font-size: 12px;
    padding: 6px 8px;
}

.vitalino-dashboard .vl-fecha .mud-input-control {
    display: inline-flex;
}

/* ---------- Chips pill ---------- */
.vitalino-dashboard .mud-chip {
    border-radius: 999px;
    font-size: 12px;
}

.vitalino-dashboard .mud-chip-outlined {
    border-color: var(--vl-borde);
    background: var(--color-bg-surface);
    color: var(--vl-texto-apagado);
}

.vitalino-dashboard .mud-chip-selected {
    background: var(--vl-acento) !important;
    border-color: var(--vl-acento) !important;
    color: var(--color-text-on-light) !important;
    font-weight: 600;
}

/* ---------- Toggle segmentado ---------- */
.vitalino-dashboard .mud-toggle-item {
    text-transform: none;
    font-size: 12px;
    letter-spacing: 0;
    min-width: 64px;
}

.vitalino-dashboard .mud-toggle-item.mud-button-outlined {
    border-color: var(--vl-borde) !important;
    color: var(--vl-texto-apagado) !important;
}

/* ---------- Bloques (una tarjeta plana por bloque) ---------- */
.vitalino-dashboard .vl-bloque {
    background: var(--color-bg-surface);
    border: 1px solid var(--vl-borde);
    border-radius: 14px;
    box-shadow: none !important;
    margin-top: 20px;
}

.vitalino-dashboard .vl-bloque-titulo {
    font-weight: 700;
    color: var(--vl-texto);
}

.vitalino-dashboard .vl-bloque-desc {
    color: var(--vl-texto-apagado);
    font-size: 13px;
    margin-top: 4px;
}

/* ---------- Tiles compactos ---------- */
.vitalino-dashboard .vl-tile {
    background: var(--vl-panel);
    border: 1px solid var(--vl-borde);
    border-radius: 10px;
    box-shadow: none !important;
    height: 100%;
}

.vitalino-dashboard .vl-tile-over {
    color: var(--vl-texto-apagado);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vitalino-dashboard .vl-tile-valor {
    color: var(--vl-texto);
    font-weight: 700;
    line-height: 1.2;
    margin: 2px 0;
}

.vitalino-dashboard .vl-tile-caption {
    color: var(--vl-texto-apagado);
    font-size: 11px;
}

/* ---------- Tablas ---------- */
.vitalino-dashboard .mud-table {
    background: transparent;
    border: none;
    box-shadow: none !important;
}

.vitalino-dashboard .mud-table td,
.vitalino-dashboard .mud-table th {
    padding: 7px 12px;
}

.vitalino-dashboard .mud-table-container {
    overflow-x: auto;
}

.vitalino-dashboard .mud-table th,
.vitalino-dashboard .mud-table th span {
    background-color: transparent !important;
    color: var(--vl-texto-apagado) !important;
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--vl-borde);
    border-top: none;
}

.vitalino-dashboard .mud-table tbody td {
    font-size: 13px;
    color: var(--vl-texto);
    border-bottom: 1px solid var(--vl-borde-suave);
    border-right: none;
    white-space: nowrap;
}

.vitalino-dashboard .mud-table tbody tr:hover td {
    background: var(--color-bg-elevated);
}

/* fila de resultado: fondo gris muy claro + texto en negrita */
.vitalino-dashboard .mud-table tbody tr.vl-fila-total td {
    background: var(--vl-total);
    font-weight: 700;
    border-bottom: 1px solid var(--vl-borde);
}

.vitalino-dashboard .mud-table tbody tr.vl-fila-total:hover td {
    background: var(--vl-total);
}

/* celdas negativas: rosa muy tenue */
.vitalino-dashboard .mud-table tbody td.vl-neg {
    background: var(--vl-neg-fondo) !important;
    color: var(--vl-neg-texto);
}

/* columna Total en negrita */
.vitalino-dashboard .vl-col-total .mud-table-root tbody td:nth-child(2) {
    font-weight: 700;
}

/* primera columna sticky en tablas anchas */
.vitalino-dashboard .vl-tabla-ancha .mud-table-root th:first-child,
.vitalino-dashboard .vl-tabla-ancha .mud-table-root td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--color-bg-surface);
    border-right: 1px solid var(--vl-borde-suave);
}

.vitalino-dashboard .vl-tabla-ancha .mud-table-root thead th:first-child {
    z-index: 3;
    background: var(--color-bg-surface);
}

.vitalino-dashboard .vl-tabla-ancha .mud-table-root tbody tr.vl-fila-total td:first-child {
    background: var(--vl-total);
}

/* ---------- Ajustes finos ---------- */
.vitalino-dashboard .mud-alert {
    font-size: 12px;
}

/* checkboxes de los desplegables en el color de info */
body.mp-app .mud-list-item .mud-icon {
    color: var(--color-info) !important;
}