.btn-swsatB1A {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    box-shadow: none;
}

.btn-swsatB1A:hover {
    color: #fff;
    background-color: #0056b3;
    border-color: #004f9a;
}

/*si es celular le pongo un padding booton de 10px a .dt-buttons*/
@media (max-width: 767px) {
    .dt-buttons {
        padding: 10px;
    }

    .export_dataDiv {
        padding-top: 20px;
    }
}

/* Estilos para el loader */
/* Contenedor que cubre toda la pantalla */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* Esto es intencional para cubrir toda la pantalla */
    height: 100%;
    background-color: #fff; /* O un color semitransparente */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Spinner más compacto */
.spinner {
    border: 2px solid #f3f3f3; /* Reduce el grosor */
    border-top: 2px solid #3498db; /* Color para el borde superior */
    border-radius: 50%;
    width: 40px; /* Reducido de 60px a 40px */
    height: 40px; /* Reducido de 60px a 40px */
    animation: spin 1s linear infinite;
}

.spinner-svg {
    width: 50px;
    height: 50px;
    fill: #3498db; /* Cambia color fácilmente */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.modal-dialog {
    margin: auto !important; /* Centrar el modal */
}


.subscription-container {
    display: flex;
    justify-content: center;
    align-items: center;
    /*height: 100vh; *//* Ajusta la altura según sea necesario */
    background-color: #f4f4f4;
    padding: 20px;
}

.subscription-card {
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 400px;
}

.subscription-card h2 {
    font-size: 22px;
    color: #333;
    margin-bottom: 10px;
}

.subscription-card p {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
}

.subscription-button {
    display: inline-block;
    text-decoration: none;
    background: #007bff;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    transition: background 0.3s ease-in-out;
}

.subscription-button:hover {
    background: #0056b3;
    color: white;
}

/*.login-box {
    margin-top: 5%;
}*/
@media (max-width: 576px) {
    .login-box, .register-box {
        margin: 20px;
        width: unset;
    }

    .login-box {
        margin-top: 15%;
    }
}

.card_login {
    margin-bottom: unset !important;
}

.login-logo, .register-logo {
    margin-bottom: auto;
}

/* Opcionalmente, puedes centrar la paginación o ajustar márgenes en pantallas pequeñas */
@media (max-width: 768px) {
    /*.dataTables_wrapper .dataTables_paginate {
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }*/
    .dataTables_wrapper .dataTables_info {
        white-space: nowrap; /* Evita que los botones se vayan a otra línea */
        overflow-x: auto; /* Permite hacer scroll horizontal solo en la paginación si fuera necesario */
    }

    .dataTables_wrapper .dataTables_paginate {
        white-space: nowrap; /* Evita que los botones se vayan a otra línea */
        overflow-x: auto; /* Permite hacer scroll horizontal solo en la paginación si fuera necesario */
    }

}

.circle {
    width: 20px;
    height: 20px;
    background-color: #000;
    border-radius: 50%;
    display: inline-block;
}

.line {
    border-top: 2px solid #000;
    margin: 10px 0;
}

.social-logo {
    width: 20px;
    height: 20px;
    display: inline-block;
}

.social-button {
    background-color: #fff; /* Botón blanco */
    color: #000; /* Texto negro */
    transition: background-color 0.2s ease; /* Animación suave */
}

.social-button:hover {
    background-color: #f0f0f0; /* Color de fondo en hover */
    border-color: #ccc; /* Ajusta el color de borde si quieres */
}

