/* NOTIFICATIONS */
.notif-bell{ position:relative; cursor:pointer; font-size:20px; user-select:none; }
.notif-badge{
  position:absolute; top:-6px; right:-8px; background:var(--red-flag); color:#fff;
  font-size:10px; font-weight:700; border-radius:20px; padding:1px 6px; line-height:1.4;
}
.notif-panel{
  display:none; position:absolute; top:calc(100% + 12px); right:0; width:320px;
  background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,0.15);
  z-index:200; max-height:400px; overflow-y:auto;
}
.notif-panel.show{ display:block; }
.notif-panel-header{ padding:12px 16px; border-bottom:1px solid var(--line); font-weight:700; font-size:13.5px; font-family:var(--font-display); }
.notif-item{ padding:12px 16px; border-bottom:1px solid var(--line); cursor:default; }
.notif-item:last-child{ border-bottom:none; }
.notif-item.unread{ background:var(--treasures-bg); }
.notif-item-text{ font-size:12.5px; color:var(--ink); line-height:1.4; margin:0 0 4px; }
.notif-item-date{ font-size:10.5px; color:var(--text-muted); }
.notif-empty{ padding:24px 16px; text-align:center; font-size:12.5px; color:var(--text-muted); }

/* ===== Compor aviso geral ===== */
.notif-compose-bar{ padding: 10px 14px; border-bottom: 1px solid var(--line); }
.notif-item-title{ margin: 0 0 2px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.notif-compose-modal{ display: none; }
.notif-compose-modal.show{ display: flex; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; padding: 20px; background: rgba(16,23,36,.5); }
.notif-compose-modal .modal-box{ width: 100%; background: var(--paper-raised); border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.notif-compose-modal .modal-head{ display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: linear-gradient(135deg,#0B2A63,#133C86); color: #fff; border-radius: 14px 14px 0 0; }
.notif-compose-modal .modal-head h3{ margin: 0; font-size: 16px; color: #fff; }
.notif-compose-modal .modal-head .icon-btn{ color: #fff; }
.nc-label{ display: block; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); margin-bottom: 5px; }
.nc-input{ width: 100%; padding: 10px 12px; border: 1.5px solid #CBD5E1; border-radius: 8px; font-size: 14px; font-family: var(--font-ui); box-sizing: border-box; }
.nc-input:focus{ outline: none; border-color: var(--treasures,#1F3A6B); box-shadow: 0 0 0 3px rgba(31,58,107,.12); }