/* ================================
   FISCONEX - CUSTOM STYLES
   ================================ */

/* ================================
   ACCORDIONS Y ELEMENTOS DE CONTENIDO
   ================================ */

/* Acordeones - eliminar bordes laterales */
div.accordion-item {
    border-style: none solid !important;
}

/* Botones de acordeón - sin sombra */
button.accordion-button,
button.accordion-button.rounded {
    box-shadow: none !important;
}

    /* Botones de acordeón - sin bordes redondeados */
    button.accordion-button,
    button.accordion-button.rounded,
    div.col-6 > div.card.bg-light > div.card-body {
        border-radius: 0px !important;
    }

        /* Botones de acordeón - color de texto blanco */
        button.accordion-button,
        button.accordion-button.rounded,
        div.border.border-dark.bg-secondary.rounded.py-2.m-0.my-3.row,
        nav.navbar.py-0.fixed-top.bg-primary.sticky-top {
            color: #ffffff !important;
        }

            /* Botones de acordeón y elementos principales - fondo azul oscuro */
            button.accordion-button,
            button.accordion-button.rounded,
            div.border.border-dark.bg-secondary.rounded.py-2.m-0.my-3.row,
            nav.navbar.py-0.fixed-top.bg-primary.sticky-top {
                background-color: #002e5e !important;
            }

/* Dropdown items específicos - fondo gris oscuro con texto blanco */
a.text-decoration-none.text-info.dropdown-item.text-wrap.border.text-black.active {
    background-color: #1b5794 !important;
    color: #fff !important;
}

/* ================================
   FORMULARIOS Y CAMPOS DE ENTRADA
   ================================ */

/* Etiquetas de grupos de input - bordes redondeados */
label.input-group-text {
    border-radius: 0px 2px 2px 0px !important;
}

/* Selectores pequeños - padding personalizado */
select.form-select-sm.form-select.w-100 {
    padding: 4px 36px 4px 8px !important;
}

/* Todos los elementos de formulario - bordes redondeados de 2px */
button.btn.btn-danger.btn-sm,
button.btn.btn-primary.btn-sm,
button.btn.btn-primary.btn-sm.m-1,
button.btn.btn-sm.btn-outline.text-nowrap.bg-warning.flex-grow-1,
div.border.border-dark.bg-light.rounded.mb-3,
div.border.border-dark.bg-secondary.rounded.py-2.m-0.mb-3.row.accordion,
div.border.border-dark.bg-secondary.rounded.py-2.m-0.my-3.row,
div.border.border-dark.rounded.bg-secondary.py-2.m-0.mb-3.row.accordion,
div.card-body,
div.col-5 > input.form-control.form-control-sm,
div.col-5 > select.form-select.form-select-sm,
div.d-flex.align-items-center > button.btn.btn-primary.btn-sm.m-1,
div.row.bg-light.rounded.my-2.mx-1.p-2,
div.row.mb-3.mx-3.p-3.border.border-dark.bg-white.rounded,
html.h-100.fontawesome-i2svg-active.fontawesome-i2svg-complete > body.d-flex.flex-column.vh-100.pt-0 > div.row.flex-grow-1.w-100.justify-content-center > main.col-10 > form > div.border.border-dark.bg-secondary.rounded.py-2.m-0.mb-3.row.accordion > div.accordion-body.show > div.border.border-dark.bg-light.rounded.mb-3,
html.h-100.fontawesome-i2svg-active.fontawesome-i2svg-complete > body.d-flex.flex-column.vh-100.pt-0 > div.row.flex-grow-1.w-100.justify-content-center > main.col-10 > form > div.border.border-dark.bg-secondary.rounded.py-2.m-0.my-3.row > div.col-6.d-flex.justify-content-end > div.d-flex.align-items-center > button.btn.btn-primary.btn-sm,
html.h-100.fontawesome-i2svg-active.fontawesome-i2svg-complete > body.d-flex.flex-column.vh-100.pt-0 > div.row.flex-grow-1.w-100.justify-content-center > main.col-10 > form > div.border.border-dark.rounded.bg-secondary.py-2.m-0.mb-3.row.accordion,
html.h-100.fontawesome-i2svg-active.fontawesome-i2svg-complete > body.d-flex.flex-column.vh-100.pt-0 > div.row.flex-grow-1.w-100.justify-content-center > main.col-10 > form > div.border.border-dark.rounded.bg-secondary.py-2.m-0.mb-3.row.accordion > div.accordion-body.show > div.row.mb-2 > div.col-6 > div.row.mb-2 > div.col-6 > p > input.datefield.form-control.form-control-sm.hasDatepicker,
html.h-100.fontawesome-i2svg-active.fontawesome-i2svg-complete > body.d-flex.flex-column.vh-100.pt-0 > div.row.flex-grow-1.w-100.justify-content-center > main.col-10 > form > div.border.border-dark.rounded.bg-secondary.py-2.m-0.mb-3.row.accordion > div.accordion-body.show > div.row.mb-2 > div.col-6 > div.row.mb-2 > div.col-8 > select.form-select.form-select-sm,
html.h-100.fontawesome-i2svg-active.fontawesome-i2svg-complete > body.d-flex.flex-column.vh-100.pt-0 > div.row.flex-grow-1.w-100.justify-content-center > main.col-10 > form > div.row.mb-3 > div.col-12.d-flex.justify-content-end > button.btn.btn-primary.btn-sm.m-1,
input.datefield.form-control.form-control-sm.hasDatepicker,
input.decimal.form-control.form-control-sm.text-nowrap.d-inline-block.text-end,
input.form-control.form-control-sm,
input.form-control.form-control-sm.d-inline-block.text-end,
input.form-control.form-control-sm.text-end.pe-3.d-inline-block,
input.form-control.form-control-sm.text-end.text-nowrap.d-inline-block,
select.form-select-sm.form-select.w-100,
select.form-select.form-select-sm,
textarea.w-100.form-control {
    border-radius: 2px !important;
}

