/* /Pages/InformeGeneral/Index.razor.rz.scp.css */
/* ── Spinner de carga ────────────────────────── */
.panel-spinner[b-strhbqyx61] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

/* ── Grid de grupos (dentro de bloque-form) ─── */
.panel-grid[b-strhbqyx61] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.panel-grid--contadores[b-strhbqyx61] {
    align-items: stretch;
}

/* ── Grupo (etiqueta + par de tarjetas) ─────── */
.panel-grupo[b-strhbqyx61] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    flex: 1 1 280px;
}

.panel-grupo--compacto[b-strhbqyx61] {
    flex: 0 1 auto;
}

.panel-grupo__label[b-strhbqyx61] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    font-size: .7rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--colorSecundarioTitulos, #1089B8);
    white-space: nowrap;
}

.panel-grupo__cards[b-strhbqyx61] {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.panel-grupo__cards--nowrap[b-strhbqyx61] {
    flex-wrap: nowrap;
}

/* ── Tarjeta de métrica ──────────────────────── */
.panel-card[b-strhbqyx61] {
    flex: 1 1 120px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: .75rem .75rem .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.panel-card--contador[b-strhbqyx61] {
    justify-content: center;
    flex: 0 0 100px;
}

.panel-card__title[b-strhbqyx61] {
    font-size: .78rem;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}

.panel-card__grafico-wrap[b-strhbqyx61] {
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.panel-card__vacio[b-strhbqyx61] {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

.panel-card__vacio-texto[b-strhbqyx61] {
    font-size: .75rem;
    color: #66bb6a;
    font-weight: 500;
}

.panel-card__valores[b-strhbqyx61] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    width: 100%;
    text-align: center;
    font-size: .78rem;
}

.panel-card__valor--rojo[b-strhbqyx61]    { color: #ef5350; font-weight: 600; }
.panel-card__valor--verde[b-strhbqyx61]   { color: #66bb6a; font-weight: 600; }
.panel-card__valor--naranja[b-strhbqyx61] { color: #ff9800; font-weight: 600; }

/* ── Panel de sección (agrupa varios grupos en fila) ─── */
.panel-seccion[b-strhbqyx61] {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: .75rem 1rem;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: .75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    flex: 1 1 auto;
}

.panel-seccion__sep[b-strhbqyx61] {
    border-left: 1px solid #f0f0f0;
    align-self: stretch;
}

/* Variante navegable de panel-seccion */
.panel-seccion--link[b-strhbqyx61] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.panel-seccion--link:hover[b-strhbqyx61] {
    box-shadow: 0 4px 12px rgba(0,0,0,.10);
    border-color: #b0bec5;
}

/* Timestamp "HH:mm" junto al botón de actualizar */
.panel-ultima-actualizacion[b-strhbqyx61] {
    font-size: .72rem;
    color: #aaa;
    white-space: nowrap;
}

/* Dentro de panel-seccion las tarjetas no necesitan borde propio */
.panel-seccion .panel-card--contador[b-strhbqyx61] {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: .2rem .4rem;
}

/* ── Número grande (contadores) ──────────────── */
.panel-card__numero[b-strhbqyx61] {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    margin: .5rem 0 .25rem;
}

.panel-card__numero--rojo[b-strhbqyx61]    { color: #ef5350; }
.panel-card__numero--verde[b-strhbqyx61]   { color: #66bb6a; }
.panel-card__numero--naranja[b-strhbqyx61] { color: #ff9800; }
.panel-card__numero--azul[b-strhbqyx61]    { color: #42a5f5; }
.panel-card__numero--neutro[b-strhbqyx61]  { color: #546e7a; }

/* ── Nivel establecimiento ───────────────────────── */
.panel-ins-estab[b-strhbqyx61] {
    margin-bottom: 1rem;
}

.panel-ins-estab__label[b-strhbqyx61] {
    font-size: .75rem;
    font-weight: 700;
    color: #444;
    margin-bottom: .5rem;
    padding-left: .25rem;
}

/* ── Fila de tipos (dentro de un establecimiento) ── */
.panel-ins-grupos[b-strhbqyx61] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    align-items: flex-start;
}

/* ── Nivel tipo de instalación (tarjeta propia) ───── */
.panel-ins-grupo[b-strhbqyx61] {
    flex: 0 1 auto;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: .6rem .75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.panel-ins-grupo__label[b-strhbqyx61] {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: .5rem;
    text-align: center;
}

.panel-ins-grupo__cards[b-strhbqyx61] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
}

/* ── Tarjeta pequeña de instalación ─────────────── */
.panel-card-sm[b-strhbqyx61] {
    flex: 0 0 200px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: .5rem .5rem .35rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* Dentro de un grupo de tipo: sin tarjeta, separador vertical */
.panel-ins-grupo .panel-card-sm[b-strhbqyx61] {
    border: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    padding: .25rem .75rem;
}

.panel-ins-grupo .panel-card-sm + .panel-card-sm[b-strhbqyx61] {
    border-left: 1px solid #f0f0f0;
}

/* Variante para grupos de donuts (NR / CE): panel-card sin borde propio */
.panel-ins-grupo--donut[b-strhbqyx61] {
    flex: 1 1 280px;
}

.panel-ins-grupo--donut .panel-ins-grupo__cards[b-strhbqyx61] {
    justify-content: flex-start;
}

.panel-ins-grupo--donut .panel-card[b-strhbqyx61] {
    flex: 1 1 160px;
    border: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    padding: .5rem .75rem;
}

.panel-ins-grupo--donut .panel-card + .panel-card[b-strhbqyx61] {
    border-left: 1px solid #f0f0f0;
}

.panel-card-sm__title[b-strhbqyx61] {
    font-size: .72rem;
    font-weight: 600;
    color: #555;
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 190px;
}

.panel-card-sm__chart[b-strhbqyx61] {
    width: 100%;
    height: 200px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-card-sm__valores[b-strhbqyx61] {
    display: flex;
    gap: .5rem;
    font-size: .7rem;
}

/* ── Spinner de carga por sección ───────────── */
.panel-seccion-cargando[b-strhbqyx61] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80px;
    margin-bottom: .75rem;
}

/* ── Subtítulo bajo el número grande ────────── */
.panel-card__subtitle[b-strhbqyx61] {
    font-size: .72rem;
    color: #888;
    text-align: center;
    margin-top: .1rem;
}

/* ── Etiquetas eje X del bar chart ───────────── */
/* MudBlazor 6 posiciona el texto en el borde izquierdo de cada grupo;
   text-anchor:middle lo centra sobre la posición calculada */
.panel-barras-chart :deep(.mud-charts-xaxis)[b-strhbqyx61] {
    text-anchor: middle;
}

/* ── Dos gráficas de barras en fila ──────────── */
.panel-barras-fila[b-strhbqyx61] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.panel-barras-chart[b-strhbqyx61] {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 768px) {
    .panel-barras-fila[b-strhbqyx61] {
        flex-direction: column;
    }
}

/* ── Barras horizontales de instalación ──────── */
.panel-bars-grupo[b-strhbqyx61] {
    margin-bottom: .5rem;
}

.panel-bars-grupo--sep[b-strhbqyx61] {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #f0f0f0;
}

.panel-bars-titulo[b-strhbqyx61] {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--colorSecundarioTitulos, #1089B8);
    margin-bottom: .75rem;
}

.panel-bars-estab-label[b-strhbqyx61] {
    font-size: .75rem;
    font-weight: 700;
    color: #444;
    margin: .5rem 0 .35rem;
    padding-left: .25rem;
}

.panel-bars-tipo-label[b-strhbqyx61] {
    font-size: .67rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #999;
    margin: .5rem 0 .25rem .25rem;
}

.panel-bar-row[b-strhbqyx61] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .35rem;
    min-height: 22px;
}

.panel-bar-label[b-strhbqyx61] {
    flex: 0 0 170px;
    font-size: .75rem;
    color: #555;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-bar-track[b-strhbqyx61] {
    flex: 1 1 auto;
    height: 14px;
    background: #f0f0f0;
    border-radius: 7px;
    overflow: hidden;
}

.panel-bar-fill[b-strhbqyx61] {
    height: 100%;
    border-radius: 7px;
    transition: width .3s ease;
    min-width: 2px;
}

.panel-bar-fill--rojo[b-strhbqyx61]    { background: #ef5350; }
.panel-bar-fill--naranja[b-strhbqyx61] { background: #ff9800; }

.panel-bar-valor[b-strhbqyx61] {
    flex: 0 0 2rem;
    font-size: .75rem;
    font-weight: 700;
    color: #444;
    text-align: left;
}

/* ── Responsividad móvil ─────────────────────── */
@media (max-width: 768px) {

    /* Las panel-seccion pasan de fila a columna */
    .panel-seccion[b-strhbqyx61] {
        flex-direction: column;
        gap: .6rem;
    }

    /* Los separadores verticales se convierten en horizontales */
    .panel-seccion__sep[b-strhbqyx61] {
        border-left: none;
        border-top: 1px solid #f0f0f0;
        align-self: stretch;
        width: 100%;
    }

    /* Permitir wrap en tarjetas marcadas como nowrap */
    .panel-grupo__cards--nowrap[b-strhbqyx61] {
        flex-wrap: wrap;
    }

    /* Tarjetas contadoras un poco más flexibles */
    .panel-card--contador[b-strhbqyx61] {
        flex: 0 0 85px;
    }

    .panel-card__numero[b-strhbqyx61] {
        font-size: 2rem;
    }

    /* Etiqueta de grupo: permitir multilinea */
    .panel-grupo__label[b-strhbqyx61] {
        white-space: normal;
    }

    /* Grupos de donuts: ocupan todo el ancho disponible */
    .panel-grupo[b-strhbqyx61] {
        flex: 1 1 100%;
    }

    /* Instalaciones: tarjetas más estrechas en móvil */
    .panel-card-sm[b-strhbqyx61] {
        flex: 1 1 140px;
        min-width: 130px;
    }

    /* Secciones de contadores en columna */
    .panel-grid--contadores[b-strhbqyx61] {
        flex-direction: column;
    }
}