.sa-icon {
    margin-bottom: 35px !important;
}

div.sweet-alert > p.lead {
    margin-bottom: 10px !important;
}

input.input-validate {
    background-color: beige;
}

select.input-validate {
    background-color: beige;
}

.invalid {
    box-shadow: 0 0 5px 1px var(--danger, #fe5461);
}

@media only screen and (max-width: 600px) {
    /* Hace que las celdas de la tabla ocupen todo el ancho de la pantalla */
    #tablaProductosRecibidos, #tablaProductosRecibidos thead, #tablaProductosRecibidos tbody, #tablaProductosRecibidos th, #tablaProductosRecibidos td, #tablaProductosRecibidos tr {
        display: block;
    }

        /* Oculta los encabezados de la tabla */
        #tablaProductosRecibidos thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        /* Establece el ancho de las celdas */
        #tablaProductosRecibidos td {
            width: 100%;
        }

        /* Establece estilos específicos para cada fila */
        #tablaProductosRecibidos tr {
            border: 1px solid #ccc;
        }
}

.left-sidebar.active .sidebar-buttons .btn span {
    display: none;
}

.left-sidebar.active .sidebar-buttons .btn {
    justify-content: center;
    text-align: center;
}


/* Estilo del scrollbar solo dentro del contenedor lateral */
.sidebar-container {
    overflow-y: auto;
}

    /* Estilo para navegadores basados en WebKit (Chrome, Safari, Edge) */
    .sidebar-container::-webkit-scrollbar {
        width: 8px; /* Ancho del scrollbar */
    }

    .sidebar-container::-webkit-scrollbar-track {
        background-color: #1f2937; /* Color de fondo del track */
    }

    .sidebar-container::-webkit-scrollbar-thumb {
        background-color: #4c84ff; /* Color del "pulgar" o scroll */
        border-radius: 10px; /* Bordes redondeados */
    }

        .sidebar-container::-webkit-scrollbar-thumb:hover {
            background-color: #3a6ee0; /* Color al hacer hover sobre el scroll */
        }

/* Estilos adicionales para Firefox */
.sidebar-container {
    scrollbar-width: thin;
    scrollbar-color: #4c84ff #1f2937; /* Color del thumb y del track */
}

/* Para que no haya scroll horizontal */
.sidebar-container {
    overflow-x: hidden;
}


table.table.dataTable tbody td.factura-pendiente {
    background-color: var(--warning, #fec400) !important;
}

/* =============================================
   Acciones de grillas (DataTables y tablas admin)
   Los botones de una misma celda de acciones deben
   quedar SIEMPRE en una sola fila. Sin esto, cuando
   la columna se angosta (o su width es chico) los
   botones se parten en dos lineas (p. ej.
   /Admin/Users con 3 botones: 2 arriba y 1 abajo).
   ============================================= */
table.dataTable tbody td:has(> .btn) {
    white-space: nowrap;
}

/* Variante con contenedor flex (p. ej. panel de Tenants):
   los botones van dentro de un <div class="d-flex flex-wrap">. */
table tbody td > .d-flex:has(> .btn) {
    flex-wrap: nowrap;
}

.no-capitalize {
    text-transform: none;
}

/* =============================================
   Menú de usuario (header) — logout
   ============================================= */
/* El logout del menú pasó de <a> a <button> POST (fix CSRF). Sleek sólo estiliza
   .navbar .dropdown-menu > li a, así que se replican esas medidas acá; si no, el
   botón queda diminuto y pegado al borde. */
.user-menu .dropdown-menu > li > form > button.user-menu-logout {
    display: block;
    width: 100%;
    padding: 0.625rem 1.25rem;
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #8a909d;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

.user-menu .dropdown-menu > li > form > button.user-menu-logout > i {
    width: 18px;
    display: inline-block;
    text-align: center;
    margin-right: 0.625rem;
}

.user-menu .dropdown-menu > li > form > button.user-menu-logout:hover {
    background-color: #f5f6fa;
}

.user-menu .dropdown-menu > li > form > button.user-menu-logout:focus-visible {
    outline: 2px solid #4c84ff;
    outline-offset: -2px;
}

html[data-theme="dark"] .user-menu .dropdown-menu > li > form > button.user-menu-logout:hover {
    background-color: rgba(61, 139, 255, .15);
}

/* =============================================
   NotificacionesComponent Styles
   ============================================= */
.notificacion {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.notificacion:hover {
    background-color: #f5f5f5;
    border-radius: 6px;
}

/* Override sleek.css .navbar .dropdown-menu > li a which breaks flex layout */
#notificationDropdown li.dropdown-header a.notificacion {
    display: flex !important;
    padding: 10px;
    color: #8a909d;
    font-size: 0.88rem;
}

#notificationDropdown {
    max-width: 600px;
    min-width: 380px;
    border-color: lightgray;
    max-height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    padding: 10px;
}

.notification-class a.notificacion {
    display: flex;
    align-items: flex-start;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    white-space: normal;
    min-width: 0;
}

.notification-class a.notificacion small {
    display: block;
    margin-top: 5px;
    color: gray;
    font-size: 12px;
}

/* Fila "Limpiar todo": queda fija arriba del desplegable (que scrollea) y es
   compacta, para que el usuario siempre vea como vaciar las notificaciones. */
#notificationDropdown li.notificacion-limpiar {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0;
    padding: 0;
    text-align: right;
    background: #fff;
    border-bottom: 1px solid #eee;
}

