/* your styles go here */
@view-transition {
  navigation: auto;
}

::view-transition-group(*) {
  animation-duration: 2s;
}

.btn {
  font-weight: 400;
  border: 1px solid transparent;
  padding: 0.45rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  -webkit-transition: color 0.15s ease-in-out,
    background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
    -webkit-box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
    -webkit-box-shadow 0.15s ease-in-out;
}

.bg-azul-secundario {
  background-color: #456fad !important;
}

.bg-azul {
  background-color: #385a8d !important;
}

.text-naranja {
  color: #ff7f27 !important;
}

.text-azul {
  color: #385a8d !important;
}

.btn-azul {
  color: #385a8d !important;
  background-color: #fff !important;
  border-color: #385a8d !important;
}

.btn-menu {
  width: 35px; /* Puedes ajustar este valor según necesites */
  height: 35px; /* Puedes ajustar este valor según necesites */
  /*display: flex; /* Para centrar el ícono */
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  /* Asegúrate de que tu padding original no interfiera si lo tenías */
  padding: 0; /* Si tenías padding en .btn-azul, podrías querer quitarlo para que width/height sean absolutos */
}

.btn-azul:hover {
  color: #fff !important;
  background-color: #385a8d !important;
  border-color: #fff !important;
}

.btn-whatsapp:hover {
  background-color: #f0fdf4 !important;
  border-color: #25d366 !important;
}

.btn-impresion:hover {
  background-color: #eff6ff !important;
  border-color: #2b7fff !important;
}

nav {
  position: sticky !important;
  top: 0 !important;
}

li {
  list-style: none !important;
}

html,
body {
  font-family: "Roboto Flex", sans-serif !important;
}

.abs-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  border-radius: 35px;
  font-size: 24px;
  line-height: 1.33;
}

.btn-circle {
  width: 30px;
  height: 30px;
  padding: 6px 0px;
  border-radius: 15px;
  text-align: center;
  font-size: 12px;
  line-height: 1.42857;
}

.chart-container-half-doughnut {
  position: relative; /* Importante para que el canvas se posicione correctamente */
  width: 100%; /* O un ancho fijo, según tus necesidades */
  height: 300px; /* <--- DEFINE UNA ALTURA FIJA AQUÍ (o max-height) */
  /* max-height: 400px; */ /* Otra opción si quieres que sea flexible pero con límite */
}

.swal2-actions {
  /* Por defecto, SweetAlert2 usa 'center'.
     Cambiamos a 'space-around' o 'space-evenly' para distribuir el espacio. */
  justify-content: space-evenly !important; /* Prueba con 'space-between' o 'space-around' */
  width: 100% !important; /* Asegura que el contenedor ocupe todo el ancho disponible */
  padding: 0 1em !important; /* Añade un poco de padding horizontal si los botones tocan los bordes */
}

/* Opcional: Si quieres un espacio mínimo fijo entre los botones */
.swal2-confirm,
.swal2-cancel {
  margin: 0 0.5em !important; /* Ajusta este valor para más o menos separación individual */
}

/* Ajustar el tamaño del iframe dentro del modal si es necesario */
.swal2-popup-google-form iframe {
  min-height: 400px !important; /* Asegura una altura mínima si el contenido es variable */
  max-height: 80vh !important; /* Limita la altura máxima a un porcentaje de la ventana */
  overflow-y: auto !important; /* Si el contenido excede la altura, permite desplazamiento dentro del iframe */
}

/* Estilos adicionales si lo deseas */
.swal2-container-google-form {
  z-index: 1060 !important; /* Asegura que el modal esté por encima de otros elementos si hay conflicto */
}

/* Desenfoque en el backdrop de SweetAlert2 */
/* .swal2-backdrop-show {
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  background-color: rgba(0, 0, 0, 0.4) !important;
} */

/*
Desenfoque en el backdrop de SweetAlert2,
PERO solo si NO es una notificación tipo toast.
*/
body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show {
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  background-color: rgba(0, 0, 0, 0.4) !important;
}


/* 1. Contenedor Responsivo para 16:9 (se mantiene igual) */
.video-responsive-container {
  position: relative;
  padding-bottom: 56.25%; /* Altura para mantener la proporción 16:9 */
  padding-top: 25px;
  height: 0;
  overflow: hidden;
}

