/* * ==================================================
 * BANDEJA DE NOTIFICACIONES DEL USUARIO
 *
 * ! Autocontenido: replica el lenguaje visual de
 * ! #offcanvasCarrito (paneles-emergentes.css) sin
 * ! acoplarse a sus selectores, que están ligados a
 * ! los IDs de carrito, favoritos y relacionados.
 *
 * ! Todo queda acotado a #offcanvasNotificacionesUsuario
 * ! o al prefijo .notificaciones-usuario- / .btn-notificaciones-navbar.
 * ================================================== */

/* * ==================================================
 * BOTÓN DE LA NAVBAR
 *
 * Misma geometría y tratamiento que .btn-cart-navbar
 * para que campana y carrito se lean como un par.
 * ================================================== */
.btn-notificaciones-navbar {
    display: inline-flex;
    position: relative;
    min-height: 42px;
    padding: 8px 16px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.15rem;
    transition: all 0.3s ease;
}

.btn-notificaciones-navbar:hover,
.btn-notificaciones-navbar:focus {
    color: #ffffff;
}

/* * ==================================================
 * INDICADOR DE NOVEDAD
 *
 * ? Estado binario, sin número y sin contenido: solo dice
 * ? "hay algo que revisar". La campana se balancea de forma
 * ? breve y periódica, nunca en movimiento continuo.
 * ================================================== */
.btn-notificaciones-navbar.tiene-novedad::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 11px;
    width: 9px;
    height: 9px;
    border: 2px solid #111827;
    border-radius: 50%;
    background: #ff4d4f;
    animation: notificaciones-usuario-halo 2.4s ease-out infinite;
}

.btn-notificaciones-navbar.tiene-novedad i {
    transform-origin: 50% 12%;
    animation: notificaciones-usuario-campana 3.2s ease-in-out infinite;
}

@keyframes notificaciones-usuario-campana {

    0%,
    70%,
    100% {
        transform: rotate(0deg);
    }

    74% {
        transform: rotate(-11deg);
    }

    78% {
        transform: rotate(9deg);
    }

    82% {
        transform: rotate(-6deg);
    }

    86% {
        transform: rotate(4deg);
    }

    90% {
        transform: rotate(0deg);
    }
}

@keyframes notificaciones-usuario-halo {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.5);
    }

    60%,
    100% {
        box-shadow: 0 0 0 7px rgba(255, 77, 79, 0);
    }
}

/* * ==================================================
 * SHELL DEL PANEL
 *
 * ! Acento propio tomado de la identidad del proyecto
 * ! (--brand-digital: #00aaff). El resto del shell
 * ! conserva los valores del carrito.
 * ================================================== */
/* ! El shell (ancho, flex, fondo, borde, sombra) y la cabecera los
 * ! aporta .panel-emergente / .panel-emergente-header. Aquí solo
 * ! queda el acento propio de la bandeja. */
#offcanvasNotificacionesUsuario {
    --panel-acento: #00aaff;
    --panel-acento-rgb: 0, 170, 255;
    --panel-ancho: 480px;
}

/* ! El panel es fixed top:0/bottom:0: la cabecera SIEMPRE toca
 * ! el borde superior físico, con o sin notch. Mismo patrón que
 * ! #offcanvasCarrito en paneles-emergentes.css. */