/* ================================
   ENCABEZADOS Y TIPOGRAFÍA
   ================================ */

/* Encabezados de página - tamaño de fuente */
h2.page-header.text-nowrap {
    font-size: 28px !important;
}

/* ================================
   LAYOUT Y CONTENEDORES
   ================================ */

/* Filas con fondo claro - bordes sólidos */
div.row.bg-light.rounded.my-2.mx-1.p-2 {
    border-style: solid !important;
    border-width: 1px !important;
}

/* Secciones principales - fondo gris claro */
div.row.mb-3.mx-3.p-3.border.border-dark.bg-white.rounded {
    background-color: #eaebeb !important;
}

/* Columnas - justificación centrada */
div.col-6,
div.col-6.ps-0.d-flex.justify-content-start,
div.col-6.text-nowrap.d-inline-block.pe-3,
div.col-6.text-nowrap.d-inline-block.px-3,
div.form-label.m-0.col-6,
label.col-6.text-end {
    /* justify-content: center !important; */
}

    /* Columnas - alineación central */
    div.col-6,
    div.col-6.d-flex.align-items-center,
    div.col-6.d-flex.align-items-center.ps-0,
    div.col-6.d-flex.justify-content-end,
    div.col-6.pe-3.d-flex.justify-content-end,
    div.col-6.ps-0.d-flex.justify-content-start,
    div.col-6.row.m-0.align-items-center,
    div.col-6.text-nowrap.d-inline-block.pe-3,
    div.col-6.text-nowrap.d-inline-block.px-3,
    div.form-label.m-0.col-6,
    div.form-label.mb-0.col-6.d-flex.align-items-center,
    label.col-6.text-end {
        align-items: center !important;
    }

