/* ==========================================================
   DIRECCIÓN · PANEL
   ----------------------------------------------------------
   Sistema visual sobre Bootstrap 5.3: paleta, radio unificado,
   densidad de tabla y tratamiento de estados.

   Criterio que ordena todo:
     relleno sólido saturado = acción (se toca)
     chip teñido             = estado (solo se lee)

   Antes ambos se pintaban igual, así que en un grid denso no se
   distinguía qué era accionable y qué era información.
   ========================================================== */

[data-bs-theme="dark"] {
    /* Lienzo y texto */
    --bs-body-bg: #0A0B0D;
    --bs-body-color: #F0F2F5;
    --bs-emphasis-color: #FFFFFF;
    --bs-secondary-color: #868E9B;

    /* Tres niveles de elevación (antes todo compartía #212529) */
    --bs-secondary-bg: #101216;
    --bs-tertiary-bg: #171A1F;
    --bs-border-color: #232830;

    /* Acento */
    --bs-primary: #6D5EFC;
    --bs-primary-rgb: 109, 94, 252;
    --bs-link-color: #9C90FF;
    --bs-link-hover-color: #B9B0FF;

    /* Radio unificado: hoy conviven rounded-3, rounded-4 y rounded-top-4 */
    --bs-border-radius: 6px;
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: 6px;
    --bs-border-radius-xl: 8px;
    --bs-border-radius-xxl: 8px;
}

/* ---------- Botones: compactos y con más peso ---------- */
[data-bs-theme="dark"] .btn {
    --bs-btn-padding-y: .38rem;
    --bs-btn-padding-x: .78rem;
    --bs-btn-font-size: .82rem;
    --bs-btn-font-weight: 600;
}

[data-bs-theme="dark"] .btn-lg {
    --bs-btn-padding-y: .55rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: .92rem;
}

[data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg: #6D5EFC;
    --bs-btn-border-color: #6D5EFC;
    --bs-btn-color: #FFFFFF;
    --bs-btn-hover-bg: #5B4BE8;
    --bs-btn-hover-border-color: #5B4BE8;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #5241D4;
    --bs-btn-active-border-color: #5241D4;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-disabled-bg: #6D5EFC;
    --bs-btn-disabled-border-color: #6D5EFC;
    --bs-btn-disabled-color: #FFFFFF;
}

/* ---------- Encabezado de página ----------
   La caja de ícono de color junto a cada título (18 pantallas) es el detalle
   que más delata el aspecto de plantilla. Se retira y el encabezado queda
   tipográfico. El markup se conserva, así que revertirlo es quitar esta regla. */
[data-bs-theme="dark"] .bg-primary.rounded-3 {
    display: none;
}

/* ---------- Encabezado: más aire vertical ----------
   El padding por defecto de Bootstrap (.5rem) dejaba la barra muy angosta. */
/*[data-bs-theme="dark"] .navbar {
    padding-top: 1rem;
    padding-bottom: 1rem;
}*/

/* ---------- Marca del navbar ---------- */
[data-bs-theme="dark"] .navbar-brand {
    color: #868E9B !important;
    font-size: .95rem;
}

    [data-bs-theme="dark"] .navbar-brand .text-primary {
        color: #6D5EFC !important;
    }

/* ---------- Superficies ---------- */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content {
    --bs-card-bg: #101216;
    --bs-card-border-color: #232830;
    background-color: #101216;
    border-color: #232830;
}

[data-bs-theme="dark"] .bg-dark {
    background-color: #101216 !important;
}

[data-bs-theme="dark"] body.bg-dark {
    background-color: #0A0B0D !important;
}

[data-bs-theme="dark"] .navbar.bg-dark,
[data-bs-theme="dark"] footer.bg-dark,
[data-bs-theme="dark"] .offcanvas.text-bg-dark {
    background-color: #171A1F !important;
}

[data-bs-theme="dark"] .border-secondary {
    border-color: #232830 !important;
}

/* ---------- Tablas: densidad y encabezados en versalita ---------- */
[data-bs-theme="dark"] .table {
    font-size: .8rem;
}

    [data-bs-theme="dark"] .table > :not(caption) > * > * {
        padding: .38rem .7rem;
    }

