/* =============================================================
   CICUMBA HARMONY - Tema unificado pastel verde para toda la app
   Paleta: #5a9b80 (primario), #6bc29a (acento), #2d4a3e (texto)
   ============================================================= */

/* --- VARIABLES GLOBALES --- */
:root {
    /* Override Bootstrap Flatly theme: verde suave Cicumba */
    --bs-primary: #8bbaa5 !important;
    --bs-primary-rgb: 139, 186, 165 !important;
    --bs-blue: #8bbaa5 !important;
    --bs-success: #8bbaa5 !important;
    --bs-success-rgb: 139, 186, 165 !important;

    /* Override DevExpress primary */
    --dx-color-primary: #8bbaa5 !important;
    --dx-color-link: #7aaa94 !important;

    /* Cicumba palette - verde suave */
    --cicumba-primary: #8bbaa5;
    --cicumba-primary-rgb: 139, 186, 165;
    --cicumba-accent: #a0ccb8;
    --cicumba-accent-rgb: 160, 204, 184;
    --cicumba-dark: #4a7565;
    --cicumba-text: #556d63;
    --cicumba-text-secondary: #7a9488;
    --cicumba-text-muted: #99b0a6;
    --cicumba-bg-page: #f7faf8;
    --cicumba-bg-card: #ffffff;
    --cicumba-bg-alt-row: rgba(139, 186, 165, 0.03);
    --cicumba-bg-hover: rgba(139, 186, 165, 0.06);
    --cicumba-bg-selected: rgba(139, 186, 165, 0.10);
    --cicumba-border: rgba(139, 186, 165, 0.15);
    --cicumba-border-light: rgba(139, 186, 165, 0.08);
    --cicumba-shadow-sm: 0 1px 3px rgba(139, 186, 165, 0.08);
    --cicumba-shadow-md: 0 4px 12px rgba(139, 186, 165, 0.10);
    --cicumba-shadow-lg: 0 8px 24px rgba(139, 186, 165, 0.12);
    --cicumba-radius-sm: 6px;
    --cicumba-radius-md: 10px;
    --cicumba-radius-lg: 14px;

    /* Iconos: compactos + aspecto "light" (tarjeta flotante) */
    --cicumba-icon-size: 16px;
    --cicumba-icon-radius: 8px;
    --cicumba-icon-shadow: 0 2px 10px rgba(45, 74, 62, 0.08), 0 1px 3px rgba(255, 255, 255, 0.65);
    --cicumba-icon-shadow-header: 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    /* Altura aproximada del header verde XAF Blazor hasta el contenido; ajustar si cambia el shell */
    --cicumba-app-header-below-offset: 56px;
}


/* =============================================================
   1. FONDO GENERAL DE LA APLICACION
   ============================================================= */
body:not(.logon-page) {
    background-color: var(--cicumba-bg-page) !important;
}

/* Contenedor principal de contenido */
.view-content,
.dxbl-sc-content,
.xaf-main-content,
main:not(:has(.logon-main-container)) {
    background-color: var(--cicumba-bg-page) !important;
}

/* =============================================================
   2. GRID / TABLA (ListView)
   ============================================================= */

/* --- Contenedor del grid --- */
.dxbl-grid {
    border: 1px solid var(--cicumba-border) !important;
    border-radius: var(--cicumba-radius-md) !important;
    overflow: hidden !important;
    box-shadow: var(--cicumba-shadow-sm) !important;
    background: var(--cicumba-bg-card) !important;
}

/* --- Header del grid --- */
.dxbl-grid-header-row,
.dxbl-grid-header-row th,
.dxbl-grid .dxbl-grid-header-row {
    background: linear-gradient(180deg, #f0f7f3 0%, #e8f2ec 100%) !important;
    color: var(--cicumba-dark) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.3px !important;
    border-bottom: 2px solid rgba(90, 155, 128, 0.20) !important;
}

.dxbl-grid-header-row th {
    padding: 10px 12px !important;
    border-right: 1px solid var(--cicumba-border-light) !important;
}

.dxbl-grid-header-row th:last-child {
    border-right: none !important;
}

/* Iconos de ordenamiento */
.dxbl-grid-header-row .dxbl-grid-sort-icon,
.dxbl-grid-header-row svg {
    color: var(--cicumba-primary) !important;
    width: 13px !important;
    height: 13px !important;
    opacity: 0.55 !important;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.6)) !important;
}

/* --- Filas del grid --- */
.dxbl-grid-table tbody tr,
.dxbl-grid tbody tr {
    transition: background-color 0.2s ease !important;
    border-bottom: 1px solid rgba(90, 155, 128, 0.06) !important;
}

/* Filas alternas */
.dxbl-grid-table tbody tr:nth-child(even),
.dxbl-grid tbody tr:nth-child(even) {
    background-color: var(--cicumba-bg-alt-row) !important;
}

.dxbl-grid-table tbody tr:nth-child(odd),
.dxbl-grid tbody tr:nth-child(odd) {
    background-color: var(--cicumba-bg-card) !important;
}

/* Hover en filas */
.dxbl-grid-table tbody tr:hover,
.dxbl-grid tbody tr:hover {
    background-color: var(--cicumba-bg-hover) !important;
}

/* Fila seleccionada / focused */
.dxbl-grid-table tbody tr.dxbl-grid-selection,
.dxbl-grid-table tbody tr[aria-selected="true"],
.dxbl-grid tbody tr.dxbl-grid-selection,
.dxbl-grid tbody tr[aria-selected="true"],
.dxbl-grid-table tbody tr.dxbl-focused,
.dxbl-grid tbody tr.dxbl-focused {
    background-color: var(--cicumba-bg-selected) !important;
    box-shadow: inset 3px 0 0 var(--cicumba-primary) !important;
    color: var(--cicumba-dark) !important;
}

/* Override cualquier .bg-primary de Bootstrap */
.bg-primary {
    background-color: #8bbaa5 !important;
}

.text-bg-primary {
    background-color: #8bbaa5 !important;
    color: white !important;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #8bbaa5 !important;
    border-color: #8bbaa5 !important;
}

/* Override fila focused con color inline de DevExpress/Bootstrap */
.dxbl-grid-table tbody tr.dxbl-focused td,
.dxbl-grid tbody tr.dxbl-focused td,
.dxbl-grid-table tbody tr[aria-selected="true"] td,
.dxbl-grid tbody tr[aria-selected="true"] td {
    background-color: inherit !important;
    color: var(--cicumba-dark) !important;
}

/* Celdas del grid */
.dxbl-grid-table td,
.dxbl-grid td {
    color: var(--cicumba-text) !important;
    padding: 9px 12px !important;
    font-size: 13.5px !important;
    border-right: 1px solid rgba(90, 155, 128, 0.04) !important;
    vertical-align: middle !important;
}

.dxbl-grid-table td:last-child,
.dxbl-grid td:last-child {
    border-right: none !important;
}

/* Checkbox en grid */
.dxbl-grid .dxbl-checkbox input[type="checkbox"] {
    accent-color: var(--cicumba-primary) !important;
}

/* Botones de accion en grid (iconos de fila) */
.dxbl-grid .dxbl-grid-edit-cell button,
.dxbl-grid td .dxbl-btn {
    color: var(--cicumba-primary) !important;
    border: none !important;
    background: transparent !important;
    border-radius: var(--cicumba-radius-sm) !important;
    transition: all 0.2s ease !important;
}

.dxbl-grid td .dxbl-btn:hover {
    background: var(--cicumba-bg-hover) !important;
    color: var(--cicumba-dark) !important;
}

