/* ============================================================
   BARRA DE ACCIONES COMPARTIDA
   Estilos del componente BarraAcciones.ascx, que usan todos
   los Barra*.ascx. Los selectores estan acotados a
   .barra-acciones y .barra-submenu para no tocar otros
   ASPxMenu, barras de grid ni menus de navegacion.
   ============================================================ */


/* ============================================================
   1. VARIABLES Y CONTENEDOR
   ============================================================ */

.barra-acciones {
    --barra-azul: #168bd0;
    --barra-rojo: #ef2f3d;
    --barra-verde: #1e7a45;
    --barra-texto: #243640;
    --barra-total: 6;
    --barra-item-alto: 54px;
    --barra-item-ancho: 200px;
    background: rgba(255, 255, 255, .98) !important;
    border: 1px solid #e5eaed;
    border-radius: 17px;
    box-shadow: 0 5px 14px rgba(31, 48, 58, .16);
    box-sizing: border-box;
    clear: both;
    display: block;
    font-family: Arial, sans-serif;
    height: auto !important;
    margin: 10px auto 18px !important;
    max-width: min(1090px, calc(var(--barra-total) * 190px), 100%) !important;
    min-height: 0 !important;
    min-width: 0;
    padding: 6px 14px !important;
    position: relative;
    text-align: center;
    width: fit-content;
    z-index: 20;
}

/* La barra no es una rejilla Bootstrap. Evita que los pseudoelementos de
   container-fluid limpien columnas anteriores dentro de su propia altura. */
.barra-acciones::before,
.barra-acciones::after {
    content: none !important;
    display: none !important;
}

    .barra-acciones *,
    .barra-submenu * {
        box-sizing: border-box;
    }


