/* ------------------------------- open: GENERAL ------------------------------------------ */

/* menu mis visitas */
#menu-tus-visitas {
    width: 30%;
    float: left;
    margin-right: 16px;
  }
  
  ul.menu_reservas {
    display: flex;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 8px;
    flex-wrap: wrap;
  }
  
  .menu_reservas li {
    width: 100%;
    padding: 8px 12px;
    margin: 0;
    color: var(--neutral-900);
    font-size: 16px;
    font-weight: 400 !important;
    transition: var(--transition);
    font-family: var(--typo-secondary);
    cursor: pointer;
    border: 1px solid var(--neutral-900);
  }
  
  .menu_reservas li:hover {
    border: 1px solid var(--neutral-900);
    color: var(--neutral-50);
    background: var(--neutral-900);
  }
  
  .menu_reservas li.active {
    border: 1px solid var(--neutral-900);
    color: var(--neutral-50);
    background: var(--neutral-900);
  }
  
  /* ···················································································· 810px*/
  @media only screen and (max-width: 810px) {
    #menu-tus-visitas {
      width: 100%;
      float: left;
      margin: 0 0 24px 0;
    }
  
    ul.menu_reservas {
      flex-wrap: initial;
    }
  
    .menu_reservas li {
      font-size: 16px;
      width: 25%;
      padding: 8px 16px 8px 56px;
      height: auto;
      line-height: 16px;
      background-size: 44px;
      background-position: top 2px left 8px;
    }
  
    .menu_reservas li:hover {
      background-position: center left 8px;
    }
  
    .menu_reservas li.active {
      background-position: bottom 2px left 8px;
    }
  }
  
  /* ···················································································· 767px*/
  @media only screen and (max-width: 767px) {
    ul.menu_reservas {
      flex-wrap: wrap;
      gap: 8px;
    }
  
    .menu_reservas li {
      width: 100%;
      padding: 12px 16px 12px 52px;
      background-size: 36px;
      background-position: top 2px left 8px;
    }
  }
  
  /* fin menu mis visitas */
  
  /* datepicker */
  .datepicker.datepicker-dropdown {
    width: 100%;
    max-width: 500px;
    padding: 16px;
  }
  
  .datepicker-dropdown.datepicker-orient-left::before {
    border-top-color: var(--neutral-50) !important;
  }
  
  /* fin datepicker */
  
  /* generales contenido mis visitas */
  
  #contenidoTusVisitas {
    float: left;
    width: calc(70% - 16px);
    padding: 32px;
    border: 1px solid var(--neutral-900);
  }
  
  #contenidoTusVisitas form,
  #contenidoTusVisitas form #IntroducirLocalizador {
    display: inline-block;
    width: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
  }
  
  #contenidoTusVisitas .title-no-card {
    display: inline-block;
    width: 100%;
    margin: 0 0 16px 0;
    padding: 0 0 0 0;
    font-size: 22px;
    color: var(--neutral-900);
    font-weight: 400;
    text-transform: uppercase;
  }
  
  .textos-cont-tusvisitas {
    margin-bottom: 24px;
  }
  
  #section-visitas.section-tusvisitas .dato_modificar_reserva {
    float: left;
    width: 100%;
  }
  
  .card-visita.usuarios_grupos_disponibles {
    background: none;
  }
  
  .input-group-mis-reservas:nth-child(2) {
    margin-top: 24px;
  }
  
  #contenidoTusVisitas input.form-control {
    padding: 0 12px;
    color: var(--neutral-900);
    -webkit-appearance: none;
    background: none;
    width: 100%;
    font-size: 16px;
    transition: var(--transition);
    border: 1px solid var(--neutral-900);
    box-shadow: none;
    height: 48px;
  }
  
  #contenidoTusVisitas input.form-control:hover {
    border: 1px solid var(--neutral-900);
  }
  
  #contenidoTusVisitas input.form-control:focus {
    border: 1px solid var(--neutral-900);
    color: var(--neutral-900);
    font-weight: 500;
  }
  
  #contenidoTusVisitas input.form-control-tarifas,
  #contenidoTusVisitas textarea.form-control-tarifas {
    background-color: var(--white);
    border: 1px solid var(--neutral-20);
    text-align: center;
    margin: 0 16px;
    width: calc(100% - 102px);
    transition: var(--transition);
    font-weight: 400;
    color: var(--black);
    font-size: 18px;
  }
  
  #contenidoTusVisitas input.form-control-tarifas:hover {
    color: var(--black);
    box-shadow: none;
    border: 1px solid var(--neutral-40);
  }
  
  #contenidoTusVisitas input.form-control-tarifas:focus {
    color: var(--main);
    background-color: var(--bg);
    border: 1px solid var(--black);
  }
  
  .finalizar-right {
    justify-content: flex-end;
  }
  
  #contenidoTusVisitas .card-visita {
    background: none;
    padding: 0;
    margin: 24px 0 0;
  }
  
  #section-visitas .contenedor-mis-visitas select {
    padding: 12px;
    color: var(--neutral-900);
    -webkit-appearance: none;
    background: none;
    width: 100%;
    font-size: 16px;
    transition: var(--transition);
    border-radius: 8px;
    border: 1px solid var(--neutral-900);
    box-shadow: none;
    height: 48px;
  }
  
  #section-visitas .contenedor-mis-visitas select:hover {
    border: 1px solid var(--neutral-900);
  }
  
  #section-visitas .contenedor-mis-visitas select:focus {
    border: 1px solid var(--neutral-900);
    color: var(--neutral-900);
    font-weight: 500;
  }
  
  /* ···················································································· 767px*/
  @media only screen and (max-width: 810px) {
    #contenidoTusVisitas {
      width: 100%;
      padding: 16px;
    }
  }
  
  /* fin generales contenido mis visitas */
  
  /* ------------------------------- close: GENERALES ------------------------------------------ */
  
  /* ------------------------------- open: ANULACIÓN ------------------------------------------ */
  .card-mis-visitas .tus-datos-personales {
    border-top: 1px dashed var(--neutral-10);
    padding-top: 10px;
    margin-top: 15px;
  }
  
  .datos-servicio-container.line-2 {
    border-top: 1px dashed var(--neutral-100);
    border-bottom: 1px dashed var(--neutral-100);
    /* margin: 0; */
    padding: 16px 0;
  }
  
  /* ------------------------------- close: ANULACIÓN ------------------------------------------ */
  
  /* ------------------------------- open: IMPRIMIR ------------------------------------------ */
  #ImprimirCompraReserva .radios {
    margin-top: 24px;
  }
  
  #ImprimirCompraReserva .radios div {
    padding: 8px 0;
  }
  
  /* ------------------------------- close: IMPRIMIR ------------------------------------------ */
  
  /* ------------------------------- open: MODIFICAR ------------------------------------------ */
  .opciones-modificacion .Filtros {
    display: flex;
    gap: 40px;
  }
  
  .opciones-modificacion .Filtros .card-visita {
    max-width: 480px;
  }
  
  #informacion_reembolso_modificar {
    display: inline-block;
    width: 100%;
    margin: 16px 0 0 0;
    padding: 32px;
    border: none !important;
  }
  /* ------------------------------- close: MODIFICAR ------------------------------------------ */
  
  /* ---------------------------------------------------------------------------------------------
     ---------------------------------------------------------------------------------------------
     ---------------------------------------------------------------------------------------------
  
     CAMBIOS ALVARO CANCELAR  (REVISAR EN GENERAL)
  
     ---------------------------------------------------------------------------------------------
     ---------------------------------------------------------------------------------------------
     --------------------------------------------------------------------------------------------- */
  
  /* ···················································································· 767px*/
  @media only screen and (max-width: 767px) {
    .contenedor-mis-visitas {
      width: 100%;
    }
  
    .cont-mis-visitas-all #DivResumenModificacion {
      padding: 0;
    }
  
    .cont-mis-visitas-all #DivResumenModificacion .cuerpo_servicio {
      padding: 0;
    }
  
    .cont-mis-visitas-all #DivResumenModificacion .cuerpo_servicio .imagen-exito {
      width: 56px;
      margin-bottom: 24px;
    }
  
    .cont-mis-visitas-all
      #DivResumenModificacion
      .cuerpo_servicio.textos-pagos
      h2 {
      font-size: 21px;
      line-height: 24px;
    }
  
    .cont-mis-visitas-all
      #DivResumenModificacion
      .cuerpo_servicio.textos-pagos
      h3 {
      font-size: 24px;
    }
  
    .cont-mis-visitas-all
      #informacion_reembolso_modificar
      #informacion_reembolso {
      padding: 0 !important;
    }
  }
  
  /* ------------------------------- close: CAMBIOS ALVARO ------------------------------------------ */