#offcanvasNotificacionesUsuario .notificaciones-usuario-header {
    padding-top: calc(1.15rem + env(safe-area-inset-top, 0px));
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-identidad {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

/* ! Título, subtítulo y botón de cierre: primitivas compartidas
 * ! (.panel-emergente-titulo / -subtitulo / -cerrar). */

/* * ==================================================
 * BARRA DE ACCIONES
 * ================================================== */
#offcanvasNotificacionesUsuario .notificaciones-usuario-acciones {
    display: flex;
    position: relative;
    z-index: 2;
    padding: 0.7rem 1rem;
    align-items: center;
    justify-content: flex-end;
    /* ? Dos acciones: en móvil pueden bajar de línea sin romper. */
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 0 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.02);
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-marcar {
    padding: 0.32rem 0.7rem;
    color: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(var(--panel-acento-rgb), 0.3);
    border-radius: 10px;
    background: rgba(var(--panel-acento-rgb), 0.1);
    font-size: 0.74rem;
    font-weight: 700;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-marcar:hover:not(:disabled) {
    color: #fff;
    border-color: rgba(var(--panel-acento-rgb), 0.55);
    background: rgba(var(--panel-acento-rgb), 0.2);
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-marcar:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* * ==================================================
 * AVISOS PUSH (OPT-IN)
 *
 * ? Control secundario: se separa a la izquierda con
 * ? margin-right:auto para no competir con "Marcar todas" y
 * ? "Eliminar todas". En móvil baja de línea con el wrap.
 *
 * ! El estado siempre va en texto: "Avisos activados",
 * ! "Avisos bloqueados", "Reintentar avisos".
 * ================================================== */
#offcanvasNotificacionesUsuario .notificaciones-usuario-push {
    margin-right: auto;
    padding: 0.28rem 0.6rem;
    color: rgba(255, 255, 255, 0.66);
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 700;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-push:hover:not(:disabled) {
    color: #fff;
    border-color: rgba(var(--panel-acento-rgb), 0.55);
    background: rgba(var(--panel-acento-rgb), 0.12);
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-push.es-activo {
    color: #86efac;
    border-style: solid;
    border-color: rgba(134, 239, 172, 0.3);
    background: rgba(134, 239, 172, 0.06);
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-push.es-bloqueado {
    color: rgba(255, 255, 255, 0.45);
}

/* ? Activado o bloqueado son estados informativos, no errores. */
#offcanvasNotificacionesUsuario .notificaciones-usuario-push:disabled {
    cursor: default;
}

/* * ==================================================
 * ELIMINAR TODAS
 *
 * ? Mismo molde que "Marcar todas": reposo discreto y, al
 * ? pedir confirmación, acento de advertencia.
 *
 * ! El color nunca va solo: el texto del botón cambia a
 * ! "Confirmar eliminar todas".
 * ================================================== */
#offcanvasNotificacionesUsuario .notificaciones-usuario-eliminar-todas {
    padding: 0.32rem 0.7rem;
    color: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.74rem;
    font-weight: 700;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-eliminar-todas:hover:not(:disabled) {
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(248, 113, 113, 0.14);
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-eliminar-todas.es-confirmando {
    color: #fee2e2;
    border-color: rgba(248, 113, 113, 0.75);
    background: rgba(248, 113, 113, 0.26);
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-eliminar-todas:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* * ==================================================
 * CUERPO Y SCROLL
 * ================================================== */
/* ! Cuerpo, scroll y lista: primitivas compartidas
 * ! (.panel-emergente-body / .panel-emergente-lista). */

/* ! El panel es fixed top:0/bottom:0: el cuerpo SIEMPRE termina
 * ! en el borde inferior físico (isla/home indicator), con o sin
 * ! sesión de lista larga debajo. */
#offcanvasNotificacionesUsuario .notificaciones-usuario-body {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
}

/* * ==================================================
 * TARJETA DE NOTIFICACIÓN
 * ================================================== */
#offcanvasNotificacionesUsuario .notificaciones-usuario-item {
    /* ? Acento por tipo. Sin clase reconocida hereda el
     * ? acento del panel: ninguna tarjeta queda sin color. */
    --tipo-acento: var(--panel-acento);
    --tipo-acento-rgb: var(--panel-acento-rgb);

    position: relative;
    min-width: 0;
    padding: 0.85rem 0.95rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 180ms ease, background-color 180ms ease;
}

/* * ==================================================
 * IDENTIDAD POR TIPO
 *
 * ? El acento se reparte entre badge, barra lateral y un
 * ? halo muy sutil. La tarjeta sigue siendo shell oscuro.
 *
 * ! El color nunca es el único portador de significado:
 * ! el badge siempre muestra su etiqueta en texto.
 * ================================================== */
/* ! Solo dos identidades: Aviso y Promoción. El tipo histórico
 * ! "announcement" se pinta como Aviso desde el JS, así que no
 * ! necesita clase propia. */
#offcanvasNotificacionesUsuario .notificaciones-usuario-item.es-tipo-aviso {
    --tipo-acento: #f87171;
    --tipo-acento-rgb: 248, 113, 113;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-item.es-tipo-promocion {
    --tipo-acento: #fbbf24;
    --tipo-acento-rgb: 251, 191, 36;
}

/* ? Barra lateral pintada con un pseudoelemento: no cambia
 * ? el borde ni el padding, así que la tarjeta conserva
 * ? exactamente sus dimensiones. */
#offcanvasNotificacionesUsuario .notificaciones-usuario-item::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    opacity: 0.4;
    background: var(--tipo-acento);
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-item:hover {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
}

/* ? Sin leer: acento a plena intensidad, halo del tipo y barra
 * ? lateral más ancha. El ::before es absoluto, así que nada de
 * ? esto altera las dimensiones de la tarjeta. */
#offcanvasNotificacionesUsuario .notificaciones-usuario-item.es-no-leida {
    border-color: rgba(var(--tipo-acento-rgb), 0.38);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--tipo-acento-rgb), 0.12), transparent 62%),
        rgba(var(--tipo-acento-rgb), 0.07);
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-item.es-no-leida::before {
    width: 4px;
    opacity: 1;
}