#notificationDropdown li.notificacion-limpiar a {
    display: inline-block;
    padding: 5px 10px;
    font-size: 0.8rem;
    line-height: 1.2;
    color: #8a909d;
}

#notificationDropdown li.notificacion-limpiar a:hover {
    color: #e05252;
}

#notificationDropdown {
    left: 15%;
    transform: translateX(-60%);
    border: 1px solid lightgray;
}

#notificationDropdown.show {
    display: block;
}

/* Avisos del header (pago pendiente + servicio de impresión).
   Un unico contenedor centrado en la barra superior que apila los avisos
   en columna: el de pago pendiente va primero por ser prioritario.
   Antes cada aviso se centraba por separado (position:absolute) y se superponian. */
.header-status {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.25;
    max-width: 60vw;
    /* No bloquea clicks de los menus laterales; los items reactivan el hover/click. */
    pointer-events: none;
}

.header-status-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: normal;
    text-align: center;
    pointer-events: auto;
}

/* En movil (mismo breakpoint que el layout compacto del header) ocultamos por
   completo el aviso de servicio de impresion, icono incluido: solo queda el
   mensaje de pago pendiente. !important para ganarle al style.display inline
   que setea layout.js en el healthcheck. */
@media (max-width: 600px) {
    #lblErrorServicio {
        display: none !important;
    }

    /* Texto oculto (d-none d-sm-inline): solo quedan los iconos, los alineamos en fila. */
    .header-status {
        flex-direction: row;
        gap: 8px;
        max-width: 175px;
    }

    /* Aviso de pago pendiente: en mobile se ve icono + "Pagar". Si no entra, baja de
       linea entero (nunca corta la palabra ni se desborda del navbar). */
    #lblPagoPendiente {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    #lblPagoPendiente a {
        white-space: nowrap;
        font-size: .8125rem;
    }
}

