@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

* {
  padding: 0;
  margin: 0;
  font-family: Roboto, sans-serif;
}

body {
  /* height: 100vh; */
  background-color: var(--color-secundario);
}

:root {
  --color-primario: #fcc30c;
  --color-secundario: #162426;
  --color-enfasis: #e1574e;
  --color-enfasis-secundario: #e49c97;
  --color-terciario: #315257;
  --color-cuaternario: #f9f5d2;
}

#calendar {
  max-width: 900px;
  margin: 0 auto;
}

#title {
  color: #9c27b0;
  font-weight: 800;
  border-bottom: 3px solid coral;
  background: #ccc;
  padding: 8px 30px;
}

/****************/
/* input {
  display: none;
} */

.fc-content {
  color: var(--color-secundario) !important;
  font-weight: bold;
  display: flex !important;
  /* justify-content: center !important; */
  align-items: center !important;
  min-height: 30px;
}

.fc-time-grid .fc-bgevent,
.fc-time-grid .fc-event {
  display: flex;
  align-items: center;
}

.fc-time {
  padding: 0 5px !important;
}

#btnCerrar {
  color: #fff;
  padding: 4px;
  margin: 2px;
  background: var(--color-enfasis);
  border-radius: 25px;
  font-size: 17px;
  font-weight: 600;
}
#btnCerrar:hover {
  cursor: pointer;
  background-color: var(--color-enfasis-secundario);
}

.circu {
  padding: 25px;
  background: #ccc;
  border-radius: 50px;
}

#grupoRadio label:hover {
  cursor: pointer;
}

#grupoRadio input[type="radio"]:checked + label {
  border: 3px solid #ccc !important;
}

.activado input[type="radio"]:checked + label {
  border: 3px solid #555 !important;
}

/* .modalUpdate .modal-dialog {
  min-width: 90vw !important;
} */

/* Estilos para el contenedor de las tarjetas */
#contenedorTarjetas {
  border: 1px solid var(--color-terciario);
  min-height: 300px;
  max-height: 300px;
  overflow-x: auto; /* Desbordamiento horizontal con barra de desplazamiento */
  /* Evitar el salto de línea */
}

/* Estilos para las tarjetas */
.tarjeta {
  min-width: 200px; /* Ancho fijo */
  cursor: pointer; /* Cambiar el cursor a mano */
}

.tarjeta .card {
  background-color: var(--color-terciario);
}

