/* =====================================================================
   Dragsa · Componentes y armazón
   1) Armazón: rail lateral, barra superior, contenido.
   2) Ajustes globales de Bootstrap y Radzen para que toda la app
      adopte el estilo sin tocar cada pantalla.
   3) Componentes .dg-* reutilizables (tarjetas, KPI, pills, alertas…).
   Todo color sale de dragsa-tokens.css.
   ===================================================================== */

body {
    background: var(--dg-page);
    color: var(--dg-fg);
    font-family: var(--dg-font);
    font-size: .875rem;
}

.num, .dg-num {
    font-family: var(--dg-mono);
    font-variant-numeric: tabular-nums;
}

:focus-visible {
    outline: 2px solid var(--dg-accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   1. ARMAZÓN
   --------------------------------------------------------------------- */
.dg-shell {
    display: grid;
    grid-template-columns: var(--dg-rail-width) minmax(0, 1fr);
    min-height: 100vh;
}

.dg-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Rail lateral */
.dg-rail {
    background: var(--dg-rail);
    color: var(--dg-rail-fg);
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 30;
}

.dg-rail-brand {
    height: var(--dg-topbar-height);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    flex: none;
}

    .dg-rail-brand img {
        max-height: 2.1rem;
        max-width: 100%;
    }

.dg-rail-scroll {
    flex: 1;
    overflow-y: auto;
    padding: .5rem .625rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #2a3142 transparent;
}

.dg-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dg-nav-section {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    border: 0;
    background: none;
    color: var(--dg-rail-title);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .6rem .625rem .25rem;
    cursor: pointer;
    text-align: left;
}

    .dg-nav-section:hover {
        color: #c7cddb;
    }

    .dg-nav-section .bi {
        margin-left: auto;
        transition: transform .15s;
        font-size: .75rem;
    }

    .dg-nav-section[aria-expanded="true"] .bi,
    .dg-nav-section:not(.collapsed) .bi {
        transform: rotate(90deg);
    }

.dg-nav-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dg-rail .dg-nav-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .3rem .625rem;
    border-radius: var(--dg-radius-sm);
    color: var(--dg-rail-fg);
    text-decoration: none;
    font-weight: 400;
    font-size: .95rem;
    line-height: 1.25;
    -webkit-font-smoothing: antialiased;
}

    .dg-rail .dg-nav-link > .bi {
        font-size: 1.25rem;
        width: 1.35rem;
        text-align: center;
        flex: none;
        color: inherit;
    }

    .dg-rail .dg-nav-link:hover {
        background: var(--dg-rail-2);
        color: #fff;
    }

    .dg-rail .dg-nav-link.active {
        background: var(--dg-rail-2);
        color: #fff;
        box-shadow: inset 2px 0 0 var(--dg-accent);
    }

.dg-nav-badges {
    margin-left: auto;
    display: inline-flex;
    gap: 3px;
}

/* Contadores: misma forma en el menú lateral (.dg-nav-badge, tonos oscuros) y en el contenido (.dg-count, tonos claros) */
.dg-nav-badge,
.dg-count {
    display: inline-block;
    min-width: 1.5rem;
    text-align: center;
    font-family: var(--dg-mono);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 20px;
    padding: 0 .45rem;
}

.dg-nav-badge {
    background: #2a3142;
    color: #dfe3ec;
}

.dg-count {
    background: var(--dg-surface-2);
    color: var(--dg-fg-2);
}

    .dg-count.is-info { background: #dfe7fb; color: #23365e; }
    .dg-count.is-good { background: #d8f1e4; color: #17402e; }
    .dg-count.is-bad { background: #fbe1de; color: #7a2620; }

    .dg-nav-badge:empty {
        display: none;
    }

    .dg-nav-badge.is-info { background: #23365e; color: #b8ccff; }
    .dg-nav-badge.is-good { background: #17402e; color: #9fe3c0; }
    .dg-nav-badge.is-bad { background: #4a2220; color: #ffb4ad; }

/* Barra superior: gris neutro que la separa del contenido blanco */
.dg-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--dg-topbar-height);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 1.5rem;
    background: var(--dg-topbar);
    color: var(--dg-topbar-fg);
    border-bottom: 1px solid var(--dg-topbar-line);
    box-shadow: 0 1px 6px rgba(20, 24, 33, .06);
}

    .dg-topbar.is-dev {
        box-shadow: inset 0 3px 0 var(--dg-bad), 0 1px 6px rgba(20, 24, 33, .06);
    }

.dg-topbar-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 26rem;
    min-width: 7rem;
    max-width: 26rem;
    height: 2.25rem;
    padding: 0 .375rem 0 .75rem;
    background: var(--dg-topbar-chip);
    border: 1px solid var(--dg-topbar-line);
    border-radius: var(--dg-radius-sm);
    color: var(--dg-fg-3);
}

    .dg-topbar-search:focus-within {
        border-color: var(--dg-primary);
        background: var(--dg-topbar-chip);
        box-shadow: 0 0 0 3px rgba(var(--dg-primary-rgb), .15);
    }

    .dg-topbar-search input {
        border: 0;
        outline: none;
        background: none;
        flex: 1;
        width: 0;
        min-width: 0;
        color: var(--dg-topbar-fg);
        font-size: .84rem;
    }

        .dg-topbar-search input::placeholder {
            color: var(--dg-fg-3);
        }

    .dg-topbar-search button {
        border: 0;
        background: none;
        color: var(--dg-fg-3);
        padding: .125rem .25rem;
        border-radius: 4px;
    }

        .dg-topbar-search button:hover {
            color: var(--dg-fg);
            background: var(--dg-topbar-chip-hover);
        }

.dg-topbar-spacer {
    flex: 1;
}

.dg-topbar-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: none;
}

/* Pantallas medianas: los botones de la barra muestran solo el icono */
@media (max-width: 1279.98px) {
    .dg-topbar .dg-label-lg {
        display: none;
    }
}

    .dg-topbar-actions > * {
        display: flex;
        align-items: center;
    }

/* Botón compacto (chip). Todos los de la barra comparten altura, radio y tipografía. */
.dg-chip,
.dg-icon-btn {
    height: 2.25rem;
    border-radius: var(--dg-radius-sm);
    border: 1px solid var(--dg-line);
    background: var(--dg-surface);
    color: var(--dg-fg-2);
    font-weight: 600;
    font-size: .8rem;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background .12s, border-color .12s, color .12s;
}

.dg-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0 .8rem;
}

    .dg-chip:hover {
        border-color: var(--dg-line-strong);
        color: var(--dg-fg);
    }

    .dg-chip.dropdown-toggle::after {
        margin-left: .1rem;
    }

.dg-icon-btn {
    width: 2.25rem;
    display: inline-grid;
    place-items: center;
    position: relative;
    padding: 0;
}

    .dg-icon-btn:hover {
        color: var(--dg-fg);
        border-color: var(--dg-line-strong);
    }

/* Variante sobre la barra superior */
.dg-topbar .dg-chip,
.dg-topbar .dg-icon-btn {
    background: var(--dg-topbar-chip);
    border-color: var(--dg-topbar-line);
    color: var(--dg-topbar-fg);
}

    .dg-topbar .dg-chip:hover,
    .dg-topbar .dg-icon-btn:hover {
        background: var(--dg-topbar-chip-hover);
        border-color: var(--dg-line-strong);
        color: var(--dg-fg);
    }

/* Tonos (iguales dentro y fuera de la barra) */
/* Crear (Nuevo): tono naranja suave, distinto de la acción principal (Guardar, azul marino) */
.dg-chip.is-accent,
.dg-topbar .dg-chip.is-accent {
    background: var(--dg-accent-soft);
    border-color: #f6c9a8;
    color: var(--dg-accent-fg);
}

    .dg-chip.is-accent:hover,
    .dg-topbar .dg-chip.is-accent:hover {
        background: #fbdcc4;
        border-color: #f0b083;
        color: var(--dg-accent-fg);
    }

.dg-chip.is-alert,
.dg-topbar .dg-chip.is-alert {
    background: var(--dg-bad-soft);
    border-color: #f1b9b3;
    color: var(--dg-bad);
}

    .dg-chip.is-alert:hover,
    .dg-topbar .dg-chip.is-alert:hover {
        background: #f8d4cf;
        border-color: #e99a91;
        color: var(--dg-bad);
    }

.dg-chip.is-good,
.dg-topbar .dg-chip.is-good {
    background: var(--dg-good-soft);
    border-color: transparent;
    color: var(--dg-good);
}

.dg-icon-btn .dg-dot {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .25rem;
    border-radius: 10px;
    background: var(--dg-bad);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    font-family: var(--dg-mono);
    border: 2px solid var(--dg-topbar);
}

.dg-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    object-fit: cover;
    display: inline-grid;
    place-items: center;
    background: var(--dg-accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    flex: none;
}

.dg-topbar .dropdown-menu {
    border: 1px solid var(--dg-line);
    border-radius: var(--dg-radius);
    box-shadow: 0 10px 30px rgba(20, 24, 33, .12);
    padding: .375rem;
    font-size: var(--bs-body-font-size, .875rem); /* mismo tamaño que el texto general */
}

.dg-topbar .dropdown-item {
    border-radius: 6px;
    padding: .4rem .625rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.dg-topbar .dropdown-header {
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--dg-fg-3);
}

.dg-menu-toggle {
    display: none;
}

.dg-content {
    padding: 1.25rem 1.5rem 2.5rem;
    min-width: 0;
}

.dg-scrim {
    display: none;
}

@media (max-width: 1099.98px) {
    .dg-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .dg-rail {
        position: fixed;
        left: 0;
        top: 0;
        width: var(--dg-rail-width);
        transform: translateX(-100%);
        transition: transform .2s ease;
        padding-top: env(safe-area-inset-top, 0px);
    }

    .dg-shell.is-rail-open .dg-rail {
        transform: none;
        box-shadow: 0 0 40px rgba(0, 0, 0, .35);
    }

    .dg-shell.is-rail-open .dg-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(10, 13, 19, .45);
        z-index: 25;
    }

    .dg-menu-toggle {
        display: inline-grid;
    }

    .dg-hide-md {
        display: none !important;
    }
}

@media (max-width: 640px) {
    .dg-topbar {
        padding: 0 1rem;
    }

    .dg-content {
        padding: 1rem 1rem 2rem;
    }

    .dg-hide-sm {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dg-rail, .dg-nav-section .bi {
        transition: none;
    }
}

/* ---------------------------------------------------------------------
   2. AJUSTES GLOBALES DE BOOTSTRAP Y RADZEN
   --------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .h5 {
    font-family: var(--dg-font);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--dg-fg);
}

.card {
    --bs-card-bg: var(--dg-surface);
    --bs-card-border-color: var(--dg-line);
    --bs-card-border-radius: var(--dg-radius);
    --bs-card-inner-border-radius: calc(var(--dg-radius) - 1px);
    --bs-card-cap-bg: var(--dg-surface);
    --bs-card-cap-padding-y: .8rem;
    --bs-card-cap-padding-x: 1.1rem;
    box-shadow: var(--dg-shadow);
}

    /* Todas las cabeceras miden lo mismo, tengan o no botones */
    .card > .card-header {
        border-bottom: 1px solid var(--dg-line);
        min-height: 2.875rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        .card > .card-header .btn,
        .card > .card-header .rz-button {
            margin-block: -.4rem;
        }

        .card > .card-header .btn-sm {
            --bs-btn-padding-y: .2rem;
            --bs-btn-padding-x: .45rem;
            --bs-btn-font-size: .8rem;
        }

        .card > .card-header strong,
        .card > .card-header .card-title {
            font-weight: 700;
            font-size: .9rem;
        }

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--dg-radius-sm);
}

.btn-primary {
    --bs-btn-bg: var(--dg-primary);
    --bs-btn-border-color: var(--dg-primary);
    --bs-btn-hover-bg: var(--dg-primary-hover);
    --bs-btn-hover-border-color: var(--dg-primary-hover);
    --bs-btn-active-bg: var(--dg-primary-hover);
    --bs-btn-active-border-color: var(--dg-primary-hover);
    --bs-btn-disabled-bg: var(--dg-primary);
    --bs-btn-disabled-border-color: var(--dg-primary);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}

.btn-light {
    --bs-btn-bg: var(--dg-surface);
    --bs-btn-border-color: var(--dg-line);
    --bs-btn-color: var(--dg-fg-2);
    --bs-btn-hover-bg: var(--dg-surface-2);
    --bs-btn-hover-border-color: var(--dg-line-strong);
    --bs-btn-hover-color: var(--dg-fg);
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--dg-primary);
    box-shadow: 0 0 0 3px rgba(var(--dg-primary-rgb), .15);
}

