@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&family=Squada+One&display=swap');

.carousel-item .title {
  font-family: 'Squada One', 'Roboto', sans-serif;
  font-size: 3.5rem;
}

@media (max-width: 768px) { 
  .card {
    margin-bottom: 15px;
  }
 }
 /* Botón del ojo */
 .ojo-boton {
  height: 36px; /* Igual al input */
  width: 36px; /* Botón cuadrado */
  padding: 0; /* Eliminar relleno interno */
  position: absolute; /* Posicionamiento independiente */
  top: 50%; /* Centrado verticalmente */
  right: 11%; /* Separación desde el borde derecho */
  transform: translateY(-50%); /* Ajuste exacto para centrado */
}
.ojo-boton-small {
  height: 34px; /* Igual al input */
  width: 34px; /* Botón cuadrado */
  padding: 0 !important; /* Eliminar relleno interno */
  position: absolute; /* Posicionamiento independiente */
  top: 50%; /* Centrado verticalmente */
  right: 11%; /* Separación desde el borde derecho */
  transform: translateY(-50%); /* Ajuste exacto para centrado */
}
/* Input */
.form-control {
  padding-right: 50px; /* Espacio reservado para el botón del ojo */
  height: 38px; /* Fijar altura para evitar variaciones */
  width: 80%; /* Tamaño ajustado */
  display: block; /* Asegurar que no sea inline */
  margin-left: auto;
  margin-right: auto; /* Centrar en el contenedor */
}

/* Mensaje de error */
.text-danger {
  display: block; /* Siempre debajo del input */
  margin-top: 5px; /* Espaciado debajo del input */
  font-size: 0.875rem; /* Tamaño discreto */
  color: #dc3545; /* Rojo estándar de Bootstrap */
}

/* Contenedor del input y ojo */
.position-relative {
  /* height: 38px; /* Garantizar altura fija para estabilidad */
  height: 100%; /* Asegurar que ocupe todo el espacio */
}
/* Estilos compactos para los inputs dentro del modal de edición */
#editarUsuarioModal input {
  padding: 0.25rem 0.5rem; /* Espaciado interno reducido */
  font-size: 0.875rem; /* Tamaño de fuente reducido */
  height: auto; /* Altura proporcional al contenido */
}

/* Estilos compactos para los botones dentro del modal de edición */
#editarUsuarioModal .btn {
  padding: 0.375rem 0.75rem; /* Espaciado interno reducido */
  font-size: 0.875rem; /* Tamaño de fuente reducido */
}

/* Estilo adicional: Ajustar el checkbox */
#editarUsuarioModal .form-check-label {
  font-size: 0.875rem; /* Tamaño de fuente compacto */
}
/* Ajustar el tamaño de los botones dentro del modal de renovación de sesión */
#modalRenovarSesion .btn {
  min-width: 120px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0; /* Asegura que no haya desplazamientos no deseados */
}
/* Estilo adicional: Ajustar el tamaño de los botones dentro del modal de registro */
#modalRenovarSesion .modal-footer {
  display: flex;
  align-items: center; /* Asegura alineación vertical */
  justify-content: center; /* Mantiene los botones juntos */
  gap: 10px; /* Pequeño espacio entre los botones */
}
/* Opcional: Reducir el tamaño del contenedor del modal */
#editarUsuarioModal .modal-dialog {
  max-width: 500px; /* Limitar el ancho del modal */
  margin: 1.5rem auto; /* Espaciado superior e inferior */
}
#modalRegistro .btn-primary {
  width: 80%; /* Igual que los inputs */
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
fieldset {
  min-height: 120px; /* Asegura que tenga un mínimo de altura */
  margin-top: -10px; /* Mayor espacio en la parte superior para que "legend" quede dentro */
  padding: 30px 15px 15px; /* Mayor espacio arriba */
  /* border: 2px solid transparent; */
  border: 2px solid #007bff;
  border-radius: 8px;
  margin: 20px auto; /* Centrar el fieldset en el formulario */
  background-color: #f8f9fa;
  width: 100%; /* Reducir ancho para que no ocupe todo el formulario */
  position: relative;
}

legend {
  width: max-content; /* Solo ocupará el espacio del texto */
  font-weight: bold;
  color: #007bff;
  padding: 6px 15px;
  background-color: transparent;
  border: none;
  border-radius: 4px;
  position: absolute;
  top: 0px; /* Aumentar separación */
  left: 5px;
  font-size: 16px;
}