/* --- Footer / Paginacion del grid --- */
.dxbl-grid-footer,
.dxbl-grid-pager,
.dxbl-grid .dxbl-pager,
.dxbl-pager {
    background: linear-gradient(180deg, #f5f9f7 0%, #eef5f1 100%) !important;
    border-top: 1px solid var(--cicumba-border) !important;
    padding: 6px 12px !important;
}

/* Pagina activa */
.dxbl-pager .dxbl-btn.dxbl-active,
.dxbl-pager .dxbl-active,
.dxbl-pager .active,
.dxbl-pager-page-number.active,
.dxbl-grid-pager .active {
    background-color: var(--cicumba-primary) !important;
    color: white !important;
    border-color: var(--cicumba-primary) !important;
    border-radius: var(--cicumba-radius-sm) !important;
    font-weight: 600 !important;
}

/* Paginas inactivas */
.dxbl-pager .dxbl-btn:not(.dxbl-active),
.dxbl-pager-page-number:not(.active) {
    color: var(--cicumba-text-secondary) !important;
    border-radius: var(--cicumba-radius-sm) !important;
    transition: all 0.2s ease !important;
}

.dxbl-pager .dxbl-btn:not(.dxbl-active):hover {
    background-color: var(--cicumba-bg-hover) !important;
    color: var(--cicumba-primary) !important;
}

/* Page size selector */
.dxbl-pager .dxbl-text-edit,
.dxbl-grid-pager .dxbl-text-edit {
    border: 1px solid var(--cicumba-border) !important;
    border-radius: var(--cicumba-radius-sm) !important;
    background: white !important;
}

/* =============================================================
   3. TOOLBAR (Barra de herramientas ListView)
   ============================================================= */

/* Contenedor de la toolbar (solo en area de contenido, no header) */
.view-content .dxbl-toolbar,
.view-content .xaf-toolbar,
.dxbl-sc-content .dxbl-toolbar,
.dxbl-sc-content .xaf-toolbar {
    background: transparent !important;
    padding: 8px 4px !important;
    gap: 6px !important;
}

/* Boton "Nuevo" (primario) */
.dxbl-toolbar .dxbl-btn-primary:not(.dxbl-toolbar-btn),
.xaf-toolbar .dxbl-btn-primary {
    background: linear-gradient(135deg, var(--cicumba-primary) 0%, #7aaa94 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--cicumba-radius-md) !important;
    padding: 8px 18px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    box-shadow: var(--cicumba-shadow-sm) !important;
    transition: all 0.25s ease !important;
}

.dxbl-toolbar .dxbl-btn-primary:not(.dxbl-toolbar-btn):hover,
.xaf-toolbar .dxbl-btn-primary:hover {
    background: linear-gradient(135deg, #7aaa94 0%, #6b9b85 100%) !important;
    box-shadow: var(--cicumba-shadow-md) !important;
    transform: translateY(-1px) !important;
}

.dxbl-toolbar .dxbl-btn-primary:not(.dxbl-toolbar-btn) img,
.xaf-toolbar .dxbl-btn-primary img {
    filter: brightness(0) invert(1) !important;
}

/* Boton "Eliminar" (peligro) — excluye acción ListView prompts (solo estilo DevExpress en ese botón) */
.dxbl-toolbar .xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) .dxbl-btn[data-action-name*="Delete"],
.dxbl-toolbar .xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) .dxbl-btn[data-action-name*="Eliminar"],
.dxbl-toolbar .xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) .dxbl-btn[data-action-name*="Borrar"],
.xaf-toolbar .xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) .dxbl-btn[data-action-name*="Delete"],
.xaf-toolbar .xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) .dxbl-btn[data-action-name*="Eliminar"],
.xaf-toolbar .xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) .dxbl-btn[data-action-name*="Borrar"],
.xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) button[data-action-name*="Delete"],
.xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) button[data-action-name*="Eliminar"],
.xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) button[data-action-name*="Borrar"] {
    background: linear-gradient(135deg, #e07070 0%, #d45a5a 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--cicumba-radius-md) !important;
    padding: 8px 18px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(224, 112, 112, 0.20) !important;
    transition: all 0.25s ease !important;
}

.dxbl-toolbar .xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) .dxbl-btn[data-action-name*="Delete"]:hover,
.dxbl-toolbar .xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) .dxbl-btn[data-action-name*="Eliminar"]:hover,
.dxbl-toolbar .xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) .dxbl-btn[data-action-name*="Borrar"]:hover,
.xaf-toolbar .xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) .dxbl-btn[data-action-name*="Delete"]:hover,
.xaf-toolbar .xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) .dxbl-btn[data-action-name*="Eliminar"]:hover,
.xaf-toolbar .xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) .dxbl-btn[data-action-name*="Borrar"]:hover,
.xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) button[data-action-name*="Delete"]:hover,
.xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) button[data-action-name*="Eliminar"]:hover,
.xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) button[data-action-name*="Borrar"]:hover {
    background: linear-gradient(135deg, #d45a5a 0%, #c44a4a 100%) !important;
    box-shadow: 0 4px 12px rgba(224, 112, 112, 0.30) !important;
    transform: translateY(-1px) !important;
}

.dxbl-toolbar .xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) .dxbl-btn[data-action-name*="Delete"] img,
.dxbl-toolbar .xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) .dxbl-btn[data-action-name*="Eliminar"] img,
.dxbl-toolbar .xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) .dxbl-btn[data-action-name*="Borrar"] img,
.xaf-toolbar .xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) .dxbl-btn[data-action-name*="Delete"] img,
.xaf-toolbar .xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) .dxbl-btn[data-action-name*="Eliminar"] img,
.xaf-toolbar .xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) .dxbl-btn[data-action-name*="Borrar"] img,
.xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) button[data-action-name*="Delete"] img,
.xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) button[data-action-name*="Eliminar"] img,
.xaf-toolbar-item:not([data-action-id="Int_Usuario_Prompt_ListView_DeletePrompts"]):not([data-action-id="Int_Usuario_Voz_ListView_DeleteVoz"]) button[data-action-name*="Borrar"] img {
    filter: brightness(0) invert(1) !important;
}

/* Barra de busqueda */
.dxbl-toolbar .dxbl-text-edit,
.xaf-toolbar .dxbl-text-edit,
.dxbl-toolbar .dxbl-edit,
.xaf-toolbar .dxbl-edit {
    border: 1px solid var(--cicumba-border) !important;
    border-radius: var(--cicumba-radius-md) !important;
    background: white !important;
    overflow: hidden !important;
    transition: all 0.25s ease !important;
}

.dxbl-toolbar .dxbl-text-edit:focus-within,
.xaf-toolbar .dxbl-text-edit:focus-within {
    border-color: var(--cicumba-accent) !important;
    box-shadow: 0 0 0 3px rgba(107, 194, 154, 0.12) !important;
}

.dxbl-toolbar .dxbl-text-edit-input,
.xaf-toolbar .dxbl-text-edit-input {
    color: var(--cicumba-text) !important;
    font-size: 13px !important;
}

.dxbl-toolbar .dxbl-text-edit-input::placeholder {
    color: var(--cicumba-text-muted) !important;
    opacity: 0.7 !important;
}

/* Boton de busqueda (lupa) */
.dxbl-toolbar .dxbl-btn-outline-secondary,
.dxbl-toolbar .dxbl-btn-light {
    color: var(--cicumba-text-secondary) !important;
    border: 1px solid var(--cicumba-border) !important;
    border-radius: var(--cicumba-radius-md) !important;
    background: white !important;
    transition: all 0.2s ease !important;
}

.dxbl-toolbar .dxbl-btn-outline-secondary:hover,
.dxbl-toolbar .dxbl-btn-light:hover {
    background: var(--cicumba-bg-hover) !important;
    border-color: var(--cicumba-accent) !important;
    color: var(--cicumba-primary) !important;
}