.form-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--dg-fg-2);
    margin-bottom: .3rem;
}

.form-control,
.form-select {
    background-color: var(--dg-surface-2);
    border-color: var(--dg-line);
    font-size: .875rem;
}

    .form-control:focus,
    .form-select:focus {
        background-color: var(--dg-surface);
    }

.form-check-input:checked {
    background-color: var(--dg-primary);
    border-color: var(--dg-primary);
}

/* Radzen: rejillas */
.rz-data-grid,
.rz-datatable {
    border-color: var(--dg-line) !important;
    border-radius: 0 0 var(--dg-radius) var(--dg-radius);
    font-family: var(--dg-font);
}

.rz-grid-table th {
    background-color: var(--dg-surface-2) !important;
    border-color: var(--dg-line) !important;
}

.rz-grid-table .rz-column-title {
    color: var(--dg-fg-3) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .72rem;
}

.rz-grid-table > tbody > tr > td {
    border-color: var(--dg-line) !important;
}

.rz-data-row:hover,
.rz-data-row:hover > td {
    background-color: var(--dg-surface-2) !important;
}

.rz-paginator-page.rz-state-active {
    background-color: var(--dg-accent-soft) !important;
    color: var(--dg-accent-fg) !important;
}

/* Radzen: pestañas */
.rz-tabview-nav {
    border-bottom: 1px solid var(--dg-line) !important;
    background: transparent !important;
    gap: 2px;
}

    .rz-tabview-nav li,
    .rz-tabview-top > .rz-tabview-nav li {
        background: transparent !important;
        border-radius: 0 !important;
        border-bottom: 2px solid transparent !important;
        margin-bottom: -1px;
    }

        .rz-tabview-nav li a,
        .rz-tabview-nav li a:not([href]):not([class]) {
            color: var(--dg-fg-3) !important;
            font-weight: 700 !important;
            font-size: .8rem;
            text-transform: none;
            letter-spacing: 0;
        }

        .rz-tabview-nav li.rz-tabview-selected {
            border-bottom-color: var(--dg-accent) !important;
            background: transparent !important;
        }

            .rz-tabview-nav li.rz-tabview-selected a {
                color: var(--dg-fg) !important;
            }