.legend-center {
  left: 50%;
  transform: translateX(-50%); /* Centrar el título */
}

.modal-body {
  padding-top: 10px; /* Menos espacio entre la línea y los grupos */
}
.modal-footer {
  display: flex;
  justify-content: center; /* Centra los botones dentro del footer */
  align-items: center; /* Asegura que los botones estén alineados verticalmente */
  gap: 12px; /* Espaciado uniforme entre los botones */
}

input[type="datetime-local"] {
  /* padding-right: 10px; /* Más espacio a la derecha para evitar que el icono se superponga */
  width: 100%; /* Ajuste automático del ancho */
  appearance: none; /* Evita estilos predeterminados en algunos navegadores */
}
.btn-primary2 {
  margin-top: 12px;
  width: 80%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  
  /* Recuperar apariencia de botón */
  background-color: #007bff; /* Azul predeterminado */
  color: white; /* Texto blanco */
  border: 1px solid #007bff; /* Borde azul */
  padding: 10px; /* Ajuste de espacio interno */
  font-size: 16px; /* Tamaño uniforme */
  text-align: center; /* Asegurar que el texto esté centrado */
  cursor: pointer; /* Mostrar que es clickeable */
  border-radius: 5px; /* Bordes redondeados como los botones Bootstrap */
  transition: background-color 0.3s ease-in-out; /* Efecto suave */
}
.btn-primary2:hover {
  background-color: #0056b3; /* Azul más oscuro */
  color: white; /* Mantener el texto blanco */
  border-color: #0056b3; /* Ajustar borde */
}
.form-group label {
  display: block;
  width: 80%; /* Igual que los inputs */
  margin-left: auto;
  margin-right: auto; /* Centrar en el contenedor */
  text-align: left; /* Mantener la alineación a la izquierda */
}
.bg-light {
  background-color: #E9ECEF !important; /* Puedes cambiarlo por cualquier otro color */
  padding: 20px; /* Reducir altura */
  max-width: 80%; /* Limitar el ancho */
  margin: auto; /* Centrar */
}

.btn-primary, .btn-success {
  width: auto; /* Ajuste dinámico al texto */
  min-width: 100px; /* Evitar que sean demasiado pequeños */
  height: 40px; /* Asegurar que ambos tengan la misma altura */
  padding: 5px 10px; /* Ajuste del espaciado interno */
  font-size: 16px; /* Tamaño de letra uniforme */
  margin-top: 10px; /* Separación uniforme */
}

.navbar.fixed-top { 
  top: -10px; /* Desplaza un poco hacia arriba antes de fijarse */
  transition: all 0.3s ease-in-out;
}
input[readonly] {
  background-color: #f8f9fa; /* Color tenue similar a Bootstrap */
  border: 1px solid #ced4da; /* Mantiene el borde definido */
  cursor: not-allowed; /* Indica que no se puede modificar */
}

.form-check {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Alinea con los inputs */
  width: 100%; /* Mantiene la misma proporción */
  padding-left: 12px; /* Ajuste fino para mejorar la alineación */
  gap: 10px; /* Espacio entre checkbox y label */
  margin-bottom: 4px !important; /* Reduce el espacio con el siguiente input */
}
.form-check-input {
  width: 18px;
  height: 18px;
  cursor: pointer;
  appearance: auto; /* Mantiene el diseño estándar */
  margin-left: 36px !important; /* Asegura que no haya desplazamiento */
  padding: 12x !important;
}

.form-check-label {
  flex-grow: 1; /* Asegura que ocupe el espacio correcto */
  font-size: 16px;
  line-height: normal; /* Corrige altura */
  margin-top: 2px; /* Ajuste fino para que no quede desfasado */
}
#camposContraseña {
  transition: all 0.3s ease-in-out; /* Suaviza el cambio */
}
.input-password {
  height: 38px !important; /* Define una altura uniforme */
}

.btn-guardar,
.btn-cancelar {
    min-width: 120px !important; /* Asegura que ambos tengan el mismo ancho mínimo */
    padding: 8px 16px; /* Uniforma el espacio interno */
}
.modal-footer button {
  min-width: 120px !important; /* Asegura que ambos botones tengan el mismo ancho */
}

#guardarCambiosUsuario,
#cancelarEditarUsuario {
    height: 34.6px !important; /* Igualar la altura del botón "Guardar" con "Cancelar" */
    display: flex;
    align-items: center; /* Centra el contenido del botón */
    justify-content: center; /* Asegura alineación del texto */
    margin-top: 0 !important;
}
#calendar {
  width: 100%;
  max-width: 1200px;
  margin: 20px auto;
  padding: 15px;
  box-sizing: border-box;
}