.tarjeta .card img {
  margin-top: 5px !important;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.tarjeta .card .card-text {
  color: var(--color-cuaternario);
}

.card-title {
  color: var(--color-primario);
  font-size: 1rem;
  font-weight: bold;
}

.card-text {
  font-size: 0.8rem;
}

/* Estilo para tarjeta seleccionada */
.tarjeta.selected {
  border-color: var(--color-primario); /* Cambiar el borde a color primario */
}

/* Estilos para la imagen */
.imagenProducto {
  width: 70%; /* Ancho completo */
  /* Altura fija */
  object-fit: cover; /* Escalar la imagen para que se ajuste */
  margin-bottom: 5px; /* Espacio inferior */
}

.card-body {
  min-height: 90px;
}

/* Estilo para el elemento li en estado de hover */
.modal-body ul li:hover {
  background-color: #f0f0f0; /* Cambia el color de fondo al pasar el mouse */
}

/* Estilo para el enlace dentro del elemento li */
.modal-body ul li a {
  display: block;
  padding: 5px 0;
  text-decoration: none; /* Quita la subrayado que indica un enlace */
  color: inherit; /* Hereda el color del texto del elemento padre */
}

/* Estilo para el enlace dentro del elemento li cuando se pasa el mouse */
.modal-body ul li a:hover {
  color: inherit; /* Mantiene el color del texto al pasar el mouse */
  text-decoration: none; /* Quita el subrayado al pasar el mouse */
}

.navbar {
  background-color: var(--color-primario) !important;
}

.nav-item {
  color: var(--color-secundario);
  transition: all 0.5s ease;
}

.nav-link {
  color: var(--color-secundario) !important;
  transition: all 0.5s ease;
}

.nav-link:hover {
  color: var(--color-cuaternario) !important;
}

.nav-item:hover {
  background-color: var(--color-terciario);
  border-radius: 5px;
}

.dropMenu {
  background-color: var(--color-terciario);
}

.dropMenu a {
  color: var(--color-primario) !important;
}

.dropMenu a:hover {
  background-color: var(--color-secundario);
  color: var(--color-primario) !important;
}

.textUser {
  color: var(--color-cuaternario);
}

.fc-day-number {
  min-width: 25px;
  background-color: var(--color-primario);
  border-radius: 20px;
  color: var(--color-secundario);
  text-decoration: none;
  text-align: center;
  margin: 2px;
  font-weight: bold;
}

.fc-center h2 {
  color: var(--color-primario);
  margin-top: 15px !important;
}

.fc-day-header span {
  color: var(--color-primario);
}

.fc-widget-header a {
  color: var(--color-primario) !important;
}

/* .fc-time span {
  color: var(--color-secundario);
  font-weight: bold;
} */

.fc-axis span {
  color: var(--color-primario);
  font-weight: bold !important;
}

.fc-today {
  background-color: var(--color-terciario) !important;
}

.fc-unthemed .fc-content,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-list-heading td,
.fc-unthemed .fc-list-view,
.fc-unthemed .fc-popover,
.fc-unthemed .fc-row,
.fc-unthemed tbody,
.fc-unthemed td,
.fc-unthemed th,
.fc-unthemed thead {
  border-color: var(--color-primario) !important;
}

.iconMenu {
  color: var(--color-secundario);
}

.iconTrash {
  color: var(--color-primario);
  transition: all 0.5s ease;
}

.iconTrash:hover {
  transform: scale(1.2);
}

.titulosColumna {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 1;
}

.modal {
  color: var(--color-primario);
}

.modal .modal-content {
  background-color: var(--color-secundario);
}

.modalUpdate .modal-dialog {
  max-width: 1000px;
}

.iconAdd {
  color: var(--color-primario);
  transition: all 0.5s ease;
}

.iconAdd:hover {
  transform: scale(1.2);
}

.img-small {
  max-width: 50px;
  border-radius: 5px;
}

.contLabelDatos label {
  color: var(--color-primario);
  font-weight: bold;
}

.styleTotal {
  font-weight: bold;
  color: var(--color-primario);
}

.styleTabla {
  max-height: 300px;
  overflow-y: auto;
}

.styleTabla table {
  --bs-table-bg: var(--color-secundario);
  --bs-table-color: var(--color-primario);
}

.fc-widget-content .fc-scroller {
  height: 100% !important;
}

.listaNombres {
  min-height: 300px;
  max-height: 400px;
  overflow-y: scroll;
}

.contenedorLogin {
  background-color: var(--color-secundario);
}

.fondoLogin {
  background-image: url("../img/fondoMessiMaradona.png");
  background-color: rgba(
    0,
    0,
    0,
    0.5
  ); /* Fondo blanco con transparencia al 50% */
  background-blend-mode: overlay;
  /* Ajusta la imagen de fondo para que cubra todo el cuerpo */
  background-size: cover;
  /* Centra la imagen de fondo */
  background-position: center;
  /* Evita que la imagen de fondo se repita */
  background-repeat: no-repeat;
}

.formLogin {
  max-width: 400px;
}

.tablaTurnosAll {
  min-height: 200px;
  background-color: var(--color-cuaternario);
  border-radius: 20px !important;
}

.tablaTurnosAll .table > :not(caption) > * > * {
  color: var(--color-secundario) !important;
}

#fechaInforme {
  max-width: 200px;
}

.tablaTurnosAll .table {
  --bs-table-bg: var(--color-cuaternario);
  font-size: 0.7rem;
}

tbody,
td,
tfoot,
th,
thead,
tr {
  border-color: var(--color-secundario);
}

.styleTabla tbody,
.styleTabla td,
.styleTabla tfoot,
.styleTabla th,
.styleTabla thead,
.styleTabla tr {
  border-color: var(--color-primario);
}

