/* =========================================================
   Página de estadísticas (Estadistica.razor)
   Clases con prefijo "st-" para no chocar con MudBlazor,
   Syncfusion ni app.css.
   ========================================================= */

/* ---------- Títulos de sección ---------- */
.st-section {
    margin: 0 0 .25rem;
    color: #0a1a33;
    font-size: 1.1rem;
    font-weight: 700;
}

.st-section--grid {
    margin-top: 1.5rem;
    margin-bottom: .75rem;
}

.st-hint {
    margin: 0 0 .9rem;
    color: #4a628a;
    font-size: .85rem;
}

.st-empty {
    padding: 1.5rem;
    border: 1.5px dashed #b9c9e2;
    border-radius: 8px;
    background: #f4f8fd;
    color: #4a628a;
}

/* ---------- Rejilla de tarjetas ---------- */
.st-cards {
    --abyss: #071a3b;
    --deep: #0d2a5c;
    --cobalt: #1f5eff;
    --sky: #5cc8ff;
    --steel: #8fa9d1;

    display: grid;
    /* Ancho mínimo de cada tarjeta: sube o baja este valor para ajustar cuántas caben por fila */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

/* ---------- Tarjeta ---------- */
.st-cards .st-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    color: #fff;
    background:
        radial-gradient(90% 60% at 0% 0%, rgba(31, 94, 255, .4), transparent 70%),
        radial-gradient(rgba(92, 200, 255, .14) 1px, transparent 1.6px) 0 0 / 22px 22px,
        linear-gradient(160deg, var(--deep), var(--abyss) 70%);
    box-shadow: 0 6px 18px rgba(7, 26, 59, .22);
    font-family: Bahnschrift, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}

/* Marco tipo Datamatrix: "L" sólida a la izquierda y abajo... */
.st-cards .st-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-left: 3px solid rgba(92, 200, 255, .9);
    border-bottom: 3px solid rgba(92, 200, 255, .9);
    border-radius: 8px;
    pointer-events: none;
}

/* ...y borde discontinuo (patrón de reloj) arriba y a la derecha */
.st-cards .st-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, rgba(92, 200, 255, .5) 0 6px, transparent 6px 12px) top / 100% 3px no-repeat,
        repeating-linear-gradient(180deg, rgba(92, 200, 255, .5) 0 6px, transparent 6px 12px) right / 3px 100% no-repeat;
}

.st-cards .st-body {
    position: relative;
    z-index: 1;
    padding: 1.15rem 1.35rem 1.2rem;
}

/* ---------- Cabecera: avatar y nombre ---------- */
.st-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
}

.st-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--cobalt);
    font-size: .9rem;
    font-weight: 700;
}

.st-name {
    overflow: hidden;
    font-size: 1.05rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Total ---------- */
.st-total {
    display: flex;
    flex-direction: column;
    margin-top: 1.1rem;
}

.st-total-label {
    color: var(--steel);
    font-size: .8rem;
}

.st-total-value {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

/* ---------- Barra de rango (mínimo a máximo) con marca de media ---------- */
.st-range {
    margin-top: 1rem;
}

.st-track {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: rgba(143, 169, 209, .22);
}

.st-span {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--cobalt), var(--sky));
}

.st-avg {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 2px;
    margin-left: -1px;
    border-radius: 1px;
    background: #fff;
}

.st-scale {
    display: flex;
    justify-content: space-between;
    margin-top: .35rem;
    color: var(--steel);
    font-family: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
    font-size: .7rem;
}

/* ---------- Mínimo, media y máximo ---------- */
.st-stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    gap: .5rem;
    margin-top: 1rem;
    padding-top: .8rem;
    border-top: 1px solid rgba(92, 200, 255, .22);
}

.st-stat-label {
    display: block;
    color: var(--steel);
    font-size: .75rem;
    white-space: nowrap;
}

.st-stat-value {
    display: block;
    margin-top: .1rem;
    font-size: 1.2rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ---------- Separador con patrón de reloj (como el borde Datamatrix) ---------- */
.st-sep {
    height: 3px;
    margin: 2rem 0 1.5rem;
    background: repeating-linear-gradient(90deg, rgba(31, 94, 255, .45) 0 6px, transparent 6px 12px);
}

/* ---------- Tarjetas de clasificación ---------- */
/* Más anchas que las individuales y alineadas a la izquierda */
.st-cards.st-cards--rank {
    grid-template-columns: repeat(auto-fill, minmax(340px, 560px));
    justify-content: start;
    align-items: start;
}

.st-rank-title {
    font-size: 1.05rem;
    font-weight: 600;
}

.st-rank-sub {
    margin-top: .15rem;
    color: var(--steel);
    font-size: .8rem;
}

.st-rank-list {
    max-height: 26rem;
    margin: .9rem 0 0;
    padding: 0 .4rem 0 0;
    overflow-y: auto;
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(92, 200, 255, .4) transparent;
}

.st-rank-row {
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr) auto;
    column-gap: .6rem;
    align-items: baseline;
    padding: .55rem 0;
    border-top: 1px solid rgba(92, 200, 255, .16);
}

.st-rank-row:first-child {
    border-top: 0;
}

.st-rank-pos {
    color: var(--steel);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.st-rank-row:first-child .st-rank-pos {
    color: var(--sky);
    font-weight: 700;
}

.st-rank-name {
    overflow: hidden;
    font-size: .95rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-rank-val {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.st-rank-bar {
    grid-column: 2 / -1;
    height: 6px;
    margin-top: .4rem;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(143, 169, 209, .22);
}

.st-rank-bar > span {
    display: block;
    height: 100%;
    min-width: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--cobalt), var(--sky));
}

/* ---------- Grid de detalle (Syncfusion) con cabecera azul clara ---------- */
#EstadisticaDiariosGrid .e-headercell {
    background-color: #eaf1fb;
    border-bottom: 2px solid #1f5eff;
}

#EstadisticaDiariosGrid .e-headercell .e-headertext {
    color: #0a1a33;
    font-weight: 600;
}