/* Filtro rapido (dropdown) */
.dxbl-toolbar .dxbl-dropdown-toggle,
.xaf-toolbar .dxbl-dropdown-toggle {
    border: 1px solid var(--cicumba-border) !important;
    border-radius: var(--cicumba-radius-md) !important;
    background: white !important;
    color: var(--cicumba-text-secondary) !important;
}

/* Iconos en toolbar de contenido: blanco si el botón no es outline/light (coherente con site.css; excluye Prompt suave y acción inline «desde cero») */
.view-content .dxbl-toolbar:not(:has([data-action-id="Int_Usuario_Prompt_OpenUserPromptSettings"])):not(:has([data-action-id="ShowPromptTutorial_Action"])):not(:has([data-action-id="Int_Usuario_Prompt_FromScratchInline_Action"])) .dxbl-toolbar-btn:not(.dxbl-btn-outline-secondary):not(.dxbl-btn-light):not(.cicumba-nuclear-prompt-from-scratch-btn) img,
.view-content .dxbl-toolbar:not(:has([data-action-id="Int_Usuario_Prompt_OpenUserPromptSettings"])):not(:has([data-action-id="ShowPromptTutorial_Action"])):not(:has([data-action-id="Int_Usuario_Prompt_FromScratchInline_Action"])) .dxbl-toolbar-btn:not(.dxbl-btn-outline-secondary):not(.dxbl-btn-light):not(.cicumba-nuclear-prompt-from-scratch-btn) .dxbl-image,
.dxbl-sc-content .dxbl-toolbar:not(:has([data-action-id="Int_Usuario_Prompt_OpenUserPromptSettings"])):not(:has([data-action-id="ShowPromptTutorial_Action"])):not(:has([data-action-id="Int_Usuario_Prompt_FromScratchInline_Action"])) .dxbl-toolbar-btn:not(.dxbl-btn-outline-secondary):not(.dxbl-btn-light):not(.cicumba-nuclear-prompt-from-scratch-btn) img,
.dxbl-sc-content .dxbl-toolbar:not(:has([data-action-id="Int_Usuario_Prompt_OpenUserPromptSettings"])):not(:has([data-action-id="ShowPromptTutorial_Action"])):not(:has([data-action-id="Int_Usuario_Prompt_FromScratchInline_Action"])) .dxbl-toolbar-btn:not(.dxbl-btn-outline-secondary):not(.dxbl-btn-light):not(.cicumba-nuclear-prompt-from-scratch-btn) .dxbl-image {
    filter: brightness(0) invert(1) !important;
}

.view-content .dxbl-toolbar:not(:has([data-action-id="Int_Usuario_Prompt_OpenUserPromptSettings"])):not(:has([data-action-id="ShowPromptTutorial_Action"])):not(:has([data-action-id="Int_Usuario_Prompt_FromScratchInline_Action"])) .dxbl-toolbar-btn.dxbl-btn-outline-secondary img,
.view-content .dxbl-toolbar:not(:has([data-action-id="Int_Usuario_Prompt_OpenUserPromptSettings"])):not(:has([data-action-id="ShowPromptTutorial_Action"])):not(:has([data-action-id="Int_Usuario_Prompt_FromScratchInline_Action"])) .dxbl-toolbar-btn.dxbl-btn-outline-secondary .dxbl-image,
.view-content .dxbl-toolbar:not(:has([data-action-id="Int_Usuario_Prompt_OpenUserPromptSettings"])):not(:has([data-action-id="ShowPromptTutorial_Action"])):not(:has([data-action-id="Int_Usuario_Prompt_FromScratchInline_Action"])) .dxbl-toolbar-btn.dxbl-btn-light img,
.view-content .dxbl-toolbar:not(:has([data-action-id="Int_Usuario_Prompt_OpenUserPromptSettings"])):not(:has([data-action-id="ShowPromptTutorial_Action"])):not(:has([data-action-id="Int_Usuario_Prompt_FromScratchInline_Action"])) .dxbl-toolbar-btn.dxbl-btn-light .dxbl-image,
.dxbl-sc-content .dxbl-toolbar:not(:has([data-action-id="Int_Usuario_Prompt_OpenUserPromptSettings"])):not(:has([data-action-id="ShowPromptTutorial_Action"])):not(:has([data-action-id="Int_Usuario_Prompt_FromScratchInline_Action"])) .dxbl-toolbar-btn.dxbl-btn-outline-secondary img,
.dxbl-sc-content .dxbl-toolbar:not(:has([data-action-id="Int_Usuario_Prompt_OpenUserPromptSettings"])):not(:has([data-action-id="ShowPromptTutorial_Action"])):not(:has([data-action-id="Int_Usuario_Prompt_FromScratchInline_Action"])) .dxbl-toolbar-btn.dxbl-btn-outline-secondary .dxbl-image,
.dxbl-sc-content .dxbl-toolbar:not(:has([data-action-id="Int_Usuario_Prompt_OpenUserPromptSettings"])):not(:has([data-action-id="ShowPromptTutorial_Action"])):not(:has([data-action-id="Int_Usuario_Prompt_FromScratchInline_Action"])) .dxbl-toolbar-btn.dxbl-btn-light img,
.dxbl-sc-content .dxbl-toolbar:not(:has([data-action-id="Int_Usuario_Prompt_OpenUserPromptSettings"])):not(:has([data-action-id="ShowPromptTutorial_Action"])):not(:has([data-action-id="Int_Usuario_Prompt_FromScratchInline_Action"])) .dxbl-toolbar-btn.dxbl-btn-light .dxbl-image {
    filter: brightness(0) saturate(100%) invert(42%) sepia(14%) saturate(480%) hue-rotate(98deg) !important;
    opacity: 0.95 !important;
}

/* =============================================================
   4. DETAILVIEW (Formularios de detalle)
   ============================================================= */

/* --- Tabs / Pestañas --- */
.dxbl-tabs .dxbl-tab-header,
.dxbl-tabs .nav-tabs {
    border-bottom: 2px solid var(--cicumba-border) !important;
    background: transparent !important;
}

.dxbl-tabs .dxbl-tab-header-item,
.dxbl-tabs .nav-link,
.dxbl-tab-header-text {
    color: var(--cicumba-text-secondary) !important;
    font-weight: 500 !important;
    border: none !important;
    padding: 10px 18px !important;
    border-radius: var(--cicumba-radius-sm) var(--cicumba-radius-sm) 0 0 !important;
    transition: all 0.2s ease !important;
}

.dxbl-tabs .dxbl-tab-header-item:hover,
.dxbl-tabs .nav-link:hover {
    color: var(--cicumba-primary) !important;
    background: var(--cicumba-bg-hover) !important;
}

.dxbl-tabs .dxbl-tab-header-item.dxbl-active,
.dxbl-tabs .nav-link.active,
.dxbl-tabs .dxbl-tab-header-item[aria-selected="true"] {
    color: var(--cicumba-primary) !important;
    background: white !important;
    border-bottom: 3px solid var(--cicumba-primary) !important;
    font-weight: 600 !important;
}

/* --- Campos de formulario --- */
.dxbl-fl-ctrl .dxbl-text-edit,
.dxbl-fl-ctrl .dxbl-combobox,
.dxbl-fl-ctrl .dxbl-date-edit,
.dxbl-fl-ctrl .dxbl-spin-edit,
.dxbl-fl-ctrl .dxbl-memo,
.dxbl-fl-ctrl textarea {
    border: 1px solid var(--cicumba-border) !important;
    border-radius: var(--cicumba-radius-sm) !important;
    transition: all 0.25s ease !important;
    background: white !important;
}

