/* =============================================
   AVISOS EN MOVIL - boton flotante

   Vive en su propio fichero, y no en base.css, por una razon practica: a
   base.css lo tienen cacheado todos los navegadores que ya han entrado a la
   web, y como no hay build ni versionado de estaticos, una regla nueva ahi
   dentro puede tardar en verse. Un fichero con nombre nuevo se pide si o si.
   ============================================= */
.notif-fab {
    position: fixed;
    top: 73px;
    right: 12px;
    z-index: 1045; /* Sobre el contenido, bajo la barra superior (1050) */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #C52110 0%, #333 50%, #5810c5 100%);
    box-shadow: 0 4px 14px rgba(88,16,197,0.35);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.notif-fab:hover,
.notif-fab:focus {
    color: #fff;
    transform: scale(1.06);
}

.notif-fab i {
    font-size: 1.15rem;
    line-height: 1;
}

.notif-fab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #C52110;
    border: 2px solid #fff;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

html.dark-mode .notif-fab-badge { border-color: var(--dm-bg); }

/* El icono: `.bi` global pinta todos los iconos de rojo (#C52110), asi que
   heredar el blanco del boton no basta y la campana salia roja sobre un fondo
   rojo-morado. Hay que ganarle en especificidad. */
.notif-fab .bi {
    color: #fff;
}

/* =============================================
   MODAL DE NOTIFICACIONES

   Comparte fichero con el boton flotante porque son la misma feature: el FAB de
   movil y la campana del menu de escritorio abren este modal. Se copia el
   lenguaje visual del panel "Notificaciones / Acciones" del indice de juegos
   (barra morada a la izquierda, icono de info) para que se reconozcan como lo
   mismo.
   ============================================= */
.notif-modal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notif-modal-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: #f8f7ff;
    border-radius: 8px;
    border-left: 3px solid #5810c5;
}

.notif-modal-icon {
    color: #5810c5;
    margin-top: 2px;
    flex-shrink: 0;
}

.notif-modal-body { min-width: 0; }

.notif-modal-text {
    margin: 0;
    font-size: 0.85rem;
    color: #333;
    overflow-wrap: anywhere;
}

.notif-modal-date {
    font-size: 0.72rem;
    color: #8a8a99;
}

.notif-modal-empty {
    margin: 0;
    font-size: 0.85rem;
    color: #6c757d;
    text-align: center;
}
.notif-modal-empty i { color: #5810c5; }

html.dark-mode .notif-modal-item {
    background: var(--dm-bg-3);
    border-left-color: #5810c5;
}
html.dark-mode .notif-modal-text { color: var(--dm-text); }
html.dark-mode .notif-modal-date,
html.dark-mode .notif-modal-empty { color: var(--dm-text-muted); }