.btn-primary {
  background-color: var(--color-primario);
  color: var(--color-secundario);
  border-color: var(--color-primario);
  border: var(--color-secundario) solid 2px;
  font-weight: bold;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.btn-primary:hover {
  background-color: var(--color-cuaternario);
  color: var(--color-secundario);
  border-color: var(--color-primario);
  border: var(--color-secundario) solid 2px;
}

.btn-danger {
  background-color: var(--color-secundario);
  color: var(--color-cuaternario);
  border-color: var(--color-secundario);
  font-weight: bold;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.btn-danger:hover {
  background-color: var(--color-terciario);
  color: var(--color-cuaternario);
  border-color: var(--color-terciario);
}

.modal-title {
  font-weight: bold;
}

.modalUpdate .modal-title {
  color: var(--color-secundario);
}

#productosModal .modal-title {
  color: var(--color-primario);
}

.hederModalUpdate {
  border-bottom: none;
}

.footerModalUpdate {
  border-top: none;
}

.modal input {
  background-color: var(--color-cuaternario) !important;
  border-color: var(--color-primario) !important;
}

.modal textarea {
  background-color: var(--color-cuaternario) !important;
  border-color: var(--color-primario) !important;
}

.modal select {
  background-color: var(--color-cuaternario) !important;
  border-color: var(--color-primario) !important;
}

#clientesModal li {
  background-color: var(--color-cuaternario);
  border: var(--color-primario) solid thin;
}

.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  color: var(--color-cuaternario);
  background-color: var(--color-secundario);
  border-color: var(--color-secundario);
}

.btn-check + .btn:hover {
  color: var(--color-cuaternario);
  background-color: var(--color-secundario);
  border-color: var(--color-secundario);
}

.despFecha {
  background-color: var(--color-cuaternario) !important;
}

.swal2-modal {
  background-color: var(--color-secundario);
  color: var(--color-primario);
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
  background-color: var(--color-primario) !important;
  color: var(--color-secundario) !important;
  border-color: var(--color-primario) !important;
  border: var(--color-secundario) solid 2px !important;
  font-weight: bold;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.iconProfile {
  color: var(--color-primario);
  padding: 13px;
  background-color: var(--color-terciario);
  border-radius: 50%;
}

.tablaProductos {
  max-height: 90vh;
  overflow-x: auto;
}

.tabModDer{
  max-height: 44vh;
}

.tablaProductos table td,
.tablaProductos table tr {
  font-size: 1rem;
}

.tablaProductos img {
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

/*scrol modificacion-----------------------------*/
.tablaProductos::-webkit-scrollbar {
  /* Ocultar el scrollbar vertical */
  width: 0;
}

.tablaProductos::-webkit-scrollbar-thumb {
  /* Establecer el scrollbar como un rectángulo */
  background-color: var(--color-secundario);
  border-radius: 5px; /* Redondear los bordes del scrollbar */
}

.tablaProductos::-webkit-scrollbar-track {
  /* No mostrar el track del scrollbar */
  background-color: transparent;
}

/* Para navegadores que no son basados en WebKit (como Firefox) */
.tablaProductos {
  scrollbar-width: none; /* Ocultar el scrollbar */
}
/*-----------------------------------------------*/

#buscarProducto,
#buscarCliente {
  background-color: var(--color-cuaternario);
  color: var(--color-secundario);
}

.iconEditProducto,
.iconTrashProducto,
.iconResetPassword {
  color: var(--color-terciario);
  margin: 10px;
  font-size: 1.3rem;
}

.iconPagoEmpleado {
  color: var(--color-cuaternario);
  margin: 10px;
  font-size: 1.3rem;
}

.tarjetasCanchas .card {
  background-color: var(--color-cuaternario);
  --bs-card-border-width: none;
  border-radius: 20px;
}

.tarjetasCanchas .card .card-img-top {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.tarjetasCanchas .card button {
  width: 100%;
}

.tarjetasCanchas .card .card-title {
  color: var(--color-secundario);
}

.tarjetasCanchas .card p {
  color: var(--color-secundario);
  font-weight: 400;
}

.tarjetasCanchas .card button {
  border: none;
}

.tarjetasCanchas .card input {
  color: var(--color-primario);
  background-color: var(--color-secundario);
}

.filtrosProductos p {
  color: var(--color-primario);
}

.filtrosProductos select {
  color: var(--color-secundario);
  background-color: var(--color-cuaternario);
}

.btnDeletePago {
  color: var(--color-primario) !important;
}

#wpContenedor a {
  text-decoration: none;
  color: #46d481;
  font-weight: 200;
  font-size: 0.9rem;
}

.tablasInformes p {
  color: var(--color-primario);
}

#btnCerrarDia {
  width: 100%;
}