[data-bs-theme="dark"] .table-dark {
    --bs-table-bg: #101216;
    --bs-table-color: #F0F2F5;
    --bs-table-border-color: #1C2027;
    --bs-table-striped-bg: #14171B;
    --bs-table-striped-color: #F0F2F5;
    --bs-table-hover-bg: #171A1F;
    --bs-table-hover-color: #FFFFFF;
    --bs-table-active-bg: #1C2027;
    --bs-table-active-color: #FFFFFF;
}

[data-bs-theme="dark"] .table > thead > tr > th {
    background-color: #171A1F;
    color: #868E9B;
    font-weight: 600;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    white-space: nowrap;
}

    /* Los filtros por columna viven dentro del thead: no deben heredar la versalita */
    [data-bs-theme="dark"] .table > thead > tr > th input,
    [data-bs-theme="dark"] .table > thead > tr > th select {
        text-transform: none;
        letter-spacing: normal;
        font-size: .78rem;
    }

/* ---------- Estado: chip teñido ----------
   Recibe el color de OrderStatus.sColorHex como variable --st, así que la
   base de datos sigue siendo la única fuente de los colores de estado.
   Las tres primeras declaraciones son el respaldo si color-mix no existe. */
.badge-estado {
    display: inline-block;
    padding: .18rem .5rem;
    border-radius: 5px;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background: transparent;
    color: var(--st);
    border: 1px solid var(--st);
    background: color-mix(in srgb, var(--st) 17%, transparent);
    color: color-mix(in srgb, var(--st) 52%, #FFFFFF);
    border: 1px solid color-mix(in srgb, var(--st) 34%, transparent);
}

/* ---------- Formularios ----------
   El alto se deja en el valor de Bootstrap a propósito: select2 calcula su
   propia altura para igualar a .form-control, y tocarlo desalinea los
   input-group donde conviven (Cliente, Categoría, Moneda). */
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: #6D5EFC;
    box-shadow: 0 0 0 .22rem rgba(109, 94, 252, .28);
}

[data-bs-theme="dark"] .form-check-input:focus {
    border-color: #6D5EFC;
    box-shadow: 0 0 0 .22rem rgba(109, 94, 252, .28);
}

/* Los checkbox del grid los renderiza bootstrap-table como inputs nativos */
[data-bs-theme="dark"] input[type="checkbox"],
[data-bs-theme="dark"] input[type="radio"] {
    accent-color: #6D5EFC;
}

/* ---------- Pestañas (nav-pills) ----------
   El bootstrap.min.css compilado trae --bs-nav-pills-link-active-bg como un
   valor fijo (#0d6efd), no como var(--bs-primary), así que el override
   global del acento no lo alcanza. Se redeclara aquí puntualmente. */
[data-bs-theme="dark"] .nav-pills {
    --bs-nav-pills-link-active-bg: #6D5EFC;
    --bs-nav-pills-link-active-color: #FFFFFF;
}

    [data-bs-theme="dark"] .nav-pills .nav-link {
        color: #868E9B;
        font-weight: 500;
        font-size: .85rem;
    }

        [data-bs-theme="dark"] .nav-pills .nav-link:hover:not(.active) {
            color: #F0F2F5;
        }

/* ---------- Paginación de bootstrap-table ---------- */
[data-bs-theme="dark"] .pagination {
    --bs-pagination-bg: #101216;
    --bs-pagination-color: #F0F2F5;
    --bs-pagination-border-color: #232830;
    --bs-pagination-hover-bg: #171A1F;
    --bs-pagination-hover-color: #FFFFFF;
    --bs-pagination-hover-border-color: #232830;
    --bs-pagination-active-bg: #6D5EFC;
    --bs-pagination-active-border-color: #6D5EFC;
    --bs-pagination-active-color: #FFFFFF;
    --bs-pagination-disabled-bg: #101216;
    --bs-pagination-disabled-color: #868E9B;
    --bs-pagination-disabled-border-color: #232830;
}

/* ---------- SweetAlert2 ----------
   Los popups vienen en blanco por defecto y desentonaban con una app oscura. */
