:root {
    --header-h: 100px; /* ajusta a tu header real */
    --footer-h: 45px; /* ajusta a tu footer real */
    --sidebar-w: 250px;
    --sidebar-w-collapsed: 0px;
    --overlay-top: var(--header-h); /* ajusta si tu header es fijo, ej. 60px */
    --overlay-height: 100vh; /* o calc(100vh - 60px) si usas --overlay-top:60px */

    --menu-bg: #f5f6f8;
    --menu-bg-hover: #e7eaee;
    --menu-bg-active: #3f9b81;
    /*#005D55*/
    /*#00332C*/
}

/* ---- Estructura general con CSS Grid ---- */
html, body {
    height: 100%;
}

body {
    margin: 0;
    display: grid;
    grid-template-rows: var(--header-h) 1fr var(--footer-h);
    min-height: 100vh;
}

/* Header y Footer fijos en las filas 1 y 3 */
header {
    grid-row: 1;
    /* tu estilo de header */
}

footer {
    grid-row: 3;
    /* tu estilo de footer */
}

/* Fila central: sidebar + main */
.content {
    grid-row: 2;
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
}

body.no-menu .content {
    grid-template-columns: 1fr; /* This is the key change */
}

/* Ensure the workarea takes full width and no margins are left for the menu */
body.no-menu .workarea {
    width: 100%;
    margin-left: 0;
}

/* ---- Sidebar (pegajoso y con scroll propio) ---- */
.menu-container {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    transition: width .35s ease, flex-basis .35s ease, padding .25s ease, box-shadow .25s ease, border-right-color .25s ease, opacity .25s ease;
}

    /* --- Modo colapsado “normal” para layout (ocupa 0) --- */
    .menu-container.collapsed {
        /*        width: 0;
        flex-basis: 0;
*/ padding: 0;
        border-right-color: transparent;
        box-shadow: none;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
    }

    /* --- Modo overlay: cuando está colapsado, el sidebar se saca del flujo y se esconde fuera de pantalla --- */
    .menu-container.overlay {
        position: fixed;
        left: 0;
        top: var(--overlay-top);
        height: var(--overlay-height);
        width: var(--sidebar-w);
        flex: none; /* ya no participa en el flex del layout */
        border-right-color: #004944;
        box-shadow: 2px 0 5px rgba(0,0,0,.1);
        border-radius: 0 10px 10px 0;
        opacity: 0; /* oculto por defecto */
        transform: translateX(-100%); /* fuera de pantalla */
        transition: transform .25s ease, opacity .25s ease, box-shadow .2s ease;
        z-index: 999; /* encima del workarea */
        pointer-events: none; /* hasta que haga peek */
    }

        /* Al hacer peek (hover desde hotspot o el propio sidebar), aparece flotando */
        .menu-container.overlay.peeking {
            transform: translateX(0);
            opacity: 1;
            pointer-events: auto;
        }

/* Mientras el overlay está visible, no necesitamos ocultar textos */
.overlay .item-text {
    display: inline;
}

.menu-container.overlay.peeking::after {
    content: "";
    position: fixed;
    left: 0;
    top: var(--overlay-top);
    width: 100vw;
    height: var(--overlay-height);
    z-index: -1; /* detrás del sidebar */
    pointer-events: none; /* no bloquea clicks */
}

/* Cuando hay overlay + collapsed, el overlay manda */
.menu-container.collapsed.overlay,
.menu-container.collapsed.overlay.peeking {
    width: var(--sidebar-w) !important;
    padding: 10px !important; /* recupera el padding quitado por collapsed */
    opacity: 1; /* (el peeking ya lo hace, pero por si acaso) */
    pointer-events: auto;
}

/* ---- Main ocupa el resto y hace scroll si lo necesita ---- */
main {
    min-width: 0; /* permite que el contenido se encoja en grid */
    min-height: 0; /* permite que el alto se calcule dentro de la celda */
    overflow: auto; /* scroll interno del main si es necesario */
    /*    padding: 16px; */
    /*background: #f7f7f7;*/
}

    main.content {
        grid-row: 2;
        display: grid;
        grid-template-columns: var(--sidebar-w) 1fr;
        height: calc(100dvh - var(--header-h) - var(--footer-h));
        min-height: 0;
        min-width: 0;
        overflow: hidden; /* los hijos (workarea) manejan su propio scroll */
        transition: padding .25s ease, margin .25s ease;
    }

        main.content.collapsed {
            grid-template-columns: 1fr;
        }

