.hero-compo {
    position: relative;
    max-width: 680px;
    margin: -150px auto 0;
}

.dash {
    position: relative;
    display: flex;
    background: #FFFFFF;
    color: #262D40;
    border-radius: 16px;
    box-shadow: 0 18px 40px -24px rgba(15, 19, 32, .38);
    text-align: left;
    overflow: hidden;
    z-index: 1;
}

.dash-lado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    background: #262D40;
    padding: .55rem .5rem;
    flex-shrink: 0;
}
.dash-lado-logo { width: 24px; height: 24px; filter: brightness(0) invert(1); margin-bottom: .35rem; }
.dash-lado-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    color: rgba(255, 255, 255, .5);
}
.dash-lado-icono .icono { width: 13px; height: 13px; }
.dash-lado-icono.activo { background: rgba(255, 255, 255, .14); color: #FFFFFF; }

.dash-cuerpo { flex: 1; min-width: 0; }

.dash-top {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .85rem;
    border-bottom: 1px solid #EEF1F5;
}
.dash-menu { width: 14px; height: 14px; color: #5F6B81; }
.dash-top-titulos { display: flex; flex-direction: column; line-height: 1.15; flex: 1; }
.dash-top-titulos strong { font-size: .56rem; font-weight: 700; }
.dash-top-titulos span { font-size: .5rem; color: #8A94A6; }
.dash-tema {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: #F7F8FA;
    border: 1px solid #EEF1F5;
    border-radius: 999px;
    padding: .2rem .5rem;
    color: #8A94A6;
}
.dash-tema .icono { width: 10px; height: 10px; }
.dash-campana { width: 14px; height: 14px; color: #8A94A6; }
.dash-avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #323850;
    color: #FFFFFF;
    font-size: .52rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dash-rol { display: inline-flex; align-items: center; gap: .2rem; font-size: .58rem; font-weight: 600; color: #5F6B81; }
.dash-rol .icono { width: 9px; height: 9px; }

.dash-hoy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem .3rem;
}
.dash-hoy-titulo { font-size: .58rem; font-weight: 700; }
.dash-buscar {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    width: min(420px, 92%);
    background: #F7F8FA;
    border: 1px solid #EEF1F5;
    border-radius: 999px;
    padding: .4rem .8rem;
    font-size: .56rem;
    font-weight: 500;
    color: #8A94A6;
    white-space: nowrap;
    overflow: hidden;
}
.dash-buscar .icono { width: 10px; height: 10px; flex-shrink: 0; }

.dash-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px;
}
.dash-acc {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: #F7F8FA;
    border: 1px solid #EEF1F5;
    border-radius: 11px;
    padding: .8rem .65rem;
}
.dash-acc-ic {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dash-acc-ic .icono { width: 16px; height: 16px; }
.dash-acc-bars { flex: 1; display: grid; gap: .35rem; }
.dash-bar { height: 8px; border-radius: 999px; background: #C9D2E3; }
.dash-bar.suave { width: 72%; background: #E6EAF1; }
.ci-azul { background: #E1ECF7; color: #4A79B0; }
.ci-celeste { background: #E8F0FB; color: #6B8FC4; }
.ci-ambar { background: #F9EDD0; color: #B98728; }
.ci-verde { background: #E3F3EC; color: #3D9B76; }

.dash-venta {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    height: 52px;
    padding: 0 .85rem;
    border-radius: 11px;
    background: #262D40;
}
.dash-venta-bar { height: 7px; width: 88px; border-radius: 999px; background: rgba(255, 255, 255, .4); }
.dash-venta-bar.grande { height: 11px; width: 64px; background: rgba(255, 255, 255, .7); }
.dash-tareas {
    grid-column: span 1;
    display: grid;
    gap: .45rem;
    align-content: center;
    background: #FFFFFF;
    border: 1px solid #EEF1F5;
    border-radius: 11px;
    padding: .7rem;
}

.dash-estado {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 2px;
}
.dash-est {
    display: flex;
    flex-direction: column;
    gap: .22rem;
    border: 1px solid #EEF1F5;
    border-radius: 9px;
    padding: .4rem .45rem;
}
.dash-est-ic { width: 15px; height: 15px; border-radius: 5px; background: rgba(38, 45, 64, .2); }
.dash-est-num { height: 8px; width: 40%; border-radius: 999px; background: rgba(38, 45, 64, .34); }
.dash-est-lbl { height: 6px; width: 72%; border-radius: 999px; background: rgba(38, 45, 64, .16); }
.ce-celeste { background: #E8F0FB; }
.ce-ambar { background: #F9EDD0; }
.ce-verde { background: #E3F3EC; }
.ce-coral { background: #FFE7E3; }

.hero-compo .dash-grid,
.laptop-escala .dash-grid,
.tablet-escala .dash-grid { filter: blur(1.5px); }

@media (max-width: 767.98px) {
    .hero-compo { margin: -165px auto 0; }
    .dash-lado { padding: .5rem .35rem; }
    .dash-rol { display: none; }
    .hero-compo .dash-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-compo .dash-acc:nth-of-type(n+5) { display: none; }
    .hero-compo .dash-venta,
    .hero-compo .dash-tareas,
    .hero-compo .dash-estado { display: none; }
}