/* Etiquetas de formulario - alineación al inicio */ 2023
div.form-label.m-0.col-6.d-flex.align-items-center,
div.form-label.m-0.d-flex.align-items-center.col-6,
h5.col-6.m-0.d-flex.align-items-center,
html.h-100.fontawesome-i2svg-active.fontawesome-i2svg-complete > body.d-flex.flex-column.vh-100.pt-0 > div.row.flex-grow-1.w-100.justify-content-center > main.col-10 > form > div.border.border-dark.rounded.bg-secondary.py-2.m-0.mb-3.row.accordion > div.accordion-body.show > div.row.mb-2 > div.col-6 > div.row.mb-2 > div.col-6.d-flex.align-items-center,
html.h-100.fontawesome-i2svg-active.fontawesome-i2svg-complete > body.d-flex.flex-column.vh-100.pt-0 > div.row.flex-grow-1.w-100.justify-content-center > main.col-10 > form > div.border.border-dark.rounded.bg-secondary.py-2.m-0.mb-3.row.accordion > div.accordion-body.show > div.row.mb-3 > div.col-6 > div.row.mb-3 > div.col-6.d-flex.align-items-center {
    justify-content: flex-start !important;
}

/* ================================
   COLORES Y BORDES DE CONTENEDORES
   ================================ */

/* Acordeones - color de borde gris claro */
div.border.border-dark.bg-secondary.rounded.py-2.m-0.mb-3.row.accordion,
div.border.border-dark.rounded.bg-secondary.py-2.m-0.mb-3.row.accordion,
html.h-100.fontawesome-i2svg-active.fontawesome-i2svg-complete > body.d-flex.flex-column.vh-100.pt-0 > div.row.flex-grow-1.w-100.justify-content-center > main.col-10 > form > div.border.border-dark.rounded.bg-secondary.py-2.m-0.mb-3.row.accordion {
    border-color: rgb(233, 232, 232) !important;
}

/* Contenedores claros - color de borde gris medio */
div.border.border-dark.bg-light.rounded.mb-3,
div.row.bg-light.rounded.my-2.mx-1.p-2,
div.row.mb-3.mx-3.p-3.border.border-dark.bg-white.rounded,
html.h-100.fontawesome-i2svg-active.fontawesome-i2svg-complete > body.d-flex.flex-column.vh-100.pt-0 > div.row.flex-grow-1.w-100.justify-content-center > main.col-10 > form > div.border.border-dark.bg-secondary.rounded.py-2.m-0.mb-3.row.accordion > div.accordion-body.show > div.border.border-dark.bg-light.rounded.mb-3 {
    border-color: rgb(200, 202, 203) !important;
}

/* Contenedores secundarios - fondo gris muy claro */
div.border.border-dark.bg-secondary.rounded.py-2.m-0.mb-3.row.accordion,
div.border.border-dark.rounded.bg-secondary.py-2.m-0.mb-3.row.accordion,
html.h-100.fontawesome-i2svg-active.fontawesome-i2svg-complete > body.d-flex.flex-column.vh-100.pt-0 > div.row.flex-grow-1.w-100.justify-content-center > main.col-10 > form > div.border.border-dark.bg-secondary.rounded.py-2.m-0.mb-3.row.accordion > div.accordion-body.show > div,
html.h-100.fontawesome-i2svg-active.fontawesome-i2svg-complete > body.d-flex.flex-column.vh-100.pt-0 > div.row.flex-grow-1.w-100.justify-content-center > main.col-10 > form > div.border.border-dark.rounded.bg-secondary.py-2.m-0.mb-3.row.accordion {
    background-color: #f9f9f9 !important;
}

/* Fondo secundario global - mismo color que bg-primary */
.bg-secondary {
    --bs-bg-opacity: 1;
    background-color: #002e5e !important;
}

/* ================================
   BOTONES - CONFIGURACIÓN GENERAL
   ================================ */