/* CSS */
/*.btn-gradient {
    border: none;
    color: #fff;
    !* Gradiente que se extiende más allá del botón para permitir el movimiento *!
    background: linear-gradient(270deg, #007bff, #00c6ff, #007bff);
    background-size: 400% 400%;
    !* Animación continua del gradiente *!
    animation: gradientAnimation 10s ease infinite;
    transition: all 0.3s ease;
}*/
.btn-gradient {
    border: none;
    color: #fff;
    background: linear-gradient(270deg, #3B82F6, #81E6D9, #3B82F6);
    background-size: 400% 400%;
    animation: gradientAnimation 10s ease infinite;
    transition: all 0.3s ease;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

.box_login {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

/* Definición de la animación para el botón */
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.btn-gradient:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); /* Sombra azul suave */
}

/*.body_background {
    background: linear-gradient(135deg, #D9AFD9 0%, #97D9E1 100%);


}*/
/*.body_background {
    !*background: linear-gradient(135deg, #093028 0%, #237a57 100%);
    background: linear-gradient(135deg, #0f2027 0%, #2c5364 100%);
    background: linear-gradient(135deg, #2C3E50 0%, #4CA1AF 100%);*!
    position: relative;
    margin: 0;
    padding: 0;
}*/
/*YA SIRVE*/
/*@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.body_background {
    position: relative;
    !* Gradiente con 4 paradas:
       1) #093028 (verde muy oscuro)
       2) #237a57 (verde más claro)
       3) #2C3E50 (azul/teal oscuro)
       4) #4CA1AF (teal claro)
    *!
    background: linear-gradient(
        -45deg,
        #093028,
        #237a57,
        #2C3E50,
        #4CA1AF
    );
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
}

.body_background::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    !* Overlay blanco semitransparente para atenuar un poco el color *!
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}*/

/*.body_background {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
}
.body_background {
    background: linear-gradient(-45deg, #6B46C1, #ED64A6, #4C51BF, #9F7AEA);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
}
.body_background {
    background: linear-gradient(-45deg, #2C5282, #4FD1C5, #3B82F6, #81E6D9);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
}
.body_background {
    background: linear-gradient(-45deg, #6B7280, #9F7AEA, #A78BFA, #D1B2FF);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
    height: 100vh;
}*/
.body_background {
    background: linear-gradient(-45deg, #2C5282, #4FD1C5, #3B82F6, #81E6D9);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
    height: 100vh;
}

.image-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Imagen con transparencia o shapes que no cubran todo */
    background: url('../img/svg/fondo.png') no-repeat center;
    background-size: cover;
    /*opacity: 0.8;*/ /* ejemplo de opacidad */
    z-index: 0;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


#particles-js-container-login {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* O el valor que prefieras, pero debajo del contenido */
}

.ui-autocomplete {
    z-index: 10000 !important;
}

.img-circular-crop {
    object-fit: cover; /* Redimensiona la imagen para mantener su aspect ratio mientras llena el contenedor. El exceso se recorta. */
    aspect-ratio: 1 / 1; /* Fuerza a que el elemento tenga una relación de aspecto cuadrada (ancho = alto) */
    /* Nota: La clase w-25 definirá el ancho, y aspect-ratio ajustará la altura para que sea igual. */
}

/* Evita que las columnas usen widths fijos en flex y desborden */
/*.fm-info-block {
    flex-wrap: wrap !important;
    row-gap: 0.5rem;
}

.fm-info-block .col-auto,
.fm-info-block .col-4 {
    flex: 1 1 100%;
    max-width: 100%;
    text-align: left;
}*/

/* Para pantallas medianas en adelante, restablece */
/*@media (min-width: 768px) {
    .fm-info-block {
        flex-wrap: nowrap !important;
    }

    .fm-info-block .col-auto,
    .fm-info-block .col-4 {
        flex: initial;
        max-width: none;
    }

    .fm-info-block .col-4 {
        text-align: center;
    }

    .fm-info-block .col-auto.text-right {
        text-align: right !important;
    }

    .fm-notification {
        right: -2rem !important;
    }
}

@media (max-width: 767.98px) {
    .fm-notification {
        right: -2rem !important;
    }
}

!* Si aún hay scroll horizontal, lo forzamos a ocultarse *!
#fm {
    overflow-x: hidden;
}*/


@media (max-width: 768px) {
    .export_data_contabilidad {
        margin-top: 1rem; /* o 10px, como prefieras */
    }
}


.facturas-table {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    background: #fff;
}

.facturas-table thead {
    background: #f9fafb;
    border-bottom: 1px solid #e0e0e0;
}

.facturas-table thead th {
    padding: 12px 8px;
    font-weight: 600;
    text-align: left;
    color: #374151;
}

.facturas-table tbody tr {
    border-bottom: 1px solid #e5e7eb;
    transition: background 0.2s;
}

.facturas-table tbody tr:hover {
    background: #f3f4f6;
}

.facturas-table tbody td {
    padding: 10px 8px;
    color: #4b5563;
    font-size: 14px;
}


/* Estilos para panel */
.btn-reset {
    background: none; border: 0; padding: 0; font: inherit; color: inherit;
}

.quick-card{
    position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    /*gap:.7rem;*/
    width:100%;
    min-height:85px;
    border-radius:1rem;
    background-color: #ffffff !important; /* Directo sin variables */
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    border: 1px solid rgba(0,0,0,.06);
    text-decoration:none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.quick-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
    border-color: rgba(0,0,0,.10);
}
.quick-card:focus-visible{
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
}

.quick-icon {
    font-size: 32px; /* mismo tamaño en todos */
    min-width: 32px;
    min-height: 32px;
    text-align: center;
    line-height: 1;
}


.quick-title{
    font-weight:600;
    letter-spacing:.2px;
    color:#0b5ed7;
}

.quick-card .stretched-link{
    position:absolute; inset:0;
}

@media (prefers-color-scheme: dark){
    :root{ --qa-bg: #0f172a; }
    .quick-card{
        border-color: rgba(255,255,255,.06);
        box-shadow: 0 2px 10px rgba(0,0,0,.35);
    }
    .quick-card:hover{
        box-shadow: 0 12px 28px rgba(0,0,0,.5);
        border-color: rgba(255,255,255,.12);
    }
    .quick-title{ color:#60a5fa; }
}


.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background-color: #007bff; /* Color azul primario de Bootstrap/AdminLTE */
    color: #ffffff; /* Texto en color blanco */
}


/* Estilos para la validación visual del formulario */

.form_block {
    border-left: 5px solid #e9ecef; /* Borde gris por defecto */
    padding-left: 15px;
    transition: border-color 0.3s ease-in-out; /* Transición suave */
    margin-left: -15px; /* Compensa el padding */
    margin-bottom: 1.5rem !important; /* Asegura un espaciado consistente */
}

.form_block.is-valid {
    border-left-color: #198754; /* Borde verde de Bootstrap para 'success' */
}

.shepherd-custom {
    max-width: 400px;
    border-radius: .5rem;
}
.shepherd-header {
    background-color: #0d6efd; /* Azul primario de Bootstrap */
    color: white;
    padding: 1rem 1.5rem;
}
.shepherd-title {
    font-weight: 600;
    font-size: 1.2rem;
}
.shepherd-text {
    font-size: 1rem;
    line-height: 1.6;
    padding: 1rem 1.5rem;
}
.shepherd-button {
    padding: .5rem 1.5rem;
    border-radius: .25rem;
}
.shepherd-modal-overlay {
    /* Un z-index alto para cubrir toda la página.
       Bootstrap usa 1050 para sus modales, así que usamos un valor similar. */
    z-index: 1040;
}

/*
==============================================
CSS para bloquear la página DURANTE EL TOUR DE PAQUETES
==============================================
*/

/* Esta regla ahora solo se aplica si el body tiene la clase 'paquetes-page' Y 'shepherd-is-active' */
body.paquetes-page.shepherd-is-active .wrapper {
    pointer-events: none;
}

/* Esta regla se mantiene igual para asegurar que el pop-up del tour siempre funcione */
.shepherd-element {
    pointer-events: auto;
}

/* La clase 'driver-active' se añade al <body> automáticamente */
body.driver-active {
    /* Evita el scroll del fondo mientras el tour está activo */
    overflow: hidden;
}
body.paquetes-page.driver-active * {
    pointer-events: none !important;
}

/* Asegura que la capa oscura esté por encima de todo */
.driver-popover-overlay {
    z-index: 1040;
}

body.paquetes-page.driver-active .driver-popover,
body.paquetes-page.driver-active .driver-highlighted-element,
body.paquetes-page.driver-active .driver-popover-navigation-btns,
body.paquetes-page.driver-active .driver-popover-close-btn,
body.paquetes-page.driver-active .driver-popover * {
    pointer-events: auto !important;
}

body.driver-active .enviar-peticion-solicitudes {
    pointer-events: none !important;
}

/* Asegura que el título siempre esté debajo de la animación */
.swal-custom-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Estilos para la animación de desvanecimiento (fade) de las frases */
#swal-frase {
    opacity: 0;
    transition: opacity 1s ease-in-out;
    min-height: 40px; /* Evita que el modal salte al cambiar frases de diferente longitud */
    display: flex;
    align-items: center;
    justify-content: center;
}

#swal-frase.swal-frase-visible {
    opacity: 1;
}

.card {
    border: 1px solid #dee2e6; /* gris claro */
    border-radius: 0.75rem;   /* redondeado similar */
    box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* sombra suave */
    background-color: #fff;
    /*padding: 1rem;*/
}

.company-selector-pill.active small {
    color: #fff !important; /* Usamos !important para anular "text-muted" */
}