.dxbl-fl-ctrl .dxbl-text-edit:focus-within,
.dxbl-fl-ctrl .dxbl-combobox:focus-within,
.dxbl-fl-ctrl .dxbl-date-edit:focus-within,
.dxbl-fl-ctrl .dxbl-spin-edit:focus-within,
.dxbl-fl-ctrl .dxbl-memo:focus-within,
.dxbl-fl-ctrl textarea:focus {
    border-color: var(--cicumba-accent) !important;
    box-shadow: 0 0 0 3px rgba(107, 194, 154, 0.10) !important;
}

/* Labels de los campos */
.dxbl-fl-cpt,
.dxbl-fl-ctrl label {
    color: var(--cicumba-text-secondary) !important;
    font-weight: 500 !important;
    font-size: 12.5px !important;
}

/* Inputs */
.dxbl-text-edit-input {
    color: var(--cicumba-text) !important;
}

/* --- Paneles / Cards en DetailView --- */
.dxbl-fl,
.dxbl-form-layout {
    background: var(--cicumba-bg-card) !important;
}

/* =============================================================
   5. SIDEBAR / MENU LATERAL 
   Verde super suave, sin gradientes, encabezados ligeramente mas oscuros
   ============================================================= */

/* Fondo del sidebar: verde ultra suave plano */
.xaf-main-menu,
.sidebar,
.nav-sidebar,
.dxbl-accordion {
    background: #f6faf8 !important;
    background-color: #f6faf8 !important;
    background-image: none !important;
    border-right: 1px solid #e8f0ec !important;
}

/* NUCLEAR: Todo dentro del accordion hereda fondo ultra suave */
.dxbl-accordion *,
.xaf-main-menu * {
    background-color: transparent !important;
    background-image: none !important;
}

/* Re-aplicar fondo al contenedor principal */
.dxbl-accordion,
.xaf-main-menu {
    background-color: #f6faf8 !important;
}

