/* =====================================================================
   PaymentToast — hoja global.

   Es el toast de los tres avisos de Suscripción que pidió Carolina:
   activar/desactivar pack (SubscriptionsPage), eliminar tarjeta y tarjeta
   predeterminada (SubscriptionPaymentMethod).

   POR QUÉ ESTÁ ACÁ Y NO EN PaymentToast.razor.css

   El bundle de CSS aislado del proyecto cliente no se sirve. Bajando las
   18 hojas que carga la pantalla y buscando dentro no aparece ni un
   atributo de aislamiento del cliente, y .payment-toast no está en
   ninguna. Inyectando este marcado en la página, el navegador le daba
   position: static, sin fondo, sin borde y sin sombra, con la barra de
   color de 4px ocupando 350: el toast salía como texto suelto empujando
   el contenido.

   Mismo parche acotado que packs-promo.css y pack-card.css. La causa de
   fondo mueve 160 hojas del cliente y va aparte.

   Todos los selectores empiezan con .payment-toast, que no aparece en
   ninguna otra pantalla del repo.
   ===================================================================== */

/* Medidas del nodo de Figma 5862-108022 / 5862-107997, los toasts de activar y desactivar pack
   (SCRUM-213): ancho fijo 358, radio 4, borde 1px #278B12 y fondo #FAFAFA. Antes tenía radio 12
   y un ancho elástico de 320 a 442.

   El padding no se copia del nodo. Figma declara 2 de margen interior porque ahí el contenido
   es un componente anidado que trae el suyo; nuestro marcado es plano, así que 2 dejaría el
   texto pegado al borde. Se conserva el 12 que ya estaba y que da el mismo resultado visual.

   El max-width es para que en una pantalla angosta el toast no se salga: 358 es el ancho de la
   columna de contenido, no un mínimo. */
.payment-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: grid;
    grid-template-columns: 4px 32px minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 12px;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid var(--color-feedback-positive-700, #278B12);
    background: var(--color-surface-app, #FAFAFA);
    box-shadow: 0px 8px 8px -2px rgba(0, 0, 0, 0.04),
                0px 20px 20px -4px rgba(0, 0, 0, 0.08);
    width: 358px;
    max-width: calc(100vw - 32px);
    animation: toast-slide-in 0.3s ease-out;
    overflow: hidden;
}

@keyframes toast-slide-in {
    from {
        opacity: 0;
        transform: translateX(50%);
    }
    to {
        opacity: 1;
        transform: translateX(-50%);
    }
}

.payment-toast-accent {
    width: 4px;
    height: 100%;
    min-height: 56px;
    justify-self: stretch;
    border-radius: 8px;
    background: var(--color-feedback-positive-700, #278B12);
    flex-shrink: 0;
}

/* El ícono va centrado respecto del bloque de texto, no pegado al renglón del título
   (Carolina, 13/10, SCRUM-213: "alinear vertical el icono de los toast"). El contenedor alinea
   arriba porque la X sí va arriba; por eso el centrado se pide acá y no en la grilla. El
   margin-top de 2px que lo empujaba contra la primera línea se va: con el centrado sobra. */
.payment-toast-icon-shell {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.payment-toast-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    min-height: 32px;
    display: block;
    flex-shrink: 0;
}

/* Se centra junto con el ícono y por el mismo motivo. No alcanzaba con centrar el ícono: la
   barra verde lleva min-height 56 y estira la fila por encima del texto, así que con un toast
   de dos renglones cortos la fila medía 56, el texto 43 y el ícono quedaba 7px más abajo que
   el texto. Centrando los dos, comparten la línea media sea cual sea el alto de la fila. */
.payment-toast-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    align-self: center;
}

.payment-toast-title {
    display: block;
    font-family: var(--font-primary, 'Nunito Sans', sans-serif);
    font-weight: var(--font-weight-bold, 700);
    font-size: 16px;
    line-height: 1.2;
    color: var(--color-base-black, #000000);
    overflow-wrap: anywhere;
}

.payment-toast-description {
    display: block;
    font-family: var(--font-primary, 'Nunito Sans', sans-serif);
    font-weight: var(--font-weight-regular, 400);
    font-size: 14px;
    line-height: 20px;
    color: var(--color-base-black, #000000);
    overflow-wrap: anywhere;
}

.payment-toast-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    align-self: start;
}

    .payment-toast-close:hover {
        background: var(--color-neutral-50, #F5F5F5);
    }

    .payment-toast-close svg {
        width: 24px !important;
        height: 24px !important;
    }

@media (max-width: 768px) {
    .payment-toast {
        top: 16px;
        left: 50%;
        right: unset;
        min-width: unset;
        max-width: 90vw;
        transform: translateX(-50%);
    }
}