@import './media-queries.scss';

/**
 * val-alert — Estilo unificado para ion-alert.
 *
 * Inspirado en iOS native UIAlertController:
 * - Backdrop con blur
 * - Wrapper translúcido con bordes redondeados
 * - Botones pill apilados, full-width
 * - **Sin colores**: todos los botones neutros (incluido destructive)
 * - Adapta light/dark via prefers-color-scheme con fallbacks explícitos
 *
 * Aplicado por default desde ConfirmationDialogService.
 */

ion-alert.val-alert {
  /* Defaults light mode (variables locales del scope del alert) */
  --val-alert-bg: var(--ion-background-color, #ffffff);
  --val-alert-border: rgba(0, 0, 0, 0.08);
  --val-alert-text: var(--ion-text-color, #000000);
  --val-alert-text-muted: rgba(0, 0, 0, 0.62);
  --val-alert-btn-bg: rgba(0, 0, 0, 0.05);
  --val-alert-btn-bg-hover: rgba(0, 0, 0, 0.08);
  --val-alert-btn-bg-active: rgba(0, 0, 0, 0.12);
  --val-alert-btn-border: rgba(0, 0, 0, 0.06);

  /* Backdrop */
  --backdrop-opacity: 0.4;
  --background: var(--val-alert-bg);

  &::part(backdrop) {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .alert-wrapper {
    border-radius: 16px;
    border: 1px solid var(--val-alert-border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
  }

  .alert-head {
    padding: 20px 20px 8px;
    text-align: center;
  }

  .alert-title {
    color: var(--val-alert-text);
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.3;
  }

  .alert-sub-title {
    color: var(--val-alert-text-muted);
    font-size: 0.875rem;
    margin-top: 4px;
  }

  .alert-message {
    color: var(--val-alert-text-muted);
    font-size: 0.875rem;
    line-height: 1.4;
    padding: 0 20px 16px;
    text-align: center;
  }

  .alert-button-group {
    flex-direction: column !important;
    padding: 8px;
    gap: 6px;
    background: transparent;
    border-top: none;
  }

  button.alert-button {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: 14px 20px;
    border-radius: 12px;
    background: var(--val-alert-btn-bg);
    border: 1px solid var(--val-alert-btn-border);
    color: var(--val-alert-text);
    font-weight: 600;
    font-size: 1rem;
    text-transform: none;
    letter-spacing: 0;
    transition: background 0.15s ease;
    min-height: auto;

    &::part(native) {
      background: transparent;
      color: inherit;
    }

    &:hover {
      background: var(--val-alert-btn-bg-hover);
    }

    &:active {
      background: var(--val-alert-btn-bg-active);
    }

    .alert-button-inner {
      justify-content: center;
      color: inherit;
      font-weight: inherit;
    }
  }

  button.alert-button.alert-button-role-cancel,
  button.alert-button[role='cancel'] {
    font-weight: 500;
  }
}

/* Dark mode — class-based (ThemeService toggle `body.dark`/`html.ion-palette-dark`).
   No usar `@include dark-global` porque pisaba el manual toggle. */
body.dark ion-alert.val-alert,
html.ion-palette-dark ion-alert.val-alert,
body[data-theme='dark'] ion-alert.val-alert {
  --val-alert-bg: var(--ion-background-color, #1c1c1e);
  --val-alert-border: rgba(255, 255, 255, 0.08);
  --val-alert-text: var(--ion-text-color, #ffffff);
  --val-alert-text-muted: rgba(255, 255, 255, 0.7);
  --val-alert-btn-bg: rgba(255, 255, 255, 0.06);
  --val-alert-btn-bg-hover: rgba(255, 255, 255, 0.12);
  --val-alert-btn-bg-active: rgba(255, 255, 255, 0.18);
  --val-alert-btn-border: rgba(255, 255, 255, 0.06);
}