/* Botones primary - padding personalizado */
button.btn.btn-primary.btn-sm,
button.btn.btn-primary.btn-sm.m-1,
div.d-flex.align-items-center > button.btn.btn-primary.btn-sm.m-1,
html.h-100.fontawesome-i2svg-active.fontawesome-i2svg-complete > body.d-flex.flex-column.vh-100.pt-0 > div.row.flex-grow-1.w-100.justify-content-center > main.col-10 > form > div.border.border-dark.bg-secondary.rounded.py-2.m-0.my-3.row > div.col-6.d-flex.justify-content-end > div.d-flex.align-items-center > button.btn.btn-primary.btn-sm,
html.h-100.fontawesome-i2svg-active.fontawesome-i2svg-complete > body.d-flex.flex-column.vh-100.pt-0 > div.row.flex-grow-1.w-100.justify-content-center > main.col-10 > form > div.row.mb-3 > div.col-12.d-flex.justify-content-end > button.btn.btn-primary.btn-sm.m-1 {
    padding: 8px !important;
}

    /* Botones primary - sin bordes */
    a.text-decoration-none.text-info.dropdown-item.text-wrap.border.text-black.active,
    button.btn.btn-primary.btn-sm,
    button.btn.btn-primary.btn-sm.m-1,
    div.container-fluid.d-flex.align-items-center.row.border.border-primary.border-3.bg-secondary.mx-0.py-2.px-0,
    div.d-flex.align-items-center > button.btn.btn-primary.btn-sm.m-1,
    html.h-100.fontawesome-i2svg-active.fontawesome-i2svg-complete > body.d-flex.flex-column.vh-100.pt-0 > div.row.flex-grow-1.w-100.justify-content-center > main.col-10 > form > div.border.border-dark.bg-secondary.rounded.py-2.m-0.my-3.row > div.col-6.d-flex.justify-content-end > div.d-flex.align-items-center > button.btn.btn-primary.btn-sm,
    html.h-100.fontawesome-i2svg-active.fontawesome-i2svg-complete > body.d-flex.flex-column.vh-100.pt-0 > div.row.flex-grow-1.w-100.justify-content-center > main.col-10 > form > div.row.mb-3 > div.col-12.d-flex.justify-content-end > button.btn.btn-primary.btn-sm.m-1 {
        border-style: none !important;
    }

/* ================================
   BOTONES ESPECÍFICOS POR TIPO
   ================================ */

/* BOTÓN DANGER - Estado normal */
button.btn.btn-danger.btn-sm {
    background-color: #c23838 !important;
}

/* REGLAS COMENTADAS - Evitar conflictos con botones personalizados */
/* Regla comentada para evitar conflictos con btn-outline
button.btn.btn-sm.btn-outline.text-nowrap.bg-warning.flex-grow-1 {
  background-color: #ffffff !important;
  color: #002e5d !important;
  font-weight: 900 !important;
}
*/

/* Reglas comentadas para evitar conflictos con btn--color
button.btn.btn-primary.btn-sm,
button.btn.btn-primary.btn-sm.m-1,
div.container-fluid.d-flex.align-items-center.row.border.border-primary.border-3.bg-secondary.mx-0.py-2.px-0,
div.d-flex.align-items-center > button.btn.btn-primary.btn-sm.m-1,
html.h-100.fontawesome-i2svg-active.fontawesome-i2svg-complete > body.d-flex.flex-column.vh-100.pt-0 > div.row.flex-grow-1.w-100.justify-content-center > main.col-10 > form > div.border.border-dark.bg-secondary.rounded.py-2.m-0.my-3.row > div.col-6.d-flex.justify-content-end > div.d-flex.align-items-center > button.btn.btn-primary.btn-sm,
html.h-100.fontawesome-i2svg-active.fontawesome-i2svg-complete > body.d-flex.flex-column.vh-100.pt-0 > div.row.flex-grow-1.w-100.justify-content-center > main.col-10 > form > div.row.mb-3 > div.col-12.d-flex.justify-content-end > button.btn.btn-primary.btn-sm.m-1 {
  background-color: #1b5794 !important;
}
*/

/* ================================
   DROPDOWNS Y MENÚS
   ================================ */

/* Items de dropdown - hover y estados activos */
.dropdown-item:hover, .dropdown-item.active, .dropdown-item:hover, .dropdown-item:focus, .dropdown-item:active {
    background-color: #1b5794 !important;
    color: white !important;
}