/* Sidebar pegajoso dentro de la fila central */
.menu-container {
    position: sticky;
    top: 0; /* ya estás debajo del header por el grid; si prefieres offset, usa var(--header-h) */
}

/* El área de trabajo ocupa la segunda columna y puede scrollar */
#workarea {
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: auto;
}

/* ---- Scrollbar (opcional) ---- */
.menu-container::-webkit-scrollbar {
    width: 10px;
}

.menu-container::-webkit-scrollbar-thumb {
    background-color: #00796B;
    border-radius: 10px;
    border: 2px solid #005D55;
}

.menu-container::-webkit-scrollbar-track {
    background-color: #003D3A;
}

.menu-container {
    scrollbar-width: auto;
    scrollbar-color: #00796B #003D3A;
}

footer {
    padding: 0 80px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    :root {
        --sidebar-w: 200px;
    }
}

/* --- Hotspot en el borde izquierdo --- */
#left-hotspot {
    position: fixed;
    left: 0;
    top: var(--overlay-top);
    width: 12px; /* área sensible; ajusta a gusto (8-16px) */
    height: var(--overlay-height);
    z-index: 99999;
    display: none; /* solo visible cuando el menú está colapsado (JS lo gestiona) */
    pointer-events: auto;
}

.open-menu-btn {
    position: fixed;
    left: 8px;
    top: calc(var(--overlay-top) + 8px);
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    border: 0;
    /*background: #00796B;*/
    /*color: #fff;*/
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    z-index: 500; /* por encima de todo */
    display: none; /* se muestra solo al colapsar */
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .open-menu-btn span {
        font-size: 16px;
        line-height: 1;
    }

    .open-menu-btn:hover {
        filter: brightness(0.95);
    }

    .open-menu-btn.show {
        display: inline-flex;
    }

/* ==========================
                   Estilo general del menú
                ========================== */
.menu-container {
    position: sticky;
    /* top: 100px; */
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w); /* Sidebar con ancho fijo en flex */
    transition: width .35s ease, flex-basis .35s ease, padding .25s ease, opacity .25s ease, box-shadow .25s ease, border-right-color .25s ease;
    height: auto;
    max-height: calc(100vh - 145px);
    background-color: #005D55;
    /*color: #FFFFFF;*/
    padding: 10px;
    overflow-y: auto;
    /*border-right: 1px solid #004944;*/
    box-shadow: 1px 0 5px rgba(0, 0, 0, 0.1);
    /*border-radius: 0 10px 10px 0;*/
    z-index: 1000;
}

    /* ==========================
                   Menú colapsado
                ========================== */
    .menu-container.collapsed {
        width: 0; /* colapsa el ancho */
        flex-basis: 0; /* y el tamaño en flex */
        padding: 0; /* sin padding */
        border-right-color: transparent;
        box-shadow: none;
        opacity: 0; /* se desvanece */
        overflow: hidden; /* oculta contenido */
        overflow-y: auto;
        pointer-events: none; /* no interactuable */
    }

    /* ==========================
                   Scroll personalizado
                ========================== */
    /* Scroll para navegadores WebKit (Chrome, Safari, Edge) */
    .menu-container::-webkit-scrollbar {
        width: 10px;
    }

    .menu-container::-webkit-scrollbar-thumb {
        background-color: #00796B; /* Color del scroll */
        border-radius: 10px;
        border: 2px solid #005D55;
    }

    .menu-container::-webkit-scrollbar-track {
        background-color: #003D3A;
    }

/* Scroll para Firefox */
.menu-container {
    background-color: var(--menu-bg);
    scrollbar-width: auto;
    scrollbar-color: var(--menu-bg);
}

/* ==========================
                   Estilo de ítems del menú
                ========================== */
.intemo-menu-item {
    /*font-size: 18px;*/
    border-radius: 8px;
    margin-bottom: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    cursor: pointer;
}

.intemo-menu-item-caption {
    display: flex;
    align-items: center;
    padding: 6px;
    border-radius: 8px;
    background-color: var(--menu-bg);
    /*color: white;*/
    /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);*/
    transition: all 0.3s ease;
    font-weight: bold;
}

    .intemo-menu-item-caption:hover {
        background-color: var(--menu-bg-hover);
        /*transform: translateX(5px);*/
    }

/* ==========================
                   Íconos y texto
                ========================== */
