/* ── Reset / base ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Lexend Deca', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    background: #f4f7f6;
    color: #16211f;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; }

/* ── Design tokens ────────────────────────────────────────────────────────── */

:root {
    --ctd-primary:        #7531F1;
    --ctd-primary-dark:   #5F22C4;
    --ctd-primary-bg:     #F1E9FE;
    --ctd-bg-page:        #f4f7f6;
    --ctd-bg-surface:     #ffffff;
    --ctd-border:         #e3e9e7;
    --ctd-border-light:   #eef2f1;
    --ctd-text-primary:   #16211f;
    --ctd-text-secondary: #5c6d69;
    --ctd-text-muted:     #94a29e;
    --ctd-shadow-sm:      0 1px 4px rgba(15,40,35,.05);
    --ctd-shadow-md:      0 2px 12px rgba(15,40,35,.08);
    --ctd-shadow-lg:      0 4px 24px rgba(15,40,35,.12);
    --ctd-radius-sm:      6px;
    --ctd-radius-md:      10px;
    --ctd-radius-lg:      14px;
    --ctd-sidebar-w:      240px;
    --ctd-topbar-h:       60px;

    /* MudBlazor */
    --mud-palette-primary:              var(--ctd-primary);
    --mud-palette-primary-darken:       var(--ctd-primary-dark);
    --mud-palette-primary-lighten:      #9B6EF3;
    --mud-palette-primary-hover:        rgba(117,49,241,.06);
    --mud-palette-primary-selected:     rgba(117,49,241,.12);
    --mud-palette-primary-text:         #ffffff;
    --mud-palette-background:           var(--ctd-bg-page);
    --mud-palette-background-grey:      #f0f4f3;
    --mud-palette-surface:              var(--ctd-bg-surface);
    --mud-palette-appbar-background:    var(--ctd-bg-surface);
    --mud-palette-appbar-text:          var(--ctd-text-primary);
    --mud-palette-text-primary:         var(--ctd-text-primary);
    --mud-palette-text-secondary:       var(--ctd-text-secondary);
    --mud-palette-lines-default:        var(--ctd-border);
    --mud-palette-lines-inputs:         var(--ctd-border);
    --mud-default-borderradius:         var(--ctd-radius-sm);
    --mud-typography-default-family:    'Lexend Deca','Segoe UI',system-ui,sans-serif;
    --mud-typography-h5-family:         'Lexend Deca','Segoe UI',system-ui,sans-serif;
    --mud-typography-h6-family:         'Lexend Deca','Segoe UI',system-ui,sans-serif;
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT SHELL  (.ctd-*)
   ══════════════════════════════════════════════════════════════════════════ */

.ctd-shell { display: flex; height: 100vh; overflow: hidden; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */

.ctd-sidebar {
    position: relative;
    width: var(--ctd-sidebar-w);
    min-width: var(--ctd-sidebar-w);
    background: var(--ctd-bg-surface);
    border-right: 1px solid var(--ctd-border);
    display: flex;
    flex-direction: column;
    overflow: visible;
    z-index: 200;
    transition: width 0.15s ease, min-width 0.15s ease;
}

.ctd-sidebar > .ctd-brand,
.ctd-sidebar > .ctd-nav,
.ctd-sidebar > .ctd-sidebar-footer { overflow: hidden; }
.ctd-sidebar > .ctd-nav { overflow-y: auto; }

.ctd-sidebar.collapsed { width: 64px; min-width: 64px; }
.ctd-sidebar.collapsed .ctd-brand { justify-content: center; padding: 0; }
.ctd-sidebar.collapsed .ctd-brand-text,
.ctd-sidebar.collapsed .ctd-nav-label,
.ctd-sidebar.collapsed .ctd-nav-caret,
.ctd-sidebar.collapsed .ctd-nav-submenu,
.ctd-sidebar.collapsed .ctd-nav-subsubmenu,
.ctd-sidebar.collapsed .ctd-user-info { display: none; }
.ctd-sidebar.collapsed .ctd-nav-item,
.ctd-sidebar.collapsed .ctd-nav-group-toggle { justify-content: center; padding: 8px; }
.ctd-sidebar.collapsed .ctd-sidebar-footer { justify-content: center; padding: 12px 8px; }

.ctd-sidebar-toggle {
    position: absolute;
    top: 22px;
    right: -12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--ctd-bg-surface);
    border: 1px solid var(--ctd-border);
    border-radius: 50%;
    box-shadow: var(--ctd-shadow-sm);
    color: var(--ctd-text-secondary);
    cursor: pointer;
    font-size: 10px;
    z-index: 210;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.ctd-sidebar-toggle:hover { color: var(--ctd-primary-dark); border-color: var(--ctd-primary); }

.ctd-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    height: var(--ctd-topbar-h);
    border-bottom: 1px solid var(--ctd-border);
    flex-shrink: 0;
}

.ctd-brand-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.ctd-brand-text { display: flex; flex-direction: column; min-width: 0; }

.ctd-brand-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--ctd-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.ctd-brand-tenant {
    font-size: 11px;
    color: var(--ctd-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.ctd-nav { flex: 1; overflow-y: auto; padding: 10px 8px; }

.ctd-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--ctd-text-secondary);
    font-size: 13px;
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
    margin-bottom: 2px;
    width: 100%;
}

.ctd-nav-item:hover { background: #f0f4f3; color: var(--ctd-text-primary); }

.ctd-nav-item.active {
    background: var(--ctd-primary-bg);
    color: var(--ctd-primary-dark);
    font-weight: 600;
}

.ctd-nav-icon { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; opacity: 0.75; }
.ctd-nav-item.active .ctd-nav-icon, .ctd-nav-subitem.active .ctd-nav-icon { opacity: 1; }
.ctd-nav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ctd-nav-group { margin-bottom: 2px; }

.ctd-nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--ctd-text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    transition: background 0.12s, color 0.12s;
}

.ctd-nav-group-toggle:hover { background: #f0f4f3; color: var(--ctd-text-primary); }
.ctd-nav-group-toggle.has-active { color: var(--ctd-primary-dark); }
.ctd-nav-group-toggle.has-active .ctd-nav-icon { opacity: 1; }

.ctd-nav-caret { font-size: 10px; margin-left: auto; flex-shrink: 0; transition: transform 0.2s; opacity: 0.5; }
.ctd-nav-group-toggle.expanded .ctd-nav-caret { transform: rotate(180deg); }

.ctd-nav-submenu { padding-left: 12px; margin-top: 2px; }

.ctd-nav-subitem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-radius: 8px;
    color: var(--ctd-text-secondary);
    font-size: 12.5px;
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
    margin-bottom: 1px;
}

.ctd-nav-subitem:hover { background: #f0f4f3; color: var(--ctd-text-primary); }
.ctd-nav-subitem.active { background: var(--ctd-primary-bg); color: var(--ctd-primary-dark); font-weight: 600; }

/* ── Subgrupo anidado (3er nivel, ej. Administración > Gestión de tenants > Tenants) ── */

.ctd-nav-subgroup { margin-bottom: 1px; }

.ctd-nav-subgroup-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 12px;
    border-radius: 8px;
    color: var(--ctd-text-secondary);
    font-size: 12.5px;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, color 0.12s;
}

.ctd-nav-subgroup-toggle:hover, .ctd-nav-subgroup-toggle.has-active { background: #f0f4f3; color: var(--ctd-text-primary); }
.ctd-nav-subgroup-toggle .ctd-nav-caret { margin-left: auto; font-size: 9px; opacity: 0.6; transition: transform 0.2s; }
.ctd-nav-subgroup-toggle.expanded .ctd-nav-caret { transform: rotate(180deg); }

.ctd-nav-subsubmenu { padding-left: 14px; margin-top: 2px; }

.ctd-nav-leafitem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-radius: 8px;
    color: var(--ctd-text-secondary);
    font-size: 12px;
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
    margin-bottom: 1px;
}

.ctd-nav-leafitem:hover { background: #f0f4f3; color: var(--ctd-text-primary); }
.ctd-nav-leafitem.active { background: var(--ctd-primary-bg); color: var(--ctd-primary-dark); font-weight: 600; }

.ctd-sidebar-footer {
    padding: 12px 14px;
    border-top: 1px solid var(--ctd-border);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.ctd-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ctd-primary-bg);
    color: var(--ctd-primary-dark);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    user-select: none;
}

.ctd-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ctd-user-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--ctd-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.ctd-user-sub {
    font-size: 10px;
    color: var(--ctd-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.ctd-logout-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ctd-text-muted);
    padding: 5px;
    border-radius: 6px;
    transition: color 0.12s, background 0.12s;
    font-size: 14px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.ctd-logout-btn:hover { color: #dc2626; background: #fee2e2; }

/* ── Main area ────────────────────────────────────────────────────────────── */

.ctd-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.ctd-topbar {
    height: var(--ctd-topbar-h);
    background: var(--ctd-bg-surface);
    border-bottom: 1px solid var(--ctd-border);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 12px;
    flex-shrink: 0;
}

.ctd-topbar-spacer { flex: 1; }
.ctd-topbar-actions { display: flex; align-items: center; gap: 8px; }

.ctd-content { flex: 1; overflow-y: auto; padding: 24px; background: var(--ctd-bg-page); }

/* ── User menu dropdown ──────────────────────────────────────────────────── */

.ctd-user-menu { position: relative; }

.ctd-user-menu-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    background: none;
    border: none;
    transition: background 0.12s;
}

.ctd-user-menu-toggle:hover { background: #f0f4f3; }
.ctd-user-menu-overlay { position: fixed; inset: 0; z-index: 998; background: transparent; }
.ctd-user-chevron { font-size: 10px; color: var(--ctd-text-muted); }

.ctd-user-menu-header { padding: 8px 12px 6px; display: flex; flex-direction: column; gap: 2px; }
.ctd-user-menu-header-name { font-size: 13px; font-weight: 600; color: var(--ctd-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctd-user-menu-header-sub { font-size: 11px; color: var(--ctd-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ctd-user-menu-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 999;
    min-width: 210px;
    background: var(--ctd-bg-surface);
    border: 1px solid var(--ctd-border);
    border-radius: 10px;
    box-shadow: var(--ctd-shadow-lg);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ctd-user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--ctd-text-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 0.12s;
}

.ctd-user-menu-item:hover { background: #f0f4f3; }
.ctd-user-menu-item i { width: 16px; text-align: center; font-size: 14px; color: var(--ctd-text-muted); }
.ctd-user-menu-item--danger { color: #dc2626; }
.ctd-user-menu-item--danger:hover { background: #fee2e2; }
.ctd-user-menu-item--danger i { color: #dc2626; }
.ctd-user-menu-divider { height: 1px; background: var(--ctd-border); margin: 4px 0; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */

.ctd-mobile-menu-btn { display: none; }
.ctd-mobile-overlay { display: none; }

@media (max-width: 768px) {
    .ctd-content { padding: 16px; }

    /* El sidebar pasa de "columna fija junto al contenido" a panel deslizable
       (position:fixed, oculto fuera de pantalla) — en desktop no se toca nada. */
    .ctd-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 260px;
        min-width: 260px;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        z-index: 400;
    }

    .ctd-sidebar.mobile-open { transform: translateX(0); }

    /* El colapso a solo-íconos es un comportamiento de desktop — en mobile el
       sidebar siempre se abre completo cuando está visible. */
    .ctd-sidebar.collapsed { width: 260px; min-width: 260px; }
    .ctd-sidebar.collapsed .ctd-brand-text,
    .ctd-sidebar.collapsed .ctd-nav-label,
    .ctd-sidebar.collapsed .ctd-user-info { display: flex; }
    .ctd-sidebar-toggle { display: none; }

    .ctd-mobile-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 33, 31, 0.45);
        z-index: 399;
    }

    .ctd-mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        background: none;
        color: var(--ctd-text-secondary);
        cursor: pointer;
        font-size: 16px;
        border-radius: 8px;
        flex-shrink: 0;
    }

    .ctd-mobile-menu-btn:hover { background: #f0f4f3; color: var(--ctd-text-primary); }
    .ctd-topbar { padding: 0 12px; gap: 8px; }
}

/* ── Scrollbars ───────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cdd8d5; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #aebdb9; }

/* ══════════════════════════════════════════════════════════════════════════
   MUDBLAZOR OVERRIDES
   ══════════════════════════════════════════════════════════════════════════ */

.mud-card, .mud-paper {
    border-radius: var(--ctd-radius-lg) !important;
    box-shadow: var(--ctd-shadow-md) !important;
    border: none !important;
    background: var(--ctd-bg-surface) !important;
}

.mud-paper-outlined { border: 1px solid var(--ctd-border) !important; box-shadow: none !important; border-radius: var(--ctd-radius-md) !important; }
.mud-elevation-0 { box-shadow: none !important; }

.mud-table-root { border-radius: var(--ctd-radius-lg) !important; overflow: hidden !important; border: 1px solid var(--ctd-border) !important; box-shadow: none !important; }

.mud-table-head .mud-table-row .mud-table-cell {
    background: #f6f9f8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--ctd-text-secondary) !important;
    border-bottom: 1px solid var(--ctd-border) !important;
    padding: 10px 16px !important;
}

.mud-table-body .mud-table-row .mud-table-cell {
    border-bottom: 1px solid var(--ctd-border-light) !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    color: var(--ctd-text-primary) !important;
}

.mud-table-body .mud-table-row:last-child .mud-table-cell { border-bottom: none !important; }
.mud-table-body .mud-table-row:hover { background: #f6f9f8 !important; }

.mud-button-root { border-radius: var(--ctd-radius-sm) !important; font-weight: 600 !important; text-transform: none !important; font-size: 13px !important; }

.mud-button-filled-primary, .mud-button-filled.mud-button-color-primary {
    background: var(--ctd-primary) !important;
    box-shadow: 0 2px 8px rgba(117,49,241,.25) !important;
}

.mud-button-filled-primary:hover, .mud-button-filled.mud-button-color-primary:hover {
    background: var(--ctd-primary-dark) !important;
    box-shadow: 0 4px 12px rgba(117,49,241,.32) !important;
}

.mud-input-root { border-radius: var(--ctd-radius-sm) !important; font-size: 13px !important; }

.mud-dialog { border-radius: var(--ctd-radius-lg) !important; box-shadow: var(--ctd-shadow-lg) !important; overflow: hidden !important; }
.mud-dialog-title { font-size: 15px !important; font-weight: 600 !important; color: var(--ctd-text-primary) !important; padding: 20px 24px 0 !important; }
.mud-dialog-content { padding: 16px 24px !important; }
.mud-dialog-actions { padding: 12px 20px 16px !important; border-top: 1px solid var(--ctd-border-light) !important; }

.mud-alert { border-radius: var(--ctd-radius-md) !important; font-size: 13px !important; }

.mud-typography-h5, .mud-typography-h6 { color: var(--ctd-text-primary) !important; letter-spacing: -0.01em !important; }

/* ── Badge de tipo de documento (grilla de Ventas/Compras) ──────────────── */

.ctd-doc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--ctd-radius-sm);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.ctd-doc-badge i { font-size: 10px; }

.ctd-doc-badge.afecta { background: var(--ctd-primary-bg); color: var(--ctd-primary-dark); }
.ctd-doc-badge.exenta { background: #F0F4F3; color: var(--ctd-text-secondary); }
.ctd-doc-badge.nc { background: #FDECEC; color: #C0362C; }
.ctd-doc-badge.nd { background: #E6F7EE; color: #16803C; }
.ctd-doc-badge.otro { background: #F0F4F3; color: var(--ctd-text-secondary); }

/* ── Badge de estado de pago (Pendiente/Parcial/Pagada/Vencida) ──────────── */

.ctd-estado-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--ctd-radius-sm);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.ctd-estado-badge.pendiente { background: #FBF0DA; color: #C98A12; }
.ctd-estado-badge.parcial { background: var(--ctd-primary-bg); color: var(--ctd-primary-dark); }
.ctd-estado-badge.pagada { background: #E6F7EE; color: #16803C; }
.ctd-estado-badge.vencida { background: #FDECEC; color: #C0362C; }

/* ── Barra de "Facturas por estado" (Ventas/Compras del Tablero de Control) ──────────── */

.ctd-status-stack { height: 14px; border-radius: 7px; overflow: hidden; display: flex; margin-bottom: 14px; }

.ctd-status-legend { display: flex; gap: 18px; flex-wrap: wrap; }
.ctd-status-legend-item { font-size: 12px; }
.ctd-status-legend-item .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.ctd-status-legend-item .lbl { color: var(--ctd-text-secondary); }
.ctd-status-legend-item .amt { font-weight: 700; margin-left: 4px; }
.ctd-status-legend-item .pct { color: var(--ctd-text-muted); margin-left: 4px; }

.ctd-filter-field { display: flex; flex-direction: column; gap: 3px; }

.ctd-filter-label {
    font-size: 12px;
    color: var(--ctd-text-secondary);
    padding-left: 2px;
}

.ctd-filter-date {
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--ctd-border);
    border-radius: var(--ctd-radius-sm);
    font-family: inherit;
    font-size: 13px;
    color: var(--ctd-text-primary);
    background: var(--ctd-bg-surface);
}

.ctd-filter-date:focus { outline: none; border-color: var(--ctd-primary); box-shadow: 0 0 0 2px var(--ctd-primary-bg); }

/* Variante compacta — vencimiento editable inline en la grilla de Ventas/Compras */
.ctd-filter-date-sm { height: 30px; padding: 0 6px; font-size: 12px; }

/* ── Lista de próximos vencimientos (Flujo de Caja) ──────────────────────── */

.ctd-venc-row { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ctd-border-light); }
.ctd-venc-row:last-child { border-bottom: none; }
.ctd-venc-date { width: 44px; flex-shrink: 0; font-size: 11px; color: var(--ctd-text-muted); }
.ctd-venc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-bottom: 1px; }
.ctd-venc-dot.cobro { background: var(--ctd-primary); }
.ctd-venc-dot.pago { background: #0F9D74; }
.ctd-venc-main { flex-grow: 1; min-width: 0; }
.ctd-venc-type { font-size: 10px; font-weight: 700; }
.ctd-venc-type.cobro { color: var(--ctd-primary); }
.ctd-venc-type.pago { color: #0F9D74; }
.ctd-venc-name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctd-venc-amount { font-size: 12.5px; font-weight: 700; text-align: right; flex-shrink: 0; }
.ctd-venc-amount.cobro { color: var(--ctd-primary); }
.ctd-venc-amount.pago { color: #0F9D74; }

/* ── Alerta de "Punto de atención" (Flujo de Caja) ───────────────────────────────────── */

.ctd-alerta-atencion {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #FBF0DA;
    border: 1px solid #ECD9AE;
    border-left: 4px solid #C98A12;
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 14px;
    line-height: 1.6;
    color: #5E4610;
}

.ctd-alerta-atencion i { margin-top: 3px; color: #C98A12; }

/* ── Tooltip al pasar el mouse por un punto del gráfico de Flujo de Caja ─────────────── */

.ctd-chart-hover-col { flex: 1; position: relative; }
.ctd-chart-hover-col:hover { background: rgba(117, 49, 241, 0.06); }

.ctd-chart-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 6px;
    background: var(--ctd-text-primary);
    color: #fff;
    padding: 8px 10px;
    border-radius: var(--ctd-radius-sm);
    font-size: 11px;
    line-height: 1.6;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s;
    z-index: 20;
}

.ctd-chart-hover-col:hover .ctd-chart-tooltip { opacity: 1; }

/* ── Chips de tipo de documento (agregar/quitar en la grilla de Ventas/Compras) ─────── */

.ctd-doc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--ctd-border);
    background: var(--ctd-bg-surface);
    color: var(--ctd-text-secondary);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.ctd-doc-toggle:hover { border-color: var(--ctd-text-muted); color: var(--ctd-text-primary); }
.ctd-doc-toggle .fa-times { font-size: 10px; opacity: .7; }

.ctd-doc-toggle.active.afecta { background: var(--ctd-primary-bg); color: var(--ctd-primary-dark); border-color: transparent; }
.ctd-doc-toggle.active.exenta { background: #F0F4F3; color: var(--ctd-text-secondary); border-color: transparent; }
.ctd-doc-toggle.active.nc { background: #FDECEC; color: #C0362C; border-color: transparent; }
.ctd-doc-toggle.active.nd { background: #E6F7EE; color: #16803C; border-color: transparent; }

/* ── Chip toggle genérico (días/horas de programación, etc.) — mismo lenguaje visual que
   .ctd-doc-toggle pero sin colores por tipo, para casos donde todas las opciones son iguales. ─ */

.ctd-chip-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--ctd-border);
    background: var(--ctd-bg-surface);
    color: var(--ctd-text-secondary);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.ctd-chip-toggle:hover { border-color: var(--ctd-text-muted); color: var(--ctd-text-primary); }
.ctd-chip-toggle.active { background: var(--ctd-primary-bg); color: var(--ctd-primary-dark); border-color: transparent; }

/* ── Pestañas tipo "segmented control" (ej. Ventas/Compras en Análisis) ─────
   MudTabs con Rounded="true": el fondo de píldora se arma sobre el propio
   .mud-tab-slider (que MudBlazor ya anima con left/width en %), en vez de
   agregar un elemento nuevo — evita reimplementar el slide a mano. ──────── */

.mud-tabs-rounded .mud-tabs-tabbar {
    display: inline-flex;
    background: #F0F4F3;
    border-radius: 10px;
    padding: 4px;
    border: none !important;
}

.mud-tabs-rounded .mud-tab {
    min-height: 34px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ctd-text-secondary) !important;
    opacity: 1 !important;
    position: relative;
    z-index: 1;
    transition: color 0.15s;
}

.mud-tabs-rounded .mud-tab.mud-tab-active { color: var(--ctd-primary-dark) !important; }

.mud-tabs-rounded .mud-tab-slider {
    top: 4px !important;
    bottom: 4px !important;
    height: auto !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: var(--ctd-shadow-sm);
}