/* ================================
   BOTONES PERSONALIZADOS - OUTLINE
   ================================ */

/* Botón outline - Estado normal */
.btn.btn-outline,
button.btn-outline,
button.btn.btn-sm.btn-outline.text-nowrap.bg-warning.flex-grow-1 {
    background-color: #f9f9f9 !important;
    color: #222222 !important;
    border: 1px solid #FFF !important;
}

    /* Botón outline - Estado hover */
    .btn.btn-outline:hover,
    button.btn-outline:hover,
    button.btn.btn-sm.btn-outline.text-nowrap.bg-warning.flex-grow-1:hover {
        background-color: #002E5E !important;
        color: #fff !important;
        border: 1px solid #FFF !important;
    }

/* ================================
   BOTONES PERSONALIZADOS - PRIMARY
   ================================ */

/* Botón primary personalizado - Estado normal */
.btn--color,
.btn.btn--color,
button.btn--color,
button.btn.btn-primary.btn-sm {
    background-color: #1b5794 !important;
    color: #fff !important;
    margin: 3px !important;
}

    /* Botón primary personalizado - Estado hover */
    .btn--color:hover,
    .btn.btn--color:hover,
    button.btn--color:hover,
    button.btn.btn-primary.btn-sm:hover {
        background-color: #5488bc !important;
        color: #ffffff !important;
        /* border: 1px solid #002E5E !important; */
    }

/* Enlace con estilo de botón primary */
a.btn.btn-primary.text-white.text-decoration-none.text-info {
    background-color: #002e5d !important;
    border-radius: 2px !important;
}

/* ================================
   BOTONES PERSONALIZADOS - DANGER
   ================================ */

/* Botón danger - Estado hover (outline rojo) */
button.btn.btn-danger.btn-sm:hover {
    background-color: #c66464 !important;
    color: #fff !important;
    /* border: 1px solid #c23838 !important; */
}

/* ================================
   BOTONES EXTRA SMALL (btn-xs)
   ================================ */

/* Botón danger extra small con dropdown */
button.btn.btn-danger.btn-xs.dropdown-toggle {
    background-color: #c23838 !important;
}

    /* Botón danger extra small con dropdown - Estado hover */
    button.btn.btn-danger.btn-xs.dropdown-toggle:hover {
        background-color: #c55a5a !important;
    }

/* Botones secondary y primary extra small */
button.btn.btn-secondary.btn-xs,
button.btn.btn-secondary.btn-xs.dropdown-toggle,
input.btn.btn-primary.btn-xs,
input.btn.btn-secondary.btn-xs {
    background-color: #002e5d !important;
}

    /* Botones secondary y primary extra small - Estado hover */
    button.btn.btn-secondary.btn-xs:hover,
    button.btn.btn-secondary.btn-xs.dropdown-toggle:hover,
    input.btn.btn-primary.btn-xs:hover,
    input.btn.btn-secondary.btn-xs:hover {
        background-color: #5488bc !important;
        color: #ffffff !important;
        /* border: 1px solid #002E5E !important; */
    }

    /* Bordes redondeados para botones extra small e inputs */
    button.btn.btn-danger.btn-xs.dropdown-toggle,
    button.btn.btn-secondary.btn-xs,
    button.btn.btn-secondary.btn-xs.dropdown-toggle,
    input.btn.btn-primary.btn-xs,
    input.btn.btn-secondary.btn-xs,
    input.btn.btn-warning.btn-xs,
    input.dx-texteditor-input {
        border-radius: 2px !important;
    }

/* ================================
   UTILIDADES GENERALES
   ================================ */

/* Clase text-info personalizada */
.text-info {
    --bs-text-opacity: 1;
    color: #002e5d !important;
}

/* Hover específico para botones warning */
.btn-warning:hover {
    background-color: #eaaa45 !important;
}

/* Hover general para todos los botones */
.btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: #5488bc !important;
    border-color: var(--bs-btn-hover-border-color);
}