@mixin media-xsmall {
  @media (min-width: 425px) {
    @content;
  }
}

@mixin media-small {
  @media (min-width: 576px) {
    @content;
  }
}

@mixin media-medium {
  @media (min-width: 768px) {
    @content;
  }
}

@mixin media-large {
  @media (min-width: 992px) {
    @content;
  }
}

@mixin media-xlarge {
  @media (min-width: 1200px) {
    @content;
  }
}

/* Max */
@mixin max-media-xsmall {
  @media (max-width: 425px) {
    @content;
  }
}

@mixin max-media-small {
  @media (max-width: 576px) {
    @content;
  }
}

@mixin max-media-medium {
  @media (max-width: 768px) {
    @content;
  }
}

@mixin max-media-large {
  @media (max-width: 992px) {
    @content;
  }
}

@mixin max-media-xlarge {
  @media (max-width: 1200px) {
    @content;
  }
}

// Class-based dark mode. Apps deben usar `dark.class.css` palette de Ionic
// + ThemeService que toggle `body.dark` / `html.ion-palette-dark`.
// El mixin se mantiene para compatibilidad con consumers existentes,
// pero ya NO usa `@media (prefers-color-scheme: dark)` para evitar
// pintar dark según OS aunque el user tenga tema light manual.
//
// Uso desde un component-level .scss (top-level, NO dentro de `:host`):
//   @include dark { ... }
@mixin dark {
  :host-context(.dark),
  :host-context(.ion-palette-dark),
  :host-context(html.ion-palette-dark),
  :host-context(body.dark),
  :host-context([data-theme='dark']) {
    @content;
  }
}

// Variante global (no usa :host-context) — para SCSS NO de componente.
@mixin dark-global {
  body.dark,
  html.ion-palette-dark,
  [data-theme='dark'] {
    @content;
  }
}