/* Radzen: desplegables y diálogos */
.rz-dropdown {
    background-color: var(--dg-surface-2) !important;
    border-color: var(--dg-line) !important;
    border-radius: var(--dg-radius-sm) !important;
}

.rz-dialog {
    border-radius: var(--dg-radius) !important;
    overflow: hidden;
}

.rz-dialog-titlebar {
    border-bottom: 1px solid var(--dg-line);
}

.rz-dialog-title {
    font-weight: 700 !important;
}

/* Textos de Radzen con el mismo tamaño y alineación que el resto de la app */
.rz-text-caption {
    font-family: var(--dg-font) !important;
    font-size: .82rem !important;
    line-height: 1.4;
}

.rz-cell-data2 {
    text-align: left !important;
}

/* ---------------------------------------------------------------------
   3. COMPONENTES .dg-*
   --------------------------------------------------------------------- */

/* Cabecera de ficha */
.dg-crumbs {
    display: flex;
    gap: .375rem;
    flex-wrap: wrap;
    font-size: .78rem;
    color: var(--dg-fg-3);
    margin-bottom: .5rem;
}

    .dg-crumbs a {
        color: var(--dg-fg-3);
        text-decoration: none;
    }

        .dg-crumbs a:hover {
            color: var(--dg-fg);
        }

.dg-page-head {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin-bottom: 1.25rem;
}

/* El título ocupa el espacio libre y parte líneas; los botones se quedan arriba a la derecha */
.dg-page-title {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
    flex: 1 1 auto;
}

    .dg-page-title h1 {
        overflow-wrap: anywhere;
    }

.dg-page-head > .dg-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
    max-width: 50%;
}

@media (max-width: 760px) {
    .dg-page-head {
        flex-wrap: wrap;
    }

        .dg-page-head > .dg-actions {
            max-width: none;
        }
}

    .dg-page-title h1 {
        margin: 0;
        font-size: 1.6rem;
        line-height: 1.15;
        text-wrap: balance;
    }

.dg-page-tags {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
}

.dg-code {
    font-family: var(--dg-mono);
    font-weight: 600;
    font-size: .8rem;
    background: var(--dg-surface);
    border: 1px solid var(--dg-line);
    border-radius: 6px;
    padding: .1rem .5rem;
    color: var(--dg-fg-2);
}

.dg-meta {
    display: flex;
    gap: 1.1rem;
    flex-wrap: wrap;
    color: var(--dg-fg-2);
    font-size: .82rem;
}

    .dg-meta > span {
        display: inline-flex;
        align-items: center;
        gap: .375rem;
    }

    .dg-meta .bi {
        color: var(--dg-fg-3);
    }

.dg-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

/* Tarjeta */
.dg-card {
    background: var(--dg-surface);
    border: 1px solid var(--dg-line);
    border-radius: var(--dg-radius);
    box-shadow: var(--dg-shadow);
    min-width: 0;
}

.dg-card-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .625rem;
    padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--dg-line);
}

    .dg-card-h h2 {
        margin: 0;
        font-size: .92rem;
        font-weight: 700;
    }

.dg-card-hint {
    display: block;
    font-size: .75rem;
    color: var(--dg-fg-3);
    font-weight: 500;
}

.dg-card-b {
    padding: 1rem 1.1rem;
}

    .dg-card-b.is-flush {
        padding: 0;
    }

.dg-card-f {
    display: flex;
    justify-content: space-between;
    gap: .625rem;
    flex-wrap: wrap;
    padding: .8rem 1.1rem;
    border-top: 1px solid var(--dg-line);
    background: var(--dg-surface-2);
    border-radius: 0 0 var(--dg-radius) var(--dg-radius);
}

/* Rejillas de maquetación */
.dg-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.dg-span-12 { grid-column: span 12; }
.dg-span-8 { grid-column: span 8; }
.dg-span-7 { grid-column: span 7; }
.dg-span-6 { grid-column: span 6; }
.dg-span-5 { grid-column: span 5; }
.dg-span-4 { grid-column: span 4; }

