/* ──────────────────────────────────────────────────────────────────────
   Bell de notificaciones de la Oficina Virtual.
   Global porque el popover y el backdrop salen del flujo del componente.
   ────────────────────────────────────────────────────────────────────── */

.ov-bell { position: relative; }

.ov-bell__btn {
    position: relative;
    width: 40px; height: 40px;
    border-radius: var(--ov-radius-pill);
    background: transparent;
    border: 1px solid transparent;
    color: var(--ov-ink-600);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--ov-transition), color var(--ov-transition), border-color var(--ov-transition);
}

.ov-bell__btn:hover {
    background: white;
    color: var(--ov-brand-700);
    border-color: var(--ov-ink-200);
}

.ov-bell__badge {
    position: absolute;
    top: 4px; right: 4px;
    background: var(--ov-danger);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 16px;
    line-height: 1;
    box-shadow: 0 0 0 2px white;
    text-align: center;
}

/* Indicador "sin conexión en vivo" en la campana + banner interno.
   Cuando SignalR falla caemos a polling cada 20s; el usuario tiene que
   saber que algo bajó de calidad pero la feature sigue andando. */
.ov-bell__offline-dot {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ov-warn);
    box-shadow: 0 0 0 2px white;
    animation: ovBellPulse 2.4s ease-in-out infinite;
}

.ov-bell__btn--offline { color: #b45309; }

@keyframes ovBellPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.ov-bell__offline-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin: 0 12px 8px;
    background: var(--ov-warn-bg);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--ov-radius-md);
    font-size: 12.5px;
    line-height: 1.3;
}

.ov-bell__offline-banner svg {
    flex-shrink: 0;
    color: var(--ov-warn);
}

.ov-bell__popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 380px;
    max-height: 460px;
    background: white;
    border: 1px solid var(--ov-ink-200);
    border-radius: var(--ov-radius-lg);
    box-shadow: var(--ov-shadow-lg);
    z-index: var(--ov-z-dropdown);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: ovBellPop 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ovBellPop {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ov-bell__popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ov-ink-100);
    font-size: 14px;
    color: var(--ov-ink-900);
    font-weight: 600;
}

.ov-bell__mark-all {
    border: none;
    background: transparent;
    color: var(--ov-brand-600);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--ov-radius-sm);
    transition: background var(--ov-transition);
}

.ov-bell__mark-all:hover {
    background: var(--ov-brand-50);
    text-decoration: none;
}

.ov-bell__popover-list {
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ov-bell__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 18px;
    background: white;
    border: none;
    border-bottom: 1px solid var(--ov-ink-100);
    text-align: left;
    cursor: pointer;
    transition: background var(--ov-transition);
    font-family: var(--ov-font);
    width: 100%;
}

.ov-bell__item:last-child { border-bottom: none; }
.ov-bell__item:hover { background: var(--ov-ink-50); }
.ov-bell__item--unread { background: rgba(20, 184, 166, 0.06); }
.ov-bell__item--unread:hover { background: rgba(20, 184, 166, 0.1); }

.ov-bell__dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
}

.ov-bell__item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ov-bell__item-body strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--ov-ink-900);
}

.ov-bell__item-body span {
    font-size: 12.5px;
    color: var(--ov-ink-600);
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ov-bell__item-body time {
    font-size: 11px;
    color: var(--ov-ink-400);
    margin-top: 4px;
}

.ov-bell__item--skeleton {
    cursor: default;
    background: white !important;
}

.ov-bell__empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--ov-ink-500);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.ov-bell__empty span { font-size: 36px; }
.ov-bell__empty p { margin: 0; }

.ov-bell__backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--ov-z-dropdown) - 1);
    background: transparent;
}

/* Mobile: el popover ocupa todo el ancho disponible para no desbordarse.
   El "right: 0" del default tiraba 380px hacia la izquierda del bell, que
   en una pantalla de 360px (iPhone SE) terminaba arrancando off-screen. */
@media (max-width: 480px) {
    .ov-bell__popover {
        position: fixed;
        top: calc(var(--ov-topbar-height) + 6px);
        right: 8px;
        left: 8px;
        width: auto;
        max-height: calc(100dvh - var(--ov-topbar-height) - 24px);
    }
}