/* Notificaciones de Resonum. Estética Concert Hall: serif para títulos,
   petrol/coral/marfil y sombra "newspaper-print". Modal centrado, mobile-first. */

/* ── Disparador en el navbar superior (desktop) ───────────────── */
.rs-campanita-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border: none;
    background: transparent;
    color: #fff;   /* blanca: máxima visibilidad sobre el navbar oscuro */
    cursor: pointer;
    border-radius: 50%;
    transition: background .15s ease, color .15s ease;
}
.rs-campanita-btn:hover { background: rgba(251, 247, 238, .16); color: #fff; }
.rs-campanita-btn svg { width: 23px; height: 23px; }

/* ── Badge (compartido por navbar y bottom-nav) ───────────────── */
.rs-campanita-badge {
    position: absolute; top: 2px; right: 2px;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 9px;
    background: var(--rs-coral-600, #B94732);
    color: #fff;
    font-size: .68rem; font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 2px var(--fl-acento-800, #11303D);
}
/* Sin no-leídas → no mostrar el badge (ni un "0"). Hace falta porque la regla
   de arriba pone display:inline-flex y le ganaría al atributo [hidden]. */
.rs-campanita-badge[hidden] { display: none !important; }

/* ── Disparador en el bottom-nav (mobile) ─────────────────────── */
.rs-campanita-bottom-icono { position: relative; display: inline-flex; }
.rs-campanita-bottom .rs-campanita-badge { top: -5px; right: -8px; box-shadow: none; }

/* ── Modal centrado ───────────────────────────────────────────── */
.rs-campanita-modal {
    position: fixed; inset: 0; z-index: 4000;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.rs-campanita-modal[hidden] { display: none; }
.rs-campanita-modal-overlay {
    position: absolute; inset: 0;
    background: rgba(6, 23, 34, .55);
    backdrop-filter: blur(1.5px);
}
.rs-campanita-modal-caja {
    position: relative;
    width: 440px; max-width: 94vw; max-height: 82vh;
    display: flex; flex-direction: column;
    background: var(--rs-marfil-50, #FBF7EE);
    border: 2px solid var(--rs-petrol-700, #11303D);
    border-radius: 16px;
    box-shadow: 0 12px 40px -12px rgba(6, 23, 34, .35);  /* suave moderna */
    overflow: hidden;
    animation: rs-campanita-aparece .16s ease-out;
}
@keyframes rs-campanita-aparece {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.rs-campanita-cabecera {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .9rem 1.1rem;
    background: var(--rs-petrol-700, #11303D);
    color: var(--rs-marfil-50, #FBF7EE);
    flex: none;
}
.rs-campanita-titulo {
    display: inline-flex; align-items: center; gap: .55rem;
    font-family: var(--rs-fuente-display, Georgia, serif);
    font-weight: 700; font-size: 1.18rem;
    color: var(--rs-marfil-50, #FBF7EE);
}
.rs-campanita-titulo svg { width: 20px; height: 20px; color: var(--rs-coral-400, #E47C5F); }
.rs-campanita-cerrar-btn {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; width: 32px; height: 32px;
    border: none; background: transparent; cursor: pointer; border-radius: 50%;
    color: var(--rs-marfil-100, #F6F0E1);
    transition: background .15s ease, color .15s ease;
}
.rs-campanita-cerrar-btn:hover { background: rgba(251, 247, 238, .16); color: #fff; }
.rs-campanita-cerrar-btn svg {
    display: block; width: 18px; height: 18px;
    fill: none; stroke: currentColor; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
}

.rs-campanita-subcabecera {
    display: flex; justify-content: flex-end;
    padding: .55rem 1rem;
    background: var(--rs-marfil-100, #F6F0E1);
    border-bottom: 1px solid var(--rs-tinta-200, #C9CFD4);
    flex: none;
}
.rs-campanita-marcar {
    border: 1px solid var(--rs-tinta-200, #C9CFD4); background: transparent;
    color: var(--rs-petrol-600, #163E4D);
    font-size: .78rem; font-weight: 600; cursor: pointer;
    padding: .32rem .75rem; border-radius: 999px;
    transition: background .15s ease, border-color .15s ease;
}
.rs-campanita-marcar:hover { background: var(--rs-petrol-50, #EAF1F4); border-color: var(--rs-petrol-200, #9DBCC7); }

.rs-campanita-lista { flex: 1 1 auto; overflow-y: auto; }

.rs-campanita-item {
    display: flex; gap: .6rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid rgba(201, 207, 212, .5);
    text-decoration: none; color: inherit; cursor: pointer;
}
.rs-campanita-item:hover { background: rgba(31, 78, 95, .05); }
.rs-campanita-item-dot { display: none; }  /* lo reemplaza la barra coral del item no leído */
.rs-campanita-item--no-leida {
    background: var(--rs-petrol-50, #EAF1F4);
    box-shadow: inset 4px 0 0 var(--rs-coral-500, #D55F44);
}
/* Leídas = "desactivadas": atenuadas; se reavivan al pasar el mouse. */
.rs-campanita-item:not(.rs-campanita-item--no-leida) { opacity: .58; }
.rs-campanita-item:not(.rs-campanita-item--no-leida):hover { opacity: 1; }
.rs-campanita-item-cuerpo { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 auto; cursor: pointer; }

/* Chips: nombre del coro (el panel mezcla todos los coros) + emisor del aviso. */
.rs-campanita-item-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .2rem; }
.rs-campanita-item-coro,
.rs-campanita-item-emisor {
    max-width: 100%;
    font-size: .66rem; font-weight: 700; letter-spacing: .02em;
    padding: .12rem .5rem; border-radius: 999px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rs-campanita-item-coro {
    text-transform: uppercase;
    color: var(--rs-petrol-700, #11303D);
    background: var(--rs-marfil-200, #EFE6CF);
}
.rs-campanita-item-emisor {
    color: var(--rs-coral-700, #93372A);
    background: var(--rs-coral-50, #FDF1EC);
}

.rs-campanita-item-toggle {
    flex: none; align-self: flex-start; margin-top: .1rem;
    width: 28px; height: 28px; border: none; border-radius: 50%;
    background: transparent; cursor: pointer;
    color: var(--rs-tinta-400, #75828E);
    display: inline-flex; align-items: center; justify-content: center;
}
.rs-campanita-item-toggle:hover { background: rgba(31, 78, 95, .1); color: var(--rs-petrol-600, #163E4D); }
.rs-campanita-item-toggle svg {
    width: 16px; height: 16px; fill: none; stroke: currentColor;
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.rs-campanita-item--no-leida .rs-campanita-item-toggle { color: var(--rs-coral-600, #B94732); }
.rs-campanita-item-titulo { font-weight: 700; font-size: .9rem; color: var(--rs-tinta-800, #182632); }
.rs-campanita-item-msg {
    font-size: .84rem; color: var(--rs-tinta-500, #4F5D6A);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.rs-campanita-item-fecha { font-size: .73rem; color: var(--rs-tinta-400, #75828E); }

.rs-campanita-vacio, .rs-campanita-cargando {
    padding: 2rem 1rem; text-align: center;
    color: var(--rs-tinta-400, #75828E); font-size: .88rem;
}

.rs-campanita-pie {
    display: block; text-align: center; flex: none;
    padding: .8rem; border-top: 1px solid var(--rs-tinta-200, #C9CFD4);
    color: var(--rs-petrol-500, #1F4E5F); text-decoration: none;
    font-weight: 600; font-size: .88rem;
}
.rs-campanita-pie:hover { background: rgba(31, 78, 95, .05); }

/* Evitar scroll del fondo cuando el modal está abierto. */
body.rs-noti-modal-abierto { overflow: hidden; }

/* ── Modal de DETALLE (mensaje completo de una notificación) ───── */
.rs-noti-detalle { z-index: 4100; }
.rs-noti-detalle-caja { width: 460px; }
.rs-noti-detalle-cuerpo { padding: 1rem 1.1rem; overflow-y: auto; }
.rs-noti-detalle-msg {
    margin: .2rem 0 .7rem; white-space: pre-line; line-height: 1.5;
    color: var(--rs-tinta-700, #2A3845); font-size: .95rem; word-break: break-word;
}
.rs-noti-detalle-fecha { font-size: .75rem; color: var(--rs-tinta-400, #75828E); }
.rs-noti-detalle-pie { flex: none; }

/* ── Recuadro informativo del formulario "Avisar al coro" ─────── */
.rs-aviso-info {
    display: flex; gap: .65rem; align-items: flex-start;
    background: var(--rs-petrol-50, #EAF1F4);
    border: 1px solid var(--rs-petrol-200, #9DBCC7);
    border-left: 4px solid var(--rs-coral-500, #D55F44);
    color: var(--rs-tinta-700, #2A3845);
    padding: .85rem 1rem; border-radius: 10px;
    font-size: .9rem; line-height: 1.4;
}
.rs-aviso-info-icono { flex: none; color: var(--rs-petrol-600, #163E4D); margin-top: .05rem; }
.rs-aviso-info-icono svg { width: 20px; height: 20px; }
.rs-aviso-info strong { color: var(--rs-petrol-700, #11303D); }

/* Resaltado de la fila de un ensayo al llegar desde su notificación. */
@keyframes rs-resaltar-pulso {
    0%   { background: var(--rs-coral-100, #FADCD0); }
    100% { background: transparent; }
}
.rs-resaltar > td { animation: rs-resaltar-pulso 3s ease-out; }

/* ── Página "Ver todas" ───────────────────────────────────────── */
.rs-noti-pagina { display: flex; flex-direction: column; }
.rs-noti-fila {
    display: flex; gap: .8rem; align-items: flex-start;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid rgba(201, 207, 212, .5);
    text-decoration: none; color: inherit;
}
.rs-noti-fila:last-child { border-bottom: none; }
.rs-noti-fila[data-rs-noti-fila] { cursor: pointer; }
.rs-noti-fila[data-rs-noti-fila]:hover { background: rgba(31, 78, 95, .05); }
.rs-noti-fila--no-leida { background: var(--rs-petrol-50, #EAF1F4); }
.rs-noti-fila:not(.rs-noti-fila--no-leida) { opacity: .58; }
.rs-noti-fila[data-rs-noti-fila]:not(.rs-noti-fila--no-leida):hover { opacity: 1; }
.rs-noti-fila-icono {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--rs-marfil-100, #F6F0E1);
    color: var(--rs-petrol-600, #163E4D);
}
.rs-noti-fila-icono svg { width: 19px; height: 19px; }
.rs-noti-fila-cuerpo { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.rs-noti-fila-titulo { font-weight: 700; font-size: .92rem; color: var(--rs-tinta-800, #182632); }
.rs-noti-fila-msg { font-size: .85rem; color: var(--rs-tinta-500, #4F5D6A); white-space: pre-line; }
.rs-noti-fila-fecha { font-size: .74rem; color: var(--rs-tinta-400, #75828E); }

/* Skeleton de carga de la campanita (en vez de "Cargando…") */
.rs-campanita-skel-fila {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--rs-tinta-200, #C9CFD4);
}
.rs-campanita-skel-texto { flex: 1 1 auto; display: flex; flex-direction: column; gap: .42rem; padding-top: 2px; }
.rs-campanita-skel-texto .fl-skeleton--titulo { width: 55%; }
.rs-campanita-skel-texto .fl-skeleton--texto  { width: 85%; }