/* Buscador de ayuda (FAB abajo a la derecha). */
.ayuda-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1050;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    background-color: #2c2fa5;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.ayuda-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3); }
.ayuda-panel {
    position: fixed;
    bottom: 88px;
    right: 24px;
    z-index: 1050;
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: 70vh;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ayuda-panel[hidden] { display: none; }
.ayuda-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f4f5f9;
    border-bottom: 1px solid #e5e7ef;
    font-weight: 600;
}
.ayuda-panel-body { padding: 12px 14px; overflow-y: auto; }
.ayuda-resultados { margin-top: 10px; }
.ayuda-card { border: 1px solid #e5e7ef; border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; }
.ayuda-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ayuda-video-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-size: 12px;
    color: #c4302b;
    text-decoration: none;
    border: 1px solid #e3c3c1;
    border-radius: 14px;
    padding: 2px 8px;
    background: #fdf3f2;
}
.ayuda-video-btn:hover { background: #f8e4e3; color: #a32420; text-decoration: none; }
.ayuda-para { color: #555; font-size: 13px; margin: 4px 0; }
.ayuda-donde { font-size: 13px; margin: 4px 0; }
.ayuda-pasos { margin: 6px 0 0 18px; font-size: 13px; }
.ayuda-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ayuda-chip {
    border: 1px solid #cdd2e6;
    background: #f4f5f9;
    color: #2c2fa5;
    border-radius: 14px;
    padding: 2px 10px;
    font-size: 12px;
    cursor: pointer;
}
.ayuda-chip:hover { background: #e6e8f5; }
.ayuda-card mark { background: #fff3a8; padding: 0; }

/* Tour guiado de bienvenida (primer login del administrador). El contenedor #tourBienvenida
   captura los clicks (bloquea la pantalla); el spotlight "recorta" la oscuridad sobre el
   elemento a resaltar; el tooltip lleva el paso y los botones. */
.tour {
    position: fixed;
    inset: 0;
    z-index: 1080;
}
.tour[hidden] { display: none; }
.tour-spotlight {
    position: fixed;
    z-index: 1081;
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(20, 22, 40, 0.6);
    pointer-events: none;
    transition: top 250ms ease, left 250ms ease, width 250ms ease, height 250ms ease;
}
.tour-tooltip {
    position: fixed;
    z-index: 1090;
    width: 320px;
    max-width: calc(100vw - 24px);
    background: #fff;
    color: #1f2333;
    border-radius: 10px;
    padding: 16px 16px 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
}
.tour-tooltip[hidden] { display: none; }
.tour-tooltip::after {
    content: "";
    position: absolute;
    left: var(--tour-arrow-x, 50%);
    margin-left: -8px;
    border: 8px solid transparent;
}
.tour-tooltip.abajo::after { top: -15px; border-bottom-color: #fff; }
.tour-tooltip.arriba::after { bottom: -15px; border-top-color: #fff; }
.tour-paso {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #2c2fa5;
    margin-bottom: 2px;
}
.tour-titulo { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.tour-texto { font-size: 14px; color: #4a4f63; line-height: 1.4; margin-bottom: 14px; }
.tour-acciones { display: flex; align-items: center; justify-content: space-between; }
.tour-acciones-der { display: flex; align-items: center; gap: 8px; }
.tour-saltar {
    border: none;
    background: transparent;
    color: #8a909d;
    font-size: 13px;
    padding: 4px 2px;
    cursor: pointer;
}
.tour-saltar:hover { color: #4a4f63; text-decoration: underline; }

/* Franja de ayuda de pantalla (arriba del contenido). Colapsada por defecto. */
.ayuda-pantalla {
    background: #f4f5f9;
    border: 1px solid #e5e7ef;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 13px;
    color: #555;
}
.ayuda-pantalla[hidden] { display: none; }
.ayuda-pantalla-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 8px 12px;
    text-align: left;
    cursor: pointer;
    color: #2c2fa5;
    font-weight: 600;
}
.ayuda-pantalla-icono { font-size: 18px; }
.ayuda-pantalla-count {
    background: #e6e8f5;
    color: #2c2fa5;
    border-radius: 10px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}
.ayuda-pantalla-chevron { margin-left: auto; transition: transform 200ms ease; }
.ayuda-pantalla.abierta .ayuda-pantalla-chevron { transform: rotate(180deg); }
.ayuda-pantalla-body { padding: 8px 12px 10px 12px; border-top: 1px solid #e5e7ef; }
.ayuda-pantalla-body[hidden] { display: none; }
.ayuda-pantalla-resumen { margin: 0 0 8px 0; color: #555; }
.ayuda-pantalla-resumen[hidden] { display: none; }
.ayuda-pantalla-acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.ayuda-pantalla-accion-grupo { display: inline-flex; align-items: center; gap: 4px; }
.ayuda-pantalla-accion {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #cdd2e6;
    background: #fff;
    color: #2c2fa5;
    border-radius: 14px;
    padding: 2px 10px;
    font-size: 12px;
}
.ayuda-pantalla-accion .mdi { font-size: 14px; }
.ayuda-pantalla-video {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #c4302b;
    text-decoration: none;
    white-space: nowrap;
}
.ayuda-pantalla-video:hover { color: #a32420; text-decoration: underline; }

/* En móvil el FAB se achica un poco y se acerca al borde para no tapar contenido. */
@media (max-width: 600px) {
    .ayuda-fab {
        width: 56px;
        height: 56px;
        font-size: 28px;
        bottom: 16px;
        right: 16px;
    }
    .ayuda-panel {
        bottom: 80px;
        right: 16px;
    }
    .tour-tooltip { width: calc(100vw - 24px); }
}
/* ── Lista de impuestos de la compra ──────────────────────────────────────
   Acordeon de "Impuestos, percepciones y retenciones" (pagos a proveedor y
   recepcion de pedido). Se ve como una lista tipo factura: concepto a la
   izquierda, importe a la derecha, todo en el mismo ancho.
   Los labels llevan `no-capitalize` porque sleek.css pasa los labels a
   mayusculas y los textos cortos se leen mejor en sentence case. */
.tabla-impuestos { margin-bottom: 0; }
.tabla-impuestos td {
    padding: .2rem .35rem;
    vertical-align: middle;
    border-top: 0;
}
.tabla-impuestos tr:first-child td { padding-top: 0; }
.tabla-impuestos td.imp-importe { width: 150px; }
.tabla-impuestos .input-group { width: 100%; }
/* El $ (input-group-text) y el input tienen que medir EXACTAMENTE lo mismo:
   si el prepend es mas alto, el input queda pegado arriba y el label del lado
   izquierdo se ve desfasado respecto de su input. */
.tabla-impuestos .input-group-sm .input-group-text,
.tabla-impuestos .input-group-sm .form-control {
    height: 30px;
    padding: 3px 8px;
    font-size: 12px;
    line-height: 22px;
}
/* El label no puede tener margen inferior (Bootstrap se lo pone) ni partirse
   en dos lineas: se queda en una y al medio de la fila, junto a su input. */
.tabla-impuestos label {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 30px;
    white-space: nowrap;
}
/* El encabezado del acordeon lleva un gris leve: se ve que es una barra
   desplegable y separa el bloque de los campos de abajo. */
.acordeon-impuestos { margin: .6rem 0 .9rem; }
.acordeon-impuestos > .card > .card-header {
    background-color: #eef0f4;
    border: 1px solid #dfe3ea;
    border-radius: 4px;
}
.acordeon-impuestos > .card > .card-header .btn-link {
    color: #4a5464;
    font-weight: 600;
}
.acordeon-impuestos > .card > .card-header .btn-link:hover { color: #2c6ecb; }
.acordeon-impuestos > .card > .card-body { border: 1px solid #dfe3ea; border-top: 0; }