/* ============================================================
   Citio — Tema claro moderno
   Superficie suave, tarjetas elevadas, acento ámbar Citio.
   Solo html:not(.dark) — el modo oscuro no se toca.
   ============================================================ */

html:not(.dark) {
    --citio-surface: #f1f5f9;
    --citio-card: #ffffff;
    --citio-sidebar: #18181b;
    --citio-topbar: #f59e0b;
    --citio-topbar-text: #18181b;
    --citio-chrome-text: #f5f5f7;
    --citio-chrome-muted: #bcbcc4;
    --citio-chrome-hover: rgba(255, 255, 255, 0.14);
    --citio-amber: #f59e0b;
    --citio-amber-soft: rgba(245, 158, 11, 0.12);
    --citio-amber-text: #b45309;
    --citio-text: #0f172a;
    --citio-text-secondary: #334155;
    --citio-text-muted: #64748b;
    --citio-line: #e2e8f0;
    --citio-line-faint: #f1f5f9;
    --citio-radius: 0.85rem;
    --citio-radius-lg: 1rem;
    --citio-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --citio-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 6px 24px rgba(15, 23, 42, 0.06);
    --citio-shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.1);
}

/* ── Layout ── */
html:not(.dark) .fi-body,
html:not(.dark) .fi-layout,
html:not(.dark) .fi-main-ctn,
html:not(.dark) .fi-main {
    background-color: var(--citio-surface) !important;
}

/* Topbar — naranja Citio con texto/iconos oscuros */
html:not(.dark) .fi-topbar {
    background: var(--citio-topbar) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.12) !important;
}

/* Texto e iconos del topbar oscuros (contraste sobre naranja) */
html:not(.dark) .fi-topbar .fi-icon-btn,
html:not(.dark) .fi-topbar .fi-dropdown-trigger,
html:not(.dark) .fi-topbar .fi-topbar-item,
html:not(.dark) .fi-topbar a,
html:not(.dark) .fi-topbar button {
    color: var(--citio-topbar-text) !important;
}
html:not(.dark) .fi-topbar .fi-icon-btn:hover {
    background: rgba(0, 0, 0, 0.10) !important;
}

/* Buscador: pill blanco para que contraste sobre el naranja */
html:not(.dark) .fi-topbar .fi-global-search-field .fi-input-wrp,
html:not(.dark) .fi-topbar [class*="global-search"] .fi-input-wrp {
    border-radius: 9999px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}
html:not(.dark) .fi-topbar .fi-global-search-field input,
html:not(.dark) .fi-topbar [class*="global-search"] input {
    color: #18181b !important;
}
html:not(.dark) .fi-topbar .fi-global-search-field input::placeholder,
html:not(.dark) .fi-topbar [class*="global-search"] input::placeholder {
    color: #6b7280 !important;
}
/* Icono de la lupa en gris (visible sobre el pill blanco) */
html:not(.dark) .fi-topbar .fi-global-search-field svg,
html:not(.dark) .fi-topbar [class*="global-search"] svg,
html:not(.dark) .fi-topbar .fi-global-search-field .fi-icon,
html:not(.dark) .fi-topbar [class*="global-search"] .fi-icon {
    color: #6b7280 !important;
}

/* Sidebar: iconos de la cabecera claros (los estilos completos del sidebar
   viven en el bloque inline de AdminPanelProvider para tener una sola fuente
   de verdad y evitar conflictos de especificidad). */
html:not(.dark) .fi-sidebar-header .fi-icon-btn,
html:not(.dark) .fi-sidebar-nav-collapse-btn {
    color: var(--citio-chrome-text) !important;
}
html:not(.dark) .fi-sidebar-header .fi-icon-btn:hover {
    background: var(--citio-chrome-hover) !important;
}
html:not(.dark) .fi-sidebar-header .fi-logo img {
    object-fit: contain;
    max-height: 2.35rem;
}

