.btn-gradient {
    background: linear-gradient(45deg, #3779be, #143172);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 2px;
    border-radius: 10px;
    transition: 0.3s;
}
.btn-gradient:hover {
    background: linear-gradient(45deg, #0056b3, #520dc2);
}

/* Boton graditente succes */
.btn-gradient-success {
    background: linear-gradient(45deg, #25f59b, #15B392);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 2px;
    border-radius: 10px;
    transition: 0.3s;
}
.btn-gradient-success:hover {
    background: linear-gradient(45deg, #15B392, #25f59b);
}

/* Boton graditente danger */
.btn-gradient-danger {
    background: linear-gradient(45deg, #f80146, #8f0033);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 2px;
    border-radius: 10px;
    transition: 0.3s;
}
.btn-gradient-danger:hover {
    background: linear-gradient(45deg, #8f0033, #f80146);
}

/* Boton graditente info */
.btn-gradient-info {
    background: linear-gradient(45deg, #07afd3, #1263b0);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 2px;
    border-radius: 10px;
    transition: 0.3s;
}
.btn-gradient-info:hover {
    background: linear-gradient(45deg, #1263b0, #07afd3);
}

/* Boton graditente warning */
.btn-gradient-warning {
    background: linear-gradient(45deg, #faf171, #f5be0a);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 2px;
    border-radius: 10px;
    transition: 0.3s;
}
.btn-gradient-warning:hover {
    background: linear-gradient(45deg, #f5be0a, #faf171);
}

/* Boton graditente purple */
.btn-gradient-purple {
    background: linear-gradient(45deg, #9993f0, #5650A8);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 2px;
    border-radius: 10px;
    transition: 0.3s;
}
.btn-gradient-purple:hover {
    background: linear-gradient(45deg, #5650A8, #9993f0);
}

.input-custom {
    width: 100%;
    border-radius: 6px;
    border: 1px solid #d1d5db; /* gris claro */
    padding: 6px 12px;
    font-size: 0.9rem;
    background-color: #fff;
    transition: all 0.25s ease-in-out;
    box-sizing: border-box; /* ✅ importante para que ocupe todo el contenedor */
}

/* Efecto al enfocar */
.input-custom:focus {
    border-color: #2563eb; /* azul moderno */
    box-shadow: 0 0 6px rgba(37, 99, 235, 0.35);
    outline: none;
}

/* Para pantallas pequeñas */
@media (max-width: 576px) {
    .input-custom {
        font-size: 0.85rem;
        padding: 5px 10px;
        width: 100%; /* asegura que ocupe todo el contenedor */
    }
}



/* .input-custom {
    border-radius: 10px;
    border: 0.8px solid #edeef0;
    padding: 8px 13px;
    transition: all 0.3s ease-in-out;
}

.input-custom:focus {
    border-color: #2d67b4;
    box-shadow: 0 0 8px rgba(129, 66, 231, 0.5);
    outline: none;
} */

.custom-card {
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}
.custom-card:hover {
    transform: scale(1.05);
}

/* Versión móvil: quitar colores e íconos */


.analisis-card {
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

/* Estilos para card primary */
.custom-card_primary {
    background: linear-gradient(135deg, #4993e2, #073b75);
    color: white;
    border-radius: 15px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.custom-card_primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.icon-circle_primary {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.icon-circle_primary i {
    color: rgb(235, 233, 233);
}

/* Estilos para card success */
.custom-card_success {
    background: linear-gradient(135deg, #36c962, #077910);
    color: white;
    border-radius: 15px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.custom-card_success:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.icon-circle_success {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.icon-circle_success i {
    color: rgb(235, 233, 233);
}

/* Estilos para card warning */
.custom-card_warning {
    background: linear-gradient(135deg, #ecaa2f, #d3750a);
    color: white;
    border-radius: 15px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.custom-card_warning:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.icon-circle_warning {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.icon-circle_warning i {
    color: rgb(235, 233, 233);
}

/* Estilos para card info */
.custom-card_info {
    background: linear-gradient(135deg, #4ec0f5, #258cd1);
    color: white;
    border-radius: 15px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.custom-card_info:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.icon-circle_info {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.icon-circle_info i {
    color: rgb(235, 233, 233);
}

/* Estilos para botones */
/* Estilo general para botones con gradientes */

/* Estilo general para los botones */

/* Botón de tipo registrar con gradiente */
button.new-btn {
    background: linear-gradient(45deg, #a1e41d, #32cd32); /* Gradiente verde */
}

button.new-btn:hover {
    background: linear-gradient(45deg, #32cd32, #a1e41d);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Botón de tipo cancelar con gradiente */
button.cancel-btn {
    background: linear-gradient(45deg, #d60c60, #c40f03); /* Gradiente verde */
}

button.cancel-btn:hover {
    background: linear-gradient(45deg, #c40f03, #d60c60);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}


/* Botón de tipo Editar con gradiente */
button.edit-btn {
    background: linear-gradient(45deg, #28a745, #218838); /* Gradiente verde */
}

button.edit-btn:hover {
    background: linear-gradient(45deg, #218838, #28a745);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Botón de tipo Eliminar con gradiente */
button.delete-btn {
    background: linear-gradient(45deg, #dc3545, #c82333); /* Gradiente rojo */
}

button.delete-btn:hover {
    background: linear-gradient(45deg, #c82333, #dc3545);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Botón de tipo Ver con gradiente */
button.view-btn {
    background: linear-gradient(45deg, #17a2b8, #117a8b); /* Gradiente azul */
}

button.view-btn:hover {
    background: linear-gradient(45deg, #117a8b, #17a2b8);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Funciones para agrupar datos en una misma celda de un datatable */
.nombre-container-celda {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* Asegura que el contenedor ocupe toda la altura de la celda */
}
.superior-celda {
    font-weight: bold;
    text-align: center;
}
.inferior-celda {
    text-align: center;
}

/* Datos para cambiar el tamaño de la imagen */
.custom-img {
    max-height: 200px; /* Ajusta según necesites */
    object-fit: cover; /* Recorta la imagen sin deformarla */
    width: 100%; /* Asegura que use todo el ancho disponible */
}

.card-separator {
    margin-bottom: 10px; /* Ajusta el valor según sea necesario */
}
/* Datos para precios del carrito pedido */
.precio-regular {
    font-size: 1.0rem;
    color: #007bff; /* Color azul */
    font-weight: normal;
}

.precio-mayor {
    font-size: 1.0rem;
    color: #28a745; /* Color verde */
    font-weight: normal;
}

.stock-base {
    font-size: 1.0rem;
    color: #0951be; /* Color verde */
    font-weight: bold;
    flex: 1;
    min-width: 40%;
}

.card-text {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos bajen de línea */
    justify-content: space-between; /* Distribuye los elementos */
}

/* Iniciar la camara para poder vender */
 /* Estilos del modal */
 .modal_c {
    display: none;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-content_c {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    position: relative;
}
.close_c {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
}
#scanner-container_c {
    width: 100%;
    display: none;
}
video {
    width: 100%;
}

/* Mejorar el diseño de las cuentas por cobrar */
/* Estilos de las tarjetas */
.custom-card {
    border-radius: 15px;
    padding: 20px;
    color: white;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.5s ease-out;
}

/* Efecto de iluminación al pasar el mouse */
.custom-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.3);
}

/* Brillo dinámico en hover */
.custom-card::after {
    content: "";
    position: absolute;
    top: -20%;
    left: -20%;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 10%, transparent 70%);
    transform: scale(0);
    transition: transform 0.5s ease;
}

.custom-card:hover::after {
    transform: scale(1.2);
}

/* Estilo del icono */
.custom-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.custom-icon i {
    font-size: 24px;
}

/* Mejoras en los textos */
.custom-card h3 {
    font-size: 1rem;
}

.custom-card p {
    font-size: 1rem;
    opacity: 0.9;
}

/* Animación de entrada */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animación de conteo progresivo */
@keyframes counter {
    from {
        transform: scale(0.8);
        opacity: 0.5;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}


.firma_pedido {
    margin-top: 40px;
    padding-top: 5px;
    border-top: 1px solid #000;
    width: 60%;
    margin-left: auto;
    font-weight: bold;
}

#mapa_leaflet_ver {
    width: 100%;
    height: 400px; /* Ajusta el tamaño del mapa */
}

#mapa_leaflet {
    height: 400px;
    width: 100%;
}

.total-destacado {
  color: #003366;
  font-size: 20px;
  font-weight: bold;
}

.bg-mi-secundario {
  background-color: #F2F5F7;
}

.bg-mi-marino {
  background-color: #003366;
}


.text-marino {
    color: #003366;
}

.text-stock {
    color: #d35400;
    font-weight: bold;
    font-size: 12px;
}

.text-azulito {
    color: #153b61;
    font-weight: bold;
    font-size: 12px;
}

/* style para tabla de movimientos contables */
tfoot td span {
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  tfoot td span {
    display: block;
    text-align: right;
    font-size: 0.85rem;
  }

  tfoot td {
    padding: 4px 6px !important;
  }
}

/* Por defecto: menú alineado a la derecha con ancho automático */
.dropdown-menu.alinea-derecha {
  min-width: 180px;
  max-width: 300px;
  word-wrap: break-word;
}

/* En pantallas pequeñas (móviles) que el menú ocupe todo el ancho */
@media (max-width: 767.98px) {
  .dropdown-menu.alinea-derecha  {
    position: static !important; /* Quitar posicionamiento absoluto para que fluya en el layout */
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box;
    border-radius: 0; /* Opcional: bordes rectos en móvil */
  }
  /* Opcional: para que el botón también ocupe todo el ancho */
  .dropdown > .btn {
    width: 100%;
  }
}

.img-thumbnail-pedido {
  max-width: 100%;
  height: auto;
}

.btn-cantidad-pedi {
    background-color: #003366 !important;
    color: #fff !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 5px !important;
    border: none !important;
    min-width: 34px !important; /* evita que Bootstrap lo estire */
    max-width: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
}
.btn-cantidad-pedi i {
    font-size: 14px !important;
    line-height: 0 !important;
}

.detalle-btns {
    display: flex;
    justify-content: flex-end; /* alineados a la derecha */
    gap: 8px; /* separa los botones */
}
.detalle-btns .btn {
    padding: 4px 8px;
    min-width: auto; /* evita que btn-sm fuerce ancho */
}




.btn-eliminar-redondo {
  background-color: #d60606; /* guindo oscuro */
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease;
}

.btn-eliminar-redondo:hover {
  background-color: #a00000; /* más claro en hover */
  color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.leaflet-pane {
  z-index: 0 !important;
}



/* Css para cuentas por cobrar */

.ticket_pedi {
    width: 320px;   /* ancho fijo estilo ticket */
    margin: auto;
    font-size: 12px;
}

@media screen and (max-width: 600px) {
    .ticket_pedi {
        width: 100% !important;  /* ocupa todo el ancho en celular */
        font-size: 14px;         /* un poco más grande para mejor lectura */
    }
    body {
        overflow-y: auto;  /* permitir scroll si el ticket es largo */
    }
}


/* Botón redondo */
.btn-delete-rrhh {
    border-radius: 50%;         /* Hace el botón circular */
    width: 40px;                /* Tamaño fijo (puedes ajustar) */
    height: 40px;               /* Igual que ancho para ser perfectamente redondo */
    padding: 0;                 /* Sin padding */
    display: flex;
    align-items: center;
    justify-content: center;    /* Centra el ícono */
    font-size: 0.8rem;
    transition: all 0.25s ease-in-out;
}

/* Efecto hover */
.btn-delete-rrhh:hover {
    transform: scale(1.1);
}

/* Responsive: en móvil agrandamos un poco si se desea */
@media (max-width: 576px) {
    .btn-delete-rrhh {
        width: 35px;
        height: 35px;
        font-size: 1.1rem;
    }
}

.btn-add-rrhh {
    border-radius: 50%;         /* Hace el botón circular */
    width: 40px;                /* Tamaño fijo (puedes ajustar) */
    height: 40px;               /* Igual que ancho para ser perfectamente redondo */
    padding: 0;                 /* Sin padding */
    display: flex;
    align-items: center;
    justify-content: center;    /* Centra el ícono */
    font-size: 1rem;
    transition: all 0.25s ease-in-out;
}

/* Efecto hover */
.btn-add-rrhh:hover {
    transform: scale(1.1);
}

/* Responsive: en móvil agrandamos un poco si se desea */
@media (max-width: 576px) {
    .btn-add-rrhh {
        width: 35px;
        height: 35px;
        font-size: 1.1rem;
    }
}

.linea-separadora {
    border: none;
    height: 1px;
    background-color: rgb(37, 67, 102); 
    margin-top: 0;   
    margin: 2px;
}

#filtroEstado {
    border-radius: 8px;
    font-size: 15px;
}

/* 🔹 Estilo general compacto */
.swal2-popup.compact-swal {
  padding: 15px 20px !important;
  border-radius: 12px !important;
  font-family: "Poppins", sans-serif;
}

/* 🔸 Botón Confirmar (azul) */
.btn-confirmar {
  background-color: #007bff !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease-in-out;
}
.btn-confirmar:hover {
  background-color: #0056b3 !important;
}

/* 🔸 Botón Guardar monto (verde) */
.btn-guardar {
  background-color: #28a745 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease-in-out;
}
.btn-guardar:hover {
  background-color: #1f7e34 !important;
}

/* 🔸 Botón Cancelar (rojo claro) */
.btn-cancelar {
  background-color: #dc3545 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease-in-out;
}
.btn-cancelar:hover {
  background-color: #b02a37 !important;
}