/* ==========================================================================
   DASHBOARD GERENCIAL — Lo propio del módulo, bajo .bl.dg. Archivo 15 de 15. Ver §6.16.
   Handoff: mudblazor/handoff_dashboard_gerencial 2/Dashboard Gerencial.dc.html.
   ========================================================================== */
/* Va tras 14-users sin colisiones: otro scope. 09-motion gana igual con
   !important. Antes de mover el orden, ver «El orden ES el contrato». */

/* --------------------------------------------------------------------------
   §0 — Normalización. MudText trae tamaño, peso e interlineado propios; aquí
   cada parte los hereda del contenedor, como los <span> del mock.
   -------------------------------------------------------------------------- */
/* Solo las superficies del módulo: Mi Cartera comparte el main y no se toca. */
/* line-height normal: los <span> vía MudElement heredan el 1.43 de Mud; el mock hereda normal. */
.bl.dg .dg-card,
.bl.dg .dg-drawer,
.bl.dg .dg-topbar .mud-tabs-header{
    color: var(--dg-text);
    line-height: normal;
}
/* Sin el scope a propósito: (0,2,0) debe perder contra cada clase dg-* (0,3,0) que fija tamaño y peso. */
.dg-card .mud-typography,
.dg-drawer .mud-typography,
.dg-topbar .mud-tabs-header .mud-typography{
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: normal;
    letter-spacing: normal;
    color: inherit;
}
/* Los botones-fila del mock son <button> desnudos: heredan tipografía y color. */
.bl.dg .dg-btn{
    font: inherit;
    color: inherit;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.bl.dg .dg-btn:focus-visible{
    outline: 2px solid var(--dg-navy);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   §1 — Barra superior de Home: MudTabs como la barra navy de 52px del mock;
   su header lleva el pill y el avatar.
   -------------------------------------------------------------------------- */
/* Home es su propio scroller bajo el MudAppBar; así la barra pega en top 0.
   Compuesto: la clase vive en el mismo <main> del scope. */
.bl.dg.dg-home{
    height: calc(100vh - var(--mud-appbar-height, 64px));
    overflow: auto;
    background: var(--dg-fill);
}
/* (0,4,0): gana a .mud-tabs.mud-tabs-rounded .mud-tabs-tabbar. Ver §8, trampa 23. */
.bl.dg .dg-topbar .mud-tabs-tabbar{
    position: sticky;
    top: 0;
    z-index: 30;
    height: 52px;
    padding: 0 20px;
    border: 0;
    border-radius: 0;
    background: var(--dg-navy);
    color: var(--dg-navy-ink);
    box-shadow: none;
}
.bl.dg .dg-topbar .mud-tabs-tabbar-content,
.bl.dg .dg-topbar .mud-tabs-tabbar-inner,
.bl.dg .dg-topbar .mud-tabs-tabbar-wrapper{
    height: 100%;
    align-items: stretch;
}
.bl.dg .dg-topbar .mud-tabs-tabbar-wrapper{
    gap: 4px;
}
.bl.dg .dg-topbar .mud-tab{
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 0 14px;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: normal;
    text-transform: uppercase;
    color: var(--dg-on-navy-muted);
    opacity: 1;
    transition: color .15s ease;
}
.bl.dg .dg-topbar .mud-tab:hover{
    background: transparent;
    color: var(--dg-navy-ink);
}
.bl.dg .dg-topbar .mud-tab.mud-tab-active{
    color: var(--dg-navy-ink);
}
/* El subrayado de 3px del mock es el slider de MudTabs. */
.bl.dg .dg-topbar .mud-tab-slider{
    height: 3px;
    background: var(--dg-navy-ink);
}
/* El «Header» de MudTabs renderiza .mud-tabs-header; .mud-tabs-panel-header vive dentro de cada tab. */
.bl.dg .dg-topbar .mud-tabs-header{
    display: flex;
    flex: none;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}
/* Solo el contenedor de paneles: MudTabs también pone .mud-tab-panel en cada pestaña. */
.bl.dg .dg-topbar .mud-tabs-panels{
    padding: 0;
}
.bl.dg .dg-topbar__pill{
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: var(--r-chip);
    background: var(--dg-on-navy-fill);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dg-on-navy-soft);
}
.bl.dg .dg-topbar__dot{
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: var(--r-chip);
    background: var(--dg-ok-dot);
}
.bl.dg .dg-topbar__avatar{
    width: 32px;
    height: 32px;
    font-size: 12px;
    font-weight: 800;
    color: var(--dg-navy);
    background: var(--dg-navy-ink);
}

/* --------------------------------------------------------------------------
   §2 — Columna de página y tarjeta unibody. La geometría va en .dg-page,
   nunca en el scope (lección de Ramos).
   -------------------------------------------------------------------------- */
/* content-box como el mock: 1520 son de contenido; el relleno de 24 va por fuera. */
.bl.dg .dg-page{
    max-width: 1520px;
    margin: 0 auto;
    padding: 20px 24px 80px;
    box-sizing: content-box;
}
.bl.dg .dg-card{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 32px;
    border: 1px solid var(--dg-line);
    border-radius: var(--gh-r-card);
    background: var(--dc-surface);
    /* La sombra de hover de los indicadores cabe en el relleno; nada que recortar. */
    overflow: visible;
}

/* --------------------------------------------------------------------------
   §3 — Cabecera: titular, alcance y selector de período (variante del .seg).
   -------------------------------------------------------------------------- */
.bl.dg .dg-head{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}
.bl.dg .dg-head__titles{
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bl.dg .dg-title{
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.01em;
}
.bl.dg .dg-head__scope{
    font-size: 13.5px;
    color: var(--dg-muted);
}
/* El mock no tiene hover en los períodos; el del .seg base se apaga. */
.bl.dg .seg.seg--period{
    height: auto;
    gap: 2px;
    padding: 4px;
    border-radius: var(--gh-r-row-1);
    background: var(--dg-fill);
}
.bl.dg .seg.seg--period > button{
    padding: 8px 16px;
    border-radius: var(--r-icon);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--dg-muted);
}
.bl.dg .seg.seg--period > button:hover{
    background: transparent;
}
.bl.dg .seg.seg--period > button.seg__on{
    background: var(--dc-surface);
    color: var(--dg-text);
}
/* El label interno de MudToggleItem trae min-height 20px: el mock mide el texto solo. */
.bl.dg .seg.seg--period > button .mud-button-label,
.bl.dg .seg.seg--mini > button .mud-button-label{
    min-height: 0;
    line-height: normal;
}

/* --------------------------------------------------------------------------
   §4 — Indicadores: rejilla 4×2, tarjeta clicable, delta y mini-barras.
   -------------------------------------------------------------------------- */
.bl.dg .dg-kpis{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
/* Es un <button> cuando abre detalle: el navegador centra y encoge su contenido; aquí se estira. */
.bl.dg .dg-kpi{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 16px 18px;
    border: 1.5px solid var(--dg-line);
    border-radius: var(--gh-r-tray-1);
    background: var(--dc-surface);
    color: var(--dg-text);
    text-align: left;
    cursor: pointer;
    transition: box-shadow .15s;
}
.bl.dg .dg-kpi:hover{
    border-color: var(--dg-line-hover);
    box-shadow: var(--dg-kpi-shadow);
}
.bl.dg .dg-kpi:focus-visible{
    outline: 2px solid var(--dg-navy);
    outline-offset: 2px;
}
/* Sin fuente de datos todavía: mismo cromo, sin hover ni mano. */
.bl.dg .dg-kpi--static,
.bl.dg .dg-kpi--static:hover{
    cursor: default;
    border-color: var(--dg-line);
    box-shadow: none;
}
.bl.dg .dg-kpi__label{
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dg-label);
}
.bl.dg .dg-kpi__body{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}
.bl.dg .dg-kpi__nums{
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.bl.dg .dg-kpi__value{
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.bl.dg .dg-kpi__unit{
    font-size: 12px;
    font-weight: 700;
    color: var(--dg-label);
}
.bl.dg .dg-kpi__num{
    font-size: clamp(18px, 1.7vw, 26px);
    font-weight: 800;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.bl.dg .dg-delta{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: var(--r-chip);
    font-size: 12px;
    font-weight: 800;
}
.bl.dg .dg-delta--ok{
    background: var(--dg-ok-bg);
    color: var(--dg-ok);
}
.bl.dg .dg-delta--warn{
    background: var(--dg-warn-bg);
    color: var(--dg-warn);
}
.bl.dg .dg-spark{
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 36px;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}
/* La altura de cada barra la fija el dato (3..36px), como en el mock. */
.bl.dg .dg-spark__bar{
    width: 6px;
    border-radius: 3px;
    background: var(--dg-bar-soft);
}
.bl.dg .dg-spark__bar--on{
    background: var(--dg-navy);
}
.bl.dg .dg-kpi__meta{
    font-size: 12.5px;
    color: var(--dg-muted);
}

/* --------------------------------------------------------------------------
   §5 — Secciones con borde, cabecera de sección, selectores de moneda,
   gráfico de producción mensual y sus tarjetas de resumen.
   -------------------------------------------------------------------------- */
.bl.dg .dg-grid-2{
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px;
}
.bl.dg .dg-grid-fit{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 16px;
}
/* Radio 16 del mock: fuera de la escala, igual que la unibody de Ramos y Usuarios. */
.bl.dg .dg-section{
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid var(--dg-line);
    border-radius: 16px;
}
.bl.dg .dg-section__head{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.bl.dg .dg-section__titles{
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bl.dg .dg-kicker{
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dg-muted);
}
.bl.dg .dg-section__sub{
    font-size: 13px;
    color: var(--dg-label);
}
.bl.dg .dg-section__tools{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.bl.dg .seg.seg--mini{
    height: auto;
    gap: 2px;
    padding: 3px;
    border-radius: 9px;
    background: var(--dg-fill);
}
.bl.dg .seg.seg--mini > button{
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--dg-muted);
}
.bl.dg .seg.seg--mini > button:hover{
    background: transparent;
}
.bl.dg .seg.seg--mini > button.seg__on{
    background: var(--dc-surface);
    color: var(--dg-text);
}
/* MudSelect vestido como el <select> nativo del mock: 34px, relleno y borde. El
   relleno va en .mud-input, no en el fieldset. Ver §8, trampa 11. */
.bl.dg .dg-select{
    min-width: 0;
    margin: 0;
}
.bl.dg .dg-select .mud-input-control-input-container{
    margin: 0;
}
.bl.dg .dg-select .mud-input.mud-input-filled,
.bl.dg .dg-select .mud-input.mud-input-filled:hover,
.bl.dg .dg-select .mud-input.mud-input-filled.mud-focused{
    height: 34px;
    min-height: 34px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid var(--dg-line-strong);
    border-radius: 9px;
    background: var(--dg-fill-2);
}
.bl.dg .dg-select .mud-input.mud-input-filled::before,
.bl.dg .dg-select .mud-input.mud-input-filled::after{
    display: none;
}
.bl.dg .dg-select .mud-input-slot{
    height: 32px;
    min-height: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 32px;
    color: var(--dg-text);
}
/* El <select> nativo del mock se ajusta al texto; el input de Mud no: anchos del texto más largo. */
.bl.dg .dg-select--long .mud-input-slot{
    width: 136px;
}
.bl.dg .dg-select--short .mud-input-slot{
    width: 30px;
}
.bl.dg .dg-select .mud-input-adornment .mud-icon-button{
    width: 20px;
    height: 20px;
    padding: 0;
    color: var(--dg-text);
}
.bl.dg .dg-select .mud-input-adornment .mud-icon-root{
    font-size: 18px;
}
.bl.dg .dg-cur{
    display: flex;
    align-items: center;
    gap: 6px;
}
.bl.dg .dg-cur__field{
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bl.dg .dg-cur__cap{
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dg-label);
}
.bl.dg .dg-swap{
    width: 34px;
    height: 34px;
    margin-top: 14px;
    padding: 0;
    border: 1px solid var(--dg-line-strong);
    border-radius: 9px;
    background: var(--dc-surface);
    color: var(--dg-navy);
}
.bl.dg .dg-swap:hover{
    background: var(--dg-fill);
}
.bl.dg .dg-swap .mud-icon-root{
    font-size: 15px;
}
.bl.dg .dg-charts{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.bl.dg .dg-charts--2{
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.bl.dg .dg-chart{
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.bl.dg .dg-chart__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.bl.dg .dg-chart__title{
    font-size: 14px;
    font-weight: 800;
}
.bl.dg .dg-legend{
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--dg-muted);
}
.bl.dg .dg-legend__item{
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.bl.dg .dg-legend__line{
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: var(--dg-navy);
}
.bl.dg .dg-legend__dash{
    width: 14px;
    height: 0;
    border-top: 2px dashed var(--dg-pal-4);
}
.bl.dg .dg-chart__plot{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
}
/* content-box: en el mock los 220px son de contenido y el relleno 2/22 va por fuera (244 en total). */
.bl.dg .dg-chart__y{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: content-box;
    height: 220px;
    padding: 2px 0 22px;
    font-size: 11px;
    text-align: right;
    color: var(--dg-label);
}
.bl.dg .dg-chart__area{
    position: relative;
    min-width: 0;
}
/* El SVG es el único HTML crudo justificado del módulo: banda, punteado, área y
   puntos no salen de MudChart. Ver AGENTS.md, escalón 3. */
.bl.dg .dg-chart__svg{
    display: block;
    width: 100%;
    height: 220px;
    overflow: visible;
}
.bl.dg .dg-chart__band{
    fill: var(--dg-fill);
}
.bl.dg .dg-chart__grid{
    stroke: var(--dg-fill);
}
.bl.dg .dg-chart__grid--base{
    stroke: var(--dg-line-strong);
}
.bl.dg .dg-chart__prev{
    fill: none;
    stroke: var(--dg-pal-4);
    stroke-width: 2;
    stroke-dasharray: 5 5;
}
.bl.dg .dg-chart__fill{
    fill: var(--dg-navy-area);
}
.bl.dg .dg-chart__line{
    fill: none;
    stroke: var(--dg-navy);
    stroke-width: 2.5;
    stroke-linejoin: round;
}
.bl.dg .dg-chart__dots{
    position: absolute;
    inset: 0 0 22px 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}
.bl.dg .dg-chart__col{
    position: relative;
    display: flex;
    justify-content: center;
    cursor: default;
}
.bl.dg .dg-chart__col:hover{
    background: var(--dg-navy-wash);
}
/* La posición vertical del punto la fija el dato (top en %), como en el mock. */
.bl.dg .dg-chart__dot{
    position: absolute;
    /* content-box: 9px de relleno más 2.5 de borde por lado = 14px, como el <span> del mock. */
    box-sizing: content-box;
    width: 9px;
    height: 9px;
    border: 2.5px solid var(--dg-navy);
    border-radius: var(--r-chip);
    background: var(--dc-surface);
    transform: translateY(-50%);
}
.bl.dg .dg-chart__months{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
}
.bl.dg .dg-chart__month{
    color: var(--dg-label);
}
.bl.dg .dg-chart__month--on{
    color: var(--dg-navy);
}
.bl.dg .dg-stats{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bl.dg .dg-stat{
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
    padding: 9px 12px;
    border-radius: var(--bl-r-control);
    background: var(--dg-panel);
}
.bl.dg .dg-stat__label{
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dg-label);
}
.bl.dg .dg-stat__value{
    font-size: 14.5px;
    font-weight: 800;
    white-space: nowrap;
    color: var(--dg-text);
}
.bl.dg .dg-tone--ok{
    color: var(--dg-ok);
}
.bl.dg .dg-tone--warn{
    color: var(--dg-warn);
}
.bl.dg .dg-tone--navy{
    color: var(--dg-navy);
}
.bl.dg .dg-note{
    padding: 10px 14px;
    border-radius: var(--bl-r-control);
    background: var(--dg-fill);
    font-size: 13px;
    color: var(--dg-text-2);
}

/* --------------------------------------------------------------------------
   §6 — Ranking de aseguradoras: filas clicables, barra relativa al líder y
   enlace «Ver las N aseguradoras →».
   -------------------------------------------------------------------------- */
.bl.dg .dg-rank{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bl.dg .dg-rank__row{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    width: calc(100% + 20px);
    margin: 0 -10px;
    padding: 8px 10px;
    border-radius: var(--bl-r-control);
}
.bl.dg .dg-rank__row:hover{
    background: var(--dg-panel);
}
.bl.dg .dg-rank__top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
}
.bl.dg .dg-rank__name{
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-weight: 700;
}
.bl.dg .dg-rank__pos{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--dg-fill-2);
    font-size: 11px;
    font-weight: 800;
    color: var(--dg-text-2);
}
.bl.dg .dg-ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bl.dg .dg-rank__value{
    font-weight: 800;
    white-space: nowrap;
}
.bl.dg .dg-rank__sub{
    font-size: 12px;
    color: var(--dg-label);
}
/* MudProgressLinear como barra del mock: pista propia, sin el ::before de Mud.
   (0,4,0) gana a su cadena de color. Ver §8, trampa 32. */
.bl.dg .dg-bar{
    height: 8px;
    border-radius: var(--r-chip);
    background: var(--dg-fill);
    overflow: hidden;
}
.bl.dg .dg-bar::before{
    display: none;
}
.bl.dg .dg-bar .mud-progress-linear-bar{
    border-radius: var(--r-chip);
    background: var(--dg-navy);
}
.bl.dg .dg-bar--7{
    height: 7px;
}
.bl.dg .dg-bar--6{
    height: 6px;
}
.bl.dg .dg-bar--soft .mud-progress-linear-bar{
    background: var(--dg-pal-4);
}
.bl.dg .dg-bar--warn .mud-progress-linear-bar{
    background: var(--dg-warn-bar);
}
/* Rampa de la barra apilada y de los ramos: 1 navy · 2 · 3 muted · 4 · 5 suave. */
.bl.dg .dg-bar--p1 .mud-progress-linear-bar,
.bl.dg .dg-pal--1{
    background: var(--dg-navy);
}
.bl.dg .dg-bar--p2 .mud-progress-linear-bar,
.bl.dg .dg-pal--2{
    background: var(--dg-pal-2);
}
.bl.dg .dg-bar--p3 .mud-progress-linear-bar,
.bl.dg .dg-pal--3{
    background: var(--dg-muted);
}
.bl.dg .dg-bar--p4 .mud-progress-linear-bar,
.bl.dg .dg-pal--4{
    background: var(--dg-pal-4);
}
.bl.dg .dg-bar--p5 .mud-progress-linear-bar,
.bl.dg .dg-pal--5{
    background: var(--dg-bar-soft);
}
.bl.dg .dg-more{
    align-self: flex-start;
    padding: 0;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--dg-navy);
}
.bl.dg .dg-more:hover{
    text-decoration: underline;
}
.bl.dg .dg-more--panel{
    margin: 10px 20px 14px;
}
.bl.dg .dg-more--ramos{
    margin-top: 4px;
}

/* --------------------------------------------------------------------------
   §7 — Paneles sin relleno (ejecutivos, departamentos): cabecera con filete,
   pill «Top 6 de N», filas en rejilla.
   -------------------------------------------------------------------------- */
.bl.dg .dg-panel{
    display: flex;
    flex-direction: column;
    border: 1px solid var(--dg-line);
    border-radius: 16px;
    overflow: hidden;
}
.bl.dg .dg-panel__head{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--dg-line-soft);
}
.bl.dg .dg-pill{
    padding: 3px 9px;
    border-radius: var(--r-chip);
    background: var(--dg-fill-2);
    font-size: 12px;
    font-weight: 800;
    color: var(--dg-text-2);
}
.bl.dg .dg-exec{
    display: grid;
    grid-template-columns: 38px minmax(0, 1.4fr) minmax(0, 2fr) auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 11px 20px;
    border-bottom: 1px solid var(--dg-line-row);
    background: var(--dc-surface);
}
.bl.dg .dg-exec:hover{
    background: var(--dg-panel);
}
/* (0,3,0) sobre .mud-avatar.mud-avatar-medium (0,2,0). */
.bl.dg .dg-exec__avatar{
    width: 38px;
    height: 38px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--dg-navy-ink);
    background: var(--dg-navy);
}
.bl.dg .dg-exec__who,
.bl.dg .dg-exec__prog{
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.bl.dg .dg-exec__who{
    gap: 1px;
}
.bl.dg .dg-exec__prog{
    gap: 5px;
}
.bl.dg .dg-exec__name{
    font-size: 14px;
    font-weight: 700;
}
.bl.dg .dg-exec__group,
.bl.dg .dg-exec__meta{
    font-size: 12.5px;
    color: var(--dg-label);
}
.bl.dg .dg-exec__meta{
    font-size: 12px;
}
.bl.dg .dg-exec__value,
.bl.dg .dg-dept__value{
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   §8 — Departamentos y ramos: fila expandible con barra apilada y lista de
   ramos sangrada.
   -------------------------------------------------------------------------- */
.bl.dg .dg-dept{
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--dg-line-row);
}
.bl.dg .dg-dept__row{
    display: grid;
    grid-template-columns: 18px minmax(0, 1.2fr) minmax(0, 2fr) auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 12px 20px;
    background: var(--dc-surface);
}
.bl.dg .dg-dept__row:hover,
.bl.dg .dg-dept__row--open{
    background: var(--dg-panel);
}
.bl.dg .dg-dept__chev{
    display: flex;
    color: var(--dg-muted);
    transition: transform .15s;
}
.bl.dg .dg-dept__chev .mud-icon-root{
    font-size: 14px;
}
.bl.dg .dg-dept__chev--open{
    transform: rotate(90deg);
}
.bl.dg .dg-dept__who{
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.bl.dg .dg-dept__name{
    font-size: 14px;
    font-weight: 800;
}
.bl.dg .dg-dept__sub{
    font-size: 12.5px;
    color: var(--dg-label);
}
.bl.dg .dg-stack{
    display: flex;
    height: 10px;
    border-radius: var(--r-chip);
    background: var(--dg-fill);
    overflow: hidden;
}
/* El ancho de cada segmento lo fija el dato (en %), como en el mock. */
.bl.dg .dg-stack__seg{
    display: block;
    height: 100%;
}
.bl.dg .dg-ramos{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 20px 14px 50px;
}
.bl.dg .dg-ramo{
    display: grid;
    grid-template-columns: 10px minmax(0, 1.2fr) minmax(0, 2fr) auto;
    gap: 12px;
    align-items: center;
    width: calc(100% + 16px);
    margin: 0 -8px;
    padding: 6px 8px;
    border-radius: var(--r-icon);
}
.bl.dg .dg-ramo:hover{
    background: var(--dg-panel);
}
.bl.dg .dg-ramo__dot{
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}
.bl.dg .dg-ramo__name{
    font-size: 13.5px;
    font-weight: 600;
}
.bl.dg .dg-ramo__value{
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   §9 — Panel lateral de detalle: MudOverlay para el velo y MudPaper para el
   panel; el MudDrawer temporal pelea la geometría. Ver §6.12.
   -------------------------------------------------------------------------- */
/* Sobre la barra sticky (z 30), bajo los popovers de Mud (z 1200) y el MudAppBar (z 1300). */
/* MudOverlay 9.8 renderiza en el outlet de providers, FUERA del scope, y sin hijo
   .mud-overlay-scrim: el velo va en su raíz y sin prefijo .bl.dg. */
.mud-overlay.dg-scrim{
    border-color: var(--dg-scrim);
    background-color: var(--dg-scrim);
}
.bl.dg .dg-drawer{
    position: fixed;
    top: var(--mud-appbar-height, 64px);
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    width: min(520px, 100vw);
    border-radius: 0;
    background: var(--dc-surface);
    box-shadow: var(--dg-drawer-shadow);
    animation: dg-drawer-in .2s ease-out both;
}
@keyframes dg-drawer-in{
    from{
        transform: translateX(40px);
        opacity: 0;
    }
    to{
        transform: none;
        opacity: 1;
    }
}
.bl.dg .dg-drawer__head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid var(--dg-line-soft);
}
.bl.dg .dg-drawer__titles{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.bl.dg .dg-drawer__kicker{
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dg-label);
}
.bl.dg .dg-drawer__title{
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
}
.bl.dg .dg-drawer__sub{
    font-size: 13.5px;
    color: var(--dg-muted);
}
.bl.dg .dg-drawer__x{
    flex: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--bl-r-control);
    color: var(--dg-muted);
}
.bl.dg .dg-drawer__x:hover{
    background: var(--dg-fill-2);
    color: var(--dg-text);
}
.bl.dg .dg-drawer__x .mud-icon-root{
    font-size: 18px;
}
.bl.dg .dg-drawer__body{
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 22px;
    padding: 20px 24px;
    overflow-y: auto;
}
.bl.dg .dg-drawer__body > *{
    flex: 0 0 auto;
}
.bl.dg .dg-drawer__stats{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.bl.dg .dg-dstat{
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border-radius: var(--gh-r-tray-2);
    background: var(--dg-fill-2);
}
.bl.dg .dg-dstat__label{
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dg-label);
}
.bl.dg .dg-dstat__value{
    font-size: 17px;
    font-weight: 800;
    color: var(--dg-text);
}
.bl.dg .dg-drawer__section,
.bl.dg .dg-drawer__rows{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bl.dg .dg-drow{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.bl.dg .dg-drow__top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
}
.bl.dg .dg-drow__label{
    font-weight: 700;
}
.bl.dg .dg-drow__value{
    font-weight: 800;
}
.bl.dg .dg-drow__sub{
    font-size: 12px;
    color: var(--dg-label);
}
.bl.dg .dg-drawer__note{
    padding: 12px 14px;
    border-radius: var(--bl-r-control);
    background: var(--dg-panel);
    font-size: 13px;
    line-height: 1.5;
    color: var(--dg-text-2);
}
.bl.dg .dg-drawer__foot{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-top: 1px solid var(--dg-line-soft);
    background: var(--dg-panel);
}
.bl.dg .dg-drawer__open{
    margin-right: 4px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dg-label);
}
.bl.dg .dg-drawer__link{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    border: 1.5px solid var(--dg-navy);
    border-radius: var(--bl-r-control);
    background: var(--dc-surface);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-decoration: none;
    color: var(--dg-navy);
}
.bl.dg .dg-drawer__link:hover{
    background: var(--dg-fill);
    text-decoration: none;
}
.bl.dg .dg-drawer__link .mud-icon-root{
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   §10 — Estado vacío honesto: el mock supone datos; donde la API no los da,
   el cromo se conserva y la línea lo dice.
   -------------------------------------------------------------------------- */
.bl.dg .dg-empty{
    padding: 14px 20px;
    font-size: 13px;
    color: var(--dg-label);
}
.bl.dg .dg-empty--inline{
    padding: 0;
}
/* Carga: esqueletos en el relleno del módulo; el mock no trae estado de carga. */
.bl.dg .mud-skeleton{
    background-color: var(--dg-fill);
}
.bl.dg .dg-skel--num{
    width: 120px;
    height: 26px;
    border-radius: 6px;
}
.bl.dg .dg-skel--row{
    height: 44px;
    border-radius: var(--r-icon);
}
.bl.dg .dg-skel--chart{
    height: 220px;
    border-radius: var(--bl-r-control);
}
.bl.dg .dg-skel-list{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 20px;
}

/* --------------------------------------------------------------------------
   §11 — Movimiento reducido: la entrada del panel y las transiciones se apagan.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
    .bl.dg .dg-drawer{
        animation: none;
    }
    .bl.dg .dg-kpi,
    .bl.dg .dg-dept__chev,
    .bl.dg .dg-topbar .mud-tab{
        transition: none;
    }
}