.fc-disabled {
  background-color: #f0f0f0;
  color: #ccc;
  cursor: not-allowed;
  pointer-events: none; /* Asegura que la propiedad se aplique */
}

/* Estilo para el calendario Centrar horizontalmente y evitar saltos de línea para "Todo el día" */
    
.fc-timegrid-axis-frame.fc-scrollgrid-shrink-frame {
  text-align: center !important; /* Forzar el centrado */
 
}

label {
  text-align: left; /* Asegura alineación de los títulos */
  display: block;
  font-weight: bold;
}
#modalGestionarEvento .form-control {
  width: 100%; /* Ajuste exclusivo para este modal */
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
  padding-left: 5px;  /* Define el padding izquierdo */
  padding-right: 5px; /* Define el padding derecho */
  /* padding-top: 8px; */
  /* padding-bottom: 8px; */
}
#modalGestionarEvento label {
  text-align: left; /* Asegurar alineación dentro del modal */
}
#modalGestionarEvento .modal-content {
  font-size: 12px !important; /* Ajusta el tamaño de fuente en todo el modal */
}
#modalGestionarEvento .form-control {
  font-size: 12px !important;
}

#modalGestionarEvento legend, 
#modalGestionarEvento label, 
#modalGestionarEvento button {
  font-size: 12px !important;
}
#modalGestionarEvento select {
  font-size: 12px !important; /* Ajusta el tamaño del texto dentro de los combobox */
}

#modalGestionarEvento .form-control,
#modalGestionarEvento .form-select {
  min-height: 36px; /* Ajusta el alto para que sean iguales */
}

#modalGestionarEvento .btn-secondary {
  width: auto; /* Ajuste dinámico al texto */
  min-width: 100px; /* Evitar que sean demasiado pequeños */
  height: 40px; /* Asegurar altura uniforme */
  padding: 5px 10px; /* Espaciado interno ajustado */
  font-size: 12px !important; /* Tamaño de fuente igual a los otros botones */
  margin-top: 10px; /* Separación uniforme */
}
#modalGestionarEvento .btn-warning {
  width: auto; /* Ajuste dinámico al texto */
  min-width: 100px; /* Evitar que sean demasiado pequeños */
  height: 40px; /* Asegurar altura uniforme */
  padding: 5px 10px; /* Espaciado interno ajustado */
  font-size: 12px !important; /* Tamaño de fuente igual a los otros botones */
  margin-top: 10px; /* Separación uniforme */
}
#btnGuardarAgenda:disabled, #btnActualizarAgenda:disabled {
    cursor: not-allowed; /*  Muestra el icono de bloqueo */
    opacity: 0.5; /*  Hace que el botón se vea deshabilitado */
    pointer-events: none; /*  Evita clics en el botón */
}
#modalGestionarEvento .row {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos se ajusten mejor */
  align-items: center; /* Asegura que los controles estén alineados correctamente */
}
@media (max-width: 992px) {
  #modalGestionarEvento .row .col-md-4 {
    width: 50%; /* En tablets, usa dos columnas en lugar de tres */
  }
}
@media (max-width: 768px) {
  #modalGestionarEvento .row .col-md-4 {
    width: 100%; /* En móviles, cada campo ocupa toda la fila */
  }
}
#modalReserva .form-control {
  width: 100%; /* Ajuste exclusivo para este modal */
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
  padding-left: 5px;  /* Define el padding izquierdo */
  padding-right: 5px; /* Define el padding derecho */
}
#modalReserva label {
  text-align: left; /* Asegurar alineación dentro del modal */
}
#modalReserva .modal-content {
  font-size: 12px !important; /* Ajusta el tamaño de fuente en todo el modal */
}
#modalReserva .form-control {
  font-size: 12px !important;
}
#modalReserva legend, 
#modalReserva label, 
#modalReserva button {
  font-size: 12px !important;
}
#modalReserva select {
  font-size: 12px !important; /* Ajusta el tamaño del texto dentro de los combobox */
}