/* ------------------------------- OPEN: FACTURAS ------------------------------------------ */


/* Invoices*/
.invoice-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.invoice-card{
  width: calc(100%/4 - 8px);
  padding: 8px;
  box-sizing: border-box;
  text-align: center;
  background:var(--neutral-50);
  position: relative;
  border: 2px solid #e1e1e1;
  transition: var(--transition);
}

.invoice-card.invoice-unselected {
  border: 2px solid #e1e1e1;
}

.invoice-card.invoice-selected {
  border: 2px solid var(--main);
}

.invoice-card-row {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
}
.invoice-card label + .invoice-card-row{
  margin: 12px 0 0 0;
  font-size: 12px;
  font-weight: 600;
}

.invoice-card-row p {
  margin: 0; /* Elimina márgenes innecesarios */
  font-size: 14px; /* Ajusta el tamaño de la fuente */
  color: var(--neutral-900); /* Color del texto */
}

.invoice-card .corner-checkbox {
  position: absolute;
  top: 0px; /* Ajusta la distancia desde la parte superior */
  left: 0px; /* Ajusta la distancia desde la derecha */
  margin: 0;
  cursor: pointer; /* Cambia el cursor al pasar por el checkbox */
}

.invoice-card input[type="checkbox"] {
  width: 100%;  /* Aumenta el tamaño del checkbox */
  height: 100%; /* Aumenta la altura del checkbox */
  -webkit-appearance: none; /* Elimina la apariencia por defecto */
  -moz-appearance: none;
  appearance: none;
  cursor: pointer; /* Cambia el cursor a mano */
  transition: background-color 0.3s, border-color 0.3s; /* Efectos de transición */

}


.invoice-card input::before {
  width: 28px;
  height: 28px;
  content: "";
  font-size: 16px; 
  background: #e1e1e1;
  position: absolute;
  top: 4px;
  left: 5px;
  padding: 4px 8px;
  border-radius: 3px;
  transition: var(--transition);
}

/* Símbolo de "check" dentro del checkbox cuando está marcado */
.invoice-card input[type="checkbox"]:checked::before {
  content: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 9.4L0 5.4L1.4 4L4 6.6L10.6 0L12 1.4L4 9.4Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  background: var(--main);
}

@media only screen and (max-width: 767px) {

  .invoice-card{
    width: 100%;
  }

}



/* ------------------------------- CLOSE: FACTURAS ------------------------------------------ */