:root {
    --bg: #fff;
    --muted: rgba(0, 0, 0, 0.45);
    --muted-strong: rgba(0, 0, 0, 0.58);
    --radius: 12px;
    --avatar-size: 56px;
    --cycle: 6s;
    /* duración total del ciclo (entrada + visible + salida) */
    --entry-end-pct: 15%;
    /* fin de la fase de entrada (mueve al 0% de Y) */
    --visible-end-pct: 65%;
    /* fin de la fase visible (comienza la salida) */
    --navy-1: #041827;
    --navy-2: #072234;
    --teal: #1fe0d4;
    --teal-2: #0bbcd0;
    --card-bg: rgba(3, 20, 29, 0.7);
    --white-90: rgba(230, 238, 243, 0.95);
}


html,
body {
    height: 100%;
    overflow-x: hidden;
    /* Evita scroll horizontal */
}

body {
    margin: 0;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
    /* Eliminamos el background gradient para usar el iframe */
    color: var(--white-90);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    /* Menos padding en móviles */
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    /* Para que el iframe no se salga */
}


.mp-notif-wrapper {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    pointer-events: none;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 12px;
}

/* Tarjeta */
.mp-notif {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 720px;
    max-width: 720px;
    background: var(--bg);
    padding: 14px 18px;
    border-radius: 12px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 6px 18px rgba(16, 24, 40, 0.03);
    border: 1px solid rgba(11, 15, 20, 0.02);
    pointer-events: auto;
    transform-origin: top center;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);

    /* animación: suave y lineal por fases (ver keyframes) */
    animation-name: notif-cycle;
    animation-duration: var(--cycle);
    /* curva elegante: rápida al entrar, suave cuando está visible y salida natural */
    animation-timing-function: cubic-bezier(.22, .9, .3, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

/* AVATAR */
.mp-avatar {
    width: 82px;
    /* cambia a 20px/28px/40px según necesites */
    height: 82px;
    border-radius: 50%;
    overflow: hidden;
    /* importante para que nada sobresalga */
    display: inline-block;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
    box-sizing: border-box;
}

.mp-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Cubre todo el círculo (recorta si hace falta) */
    display: block;
    -o-object-fit: cover;
    /* prefijos opcionales para compatibilidad */
}



/* COLUMNA CENTRAL (textos) */
.mp-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.mp-title {
    /* Tamaño por defecto (se adaptará vía JS) */
    font-size: 12spx;
    font-weight: 700;
    color: #000000;
    line-height: 1;
    white-space: nowrap;
    /* mantener en UNA sola línea */
    text-overflow: clip;
    /* evitar "..." */
    display: inline-block;
    /* necesario para medir correctamente */
    max-width: 100%;
    /* para que el ancho sea el del contenedor */
    box-sizing: border-box;
}

.mp-sub {
    font-size: 13px;
    color: var(--muted-strong);
    line-height: 1.12;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.mp-badge {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
    flex: 0 0 20px;
}

.mp-badge img {
    width: 100%;
    height: 70%;
    object-fit: contain;
    display: block;
}

.mp-meta {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* COLUMNA DERECHA (monto y hora) */
.mp-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    margin-left: 8px;
    flex: 0 0 auto;
}

.mp-amount {
    font-size: 15px;
    font-weight: 500;
    color: #000000d7;
    line-height: 1;
    white-space: nowrap;
}

.mp-amount .minus {
    margin-right: px;
    color: rgba(0, 0, 0, 0.717);
    font-weight: 700;
}

.mp-time {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    line-height: 1;
}

/* KEYFRAMES: una sola entrada, mantenimiento, y salida suave. */
/* - 0% -> fuera + invisible
   - entry end (ej. 15%) -> en su lugar y visible
   - visible end (ej. 65%) -> empieza salida
   - 100% -> fuera + invisible
*/
@keyframes notif-cycle {
    0% {
        transform: translateY(-140%) scale(0.99);
        opacity: 0;
    }

    /* Entrada suave: hasta entry-end */
    15% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    /* Permanece visible hasta visible-end */
    65% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    /* Salida suave hacia arriba */
    100% {
        transform: translateY(-140%) scale(0.99);
        opacity: 0;
    }
}

/* Ajustes responsivos */
@media (max-width:820px) {
    .mp-notif {
        width: 560px;
        max-width: calc(100% - 24px);
        padding: 12px 14px;
    }

    .mp-title {
        font-size: 15px;
    }

    .mp-amount {
        font-size: 18px;
    }
}

@media (max-width:520px) {
    .mp-notif {
        width: 100%;
        max-width: calc(100% - 24px);
        padding: 10px 12px;
        gap: 10px;
    }

    .mp-avatar {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
    }

    .mp-title {
        font-size: 14px;
    }

    .mp-sub,
    .mp-meta,
    .mp-time {
        font-size: 12px;
    }

    .mp-amount {
        font-size: 16px;
    }
}

/* Reduce motion: respeto a accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .mp-notif {
        animation: none;
        transform: translateY(0);
        opacity: 1;
    }
}