.intemo-menu-item .material-symbols-outlined {
    font-size: 24px;
    margin-right: 8px;
    color: inherit;
}

.material-symbols-outlined {
    margin: auto 0;
}

.intemo-menu-item .chevron {
    margin-left:6px;
}

    .intemo-menu-item.open .chevron {
        transform: rotate(90deg);
    }

/* ==========================
    Estilo de submenús
========================== */
.sub-menu {
    display: none;
    /*background-color: #004944;*/
    /*padding-left: 10px;*/
    /*border-left: 3px solid #00796B;*/
    /*margin-top: 5px;*/
    /*border-radius: 8px;*/
}

.intemo-menu-item.open .sub-menu {
    display: block;
}

.sub-item {
    background-color: var(--menu-bg);
    font-size: 15px;
    margin: 2px 0;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 8px;
}

    .sub-item:hover {
        background-color: var(--menu-bg-hover);
    }

    .sub-item .material-symbols-outlined {
        font-size: 20px;
        margin-right: 8px;
    }

/* ==========================
    Enlaces del submenú
========================== */
.menu-link {
    color: rgb(20 20 20);
    text-decoration: none;
    display: flex;
    padding: 6px 6px 6px 22px;
    border-radius: 6px;
}

    .menu-link:hover {
        background-color: var(--menu-bg-hover);
        /*color: white;*/
        /*font-weight: bold;*/
    }

/* ==========================
                   Ítems activos y deshabilitados
                ========================== */
.intemo-menu-item-caption.active,
.sub-item.active,
.intemo-menu-item-caption.active:hover,
.sub-item.active:hover {
    background-color: var(--menu-bg-active);
    color: white;
}

.intemo-menu-item-caption.disabled,
.sub-item.disabled {
    color: #ccc;
    cursor: default;
}

/* ==========================
    Botón para contraer/expandir
========================== */
#menu-toggle {
    cursor: pointer;
    padding: 10px;
    background-color: var(--menu-bg);
    /*color: white;*/
    border-radius: 5px;
    margin: 10px 0;
    text-align: center;
    display: block;
    transition: background-color 0.3s ease;
}

    #menu-toggle:hover {
        background-color: var(--menu-bg-hover);
    }

/* ==========================
    Diseño responsivo
========================== */
@media (max-width: 768px) {
    .menu-container {
        width: 200px;
    }

        .menu-container.collapsed {
            width: 64px;
            overflow-y: hidden; /* Oculta scroll en móvil si está colapsado */
        }

    .intemo-menu-item-caption {
        padding: 8px 10px;
    }
}

body.loading .menu-container,
body.loading .menu-container * {
    transition: none !important;
}



/* VIENE DE admin.css - validar */

#container {
    display: flex;
    height: calc(100dvh - var(--header-h) - var(--footer-h));
    min-height: 0; /* clave para que los hijos puedan hacer scroll */
}

.form-group {
    margin-bottom: 4px;
}

.k-form-label {
    margin-bottom: 0.1rem;
    font-size: 0.8rem;
    color: #858585;
}

.k-listview-header {
    padding: 20px 28px;
}

.k-card {
    padding: 20px;
    border-width: 0 0 1px 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
}

    .k-card .k-card-body,
    .k-card .k-card-actions {
        padding: 0 8px;
    }

    .k-card .k-card-image {
        max-width: unset;
    }

.k-card-horizontal > .k-card-image:last-child {
    border-radius: 0;
}

.k-card {
    padding: 0px 20px;
}

.listview-button {
    margin-bottom: 5px;
}

.last-column-userdata {
    max-width: inherit
}

.editor-panel {
    margin-top: 10px;
}

.k-selected > .k-link {
    background-color: #005d55 !important;
    color: #ffffff !important;
}

.container {
    max-width: 100%;
}

@media screen and (min-width: 720px) {
    .last-column-userdata {
        max-width: 29%;
    }

    .editor-panel {
        margin-top: inherit;
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
    }
}

.k-panelbar {
    border: 0;
}

    .k-panelbar .k-panelbar-item {
        /*margin-bottom: 20px;*/
        border: 1px solid #dee2e6;
    }

    .k-panelbar > .k-panelbar-header > .k-link, .k-panelbar > .k-panelbar-header > .k-link:hover, .k-panelbar > .k-panelbar-header > .k-link .k-icon {
        color: #005d55 !important;
        background-color: #efefef;
    }

    .k-panelbar > .k-item > .k-link, .k-panelbar > .k-panelbar-header > .k-link {
        height: 40px;
    }