/* ? Leída: jerarquía secundaria, nunca ilegible. El cuerpo del
 * ? mensaje conserva su contraste original. */
#offcanvasNotificacionesUsuario .notificaciones-usuario-item.es-leida {
    border-color: rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.022);
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-item.es-leida::before {
    opacity: 0.22;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-item.es-leida .notificaciones-usuario-item-titulo {
    color: rgba(255, 255, 255, 0.86);
}

/* * ==================================================
 * ESTADO DE LECTURA
 *
 * ! Siempre lleva texto: "Sin leer" / "Leída". El color
 * ! nunca es el único portador del significado.
 * ================================================== */
#offcanvasNotificacionesUsuario .notificaciones-usuario-lectura {
    display: inline-flex;
    margin-left: auto;
    padding: 0.18rem 0.45rem;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-lectura i {
    font-size: 0.7em;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-lectura.es-sin-leer {
    color: var(--tipo-acento);
    border: 1px solid rgba(var(--tipo-acento-rgb), 0.45);
    background: rgba(var(--tipo-acento-rgb), 0.16);
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-lectura.es-leida {
    color: rgba(255, 255, 255, 0.48);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-cabecera {
    display: flex;
    margin-bottom: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-tipo {
    display: inline-flex;
    padding: 0.2rem 0.5rem;
    align-items: center;
    gap: 0.3rem;
    color: var(--tipo-acento);
    border: 1px solid rgba(var(--tipo-acento-rgb), 0.32);
    border-radius: 999px;
    background: rgba(var(--tipo-acento-rgb), 0.12);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-tipo i {
    font-size: 0.72em;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-item-titulo {
    margin: 0 0 0.25rem;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 750;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-mensaje {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
    line-height: 1.55;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* * ==================================================
 * CONTENIDO MULTIMEDIA
 *
 * ! Nunca hay iframe ni <video>: la imagen se muestra y el
 * ! vídeo se representa con miniatura, botón de play y
 * ! enlace al proveedor.
 *
 * ? El acento del bloque es el del tipo, así que el
 * ? contenido enriquecido no introduce un color nuevo.
 * ================================================== */
#offcanvasNotificacionesUsuario .notificaciones-usuario-media {
    display: block;
    margin: 0.75rem 0 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    text-decoration: none;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-media-imagen {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: cover;
}

/* * VÍDEO: miniatura con proporción estable */
#offcanvasNotificacionesUsuario .notificaciones-usuario-media-marco {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-media-miniatura {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ? Vídeo sin miniatura derivable, como Vimeo histórico. */
#offcanvasNotificacionesUsuario .notificaciones-usuario-media-hueco {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.03);
    font-size: 1.6rem;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-media-play {
    display: grid;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    place-items: center;
    color: #ffffff;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24);
    font-size: 0.95rem;
    transform: translate(-50%, -50%);
    transition: background-color 180ms ease, transform 180ms ease;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-media.es-video:hover .notificaciones-usuario-media-play {
    background: var(--tipo-acento);
    transform: translate(-50%, -50%) scale(1.06);
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-media-pie {
    display: flex;
    padding: 0.5rem 0.7rem;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.72rem;
    font-weight: 600;
    transition: color 180ms ease;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-media.es-video:hover .notificaciones-usuario-media-pie {
    color: #ffffff;
}

/* * ENLACE HISTÓRICO: solo dominio, nunca la URL completa */
#offcanvasNotificacionesUsuario .notificaciones-usuario-media.es-enlace {
    display: flex;
    padding: 0.65rem 0.75rem;
    align-items: center;
    gap: 0.65rem;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.04);
    transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-media.es-enlace:hover {
    color: #ffffff;
    border-color: rgba(var(--tipo-acento-rgb), 0.4);
    background: rgba(var(--tipo-acento-rgb), 0.1);
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-media-icono {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    flex: 0 0 34px;
    color: var(--tipo-acento);
    border-radius: 10px;
    background: rgba(var(--tipo-acento-rgb), 0.12);
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-media-datos {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-media-datos strong {
    font-size: 0.82rem;
    font-weight: 700;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-media-datos span {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* * ==================================================
 * BOTÓN DE ACCIÓN
 *
 * ? Hereda el acento del tipo con texto oscuro: contraste
 * ? alto sobre los cuatro colores posibles.
 * ================================================== */
#offcanvasNotificacionesUsuario .notificaciones-usuario-cta {
    display: flex;
    width: fit-content;
    max-width: 100%;
    min-height: 36px;
    margin-top: 0.75rem;
    padding: 0 0.9rem;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: #0b1015;
    border-radius: 10px;
    background: var(--tipo-acento);
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
    transition: filter 180ms ease;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-cta:hover,
#offcanvasNotificacionesUsuario .notificaciones-usuario-cta:focus {
    color: #0b1015;
    filter: brightness(1.1);
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-cta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-media:focus-visible,
#offcanvasNotificacionesUsuario .notificaciones-usuario-cta:focus-visible {
    outline: 2px solid var(--tipo-acento);
    outline-offset: 2px;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-pie {
    display: flex;
    margin-top: 0.7rem;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-fecha {
    margin-right: auto;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.7rem;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-accion {
    display: inline-flex;
    min-height: 30px;
    padding: 0 0.6rem;
    align-items: center;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.72rem;
    font-weight: 700;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-accion:hover:not(:disabled) {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.09);
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-accion.es-eliminar:hover:not(:disabled) {
    color: #ff6b6b;
    border-color: rgba(220, 53, 69, 0.4);
    background: rgba(220, 53, 69, 0.12);
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-accion:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* * ==================================================
 * ESTADOS: VACÍO, CARGA Y ERROR
 * ================================================== */
/* ! Variante propia sobre la primitiva .panel-emergente-vacio:
 * ! la bandeja no reserva 54vh porque comparte cuerpo con la lista. */
#offcanvasNotificacionesUsuario .notificaciones-usuario-estado {
    --panel-vacio-alto: auto;
    --panel-vacio-padding: 2.5rem 1rem;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-estado-icono {
    display: grid;
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    place-items: center;
    color: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    font-size: 1.4rem;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-estado h6 {
    margin: 0 0 0.35rem;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
}

#offcanvasNotificacionesUsuario .notificaciones-usuario-estado p {
    max-width: 280px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    line-height: 1.6;
}

/* * ==================================================
 * RESPONSIVE
 *
 * Mismos cortes que el resto de paneles del proyecto.
 * ================================================== */
@media (min-width: 481px) and (max-width: 991.98px) {
    #offcanvasNotificacionesUsuario {
        --panel-ancho: 520px;
    }
}

@media (max-width: 480px) {
    #offcanvasNotificacionesUsuario {
        --panel-ancho: 100vw;
    }
}

@media (max-width: 575.98px) {

    /* ! Ancho completo y cabecera/icono compactos los resuelve
     * ! .panel-emergente con --panel-ancho / --panel-header-* /
     * ! --panel-icono-* (paneles-emergentes.css). */
    #offcanvasNotificacionesUsuario {
        --panel-ancho: 100vw;
    }

    #offcanvasNotificacionesUsuario .notificaciones-usuario-body {
        padding: 0.8rem !important;
        padding-bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    #offcanvasNotificacionesUsuario .notificaciones-usuario-media-imagen {
        max-height: 220px;
    }

    #offcanvasNotificacionesUsuario .notificaciones-usuario-media-play {
        width: 42px;
        height: 42px;
    }

    /* ! Objetivo táctil (~44px) para las acciones principales de
     * ! la barra. El wrap ya existente evita cualquier overflow;
     * ! por debajo de 400px además se apilan (ver más abajo). */
    #offcanvasNotificacionesUsuario .notificaciones-usuario-push,
    #offcanvasNotificacionesUsuario .notificaciones-usuario-marcar,
    #offcanvasNotificacionesUsuario .notificaciones-usuario-eliminar-todas {
        min-height: 44px;
    }

    /* ! Botones dentro de una tarjeta compacta: 40px conserva la
     * ! composición del pie mejor que 44px. El CTA es la acción
     * ! principal de la tarjeta y sí llega a 44px. */
    #offcanvasNotificacionesUsuario .notificaciones-usuario-accion {
        min-height: 40px;
    }

    #offcanvasNotificacionesUsuario .notificaciones-usuario-cta {
        min-height: 44px;
    }

    /* ! Tres acciones en la navbar: misma caja que el carrito. */
    .navbar-usuario-unificada .btn-notificaciones-navbar {
        width: 38px;
        min-width: 38px;
        height: 38px;
        padding: 0;
    }

    .btn-notificaciones-navbar.tiene-novedad::after {
        top: 6px;
        right: 6px;
    }
}

/* * ==================================================
 * BARRA DE ACCIONES EN COLUMNA
 *
 * ? Con las tres acciones presentes (avisos, marcar todas,
 * ? eliminar todas) el wrap ya evita overflow, pero deja una
 * ? fila desigual. Por debajo de ~400px se apilan en columna:
 * ? cada una ocupa el ancho completo y queda una distribución
 * ? limpia en vez de dos filas descompensadas.
 * ================================================== */
@media (max-width: 400px) {
    #offcanvasNotificacionesUsuario .notificaciones-usuario-acciones {
        flex-direction: column;
        align-items: stretch;
    }

    #offcanvasNotificacionesUsuario .notificaciones-usuario-push,
    #offcanvasNotificacionesUsuario .notificaciones-usuario-marcar,
    #offcanvasNotificacionesUsuario .notificaciones-usuario-eliminar-todas {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0;
    }
}

/* * ==================================================
 * PANTALLAS MUY ESTRECHAS
 * ================================================== */
@media (max-width: 350px) {
    .navbar-usuario-unificada .btn-notificaciones-navbar {
        width: 34px;
        min-width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    #offcanvasNotificacionesUsuario .notificaciones-usuario-media-play {
        width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }

    #offcanvasNotificacionesUsuario .notificaciones-usuario-media.es-enlace {
        padding: 0.55rem 0.6rem;
        gap: 0.5rem;
    }

    #offcanvasNotificacionesUsuario .notificaciones-usuario-cta {
        width: 100%;
    }

    .btn-notificaciones-navbar.tiene-novedad::after {
        top: 5px;
        right: 5px;
        width: 8px;
        height: 8px;
    }
}

/* * ==================================================
 * REDUCIR MOVIMIENTO
 * ================================================== */
@media (prefers-reduced-motion: reduce) {

    #offcanvasNotificacionesUsuario .notificaciones-usuario-cerrar,
    #offcanvasNotificacionesUsuario .notificaciones-usuario-item,
    #offcanvasNotificacionesUsuario .notificaciones-usuario-accion,
    #offcanvasNotificacionesUsuario .notificaciones-usuario-media,
    #offcanvasNotificacionesUsuario .notificaciones-usuario-media-play,
    #offcanvasNotificacionesUsuario .notificaciones-usuario-media-pie,
    #offcanvasNotificacionesUsuario .notificaciones-usuario-cta,
    .btn-notificaciones-navbar {
        transition: none;
    }

    #offcanvasNotificacionesUsuario .notificaciones-usuario-cerrar:hover {
        transform: none;
    }

    /* ! Se desactiva el movimiento, pero el punto de novedad
     ! sigue visible: el indicador nunca depende de la animación. */
    .btn-notificaciones-navbar.tiene-novedad i {
        animation: none;
        transform: none;
    }

    .btn-notificaciones-navbar.tiene-novedad::after {
        animation: none;
        box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.22);
    }

    #offcanvasNotificacionesUsuario .notificaciones-usuario-media.es-video:hover .notificaciones-usuario-media-play {
        transform: translate(-50%, -50%);
    }
}