.swal2-popup {
    background: #101216 !important;
    border: 1px solid #232830;
    border-radius: 8px !important;
    color: #F0F2F5 !important;
}

.swal2-title {
    color: #F0F2F5 !important;
}

.swal2-html-container {
    color: #868E9B !important;
}

.swal2-close {
    color: #868E9B !important;
}

    .swal2-close:hover {
        color: #FFFFFF !important;
    }

/* ---------- Login ----------
   El layout público (body.bg-dark > .container-fluid > main, luego <footer>)
   no tenía altura ni flex definidos: el contenido ocupaba lo que necesitaba
   y el footer quedaba flotando justo debajo, no pegado al borde de la
   ventana. Se convierte body en una columna flex de 100vh y el contenido
   crece para empujar el footer al fondo (patrón de "sticky footer"). */
body.bg-dark {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

    body.bg-dark > .container-fluid {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
    }

        body.bg-dark > .container-fluid > main {
            flex: 1 0 auto;
            display: flex;
            flex-direction: column;
        }

    body.bg-dark footer {
        flex-shrink: 0;
    }

.login-shell {
    flex: 1 0 auto;
    display: grid;
    place-items: center;
    padding: 2rem 1.5rem;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: #101216;
    border: 1px solid #232830;
    border-radius: 8px;
    padding: 2.4rem 2rem 2rem;
}

.login-mark {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #F0F2F5;
}

    .login-mark i {
        color: #6D5EFC;
    }

    .login-mark .accent {
        color: #6D5EFC;
    }

.login-sub {
    color: #868E9B;
    font-size: .84rem;
    margin: .35rem 0 2rem;
}

.login-label {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #868E9B;
    margin-bottom: .35rem;
    display: block;
}

.login-foot {
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid #1C2027;
    font-size: .72rem;
    color: #666E7A;
    text-align: center;
}

    .login-foot a {
        color: #868E9B;
    }

        .login-foot a:hover {
            color: #6D5EFC;
        }

/* ==========================================================
   PREGUNTAS FRECUENTES (pantalla pública)
   ----------------------------------------------------------
   Mismo lenguaje visual que .login-card, pero más ancha para
   que el acordeón respire — y con los colores del acordeón de
   Bootstrap reescritos para calzar con el tema oscuro/violeta
   en vez de su dark mode genérico.
   ========================================================== */
.faq-card {
    max-width: 600px;
}

.faq-accordion .accordion-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid #1C2027;
}

    .faq-accordion .accordion-item:last-child {
        border-bottom: none;
    }

.faq-accordion .accordion-button {
    background: transparent;
    color: #F0F2F5;
    font-size: .88rem;
    font-weight: 600;
    padding: .9rem 0;
    box-shadow: none !important;
}

    .faq-accordion .accordion-button:not(.collapsed) {
        color: #6D5EFC;
    }

    .faq-accordion .accordion-button::after {
        filter: invert(56%) sepia(78%) saturate(2476%) hue-rotate(226deg) brightness(101%) contrast(101%);
    }

.faq-accordion .accordion-body {
    padding: 0 0 1rem;
    font-size: .82rem;
    color: #868E9B;
    line-height: 1.5;
}


/* ==========================================================
   CONTADOR DE SESIÓN
   ----------------------------------------------------------
   Muestra el tiempo restante antes de que expire la sesión (ver
   js_Session.js) — se pone en ámbar cuando quedan 5 minutos o
   menos, como aviso temprano antes del cierre de sesión.
   ========================================================== */

.session-timer {
    display: inline-flex;
    align-items: center;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    color: #868E9B;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    padding: .3rem .65rem;
    white-space: nowrap;
}

.session-timer.session-timer-warning {
    color: #ffc107;
    border-color: rgba(255, 193, 7, .4);
    background: rgba(255, 193, 7, .1);
}

/* ==========================================================
   MAESTRO-DETALLE EN VISTA MÓVIL (TARJETAS)
   ----------------------------------------------------------
   bootstrap-table-mobile no incluye el ícono +/- de escritorio
   dentro de la tarjeta — sin esto no hay ninguna señal de que
   la tarjeta se puede tocar para ver el detalle (ver
   bindMobileDetailToggle en js_Generic.js, que es quien
   realmente habilita el toque).
   ========================================================== */

