.centered-item[data-v-ff509132] {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.centered-avatar[data-v-ff509132] {
  display: block;
  margin: 0 auto;
}
.pointer[data-v-ff509132] {
  cursor: pointer;
}
.menu-logout-footer[data-v-ff509132] {
  background: var(--ion-background-color);
  border-top: 1px solid var(--ion-color-step-150, rgba(0, 0, 0, .13));
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 10;
}
.menu-logout-footer ion-toolbar[data-v-ff509132] {
  --background: var(--ion-background-color);
  --border-width: 0;
  --min-height: 64px;
  --padding-bottom: 0;
  --padding-end: 0;
  --padding-start: 0;
  --padding-top: 0;
}
.menu-logout-link[data-v-ff509132] {
  align-items: center;
  color: var(--ion-text-color);
  cursor: pointer;
  display: flex;
  font: inherit;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 26px 0 24px;
  text-align: left;
  text-decoration: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: rgba(255, 0, 96, .18);
  width: 100%;
}
.menu-logout-link span[data-v-ff509132] {
  color: inherit;
}
.menu-logout-link ion-icon[data-v-ff509132] {
  color: currentColor;
  flex: 0 0 auto;
}
ion-menu[data-v-ff509132]::part(backdrop) {
  background-color: #FF0060;
}
ion-menu[data-v-ff509132]::part(container) {
  border-radius: 0 20px 20px 0;
  box-shadow: 4px 0px 16px #FF0060;
}
#preview-container[data-v-ff509132] {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
  margin-bottom: 20px;
}
#preview[data-v-ff509132] {
  width: 100%;
  height: 100%;
}
.cropper-view-box[data-v-ff509132],
.cropper-face[data-v-ff509132] {
  border-radius: 50% !important;
}
.cropper-view-box[data-v-ff509132] {
  outline: 0 !important;
  box-shadow: 0 0 0 1px #39f !important;
}