.dg-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

@media (max-width: 1099.98px) {
    .dg-span-8, .dg-span-7, .dg-span-6, .dg-span-5, .dg-span-4 {
        grid-column: span 12;
    }
}

/* KPI */
.dg-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: .75rem;
}

.dg-kpi {
    background: var(--dg-surface);
    border: 1px solid var(--dg-line);
    border-radius: var(--dg-radius);
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-width: 0;
}

.dg-kpi-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--dg-fg-3);
    font-weight: 700;
}

.dg-kpi-value {
    font-family: var(--dg-mono);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .dg-kpi-value small {
        font-size: .8rem;
        color: var(--dg-fg-3);
    }

.dg-kpi-sub {
    font-size: .75rem;
    color: var(--dg-fg-2);
    display: flex;
    gap: .375rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Delta / pill */
.dg-delta {
    font-family: var(--dg-mono);
    font-size: .7rem;
    font-weight: 600;
    border-radius: 4px;
    padding: 0 .3rem;
}

.dg-pill {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    border-radius: 20px;
    padding: .15rem .6rem;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

    .dg-pill::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

.is-good.dg-pill, .is-good.dg-delta { background: var(--dg-good-soft); color: var(--dg-good); }
.is-warn.dg-pill, .is-warn.dg-delta { background: var(--dg-warn-soft); color: var(--dg-warn); }
.is-bad.dg-pill, .is-bad.dg-delta { background: var(--dg-bad-soft); color: var(--dg-bad); }
.is-info.dg-pill, .is-info.dg-delta { background: var(--dg-info-soft); color: var(--dg-info); }
.is-neutral.dg-pill, .is-neutral.dg-delta { background: var(--dg-surface-2); color: var(--dg-fg-2); }
.is-accent.dg-pill, .is-accent.dg-delta { background: var(--dg-accent-soft); color: var(--dg-accent-fg); }

/* Barra de progreso */
.dg-meter {
    height: 6px;
    background: var(--dg-surface-2);
    border: 1px solid var(--dg-line);
    border-radius: 4px;
    overflow: hidden;
}

    .dg-meter > i {
        display: block;
        height: 100%;
        background: var(--dg-accent);
        border-radius: 3px;
    }

    .dg-meter.is-good > i { background: var(--dg-good); }
    .dg-meter.is-warn > i { background: var(--dg-warn); }
    .dg-meter.is-bad > i { background: var(--dg-bad); }
    .dg-meter.is-info > i { background: var(--dg-info); }

.dg-meter-row {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) minmax(3rem, auto);
    gap: .625rem;
    align-items: center;
    font-size: .8rem;
    color: var(--dg-fg-2);
}

    .dg-meter-row .dg-num {
        text-align: right;
        white-space: nowrap;
        color: var(--dg-fg);
        font-weight: 600;
        font-size: .75rem;
    }

    .dg-meter-row .dg-meter {
        height: 10px;
    }

/* Alertas */
.dg-alert {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: .625rem;
    padding: .75rem 1.1rem;
    border-bottom: 1px solid var(--dg-line);
}

    .dg-alert:last-child {
        border-bottom: 0;
    }

.dg-alert-ic {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 7px;
    display: grid;
    place-items: center;
}

.dg-alert.is-bad .dg-alert-ic { background: var(--dg-bad-soft); color: var(--dg-bad); }
.dg-alert.is-warn .dg-alert-ic { background: var(--dg-warn-soft); color: var(--dg-warn); }
.dg-alert.is-good .dg-alert-ic { background: var(--dg-good-soft); color: var(--dg-good); }
.dg-alert.is-info .dg-alert-ic { background: var(--dg-info-soft); color: var(--dg-info); }

.dg-alert b {
    display: block;
    font-size: .82rem;
}

.dg-alert p {
    margin: .125rem 0 0;
    font-size: .78rem;
    color: var(--dg-fg-2);
}

/* Línea de tiempo */
.dg-timeline {
    list-style: none;
    margin: 0;
    padding: .25rem 1.1rem .875rem;
    display: flex;
    flex-direction: column;
}

    .dg-timeline > li {
        display: grid;
        grid-template-columns: 14px minmax(0, 1fr);
        gap: .75rem;
        padding-top: .75rem;
        position: relative;
    }

        .dg-timeline > li::before {
            content: "";
            position: absolute;
            left: 6px;
            top: 1.5rem;
            bottom: -.75rem;
            width: 2px;
            background: var(--dg-line);
        }

        .dg-timeline > li:last-child::before {
            display: none;
        }

.dg-timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid var(--dg-surface);
    background: var(--dg-line-strong);
    box-shadow: 0 0 0 1px var(--dg-line-strong);
    margin-top: 3px;
}

.dg-timeline > li:first-child .dg-timeline-dot {
    background: var(--dg-accent);
    box-shadow: 0 0 0 1px var(--dg-accent);
}

.dg-timeline-text {
    font-size: .85rem;
    font-weight: 600;
}

.dg-timeline-by {
    font-size: .75rem;
    color: var(--dg-fg-3);
    display: flex;
    gap: .375rem;
    flex-wrap: wrap;
}

/* Formulario en rejilla */
.dg-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .875rem 1rem;
}

    .dg-form-grid > .dg-w2 { grid-column: span 2; }
    .dg-form-grid > .dg-w3 { grid-column: span 3; }
    .dg-form-grid > .dg-w4 { grid-column: span 4; }

    .dg-form-grid > * {
        min-width: 0;
    }

@media (max-width: 760px) {
    .dg-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .dg-form-grid > .dg-w3, .dg-form-grid > .dg-w4 {
            grid-column: span 2;
        }
}

@media (max-width: 440px) {
    .dg-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

        .dg-form-grid > .dg-w2, .dg-form-grid > .dg-w3, .dg-form-grid > .dg-w4 {
            grid-column: span 1;
        }
}

/* Interruptor (para InputCheckbox con class="dg-switch") */
.dg-switch-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .84rem;
    cursor: pointer;
    user-select: none;
}