.has-card-view tr[data-has-detail-view] {
    cursor: pointer;
}

.has-card-view tr[data-has-detail-view] .card-views {
    position: relative;
    padding-right: 2.75rem;
}

.has-card-view tr[data-has-detail-view] .card-views::after {
    content: "\f078";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-size: .75rem;
    color: #C7CBD4;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: transform .15s ease;
}

.has-card-view tr[data-has-detail-view].detail-view-open .card-views::after {
    transform: rotate(180deg);
    color: #fff;
    background: rgba(109, 94, 252, .35);
    border-color: rgba(109, 94, 252, .55);
}

/* ==========================================================
   MENÚ LATERAL
   ----------------------------------------------------------
   Antes era una lista plana sin jerarquía ni indicación de dónde
   está uno parado. Ahora: identidad arriba, secciones rotuladas,
   estado activo con acento, y las acciones de sesión separadas
   al pie para que no compitan con la navegación.
   ========================================================== */

/* El disparador conserva el ícono de menú —es el único acceso a los módulos—
   y le suma las iniciales para que también se lea como "su sesión". */
.navx-trigger {
    display: flex;
    align-items: center;
    gap: .65rem;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.navx-trigger-ico {
    font-size: 1.05rem;
    color: #868E9B;
    transition: color .15s ease;
}

.navx-trigger:hover .navx-trigger-ico {
    color: #F0F2F5;
}

    .navx-trigger:focus-visible {
        outline: 2px solid #6D5EFC;
        outline-offset: 3px;
    }

.navx-avatar {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    flex: none;
    display: grid;
    place-items: center;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: #B9B0FF;
    background: rgba(109, 94, 252, .14);
    border: 1px solid rgba(109, 94, 252, .28);
    transition: background .15s ease, border-color .15s ease;
}

.navx-avatar-sm {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: .72rem;
}

.navx-trigger:hover .navx-avatar {
    background: rgba(109, 94, 252, .24);
    border-color: rgba(109, 94, 252, .45);
}

.navx {
    width: 304px !important;
    background-color: #171A1F !important;
    border-left: 1px solid #232830;
}

.navx-head {
    padding: 1.1rem 1.1rem 1rem;
    border-bottom: 1px solid #1C2027;
    align-items: flex-start;
}

.navx-user {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
}

.navx-id {
    min-width: 0;
}

.navx-name {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.25;
    color: #F0F2F5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navx-role {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #868E9B;
    margin-top: .1rem;
}

/* El pie se empuja hacia abajo, así que el cuerpo es una columna flexible */
.navx-body {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    padding: .5rem .75rem 1rem;
}

.navx-section {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #5E6672;
    padding: 0 .65rem;
    margin: 1.15rem 0 .45rem;
}

    .navx-section:first-child {
        margin-top: .35rem;
    }

.navx-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .52rem .65rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #B7BEC8;
    font-size: .85rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

    .navx-link:hover,
    .navx-link:focus-visible {
        background: #1E222A;
        color: #F0F2F5;
    }

    .navx-link:focus-visible {
        outline: 2px solid #6D5EFC;
        outline-offset: -2px;
    }

    .navx-link.active {
        background: rgba(109, 94, 252, .13);
        color: #B9B0FF;
        font-weight: 600;
    }

        .navx-link.active .navx-ico {
            color: #6D5EFC;
        }

.navx-ico {
    width: 16px;
    flex: none;
    text-align: center;
    font-size: .84rem;
    color: #7C8592;
    transition: color .15s ease;
}

.navx-link:hover .navx-ico {
    color: #B7BEC8;
}

.navx-caret {
    margin-left: auto;
    font-size: .62rem;
    color: #5E6672;
    transition: transform .2s ease;
}

.navx-toggle[aria-expanded="true"] .navx-caret {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .navx-caret,
    .navx-link,
    .navx-avatar {
        transition: none;
    }
}

/* Submenú: sangría con guía vertical para que se lea como dependiente */
.navx-sub {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin: .2rem 0 .2rem 1.4rem;
    padding-left: .55rem;
    border-left: 1px solid #262C35;
}

.navx-sublink {
    font-size: .82rem;
    padding: .42rem .6rem;
}

.navx-foot {
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px solid #1C2027;
    display: flex;
    flex-direction: column;
    gap: .12rem;
}

.navx-logout {
    color: #EE8397;
}

    .navx-logout .navx-ico {
        color: #EE8397;
    }

    .navx-logout:hover,
    .navx-logout:focus-visible {
        background: rgba(238, 131, 151, .11);
        color: #FFA0B1;
    }

        .navx-logout:hover .navx-ico {
            color: #FFA0B1;
        }


/* ==========================================================
   SELECT2 - BOOTSTRAP 5 DARK THEME
   ========================================================== */

/* El contenedor que renderiza Select2 no trae las clases form-control/form-select
   que Bootstrap usa para calcular el ancho flexible dentro de un .input-group,
   por lo que sin esto ocupa el 100% del ancho y empuja cualquier botón vecino
   (p. ej. "Nuevo"/"Modificar" junto al selector de Cliente) a la siguiente línea. */
.input-group > .select2-container {
    flex: 1 1 auto;
    width: 1% !important;
}

/* Contenedor principal */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

/* Texto seleccionado */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__rendered {
    color: var(--bs-body-color);
}

/* Placeholder */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__placeholder {
    color: var(--bs-secondary-color);
}

/* Flecha dropdown */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__arrow b {
    border-color: var(--bs-body-color) transparent transparent transparent;
}


/* ==========================================================
   DROPDOWN
   ========================================================== */

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}


