.fc th {
    padding: 8px;
    vertical-align: middle;
    background: #000000;
    color: #FFFFFF;
    font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
    border-radius: 8px;
    
}
.fc-today {
    background: #faf8dd !important;
}
.fc-past {
    background: #f1f4f6!important;
}
.fc-future {
    background: #add2df;
}
.fc-day-top {
    font-size: 15px;
    text-align: center;
}
.fc-day-number {
    background: #81d1c0 !important;
    color: black;
    border-radius: 50%;
    width: 15%;
    height: 15%;
    font-size: 1vw;
}
.fc-other-month {
    color: white !important;
}
.fc-center {
    color: white !important;
}
#calendar {
    margin: 10px auto;
}
.centrarBoton {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;            
}
/* Fin del estilo al calendaro */
.navbar {
    width: 100%;
    position: fixed; /* Fijar el navbar */
    z-index: 1000;/* Asegurar que el navbar se muestre encima de otros elementos */
}
.container {
    padding-top: 15px; /* Añadir espacio en la parte superior para evitar solapamiento con el navbar */
}
.fc-agendaWeek-button{
  /*display: none;*/
}
.fc-agendaDay-button {
  /*display: none;*/
}
.fc-listMonth-button{
  /*display: none;*/
}
.fc-today{
  color: #000000 !important;
}
.fc-past{
  color: #000000 !important;
}
.fc-scroller{
  background-color: rgb(244, 155, 155) !important;
}
.fc-list-item-title{
  font-weight: 800;
}
.fc-list-item-time{
  font-weight: 800;
}
/* /////  LOGIN ///// */
body {
    margin: 0;
    padding: 0;
    background-image: url("../image/fondo2.jpeg");
    
/*background: rgb(2,0,36);
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 98%);
    overflow: hidden;  Evita que el contenido se desplace por debajo del overlay */
  }
.botonIniciarSesion {
    top: 50%;
    left: 50%;
    width:40%;
    height: 2rem;
    border-radius: 20px;
    background-color: #ffffff;
    border-color: #ffffff;
    color: #000000;
    font-weight: bold;
  }
.botonesLogin {
    top: 50%;
    left: 50%;
    width:13rem;
    margin-top: 10px;
    height: 2rem;
    border-radius: 20px;
    background-color: #ffffff;
    border-color: #000000;
    color: #000000;
  }
.inputsLogin {
    top: 50%;
    left: 50%;
    width:50%;
    margin-bottom: 10px;
    height: 3rem;
    border-radius: 10px;
    background-color: #000000;
    border-color: #FFFFFF;
    color: #FFFFFF;
    text-align:center;
  }
.alertas{
  /*animation:scale-up-center 0.4s; } @keyframes scale-up-center{ 0%{transform:scale(.5)} 100%{transform:scale(1)}*/
  animation:shake-horizontal 0.8s linear both} @keyframes shake-horizontal{0%,100%{transform:translateX(0)}10%,30%,50%,70%{transform:translateX(-10px)}20%,40%,60%{transform:translateX(10px)}80%{transform:translateX(8px)}90%{transform:translateX(-8px)}
}
.animacionLoginRegistro{
  animation:rotate-center 0.4s} @keyframes rotate-center{0%{transform:rotate(0)}100%{transform:rotate(360deg)}
}
.inputError{
  border-color:red;
}
.animacionInput{
  animation:shadow-drop-center 0.5s linear both} @keyframes shadow-drop-center{0%{box-shadow:0 0 0 0 transparent}100%{box-shadow:0 0 20px 0 rgba(255,255,255,.55)}
}

  .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px); 
    z-index: 100;
  }
  .popup {
    display: none;
    background-color: rgb(0, 0, 0);
    padding: 20px;
    border-radius: 8px;
    margin: 10px 0;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    animation: slideDown 0.5s ease-in-out;
    display: flex; /* Cambio importante: Usa flexbox */
    flex-direction: column; /* Los elementos se alinearán verticalmente */
    align-items: center; /* Centrar los elementos horizontalmente */
    position: relative;
  }
 
  .cerrarPopupAnimacion {
    animation:scale-down-center 0.4s; }
  @keyframes scale-down-center{
    0%{
      transform:scale(1)
    }
    100%{
      transform:scale(.1)
    }
  }
  .cerrarLogin-Registro {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 12px;
    background-color: transparent;
    color:#FFFFFF;  
    border-color: transparent;
    cursor: pointer;
  }
  @keyframes slideDown {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(0);
    }
  }

