﻿.disable {
    opacity: 0.5;
    pointer-events: none;
    touch-action: none;
    cursor: not-allowed;
}

.col-xl.main-col {
    min-width: 0;
    overflow-x: auto;
    flex-grow: 1;
}

/* Desktop */
.e-row, .e-alt-row {
    height: 27px !important; /* altura de la fila */
}

    .e-row .e-rowcell, .e-alt-row .e-rowcell {
        padding-top: 0 !important; /* elimina padding vertical */
        padding-bottom: 0 !important;
        line-height: 27px !important; /* centra el contenido verticalmente */
        overflow: hidden; /* recorta si el contenido es demasiado grande */
    }

/* Popup de combo en modo pantalla completa de Syncfusion (dispositivo o ventana estrecha,
   ver ExdDropDownList.PatchDeviceDetectionAsync). Syncfusion lo coloca con top/left/right/
   bottom 0 pero en posición absoluta, así que dentro de un SfDialog se ancla al diálogo en
   vez de a la ventana. Se fija a la ventana; el resto (cabecera con filtro y flecha de
   volver, lista) lo pinta Syncfusion. Solo afecta a popups con la clase e-popup-full-page. */
.e-ddl.e-popup.e-popup-full-page {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    z-index: 100000 !important;
}

    .e-ddl.e-popup.e-popup-full-page .e-content,
    .e-ddl.e-popup.e-popup-full-page .e-dropdownbase {
        max-height: 100% !important;
    }

/* Móvil (altura automática) */
@media (max-width: 768px) {
    .e-row, .e-alt-row {
        height: auto !important;
    }

        .e-row .e-rowcell, .e-alt-row .e-rowcell {
            line-height: normal !important;
            padding-top: 8px !important; /* opcional, para que no quede pegado */
            padding-bottom: 8px !important;
        }
}


/* ===== Teclado en pantalla (tablets/móviles) =====
   Exides.Framework.Blazor.lib.module.js pone la clase exd-kb-open en <html> mientras el teclado
   está abierto, y --exd-vvh / --exd-vvtop con el alto y la posición de lo que queda visible.
   El teclado se pinta encima de la página sin encogerla (iPad siempre, Chrome Android por defecto),
   así que lo fijo a la ventana se ajusta a esa zona visible para no quedar debajo del teclado. */

/* Diálogos (ExdPopUp): el contenedor modal se ajusta a lo visible y el diálogo cabe dentro;
   su contenido hace scroll y el campo enfocado se lleva a la vista */
html.exd-kb-open .e-dlg-container {
    top: var(--exd-vvtop, 0px) !important;
    height: var(--exd-vvh, 100%) !important;
}

html.exd-kb-open .e-dialog {
    max-height: calc(var(--exd-vvh, 100vh) - 16px) !important;
}

/* Combo a pantalla completa: la lista termina encima del teclado, no debajo */
html.exd-kb-open .e-ddl.e-popup.e-popup-full-page {
    top: var(--exd-vvtop, 0px) !important;
    bottom: auto !important;
    height: var(--exd-vvh, 100%) !important;
    max-height: var(--exd-vvh, 100%) !important;
}

/* ===== Barra de botones de pantalla (NavToolBar) =====
   Una sola fila, sin hamburguesa. scripts/toolbar-overflow.js pasa los últimos botones que no
   caben al desplegable flotante "⋯". */
.exd-tb {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
}

    .exd-tb > .navbar-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        min-width: 0;
        white-space: nowrap;
    }

    .exd-tb .navbar-nav > li.exd-tb-hidden {
        display: none !important;
    }

.exd-tb-more {
    position: relative;
    flex: 0 0 auto;
}

    .exd-tb-more[hidden] {
        display: none !important;
    }

    .exd-tb-more .exd-tb-menu {
        position: absolute;
        top: 100%;
        right: 0;
        left: auto;
        margin-top: 4px;
        max-height: 70vh;
        overflow-y: auto;
    }

.exd-tb-menu .exd-tb-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

    .exd-tb-menu .exd-tb-menu-item.exd-tb-menu-sub {
        padding-left: 2.25rem;
    }

    .exd-tb-menu .exd-tb-menu-item .exd-tb-caret {
        margin-left: auto;
        padding-left: 12px;
    }

/* ===== Panel de búsqueda de pantalla (NavSearch) =====
   Desde 1200 px es la columna de la izquierda del grid. Por debajo, en vez de apilarse encima
   del contenido y empujarlo, es un popup centrado con fondo oscuro detrás; hasta 768 px (móvil,
   y tablet con el modo táctil a 760 px) ocupa toda la pantalla. */
.exd-search-backdrop {
    display: none;
}

@media (max-width: 1199.98px) {
    .exd-search-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1090;
        padding: 0 !important;
        background-color: rgba(0, 0, 0, 0.35);
    }

    .row > .exd-search-drawer {
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 1091;
        width: min(420px, calc(100vw - 32px));
        max-height: calc(100vh - 32px);
        margin: 0 !important;
        padding: 0;
        overflow-y: auto;
        border-radius: 10px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
        transform: translate(-50%, -50%);
        animation: exd-search-popup-in 0.15s ease-out;
    }

        .row > .exd-search-drawer > .card {
            height: auto !important;
            margin: 0 !important;
        }

        /* la lista de filtros hace scroll dentro del popup; cabecera y botones siempre a la vista */
        .row > .exd-search-drawer .exd-search-scroll {
            max-height: calc(100vh - 200px);
        }
}

@media (max-width: 768px) {
    .row > .exd-search-drawer {
        inset: 0;
        width: 100%;
        max-height: none;
        border-radius: 0;
        transform: none;
        animation: exd-search-full-in 0.15s ease-out;
    }

        .row > .exd-search-drawer > .card {
            min-height: 100%;
            border-radius: 0;
        }

        .row > .exd-search-drawer .exd-search-scroll {
            max-height: calc(100vh - 150px);
        }
}

@keyframes exd-search-full-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes exd-search-popup-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}