/* ===== TAB BAR ===== */
.enhanced-tab-bar[data-v-ff509132] {
  --border: 0;
  --color: var(--ion-color-medium);
  --color-selected: #FF0060;
  position: relative;
  padding-bottom: env(safe-area-inset-bottom);
  background: linear-gradient(135deg, rgba(var(--ion-background-color-rgb, 255, 255, 255), .95) 0%, rgba(var(--ion-background-color-rgb, 255, 255, 255), .98) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 -4px 20px rgba(255, 0, 96, .08);
  transition: background .3s ease, box-shadow .3s ease;
}
.ion-palette-dark .enhanced-tab-bar[data-v-ff509132] {
  background: linear-gradient(135deg, rgba(var(--ion-background-color-rgb, 30, 30, 30), .95) 0%, rgba(var(--ion-background-color-rgb, 18, 18, 18), .98) 100%);
  box-shadow: 0 -4px 20px rgba(255, 0, 96, .25);
}
.ion-palette-dark ion-tab-button[data-v-ff509132] {
  --color: var(--ion-color-medium-tint);
}
.ion-palette-dark ion-tab-button.tab-selected[data-v-ff509132] {
  --color-selected: #FF0060;
}
ion-tab-button[data-v-ff509132] {
  position: relative;
  --padding-bottom: 0;
  --padding-top: 0;
  overflow: visible;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
ion-tab-button.tab-selected[data-v-ff509132]::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-selected, #FF0060), transparent);
  border-radius: 2px;
  animation: expand-indicator-ff509132 .5s cubic-bezier(.68, -.55, .265, 1.55) forwards;
  box-shadow: 0 0 15px rgba(255, 0, 96, .5);
}
.ion-palette-dark ion-tab-button.tab-selected[data-v-ff509132]::before {
  box-shadow: 0 0 20px rgba(255, 0, 96, .7);
}
@keyframes expand-indicator-ff509132 {
to {
    width: 60%;
}
}
ion-tab-button.tab-selected[data-v-ff509132]::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, rgba(255, 0, 96, .3) 0%, transparent 70%);
  border-radius: 50%;
  animation: glow-pulse-ff509132 2s ease-in-out infinite;
  pointer-events: none;
}
.ion-palette-dark ion-tab-button.tab-selected[data-v-ff509132]::after {
  background: radial-gradient(circle, rgba(255, 0, 96, .5) 0%, transparent 70%);
}
@keyframes glow-pulse-ff509132 {
0%,
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(.5);
}
50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.5);
}
}
ion-tab-button.tab-selected ion-icon[data-v-ff509132] {
  animation: icon-select-ff509132 .6s cubic-bezier(.68, -.55, .265, 1.55),icon-float-ff509132 3s ease-in-out infinite;
  filter: drop-shadow(0 4px 6px rgba(255, 0, 96, .3));
  transform-origin: center;
}
@keyframes icon-select-ff509132 {
0% {
    transform: scale(.3) rotate(-180deg);
    opacity: 0;
}
50% {
    transform: scale(1.2) rotate(10deg);
}
100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}
}
@keyframes icon-float-ff509132 {
0%,
  100% {
    transform: translateY(0) scale(1);
}
25% {
    transform: translateY(-2px) scale(1.05) rotate(2deg);
}
50% {
    transform: translateY(0) scale(1);
}
75% {
    transform: translateY(-1px) scale(1.02) rotate(-2deg);
}
}
ion-tab-button:not(.tab-selected).hovering ion-icon[data-v-ff509132] {
  animation: icon-hover-ff509132 .4s cubic-bezier(.4, 0, .2, 1);
  color: var(--color-selected, #FF0060);
  filter: drop-shadow(0 2px 4px rgba(255, 0, 96, .2));
}
.ion-palette-dark ion-tab-button:not(.tab-selected).hovering ion-icon[data-v-ff509132] {
  filter: drop-shadow(0 2px 6px rgba(255, 0, 96, .4));
}
@keyframes icon-hover-ff509132 {
0% {
    transform: scale(1) rotate(0deg);
}
25% {
    transform: scale(1.1) rotate(-5deg);
}
50% {
    transform: scale(1.15) rotate(5deg);
}
75% {
    transform: scale(1.1) rotate(-3deg);
}
100% {
    transform: scale(1.05) rotate(0deg);
}
}
ion-tab-button:active ion-icon[data-v-ff509132] {
  animation: icon-tap-ff509132 .3s cubic-bezier(.68, -.55, .265, 1.55);
}
@keyframes icon-tap-ff509132 {
0% {
    transform: scale(1) rotate(0deg);
}
50% {
    transform: scale(.85) rotate(180deg);
}
100% {
    transform: scale(1) rotate(360deg);
}
}
ion-tab-button ion-label[data-v-ff509132] {
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  opacity: .7;
  transform: translateY(0);
}
ion-tab-button.tab-selected ion-label[data-v-ff509132] {
  opacity: 1;
  font-weight: 600;
  animation: label-appear-ff509132 .5s cubic-bezier(.4, 0, .2, 1);
}
@keyframes label-appear-ff509132 {
0% {
    opacity: 0;
    transform: translateY(10px);
}
100% {
    opacity: 1;
    transform: translateY(0);
}
}
ion-tab-button[tab="tab1"].tab-selected ion-icon[data-v-ff509132] {
  animation: icon-select-ff509132 .6s cubic-bezier(.68, -.55, .265, 1.55),home-pulse-ff509132 2s ease-in-out .6s infinite;
}
@keyframes home-pulse-ff509132 {
0%,
  100% {
    transform: scale(1);
}
50% {
    transform: scale(1.08) rotate(5deg);
}
}
ion-tab-button[tab="tab2"].tab-selected ion-icon[data-v-ff509132] {
  animation: icon-select-ff509132 .6s cubic-bezier(.68, -.55, .265, 1.55),calendar-swing-ff509132 2.5s ease-in-out .6s infinite;
}
@keyframes calendar-swing-ff509132 {
0%,
  100% {
    transform: rotate(0deg);
}
25% {
    transform: rotate(-10deg) scale(1.05);
}
75% {
    transform: rotate(10deg) scale(1.05);
}
}
ion-tab-button[tab="tab3"].tab-selected ion-icon[data-v-ff509132] {
  animation: icon-select-ff509132 .6s cubic-bezier(.68, -.55, .265, 1.55),happy-bounce-ff509132 2s ease-in-out .6s infinite;
}
@keyframes happy-bounce-ff509132 {
0%,
  100% {
    transform: translateY(0) scale(1);
}
25% {
    transform: translateY(-4px) scale(1.1) rotate(-5deg);
}
50% {
    transform: translateY(0) scale(1);
}
75% {
    transform: translateY(-2px) scale(1.05) rotate(5deg);
}
}
ion-tab-button[tab="activities"].tab-selected ion-icon[data-v-ff509132],
ion-tab-button[tab="tab5"].tab-selected ion-icon[data-v-ff509132],
ion-tab-button[tab="tab6"].tab-selected ion-icon[data-v-ff509132] {
  animation: icon-select-ff509132 .6s cubic-bezier(.68, -.55, .265, 1.55),bulb-glow-ff509132 3s ease-in-out .6s infinite;
}
@keyframes bulb-glow-ff509132 {
0%,
  100% {
    filter: drop-shadow(0 0 3px rgba(255, 200, 0, .3));
    transform: scale(1);
}
50% {
    filter: drop-shadow(0 0 15px rgba(255, 200, 0, .8));
    transform: scale(1.1);
}
}
.particle[data-v-ff509132] {
  position: absolute;
  pointer-events: none;
  width: 4px;
  height: 4px;
  background: var(--color-selected, #FF0060);
  border-radius: 50%;
  animation: particle-explosion-ff509132 .8s ease-out forwards;
  box-shadow: 0 0 4px rgba(255, 0, 96, .4);
}
.ion-palette-dark .particle[data-v-ff509132] {
  box-shadow: 0 0 6px rgba(255, 0, 96, .7);
}
@keyframes particle-explosion-ff509132 {
0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
}
100% {
    transform: translate(var(--tx), var(--ty)) scale(0);
    opacity: 0;
}
}
ion-tab-button[data-v-ff509132] {
  overflow: hidden;
}
ion-tab-button[data-v-ff509132]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 0, 96, .1);
  transform: translate(-50%, -50%);
  transition: width .6s, height .6s;
  pointer-events: none;
}
.ion-palette-dark ion-tab-button[data-v-ff509132]::before {
  background: rgba(255, 0, 96, .2);
}
ion-tab-button[data-v-ff509132]:active::before {
  width: 100px;
  height: 100px;
}
/* =========================================================================
   ESPANHOL QUE BOLA — Design Tokens
   Estilo: iOS 26 "Liquid Glass"
   - Superficies translúcidas con refracción simulada (backdrop-filter).
   - Esquinas continuas (superellipse aproximado con border-radius grande).
   - Sombras suaves coloreadas, layering en capas.
   - Easings de muelle (spring) y duraciones cortas.
   - Modo claro + dark mode (.ion-palette-dark).
   Para más info de Ionic theming: http://ionicframework.com/docs/theming/
   ========================================================================= */

:root {
  /* ── Marca ─────────────────────────────────────────────────────────────── */
  --eqb-pink: #ED1B5C;
  --eqb-pink-strong: #FF0060;
  --eqb-yellow: #F0F099;
  --eqb-black: #111111;

  /* ── Radii (esquinas continuas) ─────────────────────────────────────────── */
  --eqb-radius-xs: 8px;
  --eqb-radius-sm: 12px;
  --eqb-radius-md: 18px;
  --eqb-radius-lg: 24px;
  --eqb-radius-xl: 32px;
  --eqb-radius-pill: 9999px;

  /* ── Espaciado ──────────────────────────────────────────────────────────── */
  --eqb-space-1: 4px;
  --eqb-space-2: 8px;
  --eqb-space-3: 12px;
  --eqb-space-4: 16px;
  --eqb-space-5: 24px;
  --eqb-space-6: 32px;
  --eqb-space-7: 48px;
  --eqb-page-gutter: clamp(10px, 3vw, 14px);
  --ion-padding: var(--eqb-page-gutter);

  /* ── Tipografía ─────────────────────────────────────────────────────────── */
  --eqb-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --eqb-font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --eqb-letter-tight: -0.022em;

  /* ── Glass / Materiales (Liquid Glass) ─────────────────────────────────── */
  --eqb-glass-blur: 28px;
  --eqb-glass-saturation: 180%;
  --eqb-glass-tint-light: rgba(255, 255, 255, 0.62);
  --eqb-glass-tint-dark: rgba(20, 20, 22, 0.55);
  --eqb-glass-border-light: rgba(255, 255, 255, 0.55);
  --eqb-glass-border-dark: rgba(255, 255, 255, 0.08);

  --eqb-glass-bg: var(--eqb-glass-tint-light);
  --eqb-glass-border: var(--eqb-glass-border-light);

  /* ── Sombras (suaves, coloreadas) ──────────────────────────────────────── */
  --eqb-shadow-1: 0 1px 2px rgba(17, 17, 17, 0.04),
                  0 2px 8px rgba(17, 17, 17, 0.06);
  --eqb-shadow-2: 0 4px 14px rgba(17, 17, 17, 0.08),
                  0 1px 3px rgba(17, 17, 17, 0.05);
  --eqb-shadow-3: 0 10px 30px rgba(17, 17, 17, 0.10),
                  0 4px 12px rgba(17, 17, 17, 0.06);
  --eqb-shadow-brand: 0 12px 28px rgba(237, 27, 92, 0.22),
                      0 4px 10px rgba(237, 27, 92, 0.18);

  /* ── Easings & duraciones ──────────────────────────────────────────────── */
  --eqb-ease-spring: cubic-bezier(.34, 1.56, .64, 1);    /* overshoot suave */
  --eqb-ease-smooth: cubic-bezier(.22, 1, .36, 1);       /* salida fluida */
  --eqb-ease-snappy: cubic-bezier(.4, 0, .2, 1);         /* material-like */
  --eqb-dur-fast: 180ms;
  --eqb-dur-base: 260ms;
  --eqb-dur-slow: 420ms;

  /* ── Tap / Hit ─────────────────────────────────────────────────────────── */
  --eqb-tap-min: 44px;

  /* ── Ionic — claro ─────────────────────────────────────────────────────── */
  --ion-color-primary: var(--eqb-pink);
  --ion-color-primary-rgb: 237, 27, 92;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #d11851;
  --ion-color-primary-tint: #ef326c;

  --ion-font-family: var(--eqb-font-text);
}