/* ==========================================================
   SEARCH BOX
   ========================================================== */

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-search__field {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

    [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-search__field::placeholder {
        color: var(--bs-secondary-color);
    }


/* ==========================================================
   OPTIONS
   ========================================================== */

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option {
    color: var(--bs-body-color);
    cursor: pointer;
    user-select: none;
}


    /* Hover */
    [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option:hover {
        background-color: var(--bs-dark-bg-subtle);
        color: var(--bs-body-color);
        cursor: pointer;
    }


/* Opción activa (teclas arriba/abajo o mouse hover interno Select2)
*/
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--bs-primary);
    color: var(--bs-white);
    cursor: pointer;
}


/* Opción seleccionada */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}


    /* Opción seleccionada + activa */
    [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option[aria-selected="true"].select2-results__option--highlighted {
        background-color: var(--bs-primary);
        color: var(--bs-white);
    }


/* ==========================================================
   NO RESULTS / LOADING
   ========================================================== */

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__message {
    color: var(--bs-secondary-color);
}


/* ==========================================================
   CLEAR BUTTON
   ========================================================== */

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__clear {
    color: var(--bs-body-color);
}

    [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__clear:hover {
        color: var(--bs-danger);
        cursor: pointer;
    }


/* ==========================================================
   FOCUS STATE
   ========================================================== */

[data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--focus .select2-selection,
[data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}


/* ==========================================================
   DISABLED
   ========================================================== */

[data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--disabled .select2-selection {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    cursor: not-allowed;
}


/* ==========================================================
   ASISTENTE (CHATBOT)
   ----------------------------------------------------------
   Todo el motor corre en el navegador (js/chatbot/*). El markup reutiliza
   los mismos componentes que el resto de la app — card/card-header/
   card-footer, .btn-primary, .form-control, el chip teñido de los estados
   de orden — y todos los colores salen de los tokens de [data-bs-theme="dark"],
   nunca hardcodeados, para seguir automáticamente cualquier cambio de paleta.

   El radio es la única excepción deliberada al 6px uniforme del resto de la
   app: un chat flotante es un objeto distinto a una tarjeta de formulario
   (como ya lo es el propio botón circular que lo abre), así que acá se
   permite una curva más generosa — burbuja de disparo, panel y mensajes —
   para que se lea como una conversación y no como un formulario más.
   ========================================================== */

.chatbot-trigger {
    position: fixed;
    right: 1.4rem;
    bottom: 1.4rem;
    z-index: 1040;
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    display: grid;
    place-items: center;
    font-size: 1.35rem;
}

    .chatbot-trigger-ico-close {
        display: none;
    }

    .chatbot-trigger.is-active .chatbot-trigger-ico-open {
        display: none;
    }

    .chatbot-trigger.is-active .chatbot-trigger-ico-close {
        display: inline;
    }

.chatbot-panel {
    position: fixed;
    right: 1.4rem;
    bottom: 5.4rem;
    z-index: 1039;
    width: min(360px, calc(100vw - 2.4rem));
    height: min(560px, calc(100vh - 7.5rem));
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px) scale(.98);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

    .chatbot-panel.is-open {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

@media (prefers-reduced-motion: reduce) {
    .chatbot-panel, .chatbot-trigger {
        transition: none;
    }
}

/* .card-body normalmente tiene padding y no scrollea — acá necesita las dos cosas al revés */
.chatbot-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.chatbot-msg {
    display: flex;
}

.chatbot-msg-bot {
    justify-content: flex-start;
}

.chatbot-msg-user {
    justify-content: flex-end;
}

.chatbot-bubble {
    max-width: 84%;
    padding: .6rem .85rem;
    border-radius: 14px;
    font-size: .8rem;
    line-height: 1.48;
}

/* La esquina "de origen" queda casi recta — es lo que hace que una burbuja se lea como
   burbuja de conversación (WhatsApp/iMessage/Messenger comparten el mismo recurso) en vez
   de una tarjeta cualquiera con las cuatro esquinas iguales. */
.chatbot-msg-bot .chatbot-bubble {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-bottom-left-radius: 4px;
}

.chatbot-msg-user .chatbot-bubble {
    background: var(--bs-primary);
    color: #FFFFFF;
    border-bottom-right-radius: 4px;
}

/* Listas que arma renderMarkdownLite() a partir del Markdown de la respuesta de IA. */
.chatbot-bubble .chatbot-md-list {
    margin: .3rem 0;
    padding-left: 1.1rem;
}

    .chatbot-bubble .chatbot-md-list li {
        margin-bottom: .15rem;
    }

    .chatbot-bubble .chatbot-md-list:last-child {
        margin-bottom: 0;
    }

/* Enlaces dentro del texto de la respuesta (Markdown [texto](url), no el botón de acceso
   directo .chatbot-link) — mismo tono de acento que el resto de enlaces del sistema. */
.chatbot-bubble a:not(.chatbot-link) {
    color: var(--bs-link-color);
    text-decoration: underline;
}

    .chatbot-bubble a:not(.chatbot-link):hover {
        color: var(--bs-link-hover-color);
    }

.chatbot-msg-user .chatbot-bubble a:not(.chatbot-link) {
    color: #FFFFFF;
    text-decoration-color: rgba(255, 255, 255, .55);
}

.chatbot-link {
    display: inline-flex;
    align-items: center;
    margin-top: .5rem;
    color: var(--bs-link-color);
    font-weight: 600;
    font-size: .78rem;
    text-decoration: none;
}

    .chatbot-link:hover {
        color: var(--bs-link-hover-color);
        text-decoration: underline;
    }

/* Aviso cuando Gemini y Groq fallaron los dos y la respuesta viene del motor local —
   deliberadamente discreto (no es un error, es información), pero visible. */
.chatbot-fallback-note {
    font-size: .66rem;
    color: var(--bs-secondary-color);
    margin: 0 0 .25rem .1rem;
}

/* Indicador de "escribiendo…" — misma forma de burbuja del bot, tres puntos con pulso. */
.chatbot-typing {
    display: flex;
    align-items: center;
    gap: .28rem;
    padding: .7rem .85rem;
}

    .chatbot-typing span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--bs-secondary-color);
        animation: chatbot-typing-bounce 1.1s infinite ease-in-out;
    }

        .chatbot-typing span:nth-child(2) {
            animation-delay: .15s;
        }

        .chatbot-typing span:nth-child(3) {
            animation-delay: .3s;
        }

@keyframes chatbot-typing-bounce {
    0%, 60%, 100% {
        opacity: .35;
        transform: translateY(0);
    }
    30% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chatbot-typing span {
        animation: none;
        opacity: .7;
    }
}

.chatbot-suggestions {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: 0 1rem .7rem;
    background: var(--bs-secondary-bg);
}

    .chatbot-suggestions:empty {
        display: none;
    }

/* Mismo tratamiento que .badge-estado (fondo/borde/texto teñidos del color de acento) —
   una sugerencia es información que se toca, no un estado, pero visualmente sigue el
   mismo lenguaje de "chip" que ya conoce el resto de la app. */
.chatbot-chip {
    border-radius: 20px;
    padding: .32rem .7rem;
    font-size: .72rem;
    cursor: pointer;
    background: color-mix(in srgb, var(--bs-primary) 14%, transparent);
    color: color-mix(in srgb, var(--bs-primary) 55%, #FFFFFF);
    border: 1px solid color-mix(in srgb, var(--bs-primary) 34%, transparent);
    transition: background .15s ease;
}

    .chatbot-chip:hover {
        background: color-mix(in srgb, var(--bs-primary) 26%, transparent);
    }

/* Input tipo píldora — el mismo .form-control del resto del sistema, pero acá redondeado por
   completo para que combine con el resto de curvas del widget (burbujas, panel, disparador).
   .chatbot-panel ya recorta las esquinas de header/footer vía overflow:hidden, así que acá
   solo hace falta redondear los controles internos. */
#chatbotForm .form-control {
    border-radius: 999px;
    padding-left: 1rem;
}

#chatbotForm .btn {
    border-radius: 50%;
    width: 38px;
    height: 38px;
    padding: 0;
    flex: none;
    display: grid;
    place-items: center;
}

@media (max-width: 480px) {
    .chatbot-panel {
        right: .7rem;
        bottom: 4.6rem;
    }

    .chatbot-trigger {
        right: .9rem;
        bottom: .9rem;
    }
}


/* ==========================================================
   IMPRESIÓN DE RESÚMENES
   ----------------------------------------------------------
   printElement() (js_Generic.js) marca el contenedor a imprimir con
   .print-target y el body con .is-printing-target antes de llamar a
   window.print() — acá se oculta todo lo demás y ese contenedor pasa
   a ocupar la hoja completa. Funciona aunque el contenedor esté
   dentro de un modal con scroll, que si no quedaría recortado.

   El print-heading solo existe para la hoja impresa (nunca se ve en
   pantalla) — dentro del modal ya está claro qué se está mirando,
   pero una hoja de papel necesita su propio encabezado.
   ========================================================== */

.print-heading {
    display: none;
}

@media print {
    /* visibility:hidden (a diferencia de display:none) no saca los elementos del flujo — siguen
       ocupando su alto normal aunque no se vean, y con position:absolute el navegador igual
       agregaba una hoja en blanco extra para cubrir esa altura invisible; con position:fixed el
       contenedor a imprimir se repetía en CADA hoja generada (comportamiento normal de fixed al
       paginar). Ambos problemas se evitan de raíz ocultando con display:none (que sí colapsa el
       alto) a los demás hijos directos de <body> — printElement() ya movió el contenedor a
       imprimir ahí — y dejándolo fluir normal, sin position especial, como único contenido
       visible de la hoja. */
    body.is-printing-target > :not(.print-target) {
        display: none !important;
    }

    body.is-printing-target .print-target {
        display: block !important;
        width: 100% !important;
        padding: 1.5rem !important;
        margin: 0 !important;
        background: #FFFFFF !important;
    }

        /* El tema oscuro pone texto claro sobre fondo oscuro por todos lados —
           en papel blanco eso es ilegible, así que se fuerza todo a negro sobre
           blanco dentro del área impresa, sin importar qué clase traiga cada cosa. */
        body.is-printing-target .print-target,
        body.is-printing-target .print-target * {
            color: #000000 !important;
            background-color: transparent !important;
            border-color: #BBBBBB !important;
            box-shadow: none !important;
        }

        body.is-printing-target .print-target table {
            border-collapse: collapse;
        }

        body.is-printing-target .print-target th,
        body.is-printing-target .print-target td {
            border: 1px solid #BBBBBB !important;
        }

        body.is-printing-target .print-target .btn,
        body.is-printing-target .print-target a[href],
        body.is-printing-target .print-target .no-print {
            display: none !important;
        }

        /* bootstrap-table envuelve cada grilla en .fixed-table-body con overflow-x: auto —
           en pantalla eso da una barra de scroll horizontal, pero en papel no hay forma de
           scrollear, así que cualquier columna fuera del ancho visible simplemente desaparecía.
           Se libera ese scroll y se deja que la tabla ocupe el ancho completo de la hoja. */
        /* Mismo problema, pero con el wrapper .table-responsive de Bootstrap (usado en el
           desglose de Calculadora/Orden alrededor de la tabla de productos) — su propio
           overflow-x: auto recorta igual las columnas que no entran, aparte de bootstrap-table. */
        body.is-printing-target .print-target .fixed-table-container,
        body.is-printing-target .print-target .fixed-table-body,
        body.is-printing-target .print-target .table-responsive {
            overflow: visible !important;
            height: auto !important;
            max-height: none !important;
            width: 100% !important;
        }

        body.is-printing-target .print-target .fixed-table-toolbar,
        body.is-printing-target .print-target .fixed-table-pagination,
        body.is-printing-target .print-target .fixed-table-loading,
        body.is-printing-target .print-target .fixed-table-header {
            display: none !important;
        }

        body.is-printing-target .print-target .bootstrap-table table {
            width: 100% !important;
            table-layout: auto !important;
            font-size: .8rem;
        }

        /* bootstrap-table le fija a cada <col> un ancho en píxeles calculado sobre el angosto del
           modal en pantalla (para mantener sincronizados el header y el body al hacer scroll). Con
           table-layout:auto ese ancho por columna se respeta como tal en vez de repartir el ancho
           extra de la hoja entre todas, así que la última columna (normalmente la más angosta en
           el modal) terminaba recibiendo un ancho fijo insuficiente para su contenido en papel, y
           el texto se salía de la celda. Se limpia ese ancho para que cada columna se calcule según
           su propio contenido, ya sobre el 100% de la hoja. */
        body.is-printing-target .print-target .bootstrap-table col,
        body.is-printing-target .print-target .bootstrap-table th,
        body.is-printing-target .print-target .bootstrap-table td {
            width: auto !important;
            white-space: normal !important;
            word-break: break-word;
        }

        body.is-printing-target .print-target .print-heading {
            display: block !important;
            margin-bottom: 1.25rem;
            padding-bottom: .75rem;
            border-bottom: 2px solid #000000;
        }

            body.is-printing-target .print-target .print-heading .print-heading-brand {
                font-weight: 700;
                font-size: 1.1rem;
            }

            body.is-printing-target .print-target .print-heading .print-heading-meta {
                font-size: .8rem;
                color: #444444 !important;
            }
}


/* ==========================================================
   LOGO DEL NEGOCIO
   ----------------------------------------------------------
   Reemplaza el ícono fa-bag-shopping en el encabezado privado y
   en el login cuando hay uno configurado (Configuración > Marca).
   Esquinas redondeadas en los tres tamaños: la miniatura del
   encabezado, la vista previa de Configuración, y el destacado
   del login.
   ========================================================== */
.brand-logo-img {
    border-radius: 6px;
    object-fit: contain;
    /*background: #fff;*/
}

.navbar-brand .brand-logo-img {
    width: 35px;
    height: 35px;
}

.logo-preview-shell {
    width: 96px;
    height: 96px;
    border-radius: 10px;
    background: #101216;
    border: 1px solid #232830;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.logo-preview-shell-sm {
    width: 56px;
    height: 56px;
    border-radius: 8px;
}

    .logo-preview-shell-sm .logo-preview-img {
        border-radius: 8px;
    }

    .logo-preview-shell-sm .logo-preview-fallback {
        font-size: 1.3rem;
    }

.logo-preview-img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: contain;
    background: #fff;
}

.logo-preview-fallback {
    font-size: 2rem;
    color: #6D5EFC;
}

.login-logo-img {
    display: block;
    margin: 0 auto 1.1rem;
    width: 220px;
    height: 220px;
    border-radius: 16px;
    object-fit: contain;
    /*background: #fff;*/
}