/*
 * 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";

/* Swiper styles - Swiper 11 uses bundled styles */

/* Desktop/Web responsive styles */
ion-app {
  max-width: 100% !important;
  margin: 0 auto;
}

// Para pantallas grandes, hacer que el contenido sea más ancho
@media (min-width: 768px) {
  ion-app {
    // Puedes limitar el ancho máximo si prefieres una vista centrada estilo móvil
    // max-width: 500px;
    // O dejarlo al 100% para vista completa de escritorio
    max-width: 100%;
  }

  ion-content {
    --padding-start: 20px;
    --padding-end: 20px;
  }

  // Mejorar la apariencia de formularios en escritorio
  ion-item {
    --padding-start: 16px;
    --padding-end: 16px;
  }

  // Botones más grandes en escritorio
  ion-button {
    --padding-start: 24px;
    --padding-end: 24px;
    height: 48px;
  }
}

@media (min-width: 1024px) {
  ion-content {
    --padding-start: 40px;
    --padding-end: 40px;
  }

  // Centrar contenido en pantallas muy grandes
  .ion-page > ion-content {
    max-width: 1200px;
    margin: 0 auto;
  }
}

.rate_div {

    rating {

        [ion-button][disabled] {
            opacity: 1;
        }
        ion-buttons {
            display: flex;
            font-size: 2.5em !important;
        }

        ion-button {
            width: 60px !important;
        }

        ion-icon {
            font-size: 2.5em !important;

          &.filled {
              font-size: 2.5em !important;
            }
        }
    }

}
