/* ========================================================================== NOTIFICACIONES — DROPDOWN (GLOBAL) Este archivo debe cargarse en TODAS las páginas, porque el dropdown de la campana vive dentro de navs.hbs (partial global) y aparece en cada vista, no solo en /user/notificaciones. No lo agregues al `stylesCss` de una ruta puntual — va hardcodeado en el del/los layout(s), igual que floatingChat.css. IMPORTANTE: este archivo debe cargarse DESPUÉS de menu.css en el , porque sobrescribe intencionalmente el `.notifications-body` que ya existe ahí (pensado solo para el estado vacío centrado) para que ahora funcione como una lista con scroll cuando hay tarjetas. ========================================================================== */ :root { --notif-primary: #1B2A4A; --notif-primary-hover: #14213A; --notif-accent: #F97316; --notif-accent-hover: #EA6A0C; } /* ================= FOOTER DEL DROPDOWN ================= */ .notifications-footer { padding: 8px 14px; border-top: 1px solid #e2e8f0; text-align: center; } .notifications-see-all { font-size: 0.85rem; font-weight: 600; color: var(--notif-primary); text-decoration: none; } .notifications-see-all:hover { text-decoration: underline; } /* ================= CUERPO DEL DROPDOWN (lista con scroll) ================= menu.css define `.notifications-body` como flex centrado con min-height fijo (pensado solo para "Sin notificaciones"). Ahora que aquí también se renderizan tarjetas reales, se sobrescribe para que sea una lista normal, con altura máxima y scroll propio. El estado vacío (.notif-empty-state) ya trae su propio centrado interno, así que no se pierde ese efecto visual. */ .notifications-body { display: block; min-height: 0; padding: 0; max-height: 380px; overflow-y: auto; } /* ================= TARJETA DE NOTIFICACIÓN ================= */ .notif-card { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #f1f5f9; border-left: 3px solid transparent; background-color: #ffffff; transition: background-color .15s ease; } .notif-card:last-child { border-bottom: none; } .notif-card:hover { background-color: #f8fafc; } .notif-card--unread { background-color: #fff7ed; /* tinte naranja muy suave para no leídas */ border-left-color: var(--notif-accent); } .notif-card--unread:hover { background-color: #ffedd5; } /* ================= AVATAR + ÍCONO DE TIPO ================= */ .notif-card-avatar { position: relative; flex-shrink: 0; width: 44px; height: 44px; } .notif-card-avatar-initials { width: 44px; height: 44px; border-radius: 50%; background-color: var(--notif-primary); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; } .notif-card-type-icon { position: absolute; bottom: -2px; right: -2px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ffffff; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 0.6rem; } /* ================= CONTENIDO DE LA TARJETA ================= */ .notif-card-body { flex: 1; min-width: 0; } .notif-card-type-label { margin: 0 0 2px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--notif-accent); } .notif-card-text { margin: 0; font-size: 0.85rem; line-height: 1.35; color: #334155; } .notif-card-text strong { color: #0f172a; } .notif-card-time { margin: 4px 0 0; font-size: 0.72rem; color: #94a3b8; } .notif-card-resuelta { margin: 6px 0 0; font-size: 0.78rem; color: #94a3b8; font-style: italic; } /* ================= BOTONES ACEPTAR / RECHAZAR ================= */ .notif-card-actions { display: flex; gap: 8px; margin-top: 10px; } .notif-btn { flex: 1; padding: 6px 0; border-radius: 999px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .notif-btn--outline { background-color: transparent; border: 1px solid #cbd5e1; color: #56687a; } .notif-btn--outline:hover { background-color: #f1f5f9; border-color: #94a3b8; } .notif-btn--solid { background-color: var(--notif-accent); border: 1px solid var(--notif-accent); color: #ffffff; } .notif-btn--solid:hover { background-color: var(--notif-accent-hover); border-color: var(--notif-accent-hover); } /* ================= ESTADO VACÍO ================= */ .notif-empty-state { padding: 32px 16px; text-align: center; color: #94a3b8; } .notif-empty-state i { font-size: 1.5rem; display: block; margin-bottom: 8px; } .notif-empty-state p { margin: 0; font-size: 0.85rem; }