input[type="checkbox"].dg-switch {
    appearance: none;
    width: 2rem;
    height: 1.125rem;
    border-radius: 10px;
    background: var(--dg-line-strong);
    position: relative;
    cursor: pointer;
    transition: background .15s;
    margin: 0;
    flex: none;
}

    input[type="checkbox"].dg-switch::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: .875rem;
        height: .875rem;
        border-radius: 50%;
        background: #fff;
        transition: left .15s;
    }

    input[type="checkbox"].dg-switch:checked {
        background: var(--dg-primary);
    }

        input[type="checkbox"].dg-switch:checked::after {
            left: 1rem;
        }

/* Estado vacío */
.dg-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    padding: 1.75rem .75rem;
    color: var(--dg-fg-2);
}

.dg-empty-ic {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: var(--dg-accent-soft);
    color: var(--dg-accent-fg);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
}

.dg-empty b {
    color: var(--dg-fg);
    font-size: .92rem;
}

.dg-empty p {
    margin: 0;
    max-width: 52ch;
    font-size: .82rem;
}

/* Aviso de acceso denegado (Routes.razor) */
.dg-denied {
    max-width: 32rem;
    margin: 3rem auto;
}

/* Lista concepto / importe que se adapta al ancho (sustituye a tablas de 2 columnas) */
.dg-kv {
    margin: 0;
    display: flex;
    flex-direction: column;
}

    .dg-kv > div {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
        column-gap: .75rem;
        row-gap: .1rem;
        padding: .5rem .875rem;
        border-bottom: 1px solid var(--dg-line);
    }

        .dg-kv > div:last-child {
            border-bottom: 0;
        }

    .dg-kv dt {
        font-weight: 600;
        font-size: .8rem;
        color: var(--dg-fg-2);
        display: inline-flex;
        align-items: center;
        gap: .375rem;
        min-width: 0;
    }

    .dg-kv dd {
        margin: 0 0 0 auto;
        font-family: var(--dg-mono);
        font-variant-numeric: tabular-nums;
        font-size: .82rem;
        font-weight: 500;
        color: var(--dg-fg);
        white-space: nowrap;
    }

    .dg-kv > .is-total {
        background: var(--dg-surface-2);
    }

        .dg-kv > .is-total dt,
        .dg-kv > .is-total dd {
            color: var(--dg-fg);
            font-weight: 700;
        }

/* Participantes */
.dg-people-add {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .75rem 1.1rem;
    border-bottom: 1px solid var(--dg-line);
}

.dg-people {
    list-style: none;
    margin: 0;
    padding: .25rem 0;
}

    .dg-people > li {
        display: grid;
        grid-template-columns: 1.75rem minmax(0, 1fr) auto 1.5rem;
        gap: .625rem;
        align-items: center;
        padding: .45rem 1.1rem;
    }

        .dg-people > li:hover {
            background: var(--dg-surface-2);
        }

.dg-people-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

    .dg-people-info .dg-meter {
        height: 4px;
        border: 0;
    }

