/* _content/Bidef.Web/Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-syd68p8h9e] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-syd68p8h9e] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/Bidef.Web/Components/Pages/Home.razor.rz.scp.css */
.dash[b-j75z9emf2a] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 660px;
    margin: 0 auto;
}

/* ---- Encabezado (hero) ---- */
.hero[b-j75z9emf2a] {
    background: linear-gradient(135deg, #0b8a63 0%, #075e44 100%);
    border-radius: 22px;
    padding: 22px;
    color: #fff;
    box-shadow: 0 12px 28px rgba(10, 125, 90, .30);
}

.hero-top[b-j75z9emf2a] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.hero-greet[b-j75z9emf2a] {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.3px;
}

.hero-date[b-j75z9emf2a] {
    opacity: .85;
    font-size: .85rem;
    text-transform: capitalize;
    margin-top: 2px;
}

.hero-badge[b-j75z9emf2a] {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    max-width: 46%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-sales[b-j75z9emf2a] {
    margin-top: 20px;
}

.hero-sales-label[b-j75z9emf2a] {
    font-size: .8rem;
    opacity: .85;
}

.hero-sales-amount[b-j75z9emf2a] {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.1;
    margin-top: 2px;
}

.hero-sales-count[b-j75z9emf2a] {
    font-size: .82rem;
    opacity: .9;
    margin-top: 3px;
}

/* ---- Tarjetas de métricas ---- */
.stats[b-j75z9emf2a] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.stat[b-j75z9emf2a] {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    border: 1px solid #eef1f4;
    box-shadow: 0 4px 14px rgba(20, 40, 60, .06);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat.warn[b-j75z9emf2a] {
    border-color: #f6d9c0;
    background: #fffaf6;
}

.stat-ic[b-j75z9emf2a] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-num[b-j75z9emf2a] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f1e2e;
    line-height: 1;
}

.stat-lbl[b-j75z9emf2a] {
    font-size: .8rem;
    color: #6b7785;
    font-weight: 600;
}

/* ---- Las tarjetas son ENLACES -------------------------------------------------------------
   🚨 En el celular no hay menú a la vista: si el número no lleva a ninguna parte, el panel es
   un cartel. La flecha se ve siempre (en un teléfono no existe «pasar el ratón por encima»,
   así que un botón que solo se anuncia al hacer hover es un botón invisible). */
a.stat[b-j75z9emf2a] {
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, box-shadow .12s ease;
}

a.stat:active[b-j75z9emf2a] {
    transform: scale(.975);
    box-shadow: 0 2px 8px rgba(20, 40, 60, .10);
}

.stat-go[b-j75z9emf2a] {
    display: block;
    margin-top: 2px;
    font-size: .74rem;
    font-weight: 700;
    color: #0a7d5a;
}

.stat.warn .stat-go[b-j75z9emf2a] { color: #c2410c; }

/* ---- Tarjeta genérica (gráfica) ---- */
.card[b-j75z9emf2a] {
    background: #fff;
    border-radius: 16px;
    padding: 18px 16px 12px;
    border: 1px solid #eef1f4;
    box-shadow: 0 4px 14px rgba(20, 40, 60, .06);
}

.card-title[b-j75z9emf2a] {
    font-size: .95rem;
    font-weight: 700;
    color: #0f1e2e;
    margin-bottom: 14px;
}

.bars[b-j75z9emf2a] {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 130px;
}

.bar-col[b-j75z9emf2a] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    height: 100%;
}

.bar-val[b-j75z9emf2a] {
    font-size: .62rem;
    font-weight: 700;
    color: #6b7785;
    min-height: .8rem;
}

.bar[b-j75z9emf2a] {
    width: 68%;
    max-width: 26px;
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, #16a97c 0%, #0a7d5a 100%);
}

.bar-day[b-j75z9emf2a] {
    font-size: .68rem;
    color: #94a0ac;
    font-weight: 600;
}

/* Leyenda del color de las barras (buena/regular/baja/sin costo) */
.lgd[b-j75z9emf2a] {
    display: inline-flex;
    align-items: center;
    font-size: .72rem;
    color: #6b7785;
    font-weight: 600;
}

.dot[b-j75z9emf2a] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 5px;
}

/* ---- Accesos rápidos ---- */
.quick[b-j75z9emf2a] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.q[b-j75z9emf2a] {
    flex: 1 1 auto;
    min-width: 104px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 14px;
    font-weight: 700;
    font-size: .95rem;
    background: #fff;
    color: #0a7d5a;
    border: 1.5px solid #d7e3dd;
}

.q-primary[b-j75z9emf2a] {
    background: #0a7d5a;
    color: #fff;
    border-color: #0a7d5a;
    box-shadow: 0 6px 16px rgba(10, 125, 90, .25);
}