/* ── Tipografía página ── */
html:not(.dark) .fi-header-heading {
    color: var(--citio-text) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

html:not(.dark) .fi-header-subheading,
html:not(.dark) .fi-breadcrumbs-item-label,
html:not(.dark) .fi-breadcrumbs-item a {
    color: var(--citio-text-muted) !important;
}

html:not(.dark) .fi-breadcrumbs-item.fi-active .fi-breadcrumbs-item-label {
    color: var(--citio-text-secondary) !important;
}

/* ── Tarjetas y secciones ── */
html:not(.dark) .fi-section {
    background: var(--citio-card) !important;
    border: 1px solid var(--citio-line-faint) !important;
    border-radius: var(--citio-radius-lg) !important;
    box-shadow: var(--citio-shadow) !important;
}

html:not(.dark) .fi-section-header {
    border-bottom: 1px solid var(--citio-line-faint) !important;
}

html:not(.dark) .fi-section-header-heading {
    color: var(--citio-text) !important;
    font-weight: 700 !important;
}

html:not(.dark) .fi-section-header-description {
    color: var(--citio-text-muted) !important;
}

/* Widgets */
html:not(.dark) .fi-wi,
html:not(.dark) .fi-wi-chart,
html:not(.dark) .fi-wi-table,
html:not(.dark) .fi-wi-widget {
    background: var(--citio-card) !important;
    border: 1px solid var(--citio-line-faint) !important;
    border-radius: var(--citio-radius-lg) !important;
    box-shadow: var(--citio-shadow) !important;
}

html:not(.dark) .fi-wi-stats-overview-stat {
    background: var(--citio-card) !important;
    border: 1px solid var(--citio-line-faint) !important;
    border-inline-start: 4px solid var(--citio-amber) !important;
    border-radius: var(--citio-radius) !important;
    box-shadow: var(--citio-shadow) !important;
}

html:not(.dark) .fi-wi-stats-overview-stat-label {
    color: var(--citio-text-muted) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.68rem !important;
}

html:not(.dark) .fi-wi-stats-overview-stat-value {
    color: var(--citio-text) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

html:not(.dark) .fi-wi-stats-overview-stat-description {
    color: var(--citio-text-muted) !important;
}

html:not(.dark) .fi-wi-heading {
    color: var(--citio-text) !important;
    font-weight: 700 !important;
}

/* ── Tablas ── */
html:not(.dark) .fi-ta-ctn,
html:not(.dark) .fi-ta-content-ctn {
    background: var(--citio-card) !important;
    border: 1px solid var(--citio-line-faint) !important;
    border-radius: var(--citio-radius-lg) !important;
    box-shadow: var(--citio-shadow) !important;
    overflow: hidden;
}

html:not(.dark) .fi-ta-header,
html:not(.dark) .fi-ta-filters,
html:not(.dark) .fi-ta-header-toolbar {
    border-bottom: 1px solid var(--citio-line-faint) !important;
}

html:not(.dark) .fi-ta-header-cell {
    background: var(--citio-surface) !important;
    color: var(--citio-text-secondary) !important;
    font-weight: 700 !important;
    border-bottom: none !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.65rem !important;
}

html:not(.dark) .fi-ta-cell {
    color: var(--citio-text) !important;
    border-bottom: 1px solid var(--citio-line-faint) !important;
}

html:not(.dark) .fi-ta-row:last-child .fi-ta-cell {
    border-bottom: none !important;
}

html:not(.dark) .fi-ta-row:hover {
    background: rgba(245, 158, 11, 0.04) !important;
}

html:not(.dark) .fi-ta-pagination {
    border-top: 1px solid var(--citio-line-faint) !important;
    background: var(--citio-card) !important;
}

/* ── Formularios ── */
html:not(.dark) .fi-fo-field-wrp-label,
html:not(.dark) .fi-fo-field-wrp label,
html:not(.dark) .fi-fo-field-label {
    color: var(--citio-text-secondary) !important;
    font-weight: 600 !important;
}

html:not(.dark) .fi-fo-field-wrp-hint,
html:not(.dark) .fi-fo-hint {
    color: var(--citio-text-muted) !important;
}

html:not(.dark) .fi-input-wrp,
html:not(.dark) .fi-select-input-ctn {
    border: 1px solid var(--citio-line) !important;
    border-radius: 0.55rem !important;
    background: var(--citio-card) !important;
    box-shadow: var(--citio-shadow-sm) !important;
    transition: border-color 150ms ease, box-shadow 150ms ease !important;
}

html:not(.dark) .fi-input-wrp:focus-within,
html:not(.dark) .fi-select-input-ctn:focus-within {
    border-color: var(--citio-amber) !important;
    box-shadow: 0 0 0 3px var(--citio-amber-soft) !important;
}

html:not(.dark) .fi-input,
html:not(.dark) .fi-select-input,
html:not(.dark) .fi-fo-field-wrp textarea {
    color: var(--citio-text) !important;
}

html:not(.dark) .fi-fo-repeater-item,
html:not(.dark) .fi-fo-builder-block {
    border: 1px solid var(--citio-line) !important;
    border-radius: var(--citio-radius) !important;
    box-shadow: var(--citio-shadow-sm) !important;
}

html:not(.dark) .fi-fo-repeater-item-header,
html:not(.dark) .fi-fo-builder-block-header {
    border-bottom: 1px solid var(--citio-line-faint) !important;
    background: var(--citio-surface) !important;
    border-radius: var(--citio-radius) var(--citio-radius) 0 0 !important;
}

/* Tabs pill */
html:not(.dark) .fi-tabs,
html:not(.dark) .fi-sc-tabs {
    border-bottom: none !important;
    gap: 0.35rem !important;
    padding: 0.25rem !important;
    background: var(--citio-surface) !important;
    border-radius: 0.65rem !important;
    margin-bottom: 0.75rem !important;
}

html:not(.dark) .fi-tabs-tab,
html:not(.dark) .fi-tabs-item button {
    color: var(--citio-text-muted) !important;
    font-weight: 600 !important;
    border-radius: 0.5rem !important;
    border: none !important;
}

html:not(.dark) .fi-tabs-tab.fi-active,
html:not(.dark) .fi-tabs-item.fi-active button {
    background: var(--citio-card) !important;
    color: var(--citio-amber-text) !important;
    box-shadow: var(--citio-shadow-sm) !important;
}

/* Infolists */
html:not(.dark) .fi-in-entry-wrp {
    border-bottom: 1px solid var(--citio-line-faint) !important;
    padding-block: 0.5rem !important;
}

html:not(.dark) .fi-in-entry-wrp-label {
    color: var(--citio-text-muted) !important;
    font-weight: 600 !important;
}

html:not(.dark) .fi-in-entry-wrp-content {
    color: var(--citio-text) !important;
}

/* Botones primarios */
html:not(.dark) .fi-btn.fi-color-primary {
    border-radius: 0.55rem !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.28) !important;
    font-weight: 600 !important;
}

/* Modales y menús */
html:not(.dark) .fi-modal-window {
    border: none !important;
    border-radius: var(--citio-radius-lg) !important;
    box-shadow: var(--citio-shadow-lg) !important;
    /* No forzar overflow:hidden aquí: Filament usa overflow-y:auto para que el
       modal pueda hacer scroll y se vea el panel (position:absolute) de los
       selects buscables cuando crece más que el alto del modal. Con hidden el
       dropdown quedaba recortado y sin scroll. */
}

html:not(.dark) .fi-modal-header {
    border-bottom: 1px solid var(--citio-line-faint) !important;
    background: var(--citio-card) !important;
}

html:not(.dark) .fi-modal-footer {
    border-top: 1px solid var(--citio-line-faint) !important;
    background: var(--citio-surface) !important;
}

html:not(.dark) .fi-modal-heading {
    color: var(--citio-text) !important;
    font-weight: 700 !important;
}

html:not(.dark) .fi-dropdown-panel {
    border: 1px solid var(--citio-line-faint) !important;
    border-radius: 0.65rem !important;
    box-shadow: var(--citio-shadow-lg) !important;
    /* Scroll propio del panel: así los selects buscables muestran TODAS las
       opciones aunque el panel sea más alto que el modal (no depende de que el
       modal haga scroll, que dentro de un modal se recortaba). */
    max-height: min(60vh, 20rem);
    overflow-y: auto;
    overflow-x: hidden;
}

/* La caja de búsqueda del select se queda fija arriba al hacer scroll. */
html:not(.dark) .fi-dropdown-panel .fi-dropdown-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--citio-card, #ffffff);
}