.dg-people-name {
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dg-people-hours {
    font-size: .75rem;
    color: var(--dg-fg-2);
}

.dg-people-del {
    border: 0;
    background: none;
    color: var(--dg-fg-3);
    border-radius: 5px;
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    place-items: center;
    opacity: 0;
}

.dg-people > li:hover .dg-people-del,
.dg-people-del:focus-visible {
    opacity: 1;
}

.dg-people-del:hover {
    background: var(--dg-bad-soft);
    color: var(--dg-bad);
}

@media (hover: none) {
    .dg-people-del {
        opacity: 1;
    }
}

.dg-timeline-scroll {
    max-height: 26rem;
    overflow-y: auto;
}

.dg-timeline > li.is-editable {
    cursor: pointer;
}

    .dg-timeline > li.is-editable:hover .dg-timeline-text {
        color: var(--dg-primary);
    }

.dg-timeline-text {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Economía del proyecto */
.dg-econ {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1.5rem;
}

.dg-econ-sub {
    display: block;
    font-size: .8rem;
    margin-bottom: .75rem;
}

.dg-econ-desglose {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
}

.dg-econ-row {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

    .dg-econ-row.is-total {
        border-top: 1px solid var(--dg-line);
        padding-top: .6rem;
        font-weight: 700;
    }

.dg-econ-row-top {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-size: .8rem;
}

.dg-econ-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    border-top: 1px solid var(--dg-line);
    margin-top: 1rem;
    padding-top: .9rem;
    gap: .9rem 1.25rem;
}

    .dg-econ-metrics > div {
        display: flex;
        flex-direction: column;
        gap: .1rem;
        min-width: 0;
    }

    .dg-econ-metrics small {
        font-size: .68rem;
        color: var(--dg-fg-3);
        text-transform: uppercase;
        letter-spacing: .06em;
        font-weight: 700;
    }

    .dg-econ-metrics .dg-num {
        font-size: 1rem;
        font-weight: 600;
    }

.is-good-text { color: var(--dg-good); }
.is-bad-text { color: var(--dg-bad); }

@media (max-width: 900px) {
    .dg-econ {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Salud */
.dg-salud-barras {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    border-bottom: 1px solid var(--dg-line);
}

/* Radzen chart con la tipografía de la app */
.rz-chart text {
    font-family: var(--dg-mono);
    font-size: 11px;
    fill: var(--dg-fg-3);
}

.rz-legend-item-text {
    font-family: var(--dg-font);
    font-size: .78rem;
    color: var(--dg-fg-2);
}

/* Pestañas de ficha dentro de una tarjeta */
.dg-tabs-card {
    overflow: hidden;
}

    .dg-tabs-card > .rz-tabview {
        border: 0 !important;
        background: transparent !important;
    }

    .dg-tabs-card .rz-tabview-nav {
        padding: 0 .75rem;
        flex-wrap: wrap;
    }

    .dg-tabs-card .rz-tabview-panels {
        padding: .75rem !important;
    }

/* Contenedor de slider / barra dentro de formularios, misma altura que un input */
.dg-slider {
    min-height: 2.35rem;
    display: flex;
    align-items: center;
    padding: 0 .5rem;
    border: 1px solid var(--dg-line);
    border-radius: var(--dg-radius-sm);
    background: var(--dg-surface-2);
}

    .dg-slider > .dg-meter-row {
        width: 100%;
        grid-template-columns: 3.5rem minmax(0, 1fr) 3rem;
    }

/* Barra de filtros de los buscadores */
.dg-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1rem;
    padding: .9rem 1.1rem;
}

.dg-filtros-campo {
    display: flex;
    flex-direction: column;
    flex: 1 1 12rem;
    min-width: 0;
}

    .dg-filtros-campo .form-label {
        margin-bottom: .25rem;
    }

.dg-filtros-texto {
    flex: 2 1 18rem;
}

.dg-filtros-accion {
    flex: none;
}

/* Imagen del equipo */
.dg-equipo-img {
    display: grid;
    place-items: center;
    min-height: 12rem;
    background: var(--dg-surface-2);
    border: 1px solid var(--dg-line);
    border-radius: var(--dg-radius-sm);
    overflow: hidden;
}

    .dg-equipo-img img {
        display: block;
        max-width: 100%;
        max-height: 17rem;
        object-fit: contain;
    }

/* Columnas de tareas (abiertas / en desarrollo / bloqueadas / cerradas) */
.dg-kanban {
    row-gap: 1rem;
}

    .dg-kanban .list-group {
        border: 1px solid var(--dg-line);
        border-radius: var(--dg-radius);
        box-shadow: var(--dg-shadow);
        overflow: hidden;
        background: var(--dg-surface);
    }

        .dg-kanban .list-group > .list-group-item {
            border-left: 0;
            border-right: 0;
            border-color: var(--dg-line);
        }

            .dg-kanban .list-group > .list-group-item:first-child {
                border-top: 0;
                background: var(--dg-surface-2) !important;
                font-weight: 700;
                font-size: .85rem;
                position: sticky;
                top: 0;
                z-index: 1;
            }

    .dg-kanban .badge {
        font-family: var(--dg-mono);
        font-weight: 600;
    }

@media (max-width: 1099.98px) {
    .dg-kanban > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Selector de personas (lista de seleccionadas bajo el desplegable) */
.dg-personas {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.dg-personas-lista {
    border: 1px solid var(--dg-line);
    border-radius: var(--dg-radius-sm);
    padding: .2rem 0;
    max-height: 16rem;
    overflow-y: auto;
}

    .dg-personas-lista > li {
        padding: .35rem .6rem;
        grid-template-columns: 1.75rem minmax(0, 1fr) 0 1.5rem;
    }

    .dg-personas-lista .dg-people-del {
        opacity: 1;
    }

.dg-personas-vacio {
    margin: 0;
    font-size: .78rem;
    color: var(--dg-fg-3);
}

/* ---------------------------------------------------------------------
   Cabeceras heredadas (pantallas aún no migradas a CabeceraFicha):
   <div class="d-flex justify-content-between align-items-center"><h5>…</h5><div class="btn-group">…</div></div><hr class="col-12…">
   Se les da el mismo aspecto que a CabeceraFicha sin tocar su marcado.
   --------------------------------------------------------------------- */
.dg-content .d-flex.justify-content-between.align-items-center:has(> h5),
.dg-content .d-flex.justify-content-between.align-items-center:has(> h3) {
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    margin-bottom: 1.1rem;
}

    .dg-content .d-flex.justify-content-between.align-items-center:has(> h5) > h5,
    .dg-content .d-flex.justify-content-between.align-items-center:has(> h3) > h3,
    .dg-content > h5:first-child,
    .dg-content > h3:first-child {
        font-size: 1.6rem;
        font-weight: 700;
        letter-spacing: -.02em;
        line-height: 1.15;
        margin: 0;
        text-wrap: balance;
    }

    .dg-content .d-flex.justify-content-between.align-items-center:has(> h5) > .btn-group,
    .dg-content .d-flex.justify-content-between.align-items-center:has(> h5) > .btn-toolbar {
        gap: .375rem;
        margin-bottom: 0 !important;
        flex-wrap: wrap;
    }

    .dg-content .d-flex.justify-content-between.align-items-center:has(> h5) .btn-sm {
        --bs-btn-padding-y: .4rem;
        --bs-btn-padding-x: .7rem;
        --bs-btn-font-size: .82rem;
        border-radius: var(--dg-radius-sm) !important;
    }

/* La línea bajo la cabecera ya no hace falta */
.dg-content .d-flex.justify-content-between.align-items-center:has(> h5) + hr.col-12,
.dg-content > h5 + hr.col-12,
.dg-content hr.col-12.mb-2.mt-0 {
    display: none;
}

/* Cabeceras de listas tipo .list-group (Inicio, etc.) con el estilo de las tarjetas */
.dg-content .list-group {
    border-radius: var(--dg-radius);
    box-shadow: var(--dg-shadow);
}

    .dg-content .list-group > .list-group-item.bg-body-secondary {
        background: var(--dg-surface-2) !important;
        font-weight: 700;
        font-size: .88rem;
    }

.dg-people .dg-people-add-btn {
    opacity: 1;
    color: var(--dg-warn);
}

    .dg-people .dg-people-add-btn:hover {
        background: var(--dg-warn-soft);
        color: var(--dg-warn);
    }

/* Alertas dentro de un KPI (antes en "Salud del proyecto") */
.dg-kpi-alert {
    display: flex;
    align-items: flex-start;
    gap: .375rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.35;
    margin-top: .15rem;
}

    .dg-kpi-alert.is-good { color: var(--dg-good); }
    .dg-kpi-alert.is-warn { color: var(--dg-warn); }
    .dg-kpi-alert.is-bad { color: var(--dg-bad); }
    .dg-kpi-alert.is-info { color: var(--dg-info); }
    .dg-kpi-alert.is-neutral { color: var(--dg-fg-3); }

.dg-kpi-bars {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

    .dg-kpi-bars .dg-meter-row {
        grid-template-columns: 3.6rem minmax(0, 1fr) minmax(2.6rem, auto);
        font-size: .72rem;
    }

/* Progreso y Horas tienen más contenido: ocupan algo más de ancho */
.dg-kpis .dg-kpi-wide {
    grid-column: span 1;
    min-width: 13rem;
}

/* Fila Datos / Estado / Participantes */
.dg-fila-ficha .dg-span-3 { grid-column: span 3; }

@media (max-width: 1499.98px) {
    .dg-fila-ficha .dg-col-datos { grid-column: span 12; }
    .dg-fila-ficha .dg-col-lateral { grid-column: span 6; }
}

@media (max-width: 760px) {
    .dg-fila-ficha .dg-col-lateral { grid-column: span 12; }
}

/* Botones con clase form-control (p. ej. "Abrir" en recepciones, "Guardar" al imputar horas):
   conservan el color del botón en lugar del fondo gris de los campos */
.btn.form-control {
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    color: var(--bs-btn-color);
    font-weight: var(--bs-btn-font-weight);
}

    .btn.form-control:hover {
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
        color: var(--bs-btn-hover-color);
    }

    .btn.form-control:active,
    .btn.form-control.active {
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
        color: var(--bs-btn-active-color);
    }

    .btn.form-control:focus,
    .btn.form-control:focus-visible {
        background-color: var(--bs-btn-bg);
        color: var(--bs-btn-color);
    }

    .btn.form-control:disabled {
        background-color: var(--bs-btn-disabled-bg);
        border-color: var(--bs-btn-disabled-border-color);
        color: var(--bs-btn-disabled-color);
    }

/* KPIs en la columna lateral (bajo una tarjeta): uno al lado del otro; si no caben, uno debajo de otro */
.dg-kpis-lateral {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

/* Reloj de picaje: mismo aspecto que el resto de botones de la barra; solo el icono y la hora cambian de color */
.dg-topbar .dg-chip.dg-reloj .bi {
    color: var(--dg-fg-3);
}

.dg-topbar .dg-chip.dg-reloj .dg-num {
    font-family: var(--dg-font);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: .01em;
}

.dg-topbar .dg-chip.dg-reloj.is-completo .bi,
.dg-topbar .dg-chip.dg-reloj.is-completo .dg-num {
    color: var(--dg-good);
}

/* Botón secundario destacado (p. ej. "Ver estudio/proyecto" en la oportunidad): contorno azul marino */
.btn-outline-primary {
    --bs-btn-color: var(--dg-primary);
    --bs-btn-border-color: var(--dg-primary);
    --bs-btn-bg: var(--dg-primary-soft);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--dg-primary);
    --bs-btn-hover-border-color: var(--dg-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--dg-primary-hover);
    --bs-btn-active-border-color: var(--dg-primary-hover);
}

/* Títulos de tarjeta unificados: las .card-header de Bootstrap con el mismo aspecto que .dg-card-h
   (fondo blanco, línea inferior, título en negrita), aunque la pantalla les ponga otra clase de fondo */
.card > .card-header,
.card > .card-header.bg-light,
.card > .card-header.bg-body-secondary,
.card > .card-header.bg-body-tertiary {
    background-color: var(--dg-surface) !important;
    color: var(--dg-fg);
}

    .card > .card-header strong,
    .card > .card-header h5,
    .card > .card-header h6 {
        font-size: .92rem;
        font-weight: 700;
        margin: 0;
    }

/* Cabeceras de listas tipo tarjeta (Inicio, Tareas…) también en blanco */
.dg-content .list-group > .list-group-item.bg-body-secondary,
.dg-kanban .list-group > .list-group-item:first-child {
    background: var(--dg-surface) !important;
    border-bottom: 1px solid var(--dg-line);
}

/* Botones antiguos "btn bg-info-subtle" (acciones secundarias): mismo aspecto que btn-outline-primary */
.btn.bg-info-subtle {
    background-color: var(--dg-primary-soft) !important;
    border-color: var(--dg-primary) !important;
    color: var(--dg-primary) !important;
    font-weight: 600;
}

    .btn.bg-info-subtle:hover,
    .btn.bg-info-subtle:focus-visible,
    .btn.bg-info-subtle:active {
        background-color: var(--dg-primary) !important;
        border-color: var(--dg-primary) !important;
        color: #fff !important;
    }

/* ---------- Dashboard (KPIs de oportunidades) ---------- */
.dg-dash-titulo {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dg-fg-3);
    margin: .25rem 0 .6rem;
}

.dg-dash {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

    .dg-dash > .dg-card {
        margin: 0;
        min-width: 0;
    }

    .dg-dash > .dg-dash-8 { grid-column: span 8; }
    .dg-dash > .dg-dash-4 { grid-column: span 4; }

@media (max-width: 1200px) {
    .dg-dash > .dg-dash-8 { grid-column: span 12; }
    .dg-dash > .dg-dash-4 { grid-column: span 6; }
}

@media (max-width: 760px) {
    .dg-dash > .dg-dash-4 { grid-column: span 12; }
}

.dg-dash-barra + .dg-dash-barra {
    margin-top: .7rem;
}

.dg-dash-barra-t {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    font-size: .84rem;
    margin-bottom: .3rem;
}

    .dg-dash-barra-t > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dg-dash-barra-t small {
        color: var(--dg-fg-3);
    }

.dg-dash-tabla th {
    font-size: .74rem;
    font-weight: 700;
    color: var(--dg-fg-3);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.dg-dash-tabla th:first-child,
.dg-dash-tabla td:first-child {
    padding-left: 1.1rem;
}

.dg-dash-tabla th:last-child,
.dg-dash-tabla td:last-child {
    padding-right: 1.1rem;
}

.dg-dash-tabla .dg-meter-row {
    grid-template-columns: minmax(0, 1fr) 3rem;
}

    .dg-dash-tabla .dg-meter-row > span:first-child {
        display: none;
    }

.dg-dash-lista li + li {
    border-top: 1px solid var(--dg-line);
}

.dg-dash-lista a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .6rem 1.1rem;
    color: inherit;
    text-decoration: none;
}

    .dg-dash-lista a:hover {
        background: var(--dg-surface-2);
    }

.dg-dash-lista-t {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .dg-dash-lista-t b,
    .dg-dash-lista-t small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dg-dash-lista-t b {
        font-size: .86rem;
    }

    .dg-dash-lista-t small {
        color: var(--dg-fg-3);
        font-size: .76rem;
    }

/* Listados con pestañas: la rejilla ocupa todo el ancho y alto de la tarjeta, sin margen ni doble borde */
.dg-tabs-listado .rz-tabview-panels:has(.rz-data-grid) {
    padding: 0 !important;
}

.dg-tabs-listado .rz-tabview-panels .rz-data-grid,
.dg-listado .rz-data-grid {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.dg-tabs-listado .rz-tabview-panels .rz-data-grid .rz-grid-table thead th:first-child,
.dg-tabs-listado .rz-tabview-panels .rz-data-grid .rz-grid-table tbody td:first-child,
.dg-listado .rz-data-grid .rz-grid-table thead th:first-child,
.dg-listado .rz-data-grid .rz-grid-table tbody td:first-child {
    padding-left: .75rem;
}

/* Si el listado de la pestaña va dentro de su propia tarjeta (p. ej. oportunidades), esa tarjeta tampoco deja marco */
.dg-tabs-listado .rz-tabview-panels .card {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* Listados: la rejilla dentro de una tarjeta, ocupando todo su ancho */
.dg-listado {
    overflow: hidden;
    padding: 0;
}

    .dg-listado > .table-responsive {
        margin: 0;
    }

/* Separación cuando el listado va tras filtros u otro bloque (no justo tras la cabecera) */
* + .dg-listado {
    margin-top: 1rem;
}

.dg-page-head + .dg-listado,
.dg-card-h + .dg-listado {
    margin-top: 0;
}

/* Hoja de cálculo de presupuestos (BlazorDatasheet): define su fuente en .vars; se sustituye por la de la app */
.vars {
    --sheet-font-family: var(--dg-font);
}

/* Tarjeta con cabecera y listado dentro: la rejilla respeta las esquinas redondeadas */
.dg-card:has(> .dg-listado) {
    overflow: hidden;
}

/* Notificaciones: todas en la misma posición, arriba a la derecha bajo la barra superior.
   Se anula cualquier posición puesta a mano en el mensaje (NotificationMessage.Style). */
.rz-notification {
    inset-block-start: calc(var(--dg-topbar-height) + .5rem) !important;
    inset-inline-end: 1rem !important;
    inset-inline-start: auto !important;
}

    .rz-notification .rz-notification-item-wrapper {
        position: relative !important;
        inset: auto !important;
        margin: 0 0 .5rem;
    }

/* Icono de información con tooltip (InfoAyuda) */
.dg-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: .35rem;
    color: var(--dg-fg-3);
    cursor: help;
    vertical-align: middle;
    outline: none;
}

    .dg-info > .bi {
        font-size: .85em;
    }

    .dg-info:hover,
    .dg-info:focus-visible {
        color: var(--dg-primary);
    }

.dg-info-tip {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 18rem;
    padding: .55rem .7rem;
    border-radius: var(--dg-radius-sm);
    background: #1f2533;
    color: #f1f3f8;
    box-shadow: 0 8px 24px rgba(20, 24, 33, .22);
    font-family: var(--dg-font);
    font-size: .78rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    white-space: pre-line;
    visibility: hidden;
    opacity: 0;
    transition: opacity .12s;
    pointer-events: none;
}

.dg-info:hover > .dg-info-tip,
.dg-info:focus-visible > .dg-info-tip {
    visibility: visible;
    opacity: 1;
}

/* ---------- Tarjeta de tarea (ElementoTarea) ---------- */
.list-group > .list-group-item.dg-tarea {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .7rem .85rem .65rem;
    border-left: 3px solid transparent;
    transition: background-color .12s;
}

    .list-group > .list-group-item.dg-tarea:hover {
        background-color: var(--dg-surface-2);
    }

    .list-group > .list-group-item.dg-tarea.is-vencida { border-left-color: var(--dg-bad); }
    .list-group > .list-group-item.dg-tarea.is-bloqueada { border-left-color: var(--dg-bad); background-color: var(--dg-bad-soft); }
    .list-group > .list-group-item.dg-tarea.is-notificada { border-left-color: var(--dg-warn); }

.dg-tarea-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

/* Enlaces propios por encima del enlace que cubre la tarjeta */
.dg-tarea-proy {
    position: relative;
    z-index: 2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .74rem;
    color: var(--dg-fg-3);
    text-decoration: none;
}

    .dg-tarea-proy:hover {
        color: var(--dg-primary);
        text-decoration: underline;
    }

.dg-tarea-titulo {
    font-weight: 700;
    font-size: .92rem;
    line-height: 1.3;
    color: var(--dg-fg);
    text-decoration: none;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    /* Toda la tarjeta es clicable: el enlace del título se extiende sobre ella */
    .dg-tarea-titulo::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
    }

.dg-tarea:hover .dg-tarea-titulo {
    color: var(--dg-primary);
}

.dg-tarea-desc {
    margin: 0;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--dg-fg-2);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dg-tarea-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .6rem;
    margin-top: .15rem;
    font-size: .76rem;
    color: var(--dg-fg-3);
}

.dg-tarea-plazo,
.dg-tarea-nota,
.dg-tarea-gente,
.dg-tarea-cuenta {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.dg-tarea-plazo {
    font-weight: 600;
    white-space: nowrap;
}

    .dg-tarea-plazo.is-bad { color: var(--dg-bad); }
    .dg-tarea-plazo.is-warn { color: var(--dg-warn); }
    .dg-tarea-plazo.is-good { color: var(--dg-good); }

.dg-tarea-nota {
    color: var(--dg-warn);
    font-weight: 600;
}

.dg-tarea-gente {
    gap: 0;
}

.dg-tarea-ini {
    display: inline-grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    background: var(--dg-info-soft);
    color: var(--dg-info);
    border: 2px solid var(--dg-surface);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: 0;
}

    .dg-tarea-ini + .dg-tarea-ini {
        margin-left: -.4rem;
    }

    .dg-tarea-ini.is-mas {
        background: var(--dg-surface-2);
        color: var(--dg-fg-2);
    }

.dg-tarea-cuenta {
    margin-left: auto;
    gap: .55rem;
}

    .dg-tarea-cuenta .bi {
        margin-right: .15rem;
    }

.dg-tarea-autor {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    object-fit: cover;
}

.dg-tarea-bloqueo {
    position: relative;
    z-index: 2;
    margin: .15rem -.85rem -.65rem;
    padding: .4rem .85rem;
    background: var(--dg-bad-soft);
    border-top: 1px solid color-mix(in srgb, var(--dg-bad) 25%, transparent);
    color: var(--dg-bad);
    font-size: .76rem;
    font-weight: 600;
}

/* Hitos completados en la lista de próximos hitos: atenuados */
.list-group > .list-group-item.dg-tarea.is-hecho .dg-tarea-titulo {
    color: var(--dg-fg-2);
}