/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import "~@ionic/angular/css/display.css";

/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

.inputRequired {
  color: var(--color-red);
  margin-top: 5px;
  font-size: 12px;
}

/* Deshabilitar scroll y clics en el cuerpo */
body.modal-open {
  overflow: hidden; /* Bloquea el scroll */
  pointer-events: none; /* Deshabilita clics */
}

body.modal-open .modal {
  pointer-events: auto; /* Permite clics dentro del modal */
}

ion-modal {
  background-color: #fff;
  box-shadow: 10px 10px 100px 100px rgba(0, 0, 0, 0.2);
}

ion-modal ion-toolbar {
  background-color: #fff;
  box-shadow: 0 1px 6px 0px grey !important;
  padding: 0px !important;
}

ion-input {
  border: 1px solid var(--color-border-input-select) !important;
  border-radius: 5px !important;
  --padding-start: 16px !important;
}

.press-effect {
  width: 100%;
  transition: all 0.3s ease-in-out;
  animation: pulse 2s infinite; /* Aplicar animación */
}

@keyframes pulse {
  0% {
    transform: scale(1); /* Tamaño original */
  }
  50% {
    transform: scale(0.93); /* Diminuir tamaño al 93% */
  }
  100% {
    transform: scale(1); /* Vuelve al tamaño original */
  }
}

.marginTop10 {
  margin-top: 10%;
}

.borderRadius5 {
  border-radius: 5px !important;
}

.p-r {
  position: relative !important;
}

.w-100 {
  width: 100% !important;
}

.w-98 {
  width: 98% !important;
}

.textTittle {
  color: var(--color-title);
}

.positionRelative {
  position: relative !important;
}

.badgeCart {
  position: absolute;
  top: 0;
  left: 0;
}

.b-l {
  position: absolute;
  left: 0;
}

.b-r {
  position: absolute;
  right: 0;
}

.fontWeightBold {
  font-weight: bold !important;
}

//
//  padding
//
.p-2 {
  padding: 2px !important;
}

.p-t-10 {
  padding-top: 10px;
}

//
//  / padding
//

.m-t-5 {
  margin-top: 5px;
}

// font size
.f-s-14 {
  font-size: 14px !important;
}

.f-s-8 {
  font-size: 8px !important;
}
//  /font size

.item-interactive.ion-invalid {
  --highlight-background: transparent !important;
}

.item-interactive.ion-valid {
  --highlight-background: transparent !important;
}

.icon-edit {
  font-size: 1.6em !important;
  // margin-right: 13px !important;
}

.mat-horizontal-content-container {
  padding: 0 12px 24px 22px !important;
}

.mat-step-header .mat-step-icon-selected {
  background-color: var(--ion-color-primary);
}
.mat-step-header .mat-step-icon-state-edit {
  background-color: var(--ion-color-primary);
}
.mat-mini-fab.mat-primary {
  background-color: var(--ion-color-primary);
}

.not-margin {
  margin: 0 !important;
}

.display_center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-popup {
  margin: auto;
  width: 90%;
  height: 90%;
  border-radius: 10px;
}

.modal-popup .modal-wrapper {
  display: block;
  border-radius: 10px;
}

.infoPrice {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.textPrice {
  margin: 5px 5px 0px 0px !important;
}

.textPriceTicket {
  margin: 5px 5px 0px 0px !important;
  font-size: min(7vw, 25px) !important;
}

.calendar-day {
  color: black;
}

.form-field-label {
  padding-left: 20px;
}

.responsive-text {
  font-size: 3.7vw;
}

.responsive-text-title {
  font-size: 3vw;
}

.alert-radio-label {
  text-transform: capitalize !important;
  white-space: normal !important;
  font-size: min(3vw, 14px) !important;
}

.sc-ion-label-ios-h,
.sc-ion-label-md-h {
  white-space: normal !important;
  contain: none !important;
}

.sc-ion-alert-ios,
.sc-ion-alert-md {
  white-space: normal !important;
  contain: none !important;
}
.sc-ion-searchbar-ios-h,
.sc-ion-searchbar-md-h {
  height: 30px !important;
  padding: 0px 5px !important;
  display: inline-flex !important;
}

.searchbar-input-container.sc-ion-searchbar-ios {
  height: 28px;
  background: white;
  border-radius: 5px;
}

ion-content {
  --background: #f9f9f9;
}

ion-toolbar {
  --background: var(--ion-color-primary);
  color: #fff;
}

ion-segment {
  color: var(--ion-color-dark);
}

ion-back-button {
  --color: white !important;
}

.placeholder-select {
  border: 1px solid #dedede;
  width: -webkit-fill-available;
  border-radius: 5px;
}

.custom-sheet-modal {
  --border-radius: 16px 16px 0 0; /* Rounded top corners for sheet */
  --max-height: 70vh;
  background: transparent;
  flex-direction: column;
  justify-content: flex-end;
}