/* ============================================================================
   Notificaciones (toasts MudBlazor) — restyle glassy oscuro + acento lateral.
   Posición global (arriba-centro), variant y comportamiento se configuran en
   Program.cs (SnackbarConfiguration). Este archivo solo aporta el aspecto.

   Clases verificadas en MudBlazor 8.15.0:
   - Toast root: .mud-snackbar.mud-alert-filled-{success|error|warning|info|normal}
   - Icono: .mud-snackbar-icon | Mensaje: .mud-snackbar-content-message
   - Acciones (X de cerrar + Action): .mud-snackbar-content-action > button
   - Contenedor: #mud-snackbar-container | Posición: .mud-snackbar-location-top-center

   Carga DESPUÉS de css/app.css para heredar los tokens :root (--ic-*) y ganar
   en cascada a MudBlazor.min.css.
   ========================================================================== */

/* ── Superficie glassy: neutraliza el fondo de color sólido de la variante Filled ── */
.mud-snackbar.mud-alert-filled-success,
.mud-snackbar.mud-alert-filled-error,
.mud-snackbar.mud-alert-filled-warning,
.mud-snackbar.mud-alert-filled-info,
.mud-snackbar.mud-alert-filled-normal {
    background: rgba(var(--ic-surface-rgb), 0.86) !important;     /* fallback de --ic-surface */
    background: color-mix(in srgb, var(--ic-surface) 86%, transparent) !important;
    color: var(--ic-text) !important;
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md);                          /* 12px */
    box-shadow: var(--ic-shadow);                               /* 0 4px 24px rgba(0,0,0,.4) */
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    backdrop-filter: blur(18px) saturate(1.1);
    padding: 10px 12px;
    min-width: 300px;
    font-family: var(--ic-font);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    touch-action: pan-y;          /* deja que el gesto horizontal llegue al JS (swipe-to-dismiss) */
    cursor: grab;
}

/* Mientras se desliza para descartar (snackbar-swipe.js) */
.mud-snackbar.ic-snackbar-swiping {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

/* ── Barra de acento lateral 4px (aquí se reubica el color de severidad) ── */
.mud-snackbar[class*="mud-alert-filled-"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 4px 0 0 4px;
}
.mud-snackbar.mud-alert-filled-success::before { background: var(--mud-palette-success, #4CAF50); }
.mud-snackbar.mud-alert-filled-error::before   { background: var(--mud-palette-error,   #F44336); }
.mud-snackbar.mud-alert-filled-warning::before { background: var(--mud-palette-warning, #FF9800); }
.mud-snackbar.mud-alert-filled-info::before    { background: var(--mud-palette-info,    #00BCD4); }
.mud-snackbar.mud-alert-filled-normal::before  { background: var(--ic-primary, #6C7DFF); }

/* ── Icono de severidad tintado acorde al acento (en vez del icono blanco plano) ── */
.mud-snackbar .mud-snackbar-icon { opacity: 1; margin-left: 6px; }   /* respira tras la barra de acento */
.mud-snackbar.mud-alert-filled-success .mud-snackbar-icon { color: var(--mud-palette-success, #4CAF50); }
.mud-snackbar.mud-alert-filled-error   .mud-snackbar-icon { color: var(--mud-palette-error,   #F44336); }
.mud-snackbar.mud-alert-filled-warning .mud-snackbar-icon { color: var(--mud-palette-warning, #FF9800); }
.mud-snackbar.mud-alert-filled-info    .mud-snackbar-icon { color: var(--mud-palette-info,    #00BCD4); }
.mud-snackbar.mud-alert-filled-normal  .mud-snackbar-icon { color: var(--ic-primary, #6C7DFF); }

/* ── Tipografía del mensaje ── */
.mud-snackbar .mud-snackbar-content-message {
    color: var(--ic-text);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
    padding: 8px 4px;
}

/* ── Botón cerrar (X) ergonómico — target real: button dentro de content-action ── */
.mud-snackbar .mud-snackbar-content-action > button {
    color: var(--ic-muted) !important;
    min-width: 36px;
    height: 36px;
    padding: 6px;
    border-radius: 50%;
    transition: background .15s ease, color .15s ease, transform .1s ease;
}
.mud-snackbar .mud-snackbar-content-action > button:hover {
    color: var(--ic-text) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}
.mud-snackbar .mud-snackbar-content-action > button:active { transform: scale(0.92); }
.mud-snackbar .mud-snackbar-content-action > button .mud-icon-root { font-size: 20px; }

/* ── Botón de acción de texto (p.ej. "Elegir plan" del aviso de trial): color de marca ── */
.mud-snackbar .mud-snackbar-content-action .mud-button-text {
    color: var(--ic-primary) !important;
    font-weight: 600;
}

/* ── Posición arriba-centro, despejando el AppBar; reserva 44px para la pastilla "Cerrar todas" ── */
#mud-snackbar-container .mud-snackbar-location-top-center {
    top: calc(var(--ic-appbar-height, 56px) + env(safe-area-inset-top, 0px) + 12px + 44px) !important;
}

/* ── Móvil: toasts a ancho cómodo ── */
@media (max-width: 600px) {
    .mud-snackbar {
        min-width: 0;
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
    }
    #mud-snackbar-container .mud-snackbar-location-top-center {
        left: 12px !important;
        right: 12px !important;
        transform: none !important;
    }
}

/* ============================================================================
   Pastilla "Cerrar todas (N)" — componente Shared/SnackbarDismissAll.razor.
   Vive en la banda reservada arriba (justo encima del stack de toasts).
   ========================================================================== */
.ic-snackbar-clear-all {
    position: fixed;
    top: calc(var(--ic-appbar-height, 56px) + env(safe-area-inset-top, 0px) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: calc(var(--ic-z-snackbar, 6200) + 1);              /* 6201: por encima de los toasts */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(33, 37, 58, 0.90);                         /* fallback de --ic-surface-2 */
    background: color-mix(in srgb, var(--ic-surface-2, #243640) 90%, transparent);
    border: 1px solid var(--ic-border);
    color: var(--ic-text);
    border-radius: 999px;
    padding: 7px 16px;
    font: 600 0.8125rem var(--ic-font, 'Schibsted Grotesk', system-ui, sans-serif);
    line-height: 1;
    white-space: nowrap;
    box-shadow: var(--ic-shadow);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    cursor: pointer;
    animation: ic-clear-all-in .2s ease;
}
.ic-snackbar-clear-all:hover {
    background: var(--ic-primary-dim);
    border-color: var(--ic-primary);
}
.ic-snackbar-clear-all:active { transform: translateX(-50%) scale(0.96); }

@keyframes ic-clear-all-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Accesibilidad: respetar prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
    .mud-snackbar,
    .mud-snackbar .mud-snackbar-content-action > button { transition: none !important; }
    .ic-snackbar-clear-all { animation: none !important; }
}