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

/* Safe area bottom padding for edge-to-edge layout */
ion-content.ion-padding {
  --padding-bottom: env(safe-area-inset-bottom);
}

ion-footer {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Dark mode overrides para componentes que no heredan --ion-background-color */
@media (prefers-color-scheme: dark) {

  /* Menú lateral */
  ion-menu ion-content {
    --background: #1B1B1B;
  }
  ion-menu ion-list {
    background: #1B1B1B;
  }
  ion-menu ion-item {
    --border-color: #2d2d2d;
    --color: #ffffff;
  }

  /* Searchbar: .autocomplete sube especificidad a 0,1,1 para ganar a .sc-ion-searchbar-md-h (0,1,0) */
  .autocomplete ion-searchbar {
    --background: #2a2a2a;
    --color: #ffffff;
    --icon-color: #888888;
    --cancel-button-color: #888888;
    --clear-button-color: #888888;
  }

  /* Listboxes de autocomplete: color y borde en dark */
  ion-list ion-item {
    --background: transparent;
    --color: #ffffff;
    --border-color: #808080;
  }

  /* Dropdown: borde y sombra en dark */
  .dropdown-list {
    border-color: #808080;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  }
  .dropdown-list ion-item:hover {
    --background: #252525;
  }

  /* FAQ acordeones: adaptar color="light" hardcodeado al dark theme */
  ion-accordion ion-item {
    --ion-color-light: var(--ion-card-background);
    --ion-color-light-rgb: 40, 40, 40;
    --ion-color-light-contrast: #ffffff;
    --ion-color-light-contrast-rgb: 255, 255, 255;
    --ion-color-light-shade: #161616;
    --ion-color-light-tint: #252525;
  }
  ion-accordion [slot="content"] {
    background: var(--ion-background-color);
    color: var(--ion-text-color);
  }

  /* Welcome card del dashboard: sin fondo */
  .welcome-card {
    --background: transparent;
    box-shadow: none !important;
  }

  /* Texto dentro de ion-card en dark mode */
  ion-card {
    color: #ffffff;
  }
  ion-card ion-card-title,
  ion-card ion-card-subtitle,
  ion-card ion-card-header,
  ion-card ion-card-content {
    color: #ffffff;
  }
  .sc-ion-label-md-s > p {
    color: var(--ion-color-step-800, #cccccc);
  }
}

/* Dropdown de autocomplete: fondo sólido adaptable al tema */
.dropdown-list {
  background: var(--ion-background-color, #ffffff);
}

/* Separador entre ion-item y botón en tarjetas de contrato */
.no-separator {
  --border-color: transparent;
  border: 0;
}

ion-tab-button {
  --padding-start: 2px;
  --padding-end: 2px;
}

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

// Consistent button styling to match social login buttons
ion-button::part(native) {
  border-radius: 6px;
  font-weight: 500;
  letter-spacing: 0.06em;
  box-shadow: none;
}

// Border for light-colored buttons so they don't blend into white backgrounds
ion-button[color="light"]::part(native) {
  border: 1px solid #DADCE0;
}

// No border when light button is inside a colored toolbar
ion-toolbar:not([color="light"]):not([color=""])  ion-button[color="light"]::part(native) {
  border: none;
}

.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;
            }
        }
    }

}