/* Aplica a todos los ítems del PanelBar */
.k-panelbar-item {
    color: #005d55 !important;
}

    /* Opcionalmente, refuerza el estilo para los expandidos */
    .k-panelbar-item.k-state-expanded {
        color: #005d55 !important;
    }

    /* Si quieres que el seleccionado se vea igual que el resto */
    .k-panelbar-item.k-selected {
        background-color: #efefef !important;
        color: #005d55 !important;
    }

.k-panelbar > .k-item > .k-link, .k-panelbar > .k-panelbar-header > .k-link {
    background-color: #efefef !important;
    color: #005d55 !important;
}

.visit-grid-buttons {
    display: inline-flex;
}

.icon-button {
    margin: 5px;
    cursor: pointer;
}

.grid-command-button {
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
}

    .grid-command-button:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }

    .grid-command-button:active {
        background-color: rgba(0, 0, 0, 0.2);
    }

.container {
    height: calc(100% - 90px);
    display: flex;
    flex-direction: column;
}

.row {
    flex-grow: 1;
    display: flex;
}

.col-md-4 {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.grid {
    flex-grow: 1;
    min-height: 0;
    padding: 0;
    height: 100%;
}

.toggle-active {
    background-color: #005d55 !important;
    color: white !important;
    /*    border-radius: 5px !important;
    padding: 5px !important;
*/
}

.flex-container {
    display: flex;
    align-items: center;
    gap: 20px; /* Espaciado entre los elementos */
}

label.required::after {
    content: " *";
    color: #dc3545;
    font-weight: 600;
    margin-left: .25rem;
}

#container {
    display: flex;
    height: calc(100dvh - var(--header-h) - var(--footer-h));
    min-height: 0; /* clave para que los hijos puedan hacer scroll */
}

/* ===== Sidebar: estructura y scroll ===== */
#sidebar.menu-container {
    display: flex;
    flex-direction: column;
    /*overflow: hidden !important;*/ /* quita el scroll del contenedor */
}

/* Solo scrollea la lista */
#sidebar.menu-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto; /* <- scroll aquí */
    padding-right: 8px;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ===== Scrollbar fino y suave ===== */
#sidebar {
    --sb-thumb: rgba(0,0,0,.14);
    --sb-thumb-hover: rgba(0,0,0,.20);
}

    /* Firefox */
    #sidebar.menu-container {
        scrollbar-width: auto; /* cámbialo a 'auto' si lo quieres un pelín más grueso */
        scrollbar-color: var(--sb-thumb) transparent; /* thumb / track */
    }

        /* WebKit/Chromium */
        #sidebar.menu-container::-webkit-scrollbar {
            width: 10px;
        }
        /* 10–11px = “un poco más grueso” */
        #sidebar.menu-container::-webkit-scrollbar-track {
            background: transparent;
        }

        #sidebar.menu-container::-webkit-scrollbar-thumb {
            background: var(--sb-thumb);
            border-radius: 8px;
        }

            #sidebar.menu-container::-webkit-scrollbar-thumb:hover {
                background: var(--sb-thumb-hover);
            }


/* INTENTAR HACER QUE EL SCROLL SOLO SE APLIQUE A LA LISTA */

/* Solo scrollea la lista */
/*#sidebar .menu-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;*/ /* <- scroll aquí */
    /*padding-right: 8px;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}*/

/* ===== Scrollbar fino y suave ===== */
/*#sidebar {
    --sb-thumb: rgba(0,0,0,.14);
    --sb-thumb-hover: rgba(0,0,0,.20);
}*/

    /* Firefox */
    /*#sidebar .menu-scroll {
        scrollbar-width: thin;*/ /* cámbialo a 'auto' si lo quieres un pelín más grueso */
        /*scrollbar-color: var(--sb-thumb) transparent;*/ /* thumb / track */
    /*}*/

        /* WebKit/Chromium */
        /*#sidebar .menu-scroll::-webkit-scrollbar {
            width: 10px;
        }*/
        /* 10–11px = “un poco más grueso” */
        /*#sidebar .menu-scroll::-webkit-scrollbar-track {
            background: transparent;
        }

        #sidebar .menu-scroll::-webkit-scrollbar-thumb {
            background: var(--sb-thumb);
            border-radius: 8px;
        }

            #sidebar .menu-scroll::-webkit-scrollbar-thumb:hover {
                background: var(--sb-thumb-hover);
            }*/