/* =========================================================================
   DARK MODE — .ion-palette-dark
   ========================================================================= */
.ion-palette-dark {
  /* Ionic define --ion-text-color sólo en .ion-palette-dark.ios y
     .ion-palette-dark.md. Si el toggle dark se aplica antes que las
     clases de modo de plataforma, fallback a blanco aquí. */
  --ion-text-color: #ffffff;
  --ion-text-color-rgb: 255, 255, 255;

  --eqb-glass-bg: var(--eqb-glass-tint-dark);
  --eqb-glass-border: var(--eqb-glass-border-dark);

  --eqb-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35),
                  0 2px 8px rgba(0, 0, 0, 0.45);
  --eqb-shadow-2: 0 4px 14px rgba(0, 0, 0, 0.5),
                  0 1px 3px rgba(0, 0, 0, 0.4);
  --eqb-shadow-3: 0 10px 30px rgba(0, 0, 0, 0.55),
                  0 4px 12px rgba(0, 0, 0, 0.4);
  --eqb-shadow-brand: 0 12px 28px rgba(255, 0, 96, 0.32),
                      0 4px 10px rgba(255, 0, 96, 0.24);
}

/* =========================================================================
   VIEWPORT / iOS CAPACITOR
   Mantiene el root de Ionic pegado al WKWebView después de overlays nativos
   (SFSafariViewController, teclado, cambio de orientación).
   ========================================================================= */