html:not(.dark) .fi-dropdown-list-item:hover {
    background: var(--citio-amber-soft) !important;
    color: var(--citio-amber-text) !important;
}

/* ── Vistas Citio ── */
html:not(.dark) .citio-header {
    background: var(--citio-card) !important;
    border: 1px solid var(--citio-line-faint) !important;
    border-left: 4px solid var(--acento, var(--citio-amber)) !important;
    border-radius: var(--citio-radius-lg) !important;
    box-shadow: var(--citio-shadow) !important;
}

html:not(.dark) .citio-subject,
html:not(.dark) .citio-row-value {
    color: var(--citio-text) !important;
}

html:not(.dark) .citio-subject-meta,
html:not(.dark) .citio-total-label,
html:not(.dark) .citio-total-meta,
html:not(.dark) .citio-row-label,
html:not(.dark) .citio-card-title {
    color: var(--citio-text-muted) !important;
}

html:not(.dark) .citio-tabs-nav {
    border-bottom: none !important;
    background: var(--citio-surface) !important;
    border-radius: 0.65rem !important;
    padding: 0.3rem !important;
    gap: 0.25rem !important;
}

html:not(.dark) .citio-tab-btn {
    color: var(--citio-text-muted) !important;
    border-radius: 0.5rem !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

html:not(.dark) .citio-tab-btn:hover {
    background: rgba(255, 255, 255, 0.7) !important;
    color: var(--citio-text) !important;
}

html:not(.dark) .citio-tab-btn[aria-selected="true"] {
    background: var(--citio-card) !important;
    color: var(--citio-amber-text) !important;
    box-shadow: var(--citio-shadow-sm) !important;
}

html:not(.dark) .citio-tab-btn .count {
    background: var(--citio-line) !important;
    color: var(--citio-text-secondary) !important;
}

html:not(.dark) .citio-tab-btn[aria-selected="true"] .count {
    background: var(--citio-amber-soft) !important;
    color: var(--citio-amber-text) !important;
}

html:not(.dark) .citio-card {
    background: var(--citio-card) !important;
    border: 1px solid var(--citio-line-faint) !important;
    border-radius: var(--citio-radius-lg) !important;
    box-shadow: var(--citio-shadow) !important;
}

html:not(.dark) .citio-card-title,
html:not(.dark) .citio-totales-wrapper .citio-totales-header {
    border-bottom: 1px solid var(--citio-line-faint) !important;
    color: var(--citio-text-secondary) !important;
}

html:not(.dark) .citio-row,
html:not(.dark) .citio-totales-wrapper .citio-totales-row,
html:not(.dark) .citio-totales-wrapper .citio-card-inline {
    border-bottom-color: var(--citio-line-faint) !important;
}

html:not(.dark) .citio-totales-wrapper .citio-totales-row.total {
    border-top: 1px solid var(--citio-line) !important;
}

html:not(.dark) .citio-table {
    border: 1px solid var(--citio-line-faint) !important;
    border-radius: var(--citio-radius-lg) !important;
    box-shadow: var(--citio-shadow) !important;
    overflow: hidden;
}

html:not(.dark) .citio-table thead th {
    background: var(--citio-surface) !important;
    color: var(--citio-text-secondary) !important;
    border-bottom: none !important;
}

html:not(.dark) .citio-table tbody td {
    border-bottom-color: var(--citio-line-faint) !important;
}

html:not(.dark) .citio-totales-wrapper.citio-totales-wrapper {
    background: var(--citio-card) !important;
    border: 1px solid var(--citio-line-faint) !important;
    border-inline-start: 4px solid var(--citio-amber) !important;
    border-radius: var(--citio-radius-lg) !important;
    box-shadow: var(--citio-shadow) !important;
    color: var(--citio-text) !important;
}

html:not(.dark) .citio-notas-box {
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
    border-left: 4px solid var(--citio-amber) !important;
    border-radius: 0.65rem !important;
    color: var(--citio-text-secondary) !important;
}

html:not(.dark) .citio-status-badge {
    font-weight: 600;
    backdrop-filter: blur(4px);
}

/* Kanban / secciones libres */
html:not(.dark) .fi-page .fi-section.fi-section-not-contained {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════
   PÁGINAS CUSTOM — tema claro unificado
   ════════════════════════════════════════════════════════════ */

/* Balance cuentas / estado cuenta */
html:not(.dark) .bc-col,
html:not(.dark) .ec-col {
    border: 1px solid var(--citio-line) !important;
    border-radius: var(--citio-radius-lg) !important;
    box-shadow: var(--citio-shadow) !important;
    overflow: hidden;
}
html:not(.dark) .bc-head,
html:not(.dark) .ec-head {
    background: var(--citio-surface) !important;
    border-bottom: 1px solid var(--citio-line) !important;
}
html:not(.dark) .bc-head h3,
html:not(.dark) .ec-head h3 { color: var(--citio-text) !important; }
html:not(.dark) .cuenta-item {
    border: 1px solid var(--citio-line) !important;
    border-radius: var(--citio-radius) !important;
    box-shadow: var(--citio-shadow-sm) !important;
}
html:not(.dark) .cuenta-meta { color: var(--citio-text-muted) !important; border-top-color: var(--citio-line-faint) !important; }
html:not(.dark) .ec-table thead th { background: var(--citio-surface) !important; color: var(--citio-text-secondary) !important; }
html:not(.dark) .ec-table tbody td { border-bottom-color: var(--citio-line-faint) !important; color: var(--citio-text) !important; }

/* Estado resultados */
html:not(.dark) .er-tabnav { border-bottom-color: var(--citio-line) !important; }
html:not(.dark) .er-tabnav button { color: var(--citio-text-muted) !important; border-radius: 0.5rem !important; }
html:not(.dark) .er-tabnav button.active {
    background: var(--citio-amber-soft) !important;
    color: var(--citio-amber-text) !important;
    border-color: transparent !important;
    box-shadow: var(--citio-shadow-sm) !important;
}
html:not(.dark) .er-card,
html:not(.dark) .er-split-box {
    border: 1px solid var(--citio-line-faint) !important;
    border-radius: var(--citio-radius) !important;
    box-shadow: var(--citio-shadow-sm) !important;
}
html:not(.dark) .er-card .lbl,
html:not(.dark) .er-section-title { color: var(--citio-text-muted) !important; }
html:not(.dark) .er-table thead th { background: var(--citio-surface) !important; color: var(--citio-text-secondary) !important; }
html:not(.dark) .er-table tbody td { border-bottom-color: var(--citio-line-faint) !important; }

/* Catálogos, reporte mensual — refuerzo */
html:not(.dark) .cat-card,
html:not(.dark) .rep-card {
    border-radius: var(--citio-radius-lg) !important;
    box-shadow: var(--citio-shadow) !important;
}
html:not(.dark) .rep-table { border-radius: var(--citio-radius-lg) !important; }

/* Calendario sidebar */
html:not(.dark) .cal-card,
html:not(.dark) .cal-container {
    border: 1px solid var(--citio-line-faint) !important;
    border-radius: var(--citio-radius-lg) !important;
    box-shadow: var(--citio-shadow) !important;
}
html:not(.dark) .cal-card-title { color: var(--citio-text-muted) !important; }
html:not(.dark) .cal-chip {
    background: var(--citio-surface) !important;
    border-color: var(--citio-line) !important;
    color: var(--citio-text-secondary) !important;
}
html:not(.dark) .cal-modal {
    border-radius: var(--citio-radius-lg) !important;
    box-shadow: var(--citio-shadow-lg) !important;
}

/* Mapa andamios */
html:not(.dark) .mapa-wrapper .mapa-sidebar,
html:not(.dark) .mapa-filtros-card {
    border: 1px solid var(--citio-line-faint) !important;
    border-radius: var(--citio-radius-lg) !important;
    box-shadow: var(--citio-shadow) !important;
    background: var(--citio-card) !important;
}
html:not(.dark) .mapa-container {
    border: 1px solid var(--citio-line-faint) !important;
    border-radius: var(--citio-radius-lg) !important;
    box-shadow: var(--citio-shadow) !important;
}
html:not(.dark) .mapa-estatus-chip {
    background: var(--citio-surface) !important;
    border: 1px solid var(--citio-line) !important;
}

/* Kanban — Movimientos, Registros, etc. */
html:not(.dark) .kanban-col {
    border: 1px solid var(--citio-line) !important;
    border-radius: var(--citio-radius-lg) !important;
    background: var(--citio-card) !important;
    box-shadow: var(--citio-shadow) !important;
}
html:not(.dark) .kanban-head {
    border-bottom-color: color-mix(in srgb, var(--acento, #94a3b8) 22%, var(--citio-line)) !important;
}
html:not(.dark) .kanban-body {
    background: #f8fafc !important;
}
html:not(.dark) .kanban-card {
    border-radius: var(--citio-radius) !important;
    border-color: var(--citio-line) !important;
    box-shadow: var(--citio-shadow-sm) !important;
}
html:not(.dark) .kanban-card:hover {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1) !important;
}
html:not(.dark) .kanban-head .subtotal { color: var(--citio-text-muted) !important; }
html:not(.dark) .kanban-head .subtotal strong { color: var(--citio-text-secondary) !important; }
html:not(.dark) .kanban-filtros {
    background: var(--citio-card) !important;
    border-color: var(--citio-line) !important;
    box-shadow: var(--citio-shadow) !important;
}
html:not(.dark) .kanban-filtros select {
    border-color: var(--citio-line) !important;
    background: #f8fafc !important;
}
html:not(.dark) .kanban-filtros select:focus {
    border-color: var(--citio-amber) !important;
    box-shadow: 0 0 0 3px var(--citio-amber-soft) !important;
}
html:not(.dark) .empty-state {
    border-color: var(--citio-line) !important;
    background: rgba(248, 250, 252, 0.85) !important;
}
html:not(.dark) .pre-search-bar {
    background: var(--citio-card) !important;
    border: 1px solid var(--citio-line) !important;
    box-shadow: var(--citio-shadow-sm) !important;
}
html:not(.dark) .pre-search-bar:focus-within {
    border-color: var(--citio-amber) !important;
    box-shadow: 0 0 0 3px var(--citio-amber-soft) !important;
}
html:not(.dark) .pre-search-bar input {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Vista obra — KPI */
html:not(.dark) .citio-obra-view .citio-kpi-card {
    background: var(--citio-card) !important;
    border: 1px solid var(--citio-line-faint) !important;
    border-radius: var(--citio-radius) !important;
    box-shadow: var(--citio-shadow-sm) !important;
}
html:not(.dark) .citio-kpi-label { color: var(--citio-text-muted) !important; }
html:not(.dark) .citio-kpi-value { color: var(--citio-text) !important; }
html:not(.dark) .citio-kpi-sub { color: var(--citio-text-muted) !important; opacity: 1 !important; }
html:not(.dark) .citio-obra-view .citio-tab-active {
    background: var(--citio-card) !important;
    color: var(--citio-amber-text) !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
    box-shadow: var(--citio-shadow-sm) !important;
}

/* Historial timeline + comentarios */
html:not(.dark) .citio-timeline .tl-date {
    color: var(--citio-text-muted) !important;
    border-right-color: var(--citio-line) !important;
}
html:not(.dark) .citio-timeline .tl-date strong { color: var(--citio-text) !important; }
html:not(.dark) .citio-timeline .tl-event {
    background: var(--citio-surface) !important;
    border-radius: 0.5rem !important;
}
html:not(.dark) .citio-timeline .tl-user { color: var(--citio-text-muted) !important; }
html:not(.dark) .citio-timeline .tl-comment { color: var(--citio-text-secondary) !important; }
html:not(.dark) .citio-comment-form {
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
    border-radius: var(--citio-radius) !important;
}
html:not(.dark) .citio-comment-form textarea {
    background: #fff !important;
    border: 1px solid var(--citio-line) !important;
    color: var(--citio-text) !important;
    border-radius: 0.5rem !important;
}

/* Resumen registros banner */
html:not(.dark) .citio-resumen-banner {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
    border: 1px solid #a7f3d0 !important;
    color: rgb(6 78 59) !important;
    box-shadow: var(--citio-shadow-sm) !important;
}
html:not(.dark) .citio-resumen-banner strong { color: rgb(4 120 87) !important; }
html:not(.dark) .citio-resumen-pill {
    background: rgba(16, 185, 129, 0.15) !important;
    color: rgb(4 120 87) !important;
    padding: 0.3rem 0.9rem;
    border-radius: 9999px;
    font-weight: 800;
    font-size: 1.05rem;
}
.dark .citio-resumen-banner {
    background: linear-gradient(135deg, #064e3b, #065f46) !important;
    border: none !important;
    color: white !important;
}
.dark .citio-resumen-pill {
    background: rgba(255, 255, 255, 0.12) !important;
    color: white !important;
}

/* Widget resultado mensual */
html:not(.dark) .citio-rm-btn {
    background: var(--citio-card) !important;
    border: 1px solid var(--citio-line) !important;
    color: var(--citio-text-secondary) !important;
    width: 2rem; height: 2rem;
    border-radius: 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--citio-shadow-sm);
}
html:not(.dark) .citio-rm-btn:hover { background: var(--citio-surface) !important; border-color: var(--citio-amber) !important; color: var(--citio-amber-text) !important; }
html:not(.dark) .citio-rm-select {
    background: var(--citio-card) !important;
    border: 1px solid var(--citio-line) !important;
    color: var(--citio-text) !important;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    min-width: 9.5rem;
    cursor: pointer;
    box-shadow: var(--citio-shadow-sm);
}

/* Inventario tooltips */
html:not(.dark) .citio-inv-tooltip {
    background: #fff !important;
    color: var(--citio-text) !important;
    border: 1px solid var(--citio-line) !important;
    box-shadow: var(--citio-shadow-lg) !important;
}
html:not(.dark) .citio-inv-tooltip::after { border-top-color: #fff !important; }
html:not(.dark) .citio-inv-tt-label { color: var(--citio-text-muted) !important; }
html:not(.dark) .citio-inv-tt-value { color: var(--citio-text) !important; }

/* Progress, stat tiles, links */
html:not(.dark) .citio-progress { background: var(--citio-line-faint) !important; }
html:not(.dark) .citio-stat-tile {
    border: 1px solid var(--citio-line-faint) !important;
    border-radius: var(--citio-radius) !important;
    box-shadow: var(--citio-shadow-sm) !important;
}
html:not(.dark) .citio-stat-label,
html:not(.dark) .citio-stat-meta { color: var(--citio-text-muted) !important; }
html:not(.dark) .citio-link { color: #0284c7 !important; }
html:not(.dark) .citio-hist-user { color: var(--citio-text-secondary) !important; }
html:not(.dark) .citio-hist-comment {
    color: var(--citio-text-secondary) !important;
    background: var(--citio-surface) !important;
}
html:not(.dark) .citio-totales-card {
    border-radius: var(--citio-radius-lg) !important;
    box-shadow: var(--citio-shadow) !important;
}

/* ===== Tabla compacta (.fi-ta-compact) =====
   La tabla llena el ancho disponible (responsiva). El "espacio entre columnas"
   se controla con una columna `grow()` que absorbe el sobrante (las demás quedan
   ajustadas al contenido) y con un padding chico y parejo entre columnas. En
   pantallas chicas, las columnas secundarias se ocultan por breakpoint. */
.fi-ta-compact .fi-ta-cell:not(.fi-ta-selection-cell),
.fi-ta-compact .fi-ta-header-cell {
    padding-inline: 0.5rem !important;
}