html, body {
    height: 100%;
}

body {
    font-family: var(--ys-font-family, 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-size: var(--ys-text-size-base, 0.875rem);
    font-weight: var(--ys-text-weight-normal, 400);
}

app {
    display: block;
    height: 100%;
}

 /*Estilo para la pantalla de espera*/
/*.splash-screen-body {
    background-color: var(--ys-header);*/ /*Cambia este color al que desees */
    /*height: 100vh;*/
    /*Para cubrir toda la ventana display: flex;*/
    /*justify-content: center;
    align-items: center;
}*/
/*Ponemos el fondo de la pagina central de color gris*/
.main-content, .dxbl-modal-body {
    background: rgba(var(--bs-body-color-rgb), 0.075);
}
/*
.app-loaded {
    background-color: unset;  Quita el color de fondo 
}*/

:root {
    --color-azulOscuro: var(--ys-header, #193863);
    --color-azuloClaro: var(--ys-primary-light, #1396D4);
    --color-verde: var(--ys-accent, #00ACA1);
    --color-gris: var(--ys-bg-gray, #F5F5F5);
    --dx-accent-color: var(--ys-accent, #00ACA1); /* Cambia este valor a tu color personalizado #0099a1 */
    --dx-base-accent-color: #4cff00;
    --dx-hovered-background-color: #808080;
    --dx-selected-background-color: #000000;
    /* A�ade m�s variables seg�n tus necesidades */
}
/*.dxbl-fl .dxbl-fl-cpt {
    display: none !important;
}*/

.custom-navbar-toggler-icon {
    color: var(--ys-white);
}

/*Es el color de la barra superior de la pagina*/
/*.header {
    z-index: 1030;
    min-height: 3.91rem;
    word-wrap: inherit;
    background-color: var(--ys-header);
    color: var(--ys-white);
}*/

.loading-items-center > .bg-primary {
    background-color: transparent !important;
}
/**/
.loading-items-center > .border-primary {
    border-color: red !important;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}


.dxbl-pager > .dxbl-btn.dxbl-btn-outline-secondary.dxbl-pager-active-page-btn {
    --dxbl-btn-bg: var(--ys-accent);
    --dxbl-btn-disabled-bg: var(--ys-accent);
    --dxbl-btn-disabled-color: var(--dxbl-pager-active-page-btn-color);
    --dxbl-btn-disabled-background: none;
}

.header-left-side {
    min-width: 270px;
    width: 270px;
    background-color: var(--ys-menu-bg, var(--ys-header));
    border-bottom-right-radius: 0;
    background-image: url(/images/ysland7.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 140px;
}

.dxbl-accordion {
    --dxbl-accordion-group-font-size: 0.875rem;
    --dxbl-accordion-group-line-height: 1.4285;
    --dxbl-accordion-group-border-radius: 4px;
    --dxbl-accordion-group-border-width: 1px;
    --dxbl-accordion-group-border-color: transparent;
    --dxbl-accordion-group-header-font-size: 1rem;
    --dxbl-accordion-group-header-line-height: 1.25;
    --dxbl-accordion-group-header-padding-x: 0.75rem;
    --dxbl-accordion-group-header-padding-y: 0.3125rem;
    --dxbl-accordion-group-header-text-padding-y: 0.25rem;
    --dxbl-accordion-group-header-border-radius: 0px;
    --dxbl-accordion-group-header-bg: unset;
    --dxbl-accordion-group-header-color: inherit;
    --dxbl-accordion-group-header-hover-bg: var(--ys-menu-hover-bg, var(--ys-bg-gray));
    --dxbl-accordion-group-header-hover-color: var(--ys-menu-hover-text, #000000);
    --dxbl-accordion-group-header-selected-bg: var(--ys-menu-active-bg, var(--ys-primary-light));
    --dxbl-accordion-group-header-selected-color: var(--ys-menu-active-text, inherit);
    --dxbl-accordion-group-item-font-size: 0.875rem;
    --dxbl-accordion-group-item-line-height: 1.4285;
    --dxbl-accordion-group-item-spacing: 0.375rem;
    --dxbl-accordion-group-item-content-padding-x: 0.75rem;
    --dxbl-accordion-group-item-text-padding-y: 0.25rem;
    --dxbl-accordion-group-item-content-indent: 1.875rem;
    --dxbl-accordion-group-item-btn-color: unset;
    --dxbl-accordion-group-item-btn-bg: transparent;
    --dxbl-accordion-group-item-btn-hover-color: inherit;
    --dxbl-accordion-group-item-btn-hover-bg: unset;
    --dxbl-accordion-group-item-hover-bg: unset;
    --dxbl-accordion-group-item-hover-color: unset;
    --dxbl-accordion-group-item-hover-bg: var(--ys-menu-hover-bg, unset);
    --dxbl-accordion-group-item-hover-color: var(--ys-menu-hover-text, unset);
    --dxbl-accordion-group-item-selection-bg: var(--ys-menu-active-bg, var(--ys-primary-light));
    --dxbl-accordion-group-item-selection-color: var(--ys-menu-active-text, #ffffff);
    --dxbl-accordion-filter-content-bg-color: yellow;
    --dxbl-accordion-filter-content-color: var(--bs-gray-900, #212529);
}

.dxbl-grid > .dxbl-grid-top-panel:first-of-type {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background-color: var(--ys-white);
    -webkit-text-orientation: sideways;
    align-self: baseline;
}

.sidebar {
    min-width: 270px;
    width: 270px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
    background-color: var(--ys-menu-bg, var(--ys-header)); /* Fondo editable desde la guía Menús */
}

/* Espacio inferior en el menú lateral para que el pie fijo (perfil/idioma/versión) no tape los elementos finales como Telemetría */
.xaf-sidebar .dxbl-scroll-viewer-content,
.sidebar .dxbl-scroll-viewer-content,
.sidebar .dxbl-accordion-items-container:not(.dxbl-scroll-viewer-content *) {
    padding-bottom: 125px !important;
}

.navbar-nav a {
    text-decoration: none; /* Elimina el subrayado */
}

.dxbl-accordion .dxbl-accordion-group .dxbl-accordion-item:not(.dxbl-accordion-group) > .dxbl-accordion-item-content {
    display: flex;
    align-items: center;
    text-decoration: unset !important;
    position: relative;
     color: var(--ys-menu-text, var(--ys-white));
     background-color: var(--ys-menu-bg-dark, var(--ys-header-dark));
    border: none;
}

.dxbl-accordion .dxbl-accordion-group.dxbl-group {
    --dxbl-group-border-radius: var(--dxbl-accordion-group-border-radius);
    --dxbl-group-border-width: var(--dxbl-accordion-group-border-width);
    --dxbl-group-border-color: none;
    --dxbl-group-font-size: var(--dxbl-accordion-group-font-size);
    --dxbl-group-line-height: var(--dxbl-accordion-group-line-height);
    --dxbl-group-header-border-radius: var(--dxbl-accordion-group-header-border-radius);
    --dxbl-group-header-font-size: var(--dxbl-accordion-group-header-font-size);
    --dxbl-group-header-line-height: var(--dxbl-accordion-group-header-line-height);
    --dxbl-group-header-padding-x: var(--dxbl-accordion-group-header-padding-x);
    --dxbl-group-header-padding-y: var(--dxbl-accordion-group-header-padding-y);
    --dxbl-group-header-spacing: var(--dxbl-accordion-group-item-spacing);
}

.dxbl-group > .dxbl-group-header {
    display: flex;
    align-items: center;
    font-size: var(--dxbl-group-header-font-size);
    line-height: var(--dxbl-group-header-line-height);
    font-weight: var(--dxbl-group-header-font-weight);
    padding: var(--dxbl-group-header-padding-y) var(--dxbl-group-header-padding-x);
    margin-bottom: 0;
    border-bottom: var(--dxbl-group-border-width) solid var(--dxbl-group-border-color);
    border-radius: var(--dxbl-group-header-border-radius) var(--dxbl-group-header-border-radius) 0 0;
    position: relative;
     background-color: var(--ys-menu-bg, var(--ys-header));
   /* color: var(--dxbl-group-header-color);*/
     color: var(--ys-menu-text, var(--ys-white));
}

.dxbl-group {
    /* Estilos espec�ficos de grupo */
}
.dxbl-tabs > .dxbl-tabs-tablist {
    /* background-color: var(--ys-bg-gray); */
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    /* --dx-selected-background-color: blue; */
    --dxbl-tabs-tab-selected-bg: var(--ys-bg-gray);
    /*--dxbl-tabs-tab-selected-color: white;*/
}

.dxbl-grid {
    --dxbl-grid-border-width: 0.05rem;
    border-left-width: 0;
    --dxbl-grid-bg: var(--ys-lv-row-bg, #ffffff);
    --dxbl-grid-header-bg: var(--ys-lv-header-bg, #fbfdff);
    --dxbl-grid-header-color: var(--ys-lv-header-text, var(--ys-text-muted));
    --dxbl-grid-search-box-container-padding-x: 0rem;
    --dxbl-grid-line-height: 1.94285;
    --dxbl-grid-header-font-weight: var(--ys-lv-header-font-weight, var(--ys-text-weight-normal, 400));
}

    .dxbl-grid .dxbl-grid-table > tbody > tr > td,
    .dxbl-grid .dxbl-grid-table > tbody > tr > th,
    .dxbl-grid .dxbl-grid-table > tfoot > tr > td,
    .dxbl-grid .dxbl-grid-table > tfoot > tr > th {
        border-top: 1px solid var(--ys-lv-row-border, var(--ys-border-soft));
        border-bottom: 1px solid var(--ys-lv-row-border, var(--ys-border-soft));
        border-left: none;
        border-right: none;
        color: var(--ys-lv-row-text, var(--ys-text-secondary));
        font-family: var(--ys-lv-font-family, var(--ys-font-family));
        font-size: var(--ys-lv-row-font-size, 0.875rem);
        font-weight: var(--ys-lv-row-font-weight, 400);
        height: var(--ys-lv-row-height, 44px);
        box-sizing: border-box;
    }

    .dxbl-grid .dxbl-grid-table > thead > tr > td,
    .dxbl-grid .dxbl-grid-table > thead > tr > th {
        background-color: var(--ys-lv-header-bg, #fbfdff) !important;
        color: var(--ys-lv-header-text, var(--ys-text-muted)) !important;
        border-bottom: 1px solid var(--ys-lv-header-border, var(--ys-border-soft)) !important;
        border-left: none;
        border-right: none;
        font-weight: var(--ys-lv-header-font-weight, var(--ys-text-weight-normal, 400));
        font-size: var(--ys-lv-header-font-size, var(--ys-text-size-base, 0.875rem));
        font-family: var(--ys-lv-header-font-family, var(--ys-lv-font-family, var(--ys-font-family)));
        height: var(--ys-lv-header-height, 36px);
        box-sizing: border-box;
    }

    .dxbl-grid .dxbl-grid-table > tbody > tr:hover {
        background-color: var(--ys-lv-row-hover, var(--ys-bg-hover)) !important;
    }

    .dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-selected-row {
        background-color: var(--ys-lv-row-selected, var(--ys-info-soft)) !important;
    }


    .dxbl-grid .dxbl-grid-table {
        border-collapse: collapse;
    }

    .dxbl-grid > .dxbl-grid-top-panel:first-of-type {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
        background-color: transparent;
        -webkit-text-orientation: sideways;
        align-self: baseline;
    }

/* Personalizaci�n de checkbox */
.dxbl-checkbox.dxbl-checkbox-switch {
    --dxbl-checkbox-switch-element-size: 1.4375rem; /* Modificamos el tama�o del interruptor */
    --dxbl-checkbox-switch-element-size-sm: 0.5rem;
    --dxbl-checkbox-switch-element-size-lg: 0.875rem;
    --dxbl-checkbox-switch-element-margin: 0.05rem;
}

.dxbl-checkbox {
    --dxbl-checkbox-check-element-checked-bg: var(--ys-accent);
    --dxbl-checkbox-switch-width: 2.5625rem;
    --dxbl-checkbox-switch-height: 1.5625rem;
    --dxbl-checkbox-switch-checked-bg: var(--ys-accent);
    --dxbl-checkbox-unchecked-focus-shadow-color: var(--ys-accent);
}

.dxbl-toolbar {
    --dxbl-toolbar-btn-border-radius: 0.95rem;
}

.dxbl-text-edit {
    --dxbl-text-edit-bg: var(--ys-white);
    --dxbl-text-edit-color: var(--ys-text);
    --dxbl-text-edit-border-color: var(--ys-border-input);
    --dxbl-text-edit-border-radius: 4px;
    --dxbl-text-edit-readonly-bg: var(--ys-bg-soft);
    --dxbl-text-edit-readonly-color: var(--ys-text);
    --dxbl-text-edit-focus-border-color: var(--ys-accent);
    --dxbl-text-edit-focus-shadow-color: transparent;
}

/* Mantener solo apariencia (sin tocar ancho/alto/padding) en inputs y textareas */
.dxbl-text-edit > .dxbl-edit-input,
.dxbl-text-edit input,
.dxbl-text-edit textarea {
    background-color: var(--ys-white);
    color: var(--ys-text);
    border-color: var(--ys-border-input);
    border-radius: 4px;
}

.dxbl-text-edit.dx-state-readonly > .dxbl-edit-input,
.dxbl-text-edit.dx-state-readonly input,
.dxbl-text-edit.dx-state-readonly textarea,
.dxbl-text-edit[readonly] > .dxbl-edit-input,
.dxbl-text-edit[readonly] input,
.dxbl-text-edit[readonly] textarea {
    background-color: var(--ys-bg-soft);
}

.row-hover:hover {
    font-weight: bolder;
    cursor: pointer;
    text-align: center;
}

.signal-bar {
    display: flex;
    align-items: end;
    justify-content: center;
}

.signal-bar-segment {
    width: 7px;
    border: 1px solid #000;
}

.signal-bar-gray {
    background-color: rgb(128,128,128);
}

.signal-bar-green {
    background-color: var(--ys-accent);
}

/* Personalizaci�n de fondo */
.bg-power {
    background-color: silver; /* Color para alta potencia */
    color: white; /* Texto blanco para mejor contraste */
    padding: 5px; /* Padding para mejor visualizaci�n */
    border-radius: 4px; /* Bordes redondeados para est�tica */
    font-size: 14px;
}

.bg-light {
    background-color: var(--ys-bg);
    color: black;
    padding: 5px;
    border-radius: 4px;
    font-size: 14px;
}

.bg-info {
    background-color: var(--ys-info);
    color: white;
    font-size: 14px;
}

.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th:not(.dxbl-grid-empty-cell) {
    position: relative;
    border-left-color: var(--ys-white);
    border: solid;
}

.logon-main.card .card-header, .logon-template-header {
    font-size: 1.5rem;
    font-weight: lighter;
}

.dxbl-row {
    /*background-color: var(--ys-bg-gray);*/
}
.about-info {
    font-size: 0.7rem;
    line-height: 0.9rem;
    opacity: .5;
    color: var(--ys-white);
}
.loading-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: var(--ys-header);
    color: white;
    flex-direction: column;
    text-align: center;
    width: 150px;  /*Ajusta el ancho de la imagen */
    height: auto; /* Mantiene la relaci�n de aspecto */
}
/* Ocultar la pantalla de carga cuando la app est� lista */
/*#loading-screen.hidden {
    display: none; Prueba para ver si el css cambia
}*/

.xaf-loading-content > .spinner-border {
    color: var(--ys-accent) !important;
}
/*Color de fondo de la pagina a blanco*/
.main-content, .dxbl-modal-body {
    background: var(--ys-white);
}

/* Aumentamos la especificidad para que sobrescriba los estilos de DevExpress */
img[src*="IImageService/alert0"] {
    max-width: 30px !important;
    max-height: 25px !important;
    width: 30px !important;
    height: 25px !important;
    font-size: 30px !important;
    display: inline-block !important;
}

img[src*="IImageService/alert1"] {
    max-width: 30px !important;
    max-height: 25px !important;
    width: 30px !important;
    height: 25px !important;
    font-size: 30px !important;
    display: inline-block !important;
}

/* --- Master-Detail pane size fixes (override DX inline + default styles) --- */
/* Remove enforced minimum height so the detail can sit right below the list */
.xaf-masterdetail-view {
    min-height: 0 !important;
    height: auto !important;
}

/* Override inline flex: 0 1 300px written on the first pane */
.xaf-masterdetail-view.xaf-masterdetail-first-pane,
.xaf-masterdetail-view.xaf-masterdetail-first-pane[style] {
    flex: 0 0 auto !important;      /* grow=0, shrink=0, basis=auto */
    flex-basis: auto !important;     /* neutralize the 300px inline basis */
    min-height: 0 !important;        /* avoid extra bottom gap */
}

/* Make sure nested splitter containers don't reintroduce min-heights */

/* ===== Rele_Programaciones_ListView ===== */

/* Ocultar el botón de filtro en columnas de días (L M X J V S D) */
.rele-programaciones-grid .rele-prog-day-col .dxbl-grid-filter-btn {
    visibility: hidden !important;
    pointer-events: none !important;
}
.xaf-masterdetail-view .dxbl-splitter,
.xaf-masterdetail-view .dxbl-splitter-pane,
.xaf-masterdetail-view .dxbl-splitter-pane-content {
    min-height: 0 !important;
    height: auto !important;
}

/* Highlight linked rows and disable pointer events for them only */
.auto-height-grid .dxbl-grid-table > tbody > tr.rele-linked-row {
    background-color: rgba(255, 0, 0, 0.06); /* leve rojo para distinguir */
}
.auto-height-grid .dxbl-grid-table > tbody > tr.rele-linked-row td {
    opacity: 0.65;
}
.auto-height-grid .dxbl-grid-table > tbody > tr.rele-linked-row button,
.auto-height-grid .dxbl-grid-table > tbody > tr.rele-linked-row input,
.auto-height-grid .dxbl-grid-table > tbody > tr.rele-linked-row .dxbl-checkbox,
.auto-height-grid .dxbl-grid-table > tbody > tr.rele-linked-row .dxbl-btn,
.auto-height-grid .dxbl-grid-table > tbody > tr.rele-linked-row .dxbl-text-edit {
    pointer-events: none !important;
}

/* Highlight automatic-control rows and disable pointer events for them only */
.auto-height-grid .dxbl-grid-table > tbody > tr.rele-linked-row {
    background-color: rgba(0, 128, 0, 0.06);
}
.auto-height-grid .dxbl-grid-table > tbody > tr.rele-linked-row td {
    opacity: 0.75;
}
.auto-height-grid .dxbl-grid-table > tbody > tr.rele-linked-row button,
.auto-height-grid .dxbl-grid-table > tbody > tr.rele-linked-row input,
.auto-height-grid .dxbl-grid-table > tbody > tr.rele-linked-row .dxbl-checkbox,
.auto-height-grid .dxbl-grid-table > tbody > tr.rele-linked-row .dxbl-btn,
.auto-height-grid .dxbl-grid-table > tbody > tr.rele-linked-row .dxbl-text-edit {
    pointer-events: none !important;
}
.dx-icon-boleanosYslandTrue {
    background-image: url('/icons/Limpieza.png');
    background-size: contain;
    background-repeat: no-repeat;
}
.dx-icon-boleanosYslandFalse {
    background-image: url('/icons/NoLimpieza.png');
    background-size: contain;
    background-repeat: no-repeat;
}

/* ===== Sidebar User Footer Integration ===== */
.sidebar {
    padding-bottom: 95px !important; /* Espacio para el footer de usuario/soporte abajo a la izquierda */
    position: relative;
}

/* Ocultar el texto sobre la versión nativo de XAF para evitar duplicidad con el footer */
.sidebar .about-info {
    display: none !important;
}

/* Cuando el menú está colapsado (3 líneas pulsadas), el fondo del botón de 3 líneas debe ser blanco sin el logo */
.collapse-toggle .header-left-side {
    background-image: none !important;
    background-color: var(--ys-white) !important;
    min-width: 48px !important;
    width: 60px !important;
    max-width: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Botón de 3 líneas (hamburguesa) en tono gris neutro visible tanto en azul como en blanco */
.header-left-side .btn-header,
.header-left-side .btn-hamburger {
    background: transparent !important;
    color: var(--ys-text-faint) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.header-left-side .btn-header svg,
.header-left-side .btn-header .dxbl-image,
.header-left-side .btn-header span,
.header-left-side .btn-header i {
    color: var(--ys-text-faint) !important;
    fill: var(--ys-text-faint) !important;
    stroke: var(--ys-text-faint) !important;
    background-color: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.header-left-side .btn-header:hover,
.header-left-side .btn-header:hover svg,
.header-left-side .btn-header:hover .dxbl-image {
    color: var(--ys-border) !important;
    fill: var(--ys-border) !important;
    stroke: var(--ys-border) !important;
}

.collapse-toggle .header-left-side .btn-header,
.collapse-toggle .header-left-side .btn-hamburger {
    background: transparent !important;
    color: var(--ys-text-muted) !important;
}

.collapse-toggle .header-left-side .btn-header svg,
.collapse-toggle .header-left-side .btn-header .dxbl-image,
.collapse-toggle .header-left-side .btn-header span,
.collapse-toggle .header-left-side .btn-header i {
    color: var(--ys-text-muted) !important;
    fill: var(--ys-text-muted) !important;
    stroke: var(--ys-text-muted) !important;
    background-color: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.collapse-toggle .header-left-side .btn-header:hover,
.collapse-toggle .header-left-side .btn-header:hover svg,
.collapse-toggle .header-left-side .btn-header:hover .dxbl-image {
    color: var(--ys-text-secondary) !important;
    fill: var(--ys-text-secondary) !important;
}

/* Ocultar Idioma, Usuario y Configuración del header superior (reubicados en sidebar inferior), pero manteniendo el título de página */
.header-right-side .toolbar-language-switcher-wrapper,
.header-right-side div[data-action-container-name="Security"],
.header-right-side .xaf-action-container[data-action-container-name="Security"],
.header-right-side div[data-action-container-name="Tools"],
.header-right-side .xaf-action-container[data-action-container-name="Tools"],
.header-right-side div[data-action-container-name="Diagnostic"],
.header-right-side .xaf-action-container[data-action-container-name="Diagnostic"] {
    display: none !important;
}

/* Título de la página siempre visible */
.header-right-side .xaf-window-caption-container,
.header-right-side .xaf-window-caption,
.header-right-side .header-caption,
.header .xaf-window-caption {
    display: flex !important;
    visibility: visible !important;
}

/* Desplazar las pestañas y el título al colapsar para que el botón de usuario nunca se monte encima del icono de pestaña */
.collapse-toggle .header-right-side,
body.sidebar-is-collapsed .header-right-side,
body:has(.collapse-toggle) .header-right-side,
.collapse-toggle .dxbl-tabs,
body.sidebar-is-collapsed .dxbl-tabs,
body:has(.collapse-toggle) .dxbl-tabs,
.collapse-toggle .xaf-window-caption,
body.sidebar-is-collapsed .xaf-window-caption {
    padding-left: 54px !important;
}

/* ===== Recreación del buscador del menú en el sidebar (Filtrar menú...) ===== */
.sidebar .dxbl-text-edit,
.sidebar .dxbl-accordion-search-box,
.sidebar .xaf-nav-search-box {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 8px !important;
    margin: 10px 14px 12px 14px !important;
    min-height: 36px !important;
    height: 36px !important;
    box-shadow: none !important;
    transition: background 0.15s, border-color 0.15s;
}

.sidebar .dxbl-text-edit:hover,
.sidebar .dxbl-text-edit:focus-within,
.sidebar .dxbl-accordion-search-box:hover,
.sidebar .dxbl-accordion-search-box:focus-within {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.sidebar .dxbl-text-edit input,
.sidebar .dxbl-accordion input,
.sidebar .dxbl-text-edit-input {
    background: transparent !important;
    border: none !important;
    color: var(--ys-white) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    outline: none !important;
    box-shadow: none !important;
    padding-left: 6px !important;
}

.sidebar .dxbl-text-edit input::placeholder,
.sidebar .dxbl-accordion input::placeholder,
.sidebar .dxbl-text-edit-input::placeholder {
    color: var(--ys-text-faint) !important;
    font-size: 12px !important;
    opacity: 0.8 !important;
}

.sidebar .dxbl-text-edit .dxbl-image,
.sidebar .dxbl-text-edit svg,
.sidebar .dxbl-accordion svg,
.sidebar .dxbl-accordion .dxbl-image {
    color: var(--ys-text-faint) !important;
    fill: var(--ys-text-faint) !important;
    margin-left: 6px !important;
}

/* Ocultar toolbar nativo de XAF SOLO en la pestaña de Estado del Sistema (Panel Neuronas) e Intervenciones */
.dxbl-tabs-content:has(#panel-neuronas-container) > .main-toolbar,
.dxbl-tabs-content:has(#panel-neuronas-container) > .dxbl-toolbar,
.dxbl-tabs-content:has(#panel-neuronas-container) .main-toolbar,
.dxbl-tabs-content:has(#panel-neuronas-container) .nested-toolbar,
.dxbl-tabs-content:has(#panel-neuronas-container) .dxbl-toolbar,
.dxbl-tabs-content:has(#panel-neuronas-container) .xaf-toolbar,
.dxbl-tabs-content:has(#panel-neuronas-container) .xaf-view-header,
.dxbl-tabs-content:has(#panel-neuronas-container) .card-header,
.dxbl-tabs-content.tab-panel-neuronas .main-toolbar,
.dxbl-tabs-content.tab-panel-neuronas .dxbl-toolbar,
.dxbl-tabs-content-panel > div:has(#panel-neuronas-container) .main-toolbar,
.dxbl-tabs-content-panel > div:has(#panel-neuronas-container) .dxbl-toolbar,
.dxbl-tabs-content:has(#intervenciones-dashboard-container) > .main-toolbar,
.dxbl-tabs-content:has(#intervenciones-dashboard-container) > .dxbl-toolbar,
.dxbl-tabs-content:has(#intervenciones-dashboard-container) .main-toolbar,
.dxbl-tabs-content:has(#intervenciones-dashboard-container) .nested-toolbar,
.dxbl-tabs-content:has(#intervenciones-dashboard-container) .dxbl-toolbar,
.dxbl-tabs-content:has(#intervenciones-dashboard-container) .xaf-toolbar,
.dxbl-tabs-content:has(#intervenciones-dashboard-container) .xaf-view-header,
.dxbl-tabs-content:has(#intervenciones-dashboard-container) .card-header,
.dxbl-tabs-content.tab-intervenciones .main-toolbar,
.dxbl-tabs-content.tab-intervenciones .dxbl-toolbar,
.dxbl-tabs-content-panel > div:has(#intervenciones-dashboard-container) .main-toolbar,
.dxbl-tabs-content-panel > div:has(#intervenciones-dashboard-container) .dxbl-toolbar,
.dxbl-tabs-content:has(#clientes-listview-container) > .main-toolbar,
.dxbl-tabs-content:has(#clientes-listview-container) > .dxbl-toolbar,
.dxbl-tabs-content:has(#clientes-listview-container) .main-toolbar,
.dxbl-tabs-content:has(#clientes-listview-container) .nested-toolbar,
.dxbl-tabs-content:has(#clientes-listview-container) .dxbl-toolbar,
.dxbl-tabs-content:has(#clientes-listview-container) .xaf-toolbar,
.dxbl-tabs-content:has(#clientes-listview-container) .xaf-view-header,
.dxbl-tabs-content:has(#clientes-listview-container) .card-header,
.dxbl-tabs-content-panel > div:has(#clientes-listview-container) .main-toolbar,
.dxbl-tabs-content-panel > div:has(#clientes-listview-container) .dxbl-toolbar,
.dxbl-tabs-content-panel > div:has(#clientes-listview-container) > .main-toolbar,
.dxbl-tabs-content-panel > div:has(#clientes-listview-container) > .dxbl-toolbar {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

/* Ocultar también la barra nativa de XAF en el ListView Razor de Notificaciones. */
.dxbl-tabs-content:has(#notificaciones-listview-container) > .main-toolbar,
.dxbl-tabs-content:has(#notificaciones-listview-container) > .dxbl-toolbar,
.dxbl-tabs-content:has(#notificaciones-listview-container) .main-toolbar,
.dxbl-tabs-content:has(#notificaciones-listview-container) .nested-toolbar,
.dxbl-tabs-content:has(#notificaciones-listview-container) .dxbl-toolbar,
.dxbl-tabs-content:has(#notificaciones-listview-container) .xaf-toolbar,
.dxbl-tabs-content:has(#notificaciones-listview-container) .xaf-view-header,
.dxbl-tabs-content:has(#notificaciones-listview-container) .card-header,
.dxbl-tabs-content-panel > div:has(#notificaciones-listview-container) .main-toolbar,
.dxbl-tabs-content-panel > div:has(#notificaciones-listview-container) .dxbl-toolbar,
.dxbl-tabs-content-panel > div:has(#notificaciones-listview-container) > .main-toolbar,
.dxbl-tabs-content-panel > div:has(#notificaciones-listview-container) > .dxbl-toolbar {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

/* El ListView Razor de Configurar Notificaciones ya tiene su propia barra.
   Ocultar únicamente la barra nativa de XAF de este editor. */
.dxbl-tabs-content:has(#avisos-listview-container) > .main-toolbar,
.dxbl-tabs-content:has(#avisos-listview-container) > .dxbl-toolbar,
.dxbl-tabs-content:has(#avisos-listview-container) .main-toolbar,
.dxbl-tabs-content:has(#avisos-listview-container) .nested-toolbar,
.dxbl-tabs-content:has(#avisos-listview-container) .dxbl-toolbar,
.dxbl-tabs-content:has(#avisos-listview-container) .xaf-toolbar,
.dxbl-tabs-content:has(#avisos-listview-container) .xaf-view-header,
.dxbl-tabs-content:has(#avisos-listview-container) .card-header,
.dxbl-tabs-content-panel > div:has(#avisos-listview-container) .main-toolbar,
.dxbl-tabs-content-panel > div:has(#avisos-listview-container) .dxbl-toolbar,
.dxbl-tabs-content-panel > div:has(#avisos-listview-container) > .main-toolbar,
.dxbl-tabs-content-panel > div:has(#avisos-listview-container) > .dxbl-toolbar {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

.dxbl-tabs-content:has(#panel-neuronas-container),
.dxbl-tabs-content.tab-panel-neuronas {
    background: var(--ys-bg) !important;
}

.dxbl-tabs-content:has(#panel-neuronas-container) .main-content,
.dxbl-tabs-content.tab-panel-neuronas .main-content,
.dxbl-tabs-content:has(#intervenciones-dashboard-container) .main-content,
.dxbl-tabs-content.tab-intervenciones .main-content {
    padding-top: 0 !important;
}

/* =========================================================
   ESTILO DETAILVIEW Y POPUP DIALOGS (Inspirado en Estado del Sistema)
   ========================================================= */
.dxbl-modal,
.dxbl-dialog,
.modal-dialog {
    --ys-dv-bg-val: var(--ys-dv-bg, #ffffff);
    --ys-dv-border-val: var(--ys-dv-border, var(--ys-border-soft));
}

.dxbl-modal .modal-content,
.dxbl-dialog .modal-content,
.dxbl-modal-content {
    background-color: var(--ys-dv-bg, #ffffff) !important;
    border: 1px solid var(--ys-dv-border, var(--ys-border-soft)) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12) !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: min(92vh, 920px) !important;
    overflow: hidden !important;
}

.dxbl-modal .modal-header,
.dxbl-dialog .modal-header,
.dxbl-modal-header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--ys-dv-border, var(--ys-border-soft)) !important;
    padding: 14px 20px !important;
    flex-shrink: 0 !important;
}

.dxbl-modal .modal-header .modal-title,
.dxbl-dialog .modal-header .modal-title,
.dxbl-modal-header .dxbl-modal-title {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--ys-dv-title, var(--ys-text-heading)) !important;
}

.dxbl-modal .modal-body,
.dxbl-dialog .modal-body,
.dxbl-modal-body {
    background: var(--ys-dv-bg, #ffffff) !important;
    padding: 20px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* Footer con botones tipo pastilla/cápsula siempre visible y sticky */
.dxbl-modal .modal-footer,
.dxbl-dialog .modal-footer,
.dxbl-modal-footer,
.xaf-dialog-footer {
    background: #ffffff !important;
    border-top: 1px solid var(--ys-dv-border, var(--ys-border-soft)) !important;
    padding: 12px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 100 !important;
    flex-shrink: 0 !important;
    min-height: 52px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.dxbl-modal .modal-footer .dxbl-btn,
.dxbl-dialog .modal-footer .dxbl-btn,
.xaf-dialog-footer .dxbl-btn {
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    padding: 8px 18px !important;
    transition: all 0.15s ease-in-out !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Botón de acción principal (Aceptar / Aplicar / Activar / Importar) */
.dxbl-modal .modal-footer .dxbl-btn-primary,
.dxbl-dialog .modal-footer .dxbl-btn-primary,
.xaf-dialog-footer .dxbl-btn-primary {
    background-color: var(--ys-dv-btn-primary-bg, var(--ys-action)) !important;
    border-color: var(--ys-dv-btn-primary-bg, var(--ys-action)) !important;
    color: var(--ys-dv-btn-primary-text, #ffffff) !important;
}

.dxbl-modal .modal-footer .dxbl-btn-primary:hover,
.dxbl-dialog .modal-footer .dxbl-btn-primary:hover,
.xaf-dialog-footer .dxbl-btn-primary:hover {
    background-color: var(--ys-dv-btn-primary-hover, var(--ys-action-hover)) !important;
    border-color: var(--ys-dv-btn-primary-hover, var(--ys-action-hover)) !important;
}

/* Botón secundario (Cancelar / Cerrar) */
.dxbl-modal .modal-footer .dxbl-btn-secondary,
.dxbl-dialog .modal-footer .dxbl-btn-secondary,
.xaf-dialog-footer .dxbl-btn-secondary,
.xaf-dialog-footer .dxbl-btn:not(.dxbl-btn-primary) {
    background-color: var(--ys-dv-btn-bg, #ffffff) !important;
    border: 1px solid var(--ys-dv-btn-border, var(--ys-border-soft)) !important;
    color: var(--ys-dv-btn-text, var(--ys-text-body)) !important;
}

.dxbl-modal .modal-footer .dxbl-btn-secondary:hover,
.dxbl-dialog .modal-footer .dxbl-btn-secondary:hover,
.xaf-dialog-footer .dxbl-btn:not(.dxbl-btn-primary):hover {
    background-color: var(--ys-bg-hover) !important;
    border-color: var(--ys-border) !important;
}

/* Tarjetas interiores en DetailViews */
.dxbl-card,
.card:not(.pbv-card):not(.kpi-card) {
    background-color: var(--ys-dv-card-bg, #fbfdff) !important;
    border: 1px solid var(--ys-dv-card-border, var(--ys-border-soft)) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

/* Inputs en formularios */
.dxbl-text-edit:not(.sidebar *),
.dxbl-memo-edit,
.dxbl-spin-edit,
.dxbl-combobox {
    border-radius: 10px !important;
    border: 1px solid var(--ys-dv-input-border, var(--ys-border-soft)) !important;
    background-color: var(--ys-dv-input-bg, #ffffff) !important;
    font-size: 0.85rem !important;
}

.dxbl-text-edit:focus-within:not(.sidebar *),
.dxbl-memo-edit:focus-within,
.dxbl-spin-edit:focus-within,
.dxbl-combobox:focus-within {
    border-color: var(--ys-dv-input-focus, var(--ys-action)) !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12) !important;
}

/* Fila seleccionada en ListViews (verde claro) */
.dxbl-grid tr.dxbl-grid-row-selected,
.dxbl-grid tr.dxbl-grid-row-selected > td,
.dxbl-grid-row-selected,
.cli-table tr.cli-row-selected,
.cli-table tr.cli-row-selected > td,
.pbv-table tr.selected,
.pbv-row.selected {
    background-color: var(--ys-lv-row-selected, #e8f8f0) !important;
}




/* PoolBox: el popup del combo se monta fuera del DetailView. */
.pb-range-dropdown .dxbl-listbox-item:hover,
.pb-range-dropdown .dxbl-listbox-item.dxbl-listbox-item-hover,
.pb-range-dropdown .dxbl-listbox-item.dxbl-listbox-item-hovered,
.pb-range-dropdown .dxbl-listbox-item.dxbl-listbox-item-active,
.pb-range-dropdown .dxbl-listbox-item.dxbl-listbox-item-selected,
.pb-range-dropdown .dxbl-listbox-item[aria-selected="true"] {
    background: var(--ys-dv-btn-primary-bg, #0284c7) !important;
    background-color: var(--ys-dv-btn-primary-bg, #0284c7) !important;
    color: var(--ys-dv-btn-primary-text, #ffffff) !important;
}
.pb-range-dropdown li.dxbl-list-box-item-selected,
.pb-range-dropdown li.dxbl-list-box-item-selected:hover,
.pb-range-dropdown li[role="option"]:hover,
.pb-range-dropdown li[role="option"][aria-selected="true"] {
    background: var(--ys-dv-btn-primary-bg, #0284c7) !important;
    background-color: var(--ys-dv-btn-primary-bg, #0284c7) !important;
    color: var(--ys-dv-btn-primary-text, #ffffff) !important;
}
.pb-range-dropdown li.dxbl-list-box-item-selected::before,
.pb-range-dropdown li.dxbl-list-box-item-selected:hover::before,
.pb-range-dropdown li[role="option"]:hover::before {
    background: var(--ys-dv-btn-primary-bg, #0284c7) !important;
    background-color: var(--ys-dv-btn-primary-bg, #0284c7) !important;
}