/* Footer */
#footer {
  padding: 2em 0 1em 0 ;
  background-color: #1d242a;
  text-align: center;
  }
  #footer .icons {
    font-size: 1.25em;  
  }
  #footer .icons a {
      color: rgba(255, 255, 255, 0.5);
  }
  #footer .icons a:hover {
        color: #fff;
  }
  #footer .copyright {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8em;
    letter-spacing: 0.225em;
    list-style: none;
    padding: 0;
    text-transform: uppercase;
  }

  #footer .copyright li {
      border-left: solid 1px rgba(255, 255, 255, 0.5);
      display: inline-block;
      line-height: 0;
      margin-left: 0;
      padding-left: 0;
  }

  #footer .copyright li:first-child {
        border-left: 0;
        margin-left: 0;
        padding-left: 0;
  }
  #footer .copyright li a {
        color: inherit;
  }
  #footer .copyright li a:hover {
          color: #fff;
  }

  /* FOOTER 2*/
  #footer2 {
    padding: 2em 0 1em 0 ;
    background-color: #1d242a;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 1.25em;
    color: rgba(255, 255, 255, 0.5);
    
  }
  #footer2 .icons2 {
    font-size: 1.25em;  
    list-style-type:none;
  }
  #footer2 .icons2 a {
      color: rgba(255, 255, 255, 0.5);
  }
  #footer2 .icons2 a:hover {
        color: #fff;
  }
  #footer2 .copyright2 {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8em;
    letter-spacing: 0.225em;
    list-style: none;
    padding: 0;
    text-transform: uppercase;
  }
  #footer2 .copyright2 li {
      border-left: solid 1px rgba(255, 255, 255, 0.5);
      display: inline-block;
      line-height: 0;
      margin-left: 0;
      padding-left: 0;
  }
  #footer2 .copyright2 li:first-child {
        border-left: 0;
        margin-left: 0;
        padding-left: 0;
  }
  #footer2 .copyright2 li a {
        color: inherit;
  }
  #footer2 .copyright2 li a:hover {
          color: #fff;
  }
  
  @media screen and (max-width: 480px) {

        #footer .copyright li {
          border: 0;
          display: block;
          line-height: 1.65em;
          margin: 0;
          padding: 0.5em 0;
        }

  }
  @media screen and (max-width: 980px) {

    #footer {
      padding: 4em 3em 2em 3em ;
    }

  }
  @media screen and (max-width: 736px) {

    #footer {
      padding: 3em 2em 1em 2em ;
    }

  }
  
.iconosFooter{
    font-size:25px;
}
  
/* SCROLL INFINIRO */
#alertaCorte{
 font-size: 2vw;
}



/* ///// CELULARES ////// */
@media screen and (max-width: 331px) {
  /* INPUT WHASTAPP */
  #divTablaCitasClientes{
      display: block;
      width: 100%;
      height: 500px; /* Altura máxima de la tabla */
      overflow-y: auto; /* Agregar scroll vertical si el contenido excede la altura */
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    #alertaCorte{
        font-size:15px;
    }
    #alertaCorteInferior2{
         font-size:15px !important;
    }
    .fc-day-header{
        font-size: 2vw !important;
    }
    #txtBuscarCita {
        font-size:5vw;
    }
    #txtBuscarCliente{
        font-size:5vw;
    }
}
@media screen and (min-width: 331px) and (max-width: 768px) {
    .fc-title {
        font-size: 2vw;
    }
    .fc-time {
        font-size: 2vw;
    }
    .fc th {
        font-size: 3vw;
    }
    .fc-day-number{
        font-size: 3vw;
    }
    .fc-right{
        display: none !important;
    }
    .loginTitulo{
      font-size: 4vw !important;
    }
    .fc-day-header{
        font-size: 2.2vw !important;
    }
    .inputsLogin {
        top: 50%;
        left: 50%;
        width:80%;
        margin-bottom: 25px;
        height: 3rem;
        border-radius: 10px;
        background-color: #000000;
        border-color: #FFFFFF;
        color: #FFFFFF;
        text-align:center;
      }
    #divProductos{
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    #divTablaCitas{
      display: block;
      width: 100%;
      height: 500px; /* Altura máxima de la tabla */
      overflow-y: auto; /* Agregar scroll vertical si el contenido excede la altura */
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    #divTablaCitasClientes{
      display: block;
      width: 100%;
      height: 500px; /* Altura máxima de la tabla */
      overflow-y: auto; /* Agregar scroll vertical si el contenido excede la altura */
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    #divUsuarios{
      display: block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    #divAnuncios{
      display: block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    #divSucursales{
      display: block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    #divBotonesPrincipal{
      display: flex;
    flex-direction: column;
    align-items: center;
    }
    #divBotonesPrincipal button {
      margin: 10px 0; /* Espacio entre botones */
      display:block;
      width:100%;
    }
    #alertaCorte{
        font-size:22px;
    }
    #alertaCorteInferior2{
         font-size:22px !important;
    }
    #etiquetaBuscarCita{
        font-size:3vw;
    }
    #txtBuscarCita {
        font-size:5vw;
    }
    #txtBuscarCliente{
        font-size:5vw;
    }
    #btnConfirmarMedioDia{
        margin-left:20px;
    }
    #btnConfirmarCorteGratis{
        margin-left:20px;
    }
    .iconosFooter{
        font-size:25px;
        margin-bottom:20px;
    }
}
/* ///// TABLETS ////// */
@media screen and (min-width: 768px) and (max-width: 1024px){
  .loginTitulo{
      font-size: 3vw !important;
    }
  #divProductos{
      display: block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  #divTablaCitas{
    display: block;
    width: 100%;
    height: 500px; /* Altura máxima de la tabla */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  #divTablaCitasClientes{
      display: block;
      width: 100%;
      height: 500px; /* Altura máxima de la tabla */
      overflow-y: auto; /* Agregar scroll vertical si el contenido excede la altura */
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar;
    }
  #divUsuarios{
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  #divAnuncios{
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  #divSucursales{
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  #alertaCorte{
        font-size:25px;
    }
    #alertaCorteInferior2{
         font-size:25px !important;
    }
    #txtBuscarCita {
        font-size:5vw;
    }
    #txtBuscarCliente{
        font-size:5vw;
    }
    .iconosFooter{
        font-size:25px;
        margin-bottom:20px;
    }
}





/* ///// PC ////// */
 @media screen and (min-width: 1025px){
    .loginTitulo{
      font-size: 2vw !important;
    }
    #etiquetaBuscarCita{
        font-size:2vw;
    }
    #divTablaCitas{
        display: block;
        width: 100%;
        height: 500px; /* Altura máxima de la tabla */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        }
    #txtBuscarCita {
        font-size:2vw;
    }
    #txtBuscarCliente{
        font-size:2vw;
    }
    .iconosFooter{
        font-size:25px;
        margin-bottom:20px;
    }
}