/* Encabezados de sección (Inteligencia, Configuración Empresa, etc.) */
.dxbl-accordion .dxbl-accordion-item-header,
.dxbl-accordion .dxbl-accordion-item-header-button,
.dxbl-accordion .dxbl-accordion-item > .dxbl-accordion-item-header,
.dxbl-accordion .card-header,
.dxbl-accordion .dxbl-accordion-item-header.dxbl-btn,
.dxbl-accordion .dxbl-accordion-item-header-button.dxbl-btn {
    color: #6b8e7e !important;
    background-color: #f2f7f4 !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 1px solid #edf2ef !important;
    transition: all 0.2s ease !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* Items del menu (sub-items): icono pegado al texto */
.dxbl-accordion .dxbl-btn,
.dxbl-accordion .dxbl-btn.dxbl-btn-secondary,
.xaf-main-menu .nav-link {
    color: #607d72 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    transition: all 0.2s ease !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    padding-inline-start: 4px !important;
    padding-inline-end: 10px !important;
}

.dxbl-accordion .dxbl-btn .xaf-image,
.dxbl-accordion .dxbl-btn.dxbl-btn-secondary .xaf-image,
.xaf-main-menu .nav-link .xaf-image {
    margin-inline-end: 4px !important;
}

.dxbl-accordion .dxbl-btn .dxbl-text,
.dxbl-accordion .dxbl-btn.dxbl-btn-secondary .dxbl-text,
.xaf-main-menu .nav-link .dxbl-text {
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
    padding-left: 0 !important;
    padding-inline-start: 0 !important;
}

.dxbl-accordion .dxbl-accordion-item-header,
.dxbl-accordion .dxbl-accordion-item-header-button {
    gap: 2px !important;
    column-gap: 2px !important;
    overflow: visible !important;
    padding-inline-start: 4px !important;
    padding-inline-end: 10px !important;
}

.dxbl-accordion .dxbl-accordion-item-header .xaf-image,
.dxbl-accordion .dxbl-accordion-item-header-button .xaf-image {
    margin-inline-end: 4px !important;
}

.dxbl-accordion .dxbl-accordion-item-header .dxbl-text,
.dxbl-accordion .dxbl-accordion-item-header-button .dxbl-text {
    margin-inline-start: 0 !important;
}

/* TODOS los textos del sidebar */
.dxbl-accordion .dxbl-text,
.dxbl-accordion span:not(.xaf-image),
.xaf-main-menu .dxbl-text,
.xaf-main-menu span:not(.xaf-image) {
    color: #607d72 !important;
}

/* Textos en encabezados de sección */
.dxbl-accordion .dxbl-accordion-item-header .dxbl-text,
.dxbl-accordion .dxbl-accordion-item-header span:not(.xaf-image),
.dxbl-accordion .dxbl-accordion-item-header-button .dxbl-text,
.dxbl-accordion .dxbl-accordion-item-header-button span:not(.xaf-image) {
    color: #6b8e7e !important;
    font-weight: 600 !important;
}

/* Sidebar: iconos planos (sin pastilla circular ni sombra), pegados al texto */
.dxbl-accordion .xaf-image,
.xaf-main-menu .xaf-image {
    width: var(--cicumba-icon-size) !important;
    height: var(--cicumba-icon-size) !important;
    min-width: var(--cicumba-icon-size) !important;
    min-height: var(--cicumba-icon-size) !important;
    margin-right: 0 !important;
    margin-inline-end: 0 !important;
    margin-left: 0 !important;
    background-color: #5a7a6c !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    overflow: visible !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
}

.dxbl-accordion img:not(.xaf-image),
.xaf-main-menu img:not(.xaf-image) {
    width: var(--cicumba-icon-size) !important;
    height: var(--cicumba-icon-size) !important;
    min-width: var(--cicumba-icon-size) !important;
    min-height: var(--cicumba-icon-size) !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    filter: brightness(0) saturate(100%) invert(55%) sepia(8%) saturate(400%) hue-rotate(100deg) !important;
    opacity: 0.92 !important;
}

.dxbl-accordion .dxbl-btn img:not(.xaf-image),
.xaf-main-menu .nav-link img:not(.xaf-image) {
    margin-inline-end: 4px !important;
}

/* Iconos en encabezados de sección */
.dxbl-accordion .dxbl-accordion-item-header .xaf-image,
.dxbl-accordion .dxbl-accordion-item-header-button .xaf-image {
    background-color: #5a7a6c !important;
}

/* Hover en items del menu */
.dxbl-accordion .dxbl-btn:hover,
.xaf-main-menu .nav-link:hover {
    background-color: #edf5f0 !important;
    color: #4a7a65 !important;
}

/* Hover en encabezados de sección */
.dxbl-accordion .dxbl-accordion-item-header:hover,
.dxbl-accordion .dxbl-accordion-item-header-button:hover,
.dxbl-accordion .card-header:hover {
    background: #f3f7f5 !important;
    background-color: #f3f7f5 !important;
    color: #5a8a72 !important;
}

/* Item activo / seleccionado */
.dxbl-accordion .dxbl-active,
.xaf-main-menu .nav-link.active,
.xaf-main-menu .nav-link.xaf-current,
.xaf-navigation-item.active,
.xaf-navigation-item.xaf-current {
    background-color: #e8f2ec !important;
    color: #4a7a65 !important;
    font-weight: 600 !important;
    border-left: 3px solid rgba(139, 186, 165, 0.5) !important;
}

/* Flecha de expand/collapse del accordion */
.dxbl-accordion .dxbl-accordion-item-header svg,
.dxbl-accordion .dxbl-accordion-item-header-button svg {
    color: #8abb9f !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    opacity: 0.9 !important;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.5)) !important;
}

/*
 * Header: iconos mask — tamaño un poco mayor que 16px para que engranaje/máscaras no se recorten.
 * Excepciones: cuenta (foto), popup usuario, theme-settings.
 */
.header-right-side .xaf-image,
.header-left-side .xaf-image:not([style*="align-justify"]):not([style*="/menu"]) {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    min-height: 21px !important;
    background-color: #ffffff !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    border: none !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    overflow: visible !important;
    box-sizing: content-box !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
}

.header-right-side .theme-settings .xaf-image,
.header-right-side .xaf-image[style*="Gear"],
.header-right-side .xaf-image[style*="Setting"],
.header-right-side .xaf-image[style*="Preferences"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
}

.header-right-side .theme-settings,
.header-right-side .account-container {
    overflow: visible !important;
    flex-shrink: 0 !important;
}

.header-right-side .account-container .xaf-image {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 50% !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
}

/* Cabecera avatar — 2b luego 2a (ver groupheader CHECKPOINT); no mask:none sobre mask:url(https) sin background */
.header-right-side .account-container .xaf-image[style*="url(http"]:not([style*="IImageService"]),
.header-right-side .account-container .xaf-image[style*="url(Http"]:not([style*="IImageService"]),
.header-right-side .account-container .xaf-image[style*="url(//"]:not([style*="IImageService"]),
.header-right-side .account-container .xaf-image[style*="url('http"]:not([style*="IImageService"]),
.header-right-side .account-container .xaf-image[style*="url('Http"]:not([style*="IImageService"]),
.header-right-side .account-container .xaf-image[style*="url('//"]:not([style*="IImageService"]),
.header-right-side .account-container .xaf-image[style*='url("http']:not([style*="IImageService"]),
.header-right-side .account-container .xaf-image[style*='url("Http']:not([style*="IImageService"]),
.header-right-side .account-container .xaf-image[style*='url("//']:not([style*="IImageService"]) {
    -webkit-mask-size: cover !important;
    mask-size: cover !important;
    -webkit-mask-position: center center !important;
    mask-position: center center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
}

.header-right-side .account-container .xaf-image[style*="background-image"][style*="url("],
.header-right-side .account-container .xaf-image[style*="background-image"][style*="URL("],
.header-right-side .account-container .xaf-image[style*="background:"][style*="url(http"],
.header-right-side .account-container .xaf-image[style*="background:"][style*="url(Http"],
.header-right-side .account-container .xaf-image[style*="background:"][style*="url(//"],
.header-right-side .account-container .xaf-image[style*="background:"][style*="url('http"],
.header-right-side .account-container .xaf-image[style*="background:"][style*="url('Http"],
.header-right-side .account-container .xaf-image[style*="background:"][style*="url('//"],
.header-right-side .account-container .xaf-image[style*="background:"][style*='url("http'],
.header-right-side .account-container .xaf-image[style*="background:"][style*='url("Http'],
.header-right-side .account-container .xaf-image[style*="background:"][style*='url("//"] {
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background-color: transparent !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
}

/* Detalle en groupheader.css + site.css (evitar max-width que provoca letterboxing) */
.header-right-side .account-container img,
.header-right-side .account-container .dxbl-image {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
    filter: none !important;
    opacity: 1 !important;
    display: block !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

/*
 * Iconos del header en blanco. No aplicar a la cuenta: el selector con :not(...) tiene más
 * especificidad que ".account-container img" y dejaba la foto de perfil invertida / invisible.
 */
.header-right-side img:not(.xaf-image):not(.hm-badge-icon):not(.hc-badge-icon),
.header-left-side img:not(.xaf-image),
.header-right-side .dxbl-image:not(.account-container .dxbl-image),
.header-left-side .dxbl-image {
    width: var(--cicumba-icon-size) !important;
    height: var(--cicumba-icon-size) !important;
    min-width: var(--cicumba-icon-size) !important;
    min-height: var(--cicumba-icon-size) !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.95 !important;
}

/*
 * Refuerzo foto de perfil: especificidad > (0,4,1) de la regla de iconos con :not(...).
 * Mínimo 4 clases + html/body/img para ganar al empate en clases.
 */
html body .header-right-side .account-container .dxbl-toolbar-btn img,
html body .header-right-side .account-container .dxbl-toolbar-btn .dxbl-image,
html body .header-right-side .account-container .dxbl-toolbar-btn .dxbl-image img,
html body .header-right-side .account-container .xaf-toolbar-item img,
html body .header-right-side .account-container .xaf-toolbar-item .dxbl-image,
html body .header-right-side .account-container .xaf-toolbar-item .dxbl-image img {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
    filter: none !important;
    opacity: 1 !important;
    display: block !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

.header-right-side svg:not(.hm-badge-icon):not(.hc-badge-icon),
.header-left-side svg:not(.hm-badge-icon):not(.hc-badge-icon) {
    width: 1.125rem !important;
    height: 1.125rem !important;
    min-width: 1.125rem !important;
    min-height: 1.125rem !important;
    max-width: 20px !important;
    max-height: 20px !important;
    flex-shrink: 0 !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.98 !important;
}

/* Dropdown de tema / settings: no forzar tamaño ni filtros del header genérico */
.header-right-side .settings-bar img,
.header-right-side .settings-bar svg,
.header-right-side .settings-bar .dxbl-image {
    width: revert-layer !important;
    height: revert-layer !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    filter: revert-layer !important;
    color: revert-layer !important;
    fill: revert-layer !important;
    stroke: revert-layer !important;
    opacity: revert-layer !important;
}

/* =============================================================
   6. POPUPS / MODALES
   ============================================================= */
.dxbl-popup,
.dxbl-modal,
.modal-content {
    border-radius: var(--cicumba-radius-lg) !important;
    box-shadow: var(--cicumba-shadow-lg) !important;
    border: 1px solid var(--cicumba-border) !important;
    overflow: hidden !important;
}

.dxbl-popup-header,
.dxbl-modal-header,
.modal-header {
    background: linear-gradient(135deg, var(--cicumba-primary) 0%, #7aaa94 100%) !important;
    color: white !important;
    border-bottom: none !important;
    padding: 14px 20px !important;
}

.dxbl-popup-header .dxbl-text,
.dxbl-modal-header .modal-title,
.modal-header .modal-title {
    color: white !important;
    font-weight: 600 !important;
}

.dxbl-popup-header .dxbl-btn-close,
.dxbl-modal-header .btn-close,
.modal-header .btn-close {
    filter: brightness(0) invert(1) !important;
    opacity: 0.8 !important;
}

.dxbl-popup-body,
.modal-body {
    background: white !important;
    padding: 20px !important;
}

.dxbl-popup-footer,
.modal-footer {
    background: var(--cicumba-bg-page) !important;
    border-top: 1px solid var(--cicumba-border) !important;
    padding: 12px 20px !important;
}

/* =============================================================
   7. CONTEXT MENUS / DROPDOWNS
   ============================================================= */
.dxbl-dropdown-menu,
.dxbl-popup-dropdown,
.dropdown-menu {
    border: 1px solid var(--cicumba-border) !important;
    border-radius: var(--cicumba-radius-md) !important;
    box-shadow: var(--cicumba-shadow-md) !important;
    background: white !important;
    padding: 4px !important;
    overflow: hidden !important;
}

.dxbl-dropdown-menu .dxbl-dropdown-item,
.dropdown-menu .dropdown-item {
    color: var(--cicumba-text) !important;
    border-radius: var(--cicumba-radius-sm) !important;
    padding: 8px 14px !important;
    transition: all 0.15s ease !important;
    font-size: 13px !important;
}

.dxbl-dropdown-menu .dxbl-dropdown-item:hover,
.dropdown-menu .dropdown-item:hover {
    background-color: var(--cicumba-bg-hover) !important;
    color: var(--cicumba-primary) !important;
}

.dxbl-dropdown-menu .dxbl-dropdown-item.active,
.dropdown-menu .dropdown-item.active {
    background-color: var(--cicumba-bg-selected) !important;
    color: var(--cicumba-primary) !important;
    font-weight: 600 !important;
}

/* =============================================================
   8. BOTONES GENERALES
   ============================================================= */

/* Boton primario general (solo en contenido, no header/sidebar) */
.view-content .dxbl-btn-primary,
.dxbl-sc-content .dxbl-btn-primary,
.dxbl-popup .dxbl-btn-primary,
.modal .dxbl-btn-primary {
    background: linear-gradient(135deg, var(--cicumba-primary) 0%, #7aaa94 100%) !important;
    border: none !important;
    color: white !important;
    border-radius: var(--cicumba-radius-sm) !important;
    transition: all 0.25s ease !important;
}

.view-content .dxbl-btn-primary:hover,
.dxbl-sc-content .dxbl-btn-primary:hover,
.dxbl-popup .dxbl-btn-primary:hover,
.modal .dxbl-btn-primary:hover {
    background: linear-gradient(135deg, #7aaa94 0%, #6b9b85 100%) !important;
    box-shadow: var(--cicumba-shadow-sm) !important;
}

.view-content .dxbl-btn-primary img,
.view-content .dxbl-btn-primary .dxbl-image,
.dxbl-sc-content .dxbl-btn-primary img,
.dxbl-sc-content .dxbl-btn-primary .dxbl-image,
.dxbl-popup .dxbl-btn-primary img,
.dxbl-popup .dxbl-btn-primary .dxbl-image,
.modal .dxbl-btn-primary img,
.modal .dxbl-btn-primary .dxbl-image {
    filter: brightness(0) invert(1) !important;
}

/* Boton secundario (excluir sidebar, header y accordion) */
.view-content .dxbl-btn-secondary:not(.dxbl-toolbar-btn),
.dxbl-sc-content .dxbl-btn-secondary:not(.dxbl-toolbar-btn),
.dxbl-popup .dxbl-btn-secondary:not(.dxbl-toolbar-btn),
.modal .dxbl-btn-secondary:not(.dxbl-toolbar-btn) {
    background: white !important;
    color: var(--cicumba-text) !important;
    border: 1px solid var(--cicumba-border) !important;
    border-radius: var(--cicumba-radius-sm) !important;
    transition: all 0.25s ease !important;
}

.view-content .dxbl-btn-secondary:not(.dxbl-toolbar-btn):hover,
.dxbl-sc-content .dxbl-btn-secondary:not(.dxbl-toolbar-btn):hover {
    background: var(--cicumba-bg-hover) !important;
    border-color: var(--cicumba-accent) !important;
    color: var(--cicumba-primary) !important;
}

/* Boton outline */
.dxbl-btn-outline-primary {
    color: var(--cicumba-primary) !important;
    border: 1px solid var(--cicumba-primary) !important;
    background: transparent !important;
    border-radius: var(--cicumba-radius-sm) !important;
}

.dxbl-btn-outline-primary:hover {
    background: var(--cicumba-primary) !important;
    color: white !important;
}

/* =============================================================
   9. BREADCRUMB / NAVEGACION SUPERIOR
   ============================================================= */
.xaf-breadcrumb,
.breadcrumb {
    background: transparent !important;
    padding: 8px 0 !important;
}

.xaf-breadcrumb .breadcrumb-item a,
.breadcrumb-item a {
    color: var(--cicumba-text-secondary) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.xaf-breadcrumb .breadcrumb-item a:hover,
.breadcrumb-item a:hover {
    color: var(--cicumba-primary) !important;
}

.xaf-breadcrumb .breadcrumb-item.active,
.breadcrumb-item.active {
    color: var(--cicumba-dark) !important;
    font-weight: 600 !important;
}

/* =============================================================
   10. ALERTAS Y NOTIFICACIONES
   XAF combina .xaf-alert + clases Bootstrap (.alert-warning, etc.).
   El tema DX define --bs-warning en naranja; forzamos tono Cicumba.
   ============================================================= */
.dxbl-toast,
.xaf-notification {
    border-radius: var(--cicumba-radius-md) !important;
    box-shadow: var(--cicumba-shadow-md) !important;
}

/* Informativa */
.alert-info,
.dxbl-toast-info,
.xaf-alert.alert-info {
    background: linear-gradient(135deg, #e8f5ee 0%, #f0f7f3 100%) !important;
    color: var(--cicumba-dark) !important;
    border: 1px solid rgba(90, 155, 128, 0.20) !important;
    border-left: 4px solid var(--cicumba-primary) !important;
}

/* Warning: mismo lenguaje visual que el resto (verde suave), sin naranja del tema */
.alert-warning,
.xaf-alert.alert-warning {
    --bs-alert-color: var(--cicumba-dark) !important;
    --bs-alert-bg: #f0f7f4 !important;
    --bs-alert-border-color: rgba(139, 186, 165, 0.35) !important;
    background: linear-gradient(135deg, #f4faf7 0%, #e8f2ec 100%) !important;
    color: var(--cicumba-dark) !important;
    border: 1px solid rgba(139, 186, 165, 0.35) !important;
    border-left: 4px solid var(--cicumba-primary) !important;
}

.xaf-alert.alert-warning .xaf-image,
.xaf-alert.alert-warning svg {
    color: var(--cicumba-primary) !important;
    fill: var(--cicumba-primary) !important;
}

/*
   XAF Blazor — notificaciones de texto (ShowMessage, IUserFriendlyException):
   Según documentación usan el componente Alert apilado (.xaf-alerts-stack / .xaf-alert), no DxToast.
   https://docs.devexpress.com/eXpressAppFramework/118549
   Alternativa oficial: MessageOptions.Web.CssClass → WebMessageOptions.CssClass
   https://docs.devexpress.com/eXpressAppFramework/DevExpress.ExpressApp.WebMessageOptions.CssClass
*/
body .xaf-alerts-stack .xaf-alert.alert-danger,
.xaf-alerts-stack .xaf-alert.alert-danger.show,
.xaf-alerts-stack .xaf-alert.alert-danger.showing {
    --bs-alert-color: #4a3f41 !important;
    --bs-alert-bg: #fff5f5 !important;
    --bs-alert-border-color: rgba(220, 180, 180, 0.28) !important;
    background-color: #fff5f5 !important;
    background: linear-gradient(135deg, #fffcfc 0%, #fff5f5 100%) !important;
    color: #4a3f41 !important;
    border: 1px solid rgba(220, 180, 180, 0.18) !important;
    border-left: 4px solid #e8cfcf !important;
}

.xaf-alerts-stack .xaf-alert.alert-danger .xaf-alert-text-container,
.xaf-alerts-stack .xaf-alert.alert-danger .xaf-alert-message,
.xaf-alerts-stack .xaf-alert.alert-danger .xaf-alert-header {
    color: #4a3f41 !important;
}

.xaf-alerts-stack .xaf-alert.alert-danger .xaf-alert-button,
.xaf-alerts-stack .xaf-alert.alert-danger .xaf-alert-button svg {
    color: #5a4d4f !important;
    fill: #5a4d4f !important;
    opacity: 1 !important;
}

.xaf-alerts-stack .xaf-alert.alert-danger > .xaf-image,
.xaf-alerts-stack .xaf-alert.alert-danger .xaf-image svg {
    color: #b08080 !important;
    fill: #b08080 !important;
}

/* Error / validación: rojo casi imperceptible (fondo casi blanco, solo matiz) */
.alert-danger,
.xaf-alert.alert-danger {
    --bs-alert-color: #4a3f41 !important;
    --bs-alert-bg: #fff8f8 !important;
    --bs-alert-border-color: rgba(220, 180, 180, 0.22) !important;
    background: linear-gradient(135deg, #fffcfc 0%, #fff5f5 100%) !important;
    color: #4a3f41 !important;
    border: 1px solid rgba(220, 180, 180, 0.18) !important;
    border-left: 4px solid #e8cfcf !important;
}

.xaf-alert.alert-danger .xaf-image,
.xaf-alert.alert-danger svg {
    color: #b88888 !important;
    fill: #b88888 !important;
}

/* Toasts DX Blazor (ShowMessage u otros): quitar acento warning naranja del tema */
.dxbl-toast-portal .dxbl-toast.dxbl-toast-render-warning {
    --dxbl-toast-accent-line-color: var(--cicumba-primary) !important;
    --dxbl-toast-icon-color: var(--cicumba-primary) !important;
    --dxbl-toast-background-color: #f4faf7 !important;
    --dxbl-toast-front-color: var(--cicumba-dark) !important;
    --dxbl-toast-header-font-color: var(--cicumba-dark) !important;
    --dxbl-toast-text-font-color: var(--cicumba-dark) !important;
}

/* Danger: toasts de error — variables + fondo forzado (el tema saturated a veces gana sin background explícito) */
.dxbl-toast-portal .dxbl-toast.dxbl-toast-render-danger {
    --dxbl-toast-accent-line-color: #e8cfcf !important;
    --dxbl-toast-icon-color: #b08080 !important;
    --dxbl-toast-background-color: #fff5f5 !important;
    --dxbl-toast-front-color: #4a3f41 !important;
    --dxbl-toast-header-font-color: #4a3f41 !important;
    --dxbl-toast-text-font-color: #4a3f41 !important;
    --dxbl-toast-close-button-color: #5a4d4f !important;
    --dxbl-toast-close-button-hover-color: #3d3335 !important;
    --dxbl-toast-close-button-hover-bg: rgba(200, 160, 160, 0.18) !important;
    background: linear-gradient(135deg, #fffcfc 0%, #fff5f5 100%) !important;
    background-color: #fff5f5 !important;
    color: #4a3f41 !important;
}

.dxbl-toast-portal .dxbl-toast.dxbl-toast-theme-saturated.dxbl-toast-render-danger {
    --dxbl-toast-background-color: #fff5f5 !important;
    --dxbl-toast-accent-line-color: #e8cfcf !important;
    --dxbl-toast-front-color: #4a3f41 !important;
    --dxbl-toast-header-font-color: #4a3f41 !important;
    --dxbl-toast-text-font-color: #4a3f41 !important;
    --dxbl-toast-icon-color: #b08080 !important;
    --dxbl-toast-close-button-color: #5a4d4f !important;
    --dxbl-toast-close-button-hover-color: #3d3335 !important;
    --dxbl-toast-close-button-hover-bg: rgba(200, 160, 160, 0.2) !important;
    background: linear-gradient(135deg, #fffcfc 0%, #fff5f5 100%) !important;
    background-color: #fff5f5 !important;
    color: #4a3f41 !important;
}

.dxbl-toast-portal .dxbl-toast.dxbl-toast-theme-pastel.dxbl-toast-render-danger {
    --dxbl-toast-background-color: #fff5f5 !important;
    --dxbl-toast-accent-line-color: #e8cfcf !important;
    --dxbl-toast-front-color: #4a3f41 !important;
    --dxbl-toast-icon-color: #b08080 !important;
    background: linear-gradient(135deg, #fffcfc 0%, #fff5f5 100%) !important;
    background-color: #fff5f5 !important;
    color: #4a3f41 !important;
}

/* Iconos / SVG del toast de error: evitar blanco sobre rojo heredado del tema */
.dxbl-toast-portal .dxbl-toast.dxbl-toast-render-danger svg,
.dxbl-toast-portal .dxbl-toast.dxbl-toast-theme-saturated.dxbl-toast-render-danger svg,
.dxbl-toast-portal .dxbl-toast.dxbl-toast-theme-pastel.dxbl-toast-render-danger svg {
    color: #b08080 !important;
    fill: #b08080 !important;
}

/* Cobertura: variantes de clase en versiones DX (nombre distinto o atributo) */
.dxbl-toast-portal .dxbl-toast[class*="danger"],
.dxbl-toast-portal .dxbl-toast[class*="Danger"] {
    --dxbl-toast-background-color: #fff5f5 !important;
    --dxbl-toast-front-color: #4a3f41 !important;
    --dxbl-toast-header-font-color: #4a3f41 !important;
    --dxbl-toast-text-font-color: #4a3f41 !important;
    --dxbl-toast-icon-color: #b08080 !important;
    --dxbl-toast-accent-line-color: #e8cfcf !important;
    background: linear-gradient(135deg, #fffcfc 0%, #fff5f5 100%) !important;
    background-color: #fff5f5 !important;
    color: #4a3f41 !important;
}

/* =============================================================
   11. SCROLLBAR GLOBAL
   ============================================================= */
body:not(.logon-page) ::-webkit-scrollbar {
    width: 7px !important;
    height: 7px !important;
}

body:not(.logon-page) ::-webkit-scrollbar-track {
    background: rgba(90, 155, 128, 0.04) !important;
    border-radius: 10px !important;
}

body:not(.logon-page) ::-webkit-scrollbar-thumb {
    background: rgba(90, 155, 128, 0.20) !important;
    border-radius: 10px !important;
    transition: background 0.2s ease !important;
}

body:not(.logon-page) ::-webkit-scrollbar-thumb:hover {
    background: rgba(90, 155, 128, 0.35) !important;
}

/* Firefox */
body:not(.logon-page) * {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(90, 155, 128, 0.20) rgba(90, 155, 128, 0.04) !important;
}

/* =============================================================
   12. TOOLTIP
   ============================================================= */
.dxbl-tooltip,
.tooltip .tooltip-inner {
    background: var(--cicumba-dark) !important;
    color: white !important;
    border-radius: var(--cicumba-radius-sm) !important;
    font-size: 12px !important;
    box-shadow: var(--cicumba-shadow-sm) !important;
}

/* =============================================================
   13. BADGES / TAGS
   ============================================================= */
.badge.bg-primary,
.badge.bg-success {
    background-color: var(--cicumba-primary) !important;
    color: white !important;
    border-radius: 20px !important;
    font-weight: 500 !important;
    padding: 4px 10px !important;
}

.badge.bg-info {
    background-color: rgba(90, 155, 128, 0.12) !important;
    color: var(--cicumba-primary) !important;
}

.badge.bg-warning {
    background-color: rgba(212, 175, 55, 0.15) !important;
    color: #8a7020 !important;
}

.badge.bg-danger {
    background-color: rgba(224, 112, 112, 0.12) !important;
    color: #c44a4a !important;
}

/* =============================================================
   14. CARDS / PANELES
   ============================================================= */
.card:not(.logon-template-header):not(:has(.logon-main-container)):not(.settings-bar) {
    border: 1px solid var(--cicumba-border-light) !important;
    border-radius: var(--cicumba-radius-md) !important;
    box-shadow: var(--cicumba-shadow-sm) !important;
    background: var(--cicumba-bg-card) !important;
}

/* Excluir cards dentro del settings-bar - especificidad 0,4,0 para igualar regla anterior */
.settings-bar .card.themes-menu.card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.card-header:not(.logon-template-header) {
    background: linear-gradient(180deg, #f8fbf9 0%, #f0f5f2 100%) !important;
    border-bottom: 1px solid var(--cicumba-border) !important;
    color: var(--cicumba-dark) !important;
    font-weight: 600 !important;
}

/* =============================================================
   15. LINKS / ANCLAS
   ============================================================= */
/* Links solo en area de contenido (no en sidebar ni header) */
.view-content a:not(.nav-link):not(.breadcrumb-item):not(.dropdown-item):not(.dxbl-btn),
.dxbl-sc-content a:not(.nav-link):not(.breadcrumb-item):not(.dropdown-item):not(.dxbl-btn) {
    color: var(--cicumba-primary) !important;
    transition: color 0.2s ease !important;
}

.view-content a:not(.nav-link):not(.breadcrumb-item):not(.dropdown-item):not(.dxbl-btn):hover,
.dxbl-sc-content a:not(.nav-link):not(.breadcrumb-item):not(.dropdown-item):not(.dxbl-btn):hover {
    color: #4a8b70 !important;
}

/* Modal demo/premium (DemoUpgradePopupHelper): encima del loading panel XAF/Blazor */
#cicumba-upgrade-modal {
    z-index: 2147483646 !important;
}

/* =============================================================
   16. LOADING / SPINNER
   ============================================================= */
.dxbl-loading-panel,
.spinner-border {
    color: var(--cicumba-primary) !important;
}

.dxbl-loading-panel .dxbl-loading-panel-content {
    background: rgba(255, 255, 255, 0.90) !important;
    border-radius: var(--cicumba-radius-md) !important;
    box-shadow: var(--cicumba-shadow-md) !important;
    color: var(--cicumba-text) !important;
}

/* =============================================================
   17. SWITCH / TOGGLE
   ============================================================= */
.dxbl-checkbox.dxbl-switch input:checked + .dxbl-checkbox-switch-label,
.form-check-input:checked {
    background-color: var(--cicumba-primary) !important;
    border-color: var(--cicumba-primary) !important;
}

/* =============================================================
   18. PROGRESS BARS
   ============================================================= */
.progress-bar {
    background-color: var(--cicumba-primary) !important;
}

.progress {
    background-color: rgba(90, 155, 128, 0.10) !important;
    border-radius: 20px !important;
}

/* =============================================================
   19. FILTROS INLINE DEL GRID
   ============================================================= */
.dxbl-grid-filter-row,
.dxbl-grid-filter-row td {
    background: rgba(90, 155, 128, 0.04) !important;
    border-bottom: 1px solid var(--cicumba-border) !important;
}

.dxbl-grid-filter-row .dxbl-text-edit {
    border: 1px solid var(--cicumba-border-light) !important;
    border-radius: var(--cicumba-radius-sm) !important;
    background: white !important;
}

.dxbl-grid-filter-row .dxbl-text-edit:focus-within {
    border-color: var(--cicumba-accent) !important;
    box-shadow: 0 0 0 2px rgba(107, 194, 154, 0.10) !important;
}

/* =============================================================
   20. SELECCION DE TEXTO
   ============================================================= */
::selection {
    background-color: rgba(107, 194, 154, 0.25) !important;
    color: var(--cicumba-dark) !important;
}

::-moz-selection {
    background-color: rgba(107, 194, 154, 0.25) !important;
    color: var(--cicumba-dark) !important;
}

/* =============================================================
   21. EMPTY STATE (grid sin datos)
   ============================================================= */
.dxbl-grid-empty-data-row td,
.dxbl-grid-empty-data-area {
    color: var(--cicumba-text-muted) !important;
    font-style: italic !important;
    padding: 30px !important;
}

/* =============================================================
   22. SPLITTER / SEPARADORES
   ============================================================= */
.dxbl-splitter-separator,
.dxbl-splitter-bar {
    background: var(--cicumba-border-light) !important;
}

.dxbl-splitter-separator:hover,
.dxbl-splitter-bar:hover {
    background: var(--cicumba-border) !important;
}

/* =============================================================
   23. FOCUS RING GLOBAL
   ============================================================= */
*:focus-visible {
    outline: 2px solid rgba(107, 194, 154, 0.40) !important;
    outline-offset: 2px !important;
}

/* =============================================================
   24. TRANSITION SUAVE GLOBAL
   ============================================================= */
.dxbl-btn,
.dxbl-text-edit,
.dxbl-combobox,
.nav-link,
.dropdown-item,
.dxbl-accordion-item-header {
    transition: all 0.2s ease !important;
}

/* =============================================================
   25. BARRA DE CONFIGURACIONES (panel derecho - settings-bar)
   Debe estar al FINAL para ganar cascada sobre .card generico
   Panel lateral idioma / modo compacto: verde + contraste vs la pagina blanca
   ============================================================= */
.settings-bar,
.settings-bar.card {
    background: linear-gradient(180deg, #78a894 0%, #98c2b0 48%, #b6dcc9 100%) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(45, 94, 74, 0.55) !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: -6px 0 22px rgba(45, 94, 74, 0.18) !important;
    color: rgba(255, 255, 255, 0.98) !important;
}

/* Especificidad 0,4,0+ para ganar sobre .card:not():not():not() */
.settings-bar nav.themes-menu.card,
.settings-bar .card.themes-menu.card,
.settings-bar nav.themes-menu {
    background: transparent !important;
    border: none !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
}

/* Titulos: Modo de tamano, Elige un idioma */
.settings-bar .nav-item.theme-group:not(.py-0) {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    padding: 14px 14px 6px 14px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
}

/* Icono monitor para Modo de tamano */
.settings-bar nav.themes-menu:first-child .nav-item.theme-group:not(.py-0)::before {
    content: "\1F5B5\00a0 ";
}

/* Icono globo para Elige un idioma */
.settings-bar nav.themes-menu + nav.themes-menu .nav-item.theme-group:not(.py-0)::before {
    content: "\29BE\00a0 ";
}

/* Contenedor del combobox */
.settings-bar .nav-item.theme-group.py-0 {
    padding: 4px 14px 14px 14px !important;
}

/* Custom element combobox */
.settings-bar dxbl-combobox,
.settings-bar .dxbl-text-edit,
.settings-bar .size-mode-switcher,
.settings-bar .language-switcher {
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    background: #ffffff !important;
    outline: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14) !important;
}

/* Input del combobox */
.settings-bar .dxbl-text-edit-input {
    background: #ffffff !important;
    color: #1a2e26 !important;
    font-weight: 500 !important;
    border: none !important;
    outline: none !important;
}

/* Grupo de botones */
.settings-bar .dxbl-btn-group,
.settings-bar .dxbl-btn-group-right {
    border: none !important;
}

/* Boton dropdown: fondo verde */
.settings-bar .dxbl-edit-btn-dropdown,
.settings-bar .dxbl-btn-outline-secondary.dxbl-edit-btn-dropdown,
.settings-bar .dxbl-btn.dxbl-edit-btn-dropdown {
    background: #8bbaa5 !important;
    border: none !important;
    border-radius: 0 6px 6px 0 !important;
    outline: none !important;
}

/* Flecha SVG del dropdown: blanca, compacta */
.settings-bar .dxbl-edit-btn-dropdown svg,
.settings-bar .dxbl-edit-btn-dropdown .dxbl-image {
    color: white !important;
    fill: white !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12)) !important;
}

/* Separador entre secciones */
.settings-bar nav.themes-menu + nav.themes-menu {
    border-top: 1px solid rgba(255, 255, 255, 0.28) !important;
}

/* Listas desplegables del combobox (popup DX), si se renderizan bajo theme-settings */
.theme-settings .dxbl-popup,
.theme-settings.dxbl-popup,
.header-right-side .theme-settings .dxbl-popup {
    border: 1px solid rgba(90, 155, 128, 0.45) !important;
    box-shadow: 0 10px 28px rgba(45, 94, 74, 0.22) !important;
    border-radius: 8px !important;
}

.theme-settings .dxbl-listbox,
.theme-settings .dxbl-listbox .dxbl-listbox-item {
    background: #ffffff !important;
    color: #1a2e26 !important;
}

.theme-settings .dxbl-listbox .dxbl-listbox-item-selected,
.theme-settings .dxbl-listbox div.dxbl-listbox-item-selected {
    background: rgba(90, 155, 128, 0.2) !important;
    color: #153528 !important;
    font-weight: 600 !important;
}

.header-left-side [data-action-id="ShowNavigationItem"] .xaf-image,
.header-left-side .xaf-image[style*="align-justify"],
.header-left-side .xaf-image[style*="/menu"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
}