.btn:disabled {
  color: #838383;
  background-color: var(--color-terciario);
  border-color: var(--color-secundario);
}

.formInfMensual label {
  color: var(--color-primario);
}

.tituloInformeMes {
  color: var(--color-primario);
  font-weight: bold;
}

.listaNombresVentas a {
  background-color: var(--color-cuaternario);
  color: var(--color-secundario);
}

#modalPago .modal-dialog {
  min-width: 80vw;
}

.divisor {
  border: 1px solid var(--color-primario);
}

.tarjetaTotal {
  background-color: var(--color-terciario);
  border-radius: 20px;
}

.botonCerrarDia {
  max-width: 100%;
}

@media (min-width: 768px) {
  .botonCerrarDia {
    max-width: 50%;
  }
}

.btnBaja {
  background-color: var(--color-enfasis);
}

.btnBaja:hover {
  background-color: var(--color-enfasis-secundario);
}

.custom-radio {
  width: 20px; /* Ajustar el tamaño del radio */
  height: 20px;
  margin: 0 2px; /* Espaciado entre los radios y la etiqueta */
  appearance: none; /* Remover estilo predeterminado */
  border: 2px solid var(--color-secundario); /* Color del borde */
  border-radius: 50%; /* Hacerlo redondo */
  outline: none; /* Sin contorno */
  cursor: pointer; /* Cursor en mano */
  position: relative; /* Posicionamiento para el pseudo-elemento */
}

.custom-radio:checked {
  background-color: var(
    --color-primario
  ) !important; /* Color de fondo cuando está seleccionado */
  border-color: var(
    --color-primario
  ) !important; /* Color del borde cuando está seleccionado */
}

.custom-radio:checked::after {
  content: ""; /* Crea un pseudo-elemento */
  position: absolute; /* Posiciona el pseudo-elemento */
  top: 50%; /* Centra verticalmente */
  left: 50%; /* Centra horizontalmente */
  width: 12px; /* Tamaño del círculo interno */
  height: 12px; /* Tamaño del círculo interno */
  background: var(--color-primario); /* Color del círculo interno */
  border-radius: 50%; /* Hace el círculo interno redondo */
  transform: translate(-50%, -50%); /* Centra el círculo interno */
}

/* Cambiar el color de los radios no seleccionados */
.custom-radio:not(:checked) {
  background-color: var(
    --color-secundario
  ) !important; /* Color de fondo cuando no está seleccionado */
}

.texto-stock {
  font-size: 0.8rem !important;
  font-weight: bold !important;
}

.list-group-item {
  color: var(--color-secundario) !important;
  background-color: var(--color-cuaternario) !important;
  border: 1px solid var(--color-primario);
}

.tablaTurnosAll td a {
  text-decoration: none;
}

.tablasInformes label {
  color: var(--color-primario);
}

.tablaEmpleados .table {
  font-size: 1rem;
}

.tablaLimite {
  min-height: 300px;
  max-height: 300px; /* Establece el alto máximo de la tabla */
  overflow-y: auto;
}

.tablaLimite::-webkit-scrollbar {
  display: none; /* Oculta la barra de desplazamiento */
}

.medalla{
  background-color: var(--color-primario) !important;
  color: var(--color-secundario);
}

.tablaDetProd{
  overflow-y: scroll;
  min-height: 300px;
  max-height: 300px !important;
}

#detalleProducto{
  min-height: 300px;
  max-height: 690px;
}