/* ============================================================
   2. CONTENEDORES QUE GENERA DEVEXPRESS
   ============================================================ */

    .barra-acciones .dxm-main,
    .barra-acciones .dxm-scrollArea {
        background: transparent !important;
        float: none !important;
        height: auto !important;
        margin: 0 !important;
        min-height: 0 !important;
        min-width: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* Algunos temas antiguos intercalan un <font> entre .dxm-main y la lista. */
    .barra-acciones .dxm-main > font {
        display: block;
        min-width: 0 !important;
        width: 100% !important;
    }


/* ============================================================
   3. LISTA DE ACCIONES
   ============================================================ */

    .barra-acciones .dxm-main > ul,
    .barra-acciones .dxm-main > font > ul {
        align-items: stretch;
        display: flex !important;
        flex-wrap: nowrap;
        gap: 0;
        justify-content: center;
        list-style: none;
        margin: 0 !important;
        min-width: 0;
        padding: 0 !important;
        width: 100% !important;
    }

    /* Separadores propios del tema: los sustituye la linea de la seccion 5. */
    .barra-acciones .dxm-main > ul > li.dxm-spacing,
    .barra-acciones .dxm-main > ul > li.dxm-separator,
    .barra-acciones .dxm-main > font > ul > li.dxm-spacing,
    .barra-acciones .dxm-main > font > ul > li.dxm-separator {
        display: none !important;
    }


/* ============================================================
   4. CADA ACCION
   ============================================================ */

    .barra-acciones .dxm-main > ul > li.dxm-item,
    .barra-acciones .dxm-main > font > ul > li.dxm-item {
        --barra-accion-color: var(--barra-azul);
        background: transparent !important;
        border: 0 !important;
        border-radius: 10px;
        box-shadow: none !important;
        /* Cada opcion parte de su contenido y crece a la par; asi un texto largo
           como "Reenganchar Planilla" no se parte en dos lineas si hay espacio. */
        flex: 1 1 auto;
        float: none !important;
        height: auto !important;
        margin: 0 !important;
        max-width: var(--barra-item-ancho) !important;
        min-height: var(--barra-item-alto);
        min-width: 0 !important;
        overflow: visible;
        position: relative;
        transition: background-color .18s ease-out, box-shadow .18s ease-out, transform .18s ease-out;
        width: auto !important;
    }

    /* Accion destructiva: rojo, y ademas un icono distinto (papelera o circulo con X). */
    .barra-acciones .dxm-main li.dxm-item.barra-accion-danger {
        --barra-accion-color: var(--barra-rojo);
    }

    /* Exportar a Excel: conserva el verde que traia el boton suelto.
       La clase la arma BarraAcciones como barra-accion-<clave de la accion>. */
    .barra-acciones .dxm-main li.dxm-item.barra-accion-exportar-excel {
        --barra-accion-color: var(--barra-verde);
    }


/* ============================================================
   5. SEPARADOR VERTICAL (solo escritorio)
   ============================================================ */

    .barra-acciones .dxm-main > ul > li.dxm-item::before,
    .barra-acciones .dxm-main > font > ul > li.dxm-item::before {
        background: #e3e7e9;
        content: "";
        height: 31px;
        left: -1px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
    }

    /* barra-acciones.js marca la primera opcion visible. */
    .barra-acciones .dxm-main li.dxm-item.barra-accion-primera::before,
    .barra-acciones .dxm-main > ul > li.dxm-item:first-child::before,
    .barra-acciones .dxm-main > font > ul > li.dxm-item:first-child::before {
        display: none;
    }


/* ============================================================
   6. CONTENIDO E ICONO
   ASPxMenu no genera <a> cuando la opcion no tiene NavigateUrl,
   asi que el subrayado y el foco cuelgan del propio <li>.
   ============================================================ */

    /* Subrayado de acento que crece desde el centro. */
    .barra-acciones .dxm-main > ul > li.dxm-item::after,
    .barra-acciones .dxm-main > font > ul > li.dxm-item::after {
        background: var(--barra-accion-color);
        border-radius: 2px;
        bottom: 7px;
        content: "";
        height: 2px;
        left: 22%;
        opacity: 0;
        position: absolute;
        transform: scaleX(0);
        transition: opacity .18s ease-out, transform .22s cubic-bezier(.22, .61, .36, 1);
        width: 56%;
    }

    /* Elementos de maquetacion del tema que sobran con flexbox. */
    .barra-acciones b.dx-clear,
    .barra-submenu b.dx-clear {
        display: none !important;
    }

    .barra-acciones .dxm-main .dxm-content {
        align-items: center;
        background: transparent !important;
        border: 0 !important;
        color: var(--barra-texto) !important;
        display: flex !important;
        font-size: 13px;
        font-weight: 400;
        gap: 9px;
        height: 100% !important;
        justify-content: center;
        line-height: 1.2;
        margin: 0 !important;
        max-width: none !important;
        min-height: var(--barra-item-alto);
        overflow-wrap: break-word;
        padding: 6px 13px !important;
        position: relative;
        text-align: center;
        touch-action: manipulation;
        transition: color .18s ease-out;
        white-space: normal !important;
        width: 100% !important;
        z-index: 2;
        -webkit-tap-highlight-color: rgba(36, 54, 64, .12);
    }

    /* Los iconos son SVG; la imagen del tema no se usa. */
    .barra-acciones .dxm-main .dxm-image {
        display: none !important;
    }

    .barra-acciones .dxm-main .dxm-contentText,
    .barra-acciones .dxm-main .dxm-content span:not(.barra-accion-icono) {
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .barra-acciones .barra-accion-icono {
        color: var(--barra-accion-color);
        display: inline-flex;
        flex: 0 0 32px;
        height: 32px;
        position: relative;
        transform: translateY(0);
        transition: transform .22s cubic-bezier(.22, .61, .36, 1);
        width: 32px;
        z-index: 2;
    }

    .barra-acciones .barra-accion-icono svg {
        fill: none;
        height: 100%;
        overflow: visible;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.8;
        width: 100%;
    }


/* ============================================================
   7. ESTADOS
   ============================================================ */

    .barra-acciones .dxm-main li.dxm-item:hover,
    .barra-acciones .dxm-main li.dxm-item.dxm-hovered,
    .barra-acciones .dxm-main li.dxm-item:focus-within {
        background: rgba(22, 139, 208, .06) !important;
        box-shadow: 0 2px 6px rgba(31, 48, 58, .07) !important;
        transform: translateY(-1px);
    }

    .barra-acciones .dxm-main li.dxm-item.barra-accion-danger:hover,
    .barra-acciones .dxm-main li.dxm-item.barra-accion-danger.dxm-hovered,
    .barra-acciones .dxm-main li.dxm-item.barra-accion-danger:focus-within {
        background: rgba(239, 47, 61, .07) !important;
        box-shadow: 0 2px 6px rgba(197, 27, 39, .16) !important;
    }

    .barra-acciones .dxm-main li.dxm-item.barra-accion-exportar-excel:hover,
    .barra-acciones .dxm-main li.dxm-item.barra-accion-exportar-excel.dxm-hovered,
    .barra-acciones .dxm-main li.dxm-item.barra-accion-exportar-excel:focus-within {
        background: rgba(30, 122, 69, .08) !important;
        box-shadow: 0 2px 6px rgba(21, 86, 52, .16) !important;
    }

    .barra-acciones .dxm-main li.dxm-item:hover .dxm-content,
    .barra-acciones .dxm-main li.dxm-item.dxm-hovered .dxm-content,
    .barra-acciones .dxm-main li.dxm-item:focus-within .dxm-content {
        color: var(--barra-accion-color) !important;
    }

    .barra-acciones .dxm-main li.dxm-item:hover::after,
    .barra-acciones .dxm-main li.dxm-item.dxm-hovered::after,
    .barra-acciones .dxm-main li.dxm-item:focus-within::after {
        opacity: .75;
        transform: scaleX(1);
    }

    .barra-acciones .dxm-main li.dxm-item:hover .barra-accion-icono,
    .barra-acciones .dxm-main li.dxm-item.dxm-hovered .barra-accion-icono,
    .barra-acciones .dxm-main li.dxm-item:focus-within .barra-accion-icono {
        transform: translateY(-1px);
    }

    /* Foco de teclado: barra-acciones.js hace enfocable cada opcion. */
    .barra-acciones .dxm-main li.dxm-item:focus-visible {
        outline: 2px solid var(--barra-accion-color);
        outline-offset: -2px;
    }

    .barra-acciones .dxm-main li.dxm-item:active {
        box-shadow: none !important;
        transform: translateY(0);
        transition-duration: .08s;
    }

    /* Opcion seleccionada: acento permanente ademas del color. */
    .barra-acciones .dxm-main li.dxm-item.dxm-selected {
        background: rgba(22, 139, 208, .1) !important;
    }

        .barra-acciones .dxm-main li.dxm-item.dxm-selected::after {
            opacity: 1;
            transform: scaleX(1);
        }

        .barra-acciones .dxm-main li.dxm-item.dxm-selected .dxm-content {
            color: var(--barra-accion-color) !important;
            font-weight: 700;
        }

    /* Deshabilitada: opacidad, escala de grises y sin subrayado. */
    .barra-acciones .dxm-main li.dxm-item.dxm-disabled {
        filter: grayscale(1);
        opacity: .45;
    }

        .barra-acciones .dxm-main li.dxm-item.dxm-disabled:hover,
        .barra-acciones .dxm-main li.dxm-item.dxm-disabled.dxm-hovered {
            background: transparent !important;
            box-shadow: none !important;
            transform: none;
        }

        .barra-acciones .dxm-main li.dxm-item.dxm-disabled::after {
            display: none;
        }


/* ============================================================
   8. OPCIONES CON SUBMENU
   ============================================================ */

    /* Un solo indicador de submenu: el del tema se oculta y se dibuja este,
       asi las opciones con y sin DropDownMode se ven igual. */
    .barra-acciones .dxm-main li.dxm-item > .dxm-popOut {
        display: none !important;
    }

    .barra-acciones .dxm-main li.barra-accion-padre > .dxm-content {
        padding-right: 22px !important;
    }

        .barra-acciones .dxm-main li.barra-accion-padre > .dxm-content::after {
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid currentColor;
            content: "";
            opacity: .7;
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
        }


/* ============================================================
   9. SUBMENU EN ESCRITORIO
   Desplegable flotante. Abajo de 1200 px manda el panel
   inferior de la seccion 11.
   ============================================================ */

@media (min-width: 1200px) {

    .barra-submenu {
        background: #fff !important;
        border: 1px solid #d7e1e6 !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 26px rgba(31, 48, 58, .22) !important;
        height: auto !important;
        max-height: none !important;
        min-width: 210px !important;
        overflow: visible !important;
        padding: 7px !important;
        z-index: 30000 !important;
    }

        .barra-submenu .dxm-gutter,
        .barra-submenu .dxm-popupMain,
        .barra-submenu ul {
            background: #fff !important;
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
        }

        .barra-submenu ul {
            list-style: none !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        /* El tema sangra el renglon 29px cuando el panel no lleva sus imagenes
           (.dxm-gutter.dxm-noImages .dxm-item); los iconos los pone barra-acciones.js. */
        .barra-submenu li.dxm-item {
            background: transparent !important;
            border: 0 !important;
            border-radius: 8px;
            margin: 2px 0 !important;
            padding: 0 !important;
        }

            .barra-submenu li.dxm-item .dxm-content {
                align-items: center;
                border: 0 !important;
                border-radius: 8px;
                color: #334750 !important;
                display: flex !important;
                gap: 9px;
                min-height: 38px;
                padding: 9px 12px !important;
                white-space: nowrap;
            }

            .barra-submenu li.dxm-item.dxm-hovered .dxm-content,
            .barra-submenu li.dxm-item:hover .dxm-content {
                background: #eef7fb !important;
                color: #237eac !important;
            }
}


/* ============================================================
   10. TABLET: ICONO ARRIBA Y TEXTO ABAJO
   ============================================================ */

@media (max-width: 1199px) {

    .barra-acciones {
        --barra-item-alto: 64px;
        --barra-item-ancho: 150px;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

        /* En columna el texto puede ocupar dos lineas sin recortarse. */
        .barra-acciones .dxm-main .dxm-content {
            flex-direction: column;
            font-size: 11px;
            gap: 3px;
            line-height: 14px;
            padding: 6px 4px 15px !important;
        }

        .barra-acciones .barra-accion-icono {
            flex: 0 0 24px;
            height: 24px;
            width: 24px;
        }

            /* El trazo no escala con el icono; se compensa para que no se vea desvanecido. */
            .barra-acciones .barra-accion-icono svg {
                stroke-width: 2.4;
            }

        .barra-acciones .dxm-main > ul > li.dxm-item::after,
        .barra-acciones .dxm-main > font > ul > li.dxm-item::after {
            bottom: 6px;
            left: 30%;
            width: 40%;
        }

        /* En columna el triangulo se va a la esquina para no descentrar el texto. */
        .barra-acciones .dxm-main li.barra-accion-padre > .dxm-content {
            padding-right: 4px !important;
        }

            .barra-acciones .dxm-main li.barra-accion-padre > .dxm-content::after {
                right: 5px;
                top: 6px;
                transform: none;
            }
}


/* Tableta: con el texto abajo las etiquetas se angostan, asi que se les da
   cuerpo para que la barra no quede como una pastilla diminuta. */

@media (min-width: 768px) and (max-width: 1199px) {

    .barra-acciones .dxm-main > ul > li.dxm-item,
    .barra-acciones .dxm-main > font > ul > li.dxm-item {
        min-width: 92px !important;
    }
}


/* ============================================================
   11. TABLET Y TELEFONO: SUBMENU COMO PANEL INFERIOR
   La clase barra-submenu la pone SubMenuStyle, asi que no
   afecta a los demas .dxm-popup del sistema.
   ============================================================ */

@media (max-width: 1199px) {

    .barra-submenu {
        background: #ffffff !important;
        border: 1px solid #b9c8cf !important;
        border-radius: 14px;
        bottom: 10px !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        box-shadow: 0 10px 32px rgba(31, 48, 58, .28);
        left: 50% !important;
        margin: 0 !important;
        max-height: 70vh;
        max-height: 70dvh;
        max-width: 420px !important;
        min-width: 0 !important;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 8px !important;
        position: fixed !important;
        right: auto !important;
        top: auto !important;
        transform: translateX(-50%);
        width: calc(100% - 20px) !important;
        z-index: 20000 !important;
        -webkit-overflow-scrolling: touch;
    }

        .barra-submenu .dxm-gutter {
            background: transparent !important;
        }

        .barra-submenu .dxm-popupMain {
            min-width: 0 !important;
            position: static !important;
            width: 100% !important;
        }

        .barra-submenu ul {
            background: transparent !important;
            display: flex !important;
            flex-direction: column;
            gap: 5px;
            list-style: none;
            margin: 0 !important;
            min-width: 0 !important;
            padding: 0 !important;
            width: 100% !important;
        }

        .barra-submenu li.dxm-spacing,
        .barra-submenu li.dxm-separator {
            display: none !important;
        }

        .barra-submenu li.dxm-item {
            background: transparent !important;
            border: 0 !important;
            border-radius: 9px;
            float: none !important;
            height: auto !important;
            margin: 0 !important;
            min-width: 0 !important;
            padding: 0 !important;
            width: 100% !important;
        }

            .barra-submenu li.dxm-item .dxm-content {
                align-items: center;
                background: transparent !important;
                border: 0 !important;
                color: #334750 !important;
                display: flex !important;
                font-size: 14px;
                gap: 10px;
                justify-content: flex-start;
                margin: 0 !important;
                max-width: none !important;
                min-height: 52px;
                padding: 10px 12px !important;
                text-align: left !important;
                white-space: normal !important;
                width: 100% !important;
            }

            .barra-submenu li.dxm-item.dxm-hovered .dxm-content,
            .barra-submenu li.dxm-item:hover .dxm-content {
                background: #eef7fb !important;
                border-radius: 9px;
                color: #237eac !important;
            }

            .barra-submenu li.dxm-item.dxm-disabled {
                filter: grayscale(1);
                opacity: .45;
            }
}


/* ============================================================
   12. SUBMENU: ICONOS Y ESTADO DESTRUCTIVO
   ============================================================ */

.barra-submenu .dxm-image {
    display: none !important;
}

.barra-submenu li.dxm-item:focus-visible {
    outline: 2px solid var(--barra-azul, #168bd0);
    outline-offset: -2px;
}

.barra-submenu .barra-accion-icono {
    color: var(--barra-azul, #168bd0);
    display: inline-flex;
    flex: 0 0 22px;
    height: 22px;
    width: 22px;
}

.barra-submenu li.dxm-item.barra-accion-danger .barra-accion-icono {
    color: var(--barra-rojo, #ef2f3d);
}

.barra-submenu li.dxm-item.barra-accion-exportar-excel .barra-accion-icono {
    color: var(--barra-verde, #1e7a45);
}

.barra-submenu .barra-accion-icono svg {
    fill: none;
    height: 100%;
    overflow: visible;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 100%;
}


/* ============================================================
   13. TELEFONO
   ============================================================ */

@media (max-width: 767px) {

    .barra-acciones {
        border-radius: 14px;
        max-width: 520px !important;
        width: 100%;
    }

        .barra-acciones .dxm-main > ul,
        .barra-acciones .dxm-main > font > ul {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            row-gap: 3px;
        }

        .barra-acciones .dxm-main > ul > li.dxm-item,
        .barra-acciones .dxm-main > font > ul > li.dxm-item {
            max-width: none !important;
            width: 100% !important;
        }

            /* En rejilla la linea vertical estorba. */
            .barra-acciones .dxm-main > ul > li.dxm-item::before,
            .barra-acciones .dxm-main > font > ul > li.dxm-item::before {
                display: none;
            }
}


@media (max-width: 380px) {

    .barra-acciones .dxm-main > ul,
    .barra-acciones .dxm-main > font > ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ============================================================
   14. MOVIMIENTO REDUCIDO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .barra-acciones .dxm-main li.dxm-item,
    .barra-acciones .dxm-main li.dxm-item::after,
    .barra-acciones .dxm-main .dxm-content,
    .barra-acciones .barra-accion-icono {
        transition-duration: .01ms !important;
    }

    .barra-acciones .dxm-main li.dxm-item:hover,
    .barra-acciones .dxm-main li.dxm-item.dxm-hovered,
    .barra-acciones .dxm-main li.dxm-item:focus-within,
    .barra-acciones .dxm-main li.dxm-item:hover .barra-accion-icono,
    .barra-acciones .dxm-main li.dxm-item.dxm-hovered .barra-accion-icono,
    .barra-acciones .dxm-main li.dxm-item:focus-within .barra-accion-icono {
        transform: none;
    }
}