#modalReserva .form-control,
#modalReserva .form-select {
  min-height: 36px; /* Ajusta el alto para que sean iguales */
}
#modalReserva .btn-secondary {
  width: auto; /* Ajuste dinámico al texto */
  min-width: 100px; /* Evitar que sean demasiado pequeños */
  height: 40px; /* Asegurar altura uniforme */
  padding: 5px 10px; /* Espaciado interno ajustado */
  font-size: 12px !important; /* Tamaño de fuente igual a los otros botones */
  margin-top: 10px; /* Separación uniforme */
}
#modalReserva .row {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos se ajusten mejor */
  align-items: center; /* Asegura que los controles estén alineados correctamente */
}
@media (max-width: 992px) {
  #modalReserva .row .col-md-4 {
    width: 50%; /* En tablets, usa dos columnas en lugar de tres */
  }
}
@media (max-width: 768px) {
  #modalReserva .row .col-md-4 {
    width: 100%; /* En móviles, cada campo ocupa toda la fila */
  }
}

select {
  -webkit-appearance: auto; /* Para Chrome, Safari */
  -moz-appearance: auto; /* Para Firefox */
  appearance: auto; /* Para otros navegadores */
}
select[disabled] {
    cursor: not-allowed; /* Cambia el cursor para indicar que está bloqueado */
    background-color: #e9ecef; /* Simula el estilo de los inputs bloqueados */
    color: #6c757d; /* Color de texto más tenue */
}
#modalReprogramar .form-control {
  width: 100%; /* Ajuste exclusivo para este modal */
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
  padding-left: 5px; /* Define el padding izquierdo */
  padding-right: 5px; /* Define el padding derecho */
}

#modalReprogramar label {
  text-align: left; /* Asegurar alineación dentro del modal */
}

#modalReprogramar .modal-content {
  font-size: 12px !important; /* Ajusta el tamaño de fuente en todo el modal */
}

#modalReprogramar .form-control {
  font-size: 12px !important;
}

#modalReprogramar legend, 
#modalReprogramar label, 
#modalReprogramar button {
  font-size: 12px !important;
}

#modalReprogramar select {
  font-size: 12px !important; /* Ajusta el tamaño del texto dentro de los combobox */
}

#modalReprogramar .form-control,
#modalReprogramar .form-select {
  min-height: 36px; /* Ajusta el alto para que sean iguales */
}

#modalReprogramar .btn-secondary {
  width: auto; /* Ajuste dinámico al texto */
  min-width: 100px; /* Evitar que sean demasiado pequeños */
  height: 40px; /* Asegurar altura uniforme */
  padding: 5px 10px; /* Espaciado interno ajustado */
  font-size: 12px !important; /* Tamaño de fuente igual a los otros botones */
  margin-top: 10px; /* Separación uniforme */
}

#modalReprogramar .row {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos se ajusten mejor */
  align-items: center; /* Asegura que los controles estén alineados correctamente */
}

@media (max-width: 992px) {
  #modalReprogramar .row .col-md-4 {
    width: 50%; /* En tablets, usa dos columnas en lugar de tres */
  }
}

@media (max-width: 768px) {
  #modalReprogramar .row .col-md-4 {
    width: 100%; /* En móviles, cada campo ocupa toda la fila */
  }
}
#buscarCita {
  margin: 0 !important;
  width: 100%;
}
#modalBloqueo .form-control {
  width: 100%;
  box-sizing: border-box;
  padding-left: 5px;
  padding-right: 5px;
}

#modalBloqueo label {
  text-align: left;
}

#modalBloqueo .modal-content {
  font-size: 12px !important;
}

#modalBloqueo .form-control,
#modalBloqueo select {
  font-size: 12px !important;
}

#modalBloqueo legend,  
#modalBloqueo label,  
#modalBloqueo button {
  font-size: 12px !important;
}

#modalBloqueo .form-control,  
#modalBloqueo .form-select {
  min-height: 36px;
}

#modalBloqueo .btn-secondary {
  width: auto;
  min-width: 100px;
  height: 40px;
  padding: 5px 10px;
  font-size: 12px !important;
  margin-top: 10px;
}

#modalBloqueo .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 992px) {
  #modalBloqueo .row .col-md-4 {
    width: 50%;
  }
}

@media (max-width: 768px) {
  #modalBloqueo .row .col-md-4 {
    width: 100%;
  }
}
#btnBloquear, #btnCancelarBloq {
  display: inline-block;  /* 🔹 Asegura que el width tenga efecto completo */
  width: 120px;           /* 🔹 Mismo ancho fijo */
  height: 40px;
  padding: 5px 10px;
  text-align: center;
  white-space: nowrap;
  margin-top: 10px;
}