/* 2. El iframe ocupa todo el contenedor (se mantiene igual) */
.video-responsive-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Opcional: Esto ajusta el contenedor interno para evitar márgenes innecesarios */
/* .swal2-html-container {
    margin: 0 !important;
    padding: 0 !important;
} */

/* Estilo base para el botón con icono (MÁS PEQUEÑO) */
.btn-icono-youtube {
  /* Eliminar estilos de botón predeterminados */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;

  /* Dimensiones del botón contenedor (REDUCIDO) */
  width: 40px;
  height: 40px;

  /* Centrar y estilizar (se mantiene igual) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 25%;
  background-color: #e10000; /* Rojo YouTube */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

/* Estilo para el icono de YouTube dentro del botón (MÁS GRANDE) */
.btn-icono-youtube .fa-youtube {
  color: white;
  /* Aumentamos el tamaño del icono para que ocupe más espacio del botón (40px) */
  font-size: 24px; /* Un buen tamaño para casi llenar un botón de 40x40 */
}

/* Efecto hover (se mantiene igual) */
.btn-icono-youtube:hover {
  background-color: #e60000;
  transform: scale(1.08); /* Ligeramente más grande */
}

/* Estilos de la modal (mantener el 75% de ancho) */
.video-modal-popup {
  max-width: 75vw !important;
  width: 75vw !important;
  min-width: 300px;
}

/* ... (Otros estilos de video-responsive-container se mantienen igual) ... */

/* Nueva version de estilos para botones de Youtube */

.btn-youtube {
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #e10000 !important;
  border-color: #e10000 !important;
  transition: transform 0.2s;
}

.btn-youtube .fa-youtube {
  /* Aumentamos el tamaño del icono para que ocupe más espacio del botón (40px) */
  font-size: 24px; /* Un buen tamaño para casi llenar un botón de 40x40 */
}

.btn-youtube:hover {
  color: #fff !important;
  background-color: #e10000 !important;
  transform: scale(1.08); /* Ligeramente más grande */
}

/* Nuevos estilos vista compras */

.rounded-2xl {
  border-radius: 16px;
  overflow: hidden;
}

/* Clases para la vista de Gestion de Personal */
/* =========================================== */
.badge-soft-primary {
  background-color: rgba(56, 90, 141, 0.15); /* Fondo azul claro */
  color: #007bff !important; /* Texto azul fuerte */
}

.badge-soft-secondary {
  background-color: rgba(108, 117, 125, 0.15); /* Fondo gris claro */
  color: #6c757d !important; /* Texto gris fuerte */
}

.badge-soft-danger {
  background-color: rgba(220, 53, 69, 0.15); /* Fondo rojo claro */
  color: #dc3545; /* Texto rojo fuerte */
}

.badge-soft-success {
  background-color: rgba(40, 167, 69, 0.15); /* Fondo verde claro */
  color: #28a745; /* Texto rojo fuerte */
}

.badge-soft-warning {
  background-color: rgba(255, 193, 7, 0.20); /* Fondo amarillo claro */
  color: #d39e00; /* Texto amarillo fuerte */
}
/* =========================================== */

/* Redondear el input de búsqueda de DataTables */
.dataTables_filter input {
  border-radius: 50rem !important; /* Forma de píldora */
  padding-left: 15px !important;   /* Espacio a la izquierda */
  padding-right: 15px !important;  /* Espacio a la derecha */
}

/* Define una altura obligatoria a los botones*/
.btn-altura {
  height: 41px;
}

/* Altura uniforme para formularios pequeños (Ej: Fichaje Manual) */
.altura-sm-form {
    height: 31px !important;
}

/* Cambio de tamaño suavemente en 0.2 segundos */
.btn-hover-animado i,
.btn-hover-animado svg {
  transition: transform 0.2s ease-in-out;
}
    
/* El icono crece un 10% al pasar mouse (1.10) */
.btn-hover-animado:hover i,
.btn-hover-animado:hover svg {
  transform: scale(1.10);
}

/* Clases para la personalización de SweetAlert */
/* =========================================== */
.swal2-popup {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.swal2-html-container {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
/* =========================================== */