html,
body,
#app,
ion-app {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

html,
body {
  background: var(--ion-background-color, #ffffff);
  overflow: hidden;
}

body {
  inset: 0;
}

#app,
ion-app {
  height: 100%;
  min-height: 100%;
  background: var(--ion-background-color, #ffffff);
}

ion-app {
  margin: 0;
  overflow: hidden;
}

@supports (height: 100dvh) {
  html.plt-hybrid,
  html.plt-hybrid body,
  html.plt-hybrid #app {
    height: 100dvh;
    max-height: 100dvh;
  }
}

/* =========================================================================
   IONIC CHROME — refinamientos globales iOS 26
   Aplicamos sólo cosas seguras y reversibles, vía variables de Ionic.
   ========================================================================= */

/* Tipografía global con tracking más apretado para títulos */
ion-title,
.ion-page h1,
.ion-page h2,
.ion-page h3 {
  font-family: var(--eqb-font-display);
  letter-spacing: var(--eqb-letter-tight);
}

/* Toolbars: solo activamos el efecto Liquid Glass cuando Ionic marca el
   toolbar como translúcido (translucent="true"). En modo opaco mantenemos
   el fondo estándar para no dejar huecos visuales cuando no hay contenido
   detrás del toolbar (p. ej. al cargar la página al top). */
ion-header ion-toolbar.toolbar-translucent {
  --background: var(--eqb-glass-bg);
  --border-color: transparent;
  -webkit-backdrop-filter: saturate(var(--eqb-glass-saturation)) blur(var(--eqb-glass-blur));
  backdrop-filter: saturate(var(--eqb-glass-saturation)) blur(var(--eqb-glass-blur));
}

/* Botones con esquinas continuas y transición spring */
ion-button {
  --border-radius: var(--eqb-radius-md);
  --transition: transform var(--eqb-dur-fast) var(--eqb-ease-spring),
                box-shadow var(--eqb-dur-base) var(--eqb-ease-smooth),
                background var(--eqb-dur-base) var(--eqb-ease-smooth);
  --box-shadow: var(--eqb-shadow-1);
  letter-spacing: 0.01em;
}
ion-button:active {
  transform: scale(0.97);
}
ion-button[fill="solid"]:not([color="light"]):not([color="medium"]) {
  --box-shadow: var(--eqb-shadow-brand);
}

/* Contenido: gutters más compactos en móvil. Ionic usa --ion-padding para
   .ion-padding; fijarlo aquí evita que cada página herede 16px rígidos. */
ion-content.ion-padding {
  --padding-start: var(--eqb-page-gutter);
  --padding-end: var(--eqb-page-gutter);
}

/* Cards con esquinas grandes y sombra suave */
ion-card {
  border-radius: var(--eqb-radius-lg);
  box-shadow: var(--eqb-shadow-2);
  overflow: hidden;
  transition: transform var(--eqb-dur-base) var(--eqb-ease-smooth),
              box-shadow var(--eqb-dur-base) var(--eqb-ease-smooth);
}
ion-card.pressable:active {
  transform: scale(0.985);
  box-shadow: var(--eqb-shadow-1);
}

/* Items con feedback más sutil */
ion-item {
  --transition: background var(--eqb-dur-fast) var(--eqb-ease-snappy);
  --inner-border-width: 0 0 0.5px 0;
}

/* Modales tipo sheet con esquinas grandes */
ion-modal {
  --border-radius: var(--eqb-radius-xl);
  --box-shadow: var(--eqb-shadow-3);
}

/* Action sheet más redondeado */
ion-action-sheet {
  --button-background: var(--eqb-glass-bg);
}

/* Inputs: foco con anillo de marca suave */
ion-input.has-focus,
ion-textarea.has-focus {
  --highlight-color-focused: var(--eqb-pink);
}

/* Loading: respeta tipografía display */
ion-loading {
  font-family: var(--eqb-font-display);
}

/* Chips → pills con tipografía consistente */
ion-chip {
  --border-radius: var(--eqb-radius-pill);
  font-weight: 500;
  letter-spacing: 0.005em;
}

/* Segments → glass + indicador rosa */
ion-segment {
  --background: var(--eqb-glass-bg);
  border-radius: var(--eqb-radius-pill);
  -webkit-backdrop-filter: saturate(var(--eqb-glass-saturation)) blur(var(--eqb-glass-blur));
  backdrop-filter: saturate(var(--eqb-glass-saturation)) blur(var(--eqb-glass-blur));
  border: 0.5px solid var(--eqb-glass-border);
  padding: 3px;
}
ion-segment-button {
  --indicator-color: var(--eqb-pink);
  --color-checked: #ffffff;
  --border-radius: var(--eqb-radius-pill);
  min-height: 36px;
  letter-spacing: 0.005em;
  font-weight: 500;
  transition: color var(--eqb-dur-fast) var(--eqb-ease-smooth);
}

/* Searchbar → look iOS con esquinas grandes */
ion-searchbar {
  --background: var(--eqb-glass-bg);
  --border-radius: var(--eqb-radius-md) !important;
  --box-shadow: var(--eqb-shadow-1);
  --placeholder-opacity: 0.55;
  --placeholder-font-weight: 500;
  padding-inline: 0 !important;
}

/* FAB con sombra brand */
ion-fab-button {
  --box-shadow: var(--eqb-shadow-brand);
  --border-radius: var(--eqb-radius-pill);
  --transition: transform var(--eqb-dur-fast) var(--eqb-ease-spring);
}
ion-fab-button:active {
  transform: scale(0.94);
}

/* Lista inset → esquinas grandes (iOS 15+) */
ion-list[inset="true"],
ion-list.inset,
ion-list[inset] {
  --ion-item-background: var(--eqb-glass-bg);
  border-radius: var(--eqb-radius-lg);
  margin-inline: 16px;
  box-shadow: var(--eqb-shadow-1);
  overflow: hidden;
}

/* List header → tipografía display + más peso */
ion-list-header {
  font-family: var(--eqb-font-display);
  letter-spacing: var(--eqb-letter-tight);
  font-weight: 600;
}

/* Refresher → color brand */
ion-refresher {
  --color: var(--eqb-pink);
}

/* Toggle → tinte brand cuando está activo */
ion-toggle {
  --background-checked: var(--eqb-pink);
  --handle-box-shadow: var(--eqb-shadow-1);
}

/* Progress bar → curva brand */
ion-progress-bar {
  --background: rgba(var(--ion-color-primary-rgb), 0.16);
  --progress-background: var(--eqb-pink);
}

/* Selección de texto y autofill — uniforme con la marca */
::selection {
  background: rgba(237, 27, 92, 0.22);
}

/* Inputs nativos (no Ionic) heredan color del tema. Sin esto, el user
   agent stylesheet del navegador puede pintar texto negro fijo aunque
   estés en dark mode. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
  color: var(--ion-text-color);
  caret-color: var(--ion-text-color);
}
/* Autofill: Chrome inyecta su propio -webkit-text-fill-color (azul oscuro)
   y un background amarillo claro. Tapamos ambos:
   - el bg amarillo, con un box-shadow inset SÓLIDO del color del tema
     (no puede ser rgba con alpha porque el amarillo se vería detrás);
   - el text-fill, forzando el color del tema. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ion-text-color) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--ion-background-color) inset !important;
  box-shadow: 0 0 0 1000px var(--ion-background-color) inset !important;
  caret-color: var(--ion-text-color);
  /* La transición larga oculta el "flash" amarillo que Chrome aplica
     antes de evaluar nuestra regla. */
  transition: background-color 9999s ease-out, color 9999s ease-out;
}

/* Focus visible accesible — anillo discreto solo con teclado */
:focus-visible {
  outline: 2px solid rgba(237, 27, 92, 0.55);
  outline-offset: 2px;
  border-radius: var(--eqb-radius-xs);
}

/* Scrollbar webkit — fina y discreta (solo PWA/web; nativos la ignoran) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: rgba(120, 120, 128, 0.32);
  border-radius: var(--eqb-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(120, 120, 128, 0.55);
}
::-webkit-scrollbar-track {
  background: transparent;
}
.ion-palette-dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
}
.ion-palette-dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}
/* =========================================================================
   ESPANHOL QUE BOLA — Animation Utilities (global)
   Estilo: iOS 26 (Liquid Glass) — animaciones tipo spring, sutiles.
   Usa tokens de variables.css. Se carga globalmente desde main.ts.
   ========================================================================= */

/* ── Keyframes base ──────────────────────────────────────────────────────── */
@keyframes eqb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes eqb-fade-in-up {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes eqb-fade-in-down {
  from { opacity: 0; transform: translate3d(0, -14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes eqb-slide-in-right {
  from { opacity: 0; transform: translate3d(24px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes eqb-slide-in-left {
  from { opacity: 0; transform: translate3d(-24px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes eqb-scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes eqb-pop-in {
  0%   { opacity: 0; transform: scale(0.86); }
  60%  { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes eqb-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes eqb-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(237, 27, 92, 0.0); }
  50%      { box-shadow: 0 0 0 12px rgba(237, 27, 92, 0.0), 0 0 24px rgba(237, 27, 92, 0.35); }
}

/* ── Clases de uso ───────────────────────────────────────────────────────── */
.fade-in {
  animation: eqb-fade-in var(--eqb-dur-base) var(--eqb-ease-smooth) both;
}

.fade-in-up {
  animation: eqb-fade-in-up var(--eqb-dur-slow) var(--eqb-ease-smooth) both;
}

.fade-in-down {
  animation: eqb-fade-in-down var(--eqb-dur-slow) var(--eqb-ease-smooth) both;
}

.slide-in-right {
  animation: eqb-slide-in-right var(--eqb-dur-slow) var(--eqb-ease-spring) both;
}

.slide-in-left {
  animation: eqb-slide-in-left var(--eqb-dur-slow) var(--eqb-ease-spring) both;
}

.scale-in {
  animation: eqb-scale-in var(--eqb-dur-base) var(--eqb-ease-spring) both;
}

.pop-in {
  animation: eqb-pop-in var(--eqb-dur-slow) var(--eqb-ease-spring) both;
}

/* Delays escalonados — útil para listas */
.delay-1 { animation-delay: 60ms; }
.delay-2 { animation-delay: 120ms; }
.delay-3 { animation-delay: 180ms; }
.delay-4 { animation-delay: 240ms; }
.delay-5 { animation-delay: 300ms; }
.delay-6 { animation-delay: 360ms; }

/* ── Stagger automático con :nth-child (hasta 12 items) ─────────────────── */
.eqb-stagger > * {
  animation: eqb-fade-in-up var(--eqb-dur-slow) var(--eqb-ease-smooth) both;
}
.eqb-stagger > *:nth-child(1)  { animation-delay: 40ms; }
.eqb-stagger > *:nth-child(2)  { animation-delay: 90ms; }
.eqb-stagger > *:nth-child(3)  { animation-delay: 140ms; }
.eqb-stagger > *:nth-child(4)  { animation-delay: 190ms; }
.eqb-stagger > *:nth-child(5)  { animation-delay: 240ms; }
.eqb-stagger > *:nth-child(6)  { animation-delay: 290ms; }
.eqb-stagger > *:nth-child(7)  { animation-delay: 340ms; }
.eqb-stagger > *:nth-child(8)  { animation-delay: 390ms; }
.eqb-stagger > *:nth-child(9)  { animation-delay: 440ms; }
.eqb-stagger > *:nth-child(10) { animation-delay: 490ms; }
.eqb-stagger > *:nth-child(11) { animation-delay: 540ms; }
.eqb-stagger > *:nth-child(12) { animation-delay: 590ms; }

/* ── Press feedback (botones / cards interactivas) ──────────────────────── */
.eqb-pressable {
  transition: transform var(--eqb-dur-fast) var(--eqb-ease-spring),
              box-shadow var(--eqb-dur-base) var(--eqb-ease-smooth);
  will-change: transform;
}
.eqb-pressable:active {
  transform: scale(0.97);
}

/* ── Hover lift (sólo dispositivos con puntero fino) ────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .eqb-lift {
    transition: transform var(--eqb-dur-base) var(--eqb-ease-smooth),
                box-shadow var(--eqb-dur-base) var(--eqb-ease-smooth);
  }
  .eqb-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--eqb-shadow-3);
  }
}

/* ── Skeleton shimmer ───────────────────────────────────────────────────── */
.eqb-skeleton {
  position: relative;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.05) 25%,
    rgba(0,0,0,0.10) 50%,
    rgba(0,0,0,0.05) 75%
  );
  background-size: 200% 100%;
  animation: eqb-shimmer 1.6s linear infinite;
  border-radius: var(--eqb-radius-sm);
}
.ion-palette-dark .eqb-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
}

/* ── Glass surface (úsalo en cards / sheets que quieras destacar) ───────── */
.eqb-glass {
  background: var(--eqb-glass-bg);
  border: 0.5px solid var(--eqb-glass-border);
  -webkit-backdrop-filter: saturate(var(--eqb-glass-saturation)) blur(var(--eqb-glass-blur));
  backdrop-filter: saturate(var(--eqb-glass-saturation)) blur(var(--eqb-glass-blur));
  border-radius: var(--eqb-radius-lg);
  box-shadow: var(--eqb-shadow-2);
}

/* ── Transición de página suave para router-outlet ──────────────────────── */
ion-router-outlet > .ion-page {
  transition: opacity var(--eqb-dur-base) var(--eqb-ease-smooth);
}

/* ── Overlays (modales, action sheets, popovers, alerts) ────────────────── */
/* Refinamos la curva de entrada/salida para sentirla más spring,
   sin tocar la animación de router-outlet (que mantiene el back-swipe iOS). */
ion-modal,
ion-action-sheet,
ion-popover,
ion-alert,
ion-picker,
ion-toast {
  --backdrop-opacity: 0.32;
}

ion-modal::part(content),
ion-action-sheet::part(container),
ion-popover::part(content) {
  border-radius: var(--eqb-radius-xl);
  box-shadow: var(--eqb-shadow-3);
}

ion-action-sheet::part(container) {
  border-radius: var(--eqb-radius-xl) var(--eqb-radius-xl) 0 0;
}

ion-action-sheet::part(button) {
  font-weight: 500;
  letter-spacing: 0.005em;
}

ion-alert::part(content) {
  border-radius: var(--eqb-radius-xl);
}

/* ── Respeto a prefers-reduced-motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-in-up,
  .fade-in-down,
  .slide-in-right,
  .slide-in-left,
  .scale-in,
  .pop-in,
  .eqb-stagger > *,
  .eqb-skeleton {
    animation: none !important;
  }
  .eqb-pressable,
  .eqb-lift {
    transition: none !important;
  }
}
/* =========================================================================
   ESPANHOL QUE BOLA — Overrides globales (iOS 26 Liquid Glass)
   Cubre dos territorios que la app usa de forma masiva:
   1) SweetAlert2 — Swal.fire(...) aparece para errores, confirmaciones, etc.
   2) Bootstrap 5 form controls — inputs, labels, alerts, botones.
   No tocamos componentes nativos de Ionic (ya cubiertos en variables.css).
   ========================================================================= */

/* ─────────────────────────────────────────────────────────────────────────
   1) SWEETALERT2 — iOS 26 Liquid Glass
   ─────────────────────────────────────────────────────────────────────── */
.swal2-container {
  z-index: 99999;
}

.swal2-popup {
  border-radius: var(--eqb-radius-xl) !important;
  padding: 1.5rem 1.5rem 1.25rem !important;
  background: var(--eqb-glass-bg) !important;
  -webkit-backdrop-filter: saturate(var(--eqb-glass-saturation)) blur(var(--eqb-glass-blur));
  backdrop-filter: saturate(var(--eqb-glass-saturation)) blur(var(--eqb-glass-blur));
  border: 0.5px solid var(--eqb-glass-border);
  box-shadow: var(--eqb-shadow-3) !important;
  font-family: var(--eqb-font-display) !important;
}
/* NO sobrescribir animaciones de .swal2-popup directamente: Swal añade
   .swal2-hide para cerrar y espera el animationend para destruir el DOM.
   Si pisamos .swal2-popup con `animation: ... both`, .swal2-hide no
   dispara animationend → modal nunca se desmonta → backdrop bloquea todo.
   En su lugar, sólo decoramos el estado .swal2-show. */
.swal2-popup.swal2-show {
  animation: eqb-pop-in var(--eqb-dur-slow) var(--eqb-ease-spring);
}

.ion-palette-dark .swal2-popup {
  color: #f5f5f7 !important;
}

.swal2-title {
  font-weight: 700 !important;
  letter-spacing: var(--eqb-letter-tight) !important;
  font-size: 1.15rem !important;
  padding-top: 0.25rem !important;
}

.swal2-html-container,
.swal2-content {
  font-family: var(--eqb-font-text) !important;
  font-size: 0.95rem !important;
}

.swal2-actions {
  gap: 0.5rem !important;
  margin-top: 1rem !important;
}

.swal2-styled.swal2-confirm,
.swal2-styled.swal2-deny,
.swal2-styled.swal2-cancel {
  border-radius: var(--eqb-radius-md) !important;
  font-weight: 600 !important;
  padding: 0.65rem 1.25rem !important;
  min-height: var(--eqb-tap-min);
  transition: transform var(--eqb-dur-fast) var(--eqb-ease-spring),
              box-shadow var(--eqb-dur-base) var(--eqb-ease-smooth) !important;
  box-shadow: var(--eqb-shadow-1) !important;
}

.swal2-styled.swal2-confirm:active,
.swal2-styled.swal2-deny:active,
.swal2-styled.swal2-cancel:active {
  transform: scale(0.97);
}

.swal2-styled.swal2-confirm {
  background: var(--eqb-pink) !important;
  box-shadow: var(--eqb-shadow-brand) !important;
}

.swal2-styled.swal2-cancel {
  background: rgba(120, 120, 128, 0.16) !important;
  color: var(--eqb-black) !important;
}
.ion-palette-dark .swal2-styled.swal2-cancel {
  background: rgba(120, 120, 128, 0.32) !important;
  color: #f5f5f7 !important;
}

.swal2-icon {
  margin: 0.5rem auto 0.75rem !important;
}

/* Icono de éxito: SweetAlert2 usa "máscaras" (.swal2-success-fix y las
   circular-line) con fondo sólido (var(--swal2-background), blanco por
   defecto) para tapar el anillo mientras se dibuja la animación. Sobre el
   popup de cristal del tema claro esa franja blanca diagonal queda visible
   cruzando el check. Transparentándolas, en reposo no tapan nada y el
   anillo + check se ven limpios en tema claro y oscuro. */
.swal2-icon.swal2-success .swal2-success-circular-line-left,
.swal2-icon.swal2-success .swal2-success-circular-line-right,
.swal2-icon.swal2-success .swal2-success-fix {
  background-color: transparent !important;
}

.swal2-input,
.swal2-textarea,
.swal2-select {
  border-radius: var(--eqb-radius-sm) !important;
  border: 1px solid rgba(120, 120, 128, 0.2) !important;
  font-family: var(--eqb-font-text) !important;
  transition: border-color var(--eqb-dur-fast) var(--eqb-ease-smooth),
              box-shadow var(--eqb-dur-fast) var(--eqb-ease-smooth);
}
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
  border-color: var(--eqb-pink) !important;
  box-shadow: 0 0 0 3px rgba(237, 27, 92, 0.18) !important;
  outline: none !important;
}

.swal2-toast {
  border-radius: var(--eqb-radius-md) !important;
  background: var(--eqb-glass-bg) !important;
  -webkit-backdrop-filter: saturate(var(--eqb-glass-saturation)) blur(var(--eqb-glass-blur));
  backdrop-filter: saturate(var(--eqb-glass-saturation)) blur(var(--eqb-glass-blur));
  border: 0.5px solid var(--eqb-glass-border);
  box-shadow: var(--eqb-shadow-2) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   2) BOOTSTRAP 5 FORM CONTROLS — iOS 26 look
   ─────────────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
  border-radius: var(--eqb-radius-md) !important;
  border-color: rgba(120, 120, 128, 0.2) !important;
  min-height: var(--eqb-tap-min);
  padding: 0.625rem 0.875rem;
  font-family: var(--eqb-font-text);
  font-size: 1rem;
  transition: border-color var(--eqb-dur-fast) var(--eqb-ease-smooth),
              box-shadow var(--eqb-dur-fast) var(--eqb-ease-smooth);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--eqb-pink) !important;
  box-shadow: 0 0 0 3px rgba(237, 27, 92, 0.18) !important;
}

.ion-palette-dark .form-control,
.ion-palette-dark .form-select {
  background-color: rgba(255, 255, 255, 0.05);
  color: #f5f5f7;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
.ion-palette-dark .form-control::placeholder {
  color: rgba(245, 245, 247, 0.55);
}

.form-label {
  font-weight: 600;
  font-family: var(--eqb-font-text);
  letter-spacing: 0.005em;
  margin-bottom: 0.4rem;
}

/* Bootstrap buttons → estilo iOS 26 cuando se mezclan con la app */
.btn {
  border-radius: var(--eqb-radius-md) !important;
  font-weight: 600;
  letter-spacing: 0.005em;
  min-height: var(--eqb-tap-min);
  padding: 0.6rem 1.1rem;
  transition: transform var(--eqb-dur-fast) var(--eqb-ease-spring),
              box-shadow var(--eqb-dur-base) var(--eqb-ease-smooth),
              background var(--eqb-dur-base) var(--eqb-ease-smooth);
  box-shadow: var(--eqb-shadow-1);
}
.btn:active {
  transform: scale(0.97);
}
.btn-primary {
  --bs-btn-bg: var(--eqb-pink);
  --bs-btn-border-color: var(--eqb-pink);
  --bs-btn-hover-bg: #d11851;
  --bs-btn-hover-border-color: #d11851;
  --bs-btn-active-bg: #b91247;
  box-shadow: var(--eqb-shadow-brand);
}

/* Alerts → bordes grandes y glass */
.alert {
  border-radius: var(--eqb-radius-lg);
  border: 0.5px solid var(--eqb-glass-border);
  background: var(--eqb-glass-bg);
  -webkit-backdrop-filter: saturate(var(--eqb-glass-saturation)) blur(var(--eqb-glass-blur));
  backdrop-filter: saturate(var(--eqb-glass-saturation)) blur(var(--eqb-glass-blur));
  box-shadow: var(--eqb-shadow-1);
  animation: eqb-fade-in-down var(--eqb-dur-base) var(--eqb-ease-smooth) both;
}

/* Bootstrap badge → pill iOS */
.badge {
  border-radius: var(--eqb-radius-pill);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.35em 0.7em;
}

/* ─────────────────────────────────────────────────────────────────────────
   3) IONIC TOAST — iOS 26 glass + entrada spring
   ─────────────────────────────────────────────────────────────────────── */
ion-toast {
  --border-radius: var(--eqb-radius-lg);
  --background: var(--eqb-glass-bg);
  --color: var(--eqb-black);
  --box-shadow: var(--eqb-shadow-2);
  --backdrop-opacity: 0;
  font-family: var(--eqb-font-text);
}

.ion-palette-dark ion-toast {
  --color: #f5f5f7;
}

ion-toast::part(message) {
  font-weight: 500;
  letter-spacing: 0.005em;
}

ion-toast::part(container) {
  -webkit-backdrop-filter: saturate(var(--eqb-glass-saturation)) blur(var(--eqb-glass-blur));
  backdrop-filter: saturate(var(--eqb-glass-saturation)) blur(var(--eqb-glass-blur));
  border: 0.5px solid var(--eqb-glass-border);
}

ion-toast::part(button) {
  font-weight: 600;
  color: var(--eqb-pink);
}

/* ─────────────────────────────────────────────────────────────────────────
   4) BANNERS .notice (Register / forms) — iOS 26 glass
   Los selectores son globales, pero el .notice solo aparece en Register.vue.
   Mantengo compatibilidad con el código existente.
   ─────────────────────────────────────────────────────────────────────── */
.notice {
  border-radius: var(--eqb-radius-lg) !important;
  background: var(--eqb-glass-bg) !important;
  -webkit-backdrop-filter: saturate(var(--eqb-glass-saturation)) blur(var(--eqb-glass-blur)) !important;
  backdrop-filter: saturate(var(--eqb-glass-saturation)) blur(var(--eqb-glass-blur)) !important;
  border: 0.5px solid var(--eqb-glass-border) !important;
  box-shadow: var(--eqb-shadow-2) !important;
  animation: eqb-fade-in-down var(--eqb-dur-base) var(--eqb-ease-spring) both;
}

.notice--info    { border-left: 4px solid #0a84ff !important; }
.notice--danger  { border-left: 4px solid var(--eqb-pink) !important; }
.notice--success { border-left: 4px solid #30d158 !important; }
.notice--warning { border-left: 4px solid #ff9f0a !important; }
/* ===================================
   CUSTOM SPINNERS PARA IONIC VUE
   Solución completa con elementos HTML insertados
   =================================== */

/* Ocultar el spinner nativo de Ionic y preparar el contenedor */
.loader-premium ion-spinner,
.loader-premium .spinner-lines,
.loader-premium .spinner-lines-ios,
.loader-premium .spinner-lines-md,
.loader-premium .spinner-dots,
.loader-premium .spinner-bubbles,
.loader-premium .spinner-circles,
.loader-premium .spinner-crescent {
    display: none !important;
}

/* Contenedor base sin fondo */
.loader-premium {
    --background: transparent !important;
    --backdrop-opacity: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.loader-premium .loading-wrapper,
.loader-premium .loading-wrapper.sc-ion-loading-ios,
.loader-premium .loading-wrapper.sc-ion-loading-md {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 20px;
    position: relative;
}

/* Contenedor del spinner personalizado */
.custom-spinner-container {
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    position: relative;
    overflow: visible !important;   /* 🔥 no cortar los dots ni las waves */
}

/* === 1. DOTS ORBIT === */
.spinner-dots-orbit {
    width: 100%;
    height: 100%;
    position: relative;
    animation: rotate360 2s linear infinite;
    transform-origin: 50% 50% !important; /* 🔥 asegura rotación centrada */
}
.spinner-dots-orbit .dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: dotPulse 1.5s ease-in-out infinite;
}
.spinner-dots-orbit .dot:nth-child(1) {
    background: #0079FF;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 20px rgba(0,121,255,0.8);
}
.spinner-dots-orbit .dot:nth-child(2) {
    background: #00DFA2;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    animation-delay: 0.375s;
    box-shadow: 0 0 20px rgba(0,223,162,0.8);
}
.spinner-dots-orbit .dot:nth-child(3) {
    background: #F6FA70;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 0.75s;
    box-shadow: 0 0 20px rgba(246,250,112,0.8);
}
.spinner-dots-orbit .dot:nth-child(4) {
    background: #FF0060;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    animation-delay: 1.125s;
    box-shadow: 0 0 20px rgba(255,0,96,0.8);
}
@keyframes dotPulse {
    0%,100%{transform:scale(1);opacity:1;}
    50%{transform:scale(1.5);opacity:0.7;}
}

/* === 2. GRADIENT RING === */
.spinner-gradient-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(from 0deg,#0079FF,#00DFA2,#F6FA70,#FF0060,#0079FF);
    animation: rotate360 1s linear infinite;
    filter: drop-shadow(0 0 25px rgba(0,121,255,0.6));
}
.spinner-gradient-ring::after {
    content: '';
    position: absolute;
    inset: 6px;
    background: transparent !important;
    border-radius: 50%;
}

/* === 3. DOUBLE RING === */
.spinner-double-ring {
    width: 100%;
    height: 100%;
    position: relative;
}
.spinner-double-ring .ring {
    position: absolute;
    border-radius: 50%;
    border: 3px solid transparent;
}
.spinner-double-ring .ring:nth-child(1) {
    inset: 0;
    border-top-color: #0079FF;
    border-right-color: #00DFA2;
    animation: rotate360 1.5s linear infinite;
}
.spinner-double-ring .ring:nth-child(2) {
    inset: 10px;
    border-bottom-color: #F6FA70;
    border-left-color: #FF0060;
    animation: rotate360Reverse 1s linear infinite;
}

/* === 4. NEON PULSE === */
.spinner-neon-pulse {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(from 0deg,transparent,#00ffff,transparent,#ff00ff,transparent);
    animation: rotate360 1s linear infinite, neonGlow 2s ease-in-out infinite;
    filter: drop-shadow(0 0 30px #00ffff) drop-shadow(0 0 60px #ff00ff);
}
.spinner-neon-pulse::after {
    content: '';
    position: absolute;
    inset: 6px;
    background: transparent !important;
    border-radius: 50%;
}
@keyframes neonGlow {
    0%,100%{filter:drop-shadow(0 0 30px #00ffff) drop-shadow(0 0 60px #ff00ff);}
    50%{filter:drop-shadow(0 0 50px #00ffff) drop-shadow(0 0 100px #ff00ff);}
}

/* === 5. WAVE LOADER === */
.spinner-wave {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    overflow: visible !important; /* 🔥 no cortar barras */
}
.spinner-wave .bar {
    width: 8px;
    height: 100%;
    border-radius: 4px;
    animation: waveBar 1.2s ease-in-out infinite;
}
.spinner-wave .bar:nth-child(1){animation-delay:0s;background:#0079FF;}
.spinner-wave .bar:nth-child(2){animation-delay:.1s;background:#00DFA2;}
.spinner-wave .bar:nth-child(3){animation-delay:.2s;background:#F6FA70;}
.spinner-wave .bar:nth-child(4){animation-delay:.3s;background:#FF0060;}
.spinner-wave .bar:nth-child(5){animation-delay:.4s;background:#0079FF;}
@keyframes waveBar {0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

/* === 6. MORPHING SHAPE === */
.spinner-morphing {
    width: 60px;
    height: 60px;
    margin: 5px auto;
    background: linear-gradient(45deg,#0079FF,#00DFA2);
    animation: morphShape 2s ease-in-out infinite;
    box-shadow: 0 0 40px rgba(0,121,255,.6);
}
@keyframes morphShape {
    0%,100%{border-radius:50%;transform:rotate(0deg) scale(1);}
    25%{border-radius:0 50% 50% 50%;transform:rotate(90deg) scale(.9);}
    50%{border-radius:0;transform:rotate(180deg) scale(1);}
    75%{border-radius:50% 0 50% 50%;transform:rotate(270deg) scale(.9);}
}

/* === 7. GLITCH EFFECT === */
.spinner-glitch {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(from 0deg,#0079FF,#00DFA2,#F6FA70,#FF0060,#0079FF);
    animation: rotate360 2s linear infinite, glitchColors 3s infinite;
}
.spinner-glitch::after {
    content: '';
    position: absolute;
    inset: 6px;
    background: transparent !important;
    border-radius: 50%;
}
@keyframes glitchColors {
    0%,100%{filter:hue-rotate(0deg) brightness(1);}
    20%{filter:hue-rotate(90deg) brightness(1.2);}
    40%{filter:hue-rotate(-90deg) brightness(.8);}
    60%{filter:hue-rotate(180deg) brightness(1.1);}
    80%{filter:hue-rotate(-180deg) brightness(.9);}
}

/* === 8. MINIMAL ARC === */
.spinner-minimal-arc {
    width:100%;
    height:100%;
    border:3px solid rgba(255,255,255,0.12);
    border-top-color:#0079FF;
    border-radius:50%;
    animation:rotate360 0.8s ease-in-out infinite;
    box-sizing:border-box;
}

/* === 9. 3D FLIP === */
.spinner-flip-3d {
    width:100%;
    height:100%;
    position:relative;
    transform-style:preserve-3d;
    animation:flip3d 2s linear infinite;
}
.spinner-flip-3d::before,
.spinner-flip-3d::after {
    content:'';
    position:absolute;
    inset:0;
    border-radius:50%;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}
.spinner-flip-3d::before{background:linear-gradient(45deg,#0079FF,#00DFA2);z-index:2;}
.spinner-flip-3d::after{background:linear-gradient(45deg,#F6FA70,#FF0060);transform:rotateY(180deg);}
@keyframes flip3d{0%{transform:perspective(200px) rotateY(0)}100%{transform:perspective(200px) rotateY(360deg)}}

/* === 10. RIPPLE === */
.spinner-ripple{width:100%;height:100%;position:relative;}
.spinner-ripple .ring{
    position:absolute;
    inset:0;
    border:2px solid #0079FF;
    border-radius:50%;
    animation:rippleExpand 2s linear infinite;
    box-sizing:border-box;
}
.spinner-ripple .ring:nth-child(2){animation-delay:1s;border-color:#00DFA2;}
@keyframes rippleExpand{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:0}}

/* === 11. CLOCK === */
.spinner-clock {
    width:100%;
    height:100%;
    border:3px solid rgba(255,255,255,.12);
    border-radius:50%;
    position:relative;
    box-sizing:border-box;
}
.spinner-clock .hand{
    position:absolute;
    top:50%;left:50%;
    width:2px;height:30px;
    background:linear-gradient(to top,transparent,#0079FF);
    transform-origin:center bottom;
    transform:translate(-50%,-100%);
    animation:clockRotate 1.5s linear infinite;
}
.spinner-clock::before{
    content:'';
    position:absolute;
    top:50%;left:50%;
    width:8px;height:8px;
    background:#00DFA2;
    border-radius:50%;
    transform:translate(-50%,-50%);
    z-index:2;
}
@keyframes clockRotate{0%{transform:translate(-50%,-100%) rotate(0)}100%{transform:translate(-50%,-100%) rotate(360deg)}}

/* === Animaciones comunes === */
@keyframes rotate360{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes rotate360Reverse{from{transform:rotate(0)}to{transform:rotate(-360deg)}}

/* Texto con gradiente */
.loader-premium .loading-content {
    font-weight:600;
    font-size:0.95rem;
    letter-spacing:0.5px;
    background:linear-gradient(135deg,#0079FF 0%,#00DFA2 25%,#F6FA70 50%,#FF0060 75%,#0079FF 100%);
    background-size:300% 300%;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:gradientShift 3s ease infinite;
}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Tamaños */
.custom-spinner-container.small{width:40px;height:40px;}
.custom-spinner-container.large{width:100px;height:100px;}

/* === Patch iOS Safari === */
ion-loading::part(content),
ion-loading::part(backdrop) {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    opacity: 0 !important;
}

ion-loading,
ion-loading.loader-premium {
    --background: transparent !important;
    --backdrop-opacity: 0 !important;
    --spinner-color: transparent !important;
}

/* iOS: aplicar contain sólo a spinners problemáticos */
@supports (-webkit-touch-callout: none) {
  .spinner-gradient-ring,
  .spinner-neon-pulse,
  .spinner-glitch {
    contain: paint !important;
    isolation: isolate;
    will-change: transform;
    transform: translateZ(0);
  }
}