/* Centro de notificaciones: página, sidebar y avisos temporales */
#notification-toast-host{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:12000;width:min(440px,calc(100vw - 28px));display:flex;flex-direction:column;gap:10px;pointer-events:none}
.notification-toast{--notification-color:#2563a8;position:relative;display:flex;align-items:stretch;background:#fff;border:1px solid color-mix(in srgb,var(--notification-color) 28%,#dbe3ea);border-left:5px solid var(--notification-color);border-radius:14px;box-shadow:0 18px 48px rgba(15,31,45,.24);overflow:hidden;opacity:0;transform:translateY(-18px) scale(.98);transition:opacity .22s ease,transform .22s ease;pointer-events:auto}
.notification-toast.is-visible{opacity:1;transform:translateY(0) scale(1)}
.notification-toast.is-leaving{opacity:0;transform:translateY(-10px) scale(.98)}
.notification-toast-main{display:flex;gap:12px;align-items:center;flex:1;min-width:0;text-align:left;padding:13px 8px 14px 15px;background:none;border:0;cursor:pointer;font-family:inherit}
.notification-toast-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;border-radius:11px;background:color-mix(in srgb,var(--notification-color) 12%,#fff);font-size:19px}
.notification-toast-main span:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.notification-toast-main strong{font-size:13px;color:var(--ink)}
.notification-toast-main small{font-size:12px;line-height:1.35;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notification-toast-close{align-self:flex-start;width:32px;height:32px;margin:7px;border:0;background:none;border-radius:8px;color:var(--ink3);font-size:20px;cursor:pointer}
.notification-toast-close:hover{background:var(--surface)}
.notification-toast-progress{position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--notification-color);transform-origin:left;animation:notificationToastTime 7.5s linear forwards}
.notification-toast-progress.is-paused{animation-play-state:paused}
@keyframes notificationToastTime{to{transform:scaleX(0)}}

.notifications-page{max-width:1180px}
.notifications-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.notifications-toolbar-primary,.notifications-toolbar-actions{display:flex;align-items:center;gap:12px}
#notifications-summary{margin:0;color:var(--ink3);font-size:13px;white-space:nowrap}
.notifications-segmented{display:flex;gap:4px;padding:4px;background:var(--surface);border-radius:10px}
.notifications-segmented button{border:0;background:transparent;color:var(--ink2);font:600 12px 'Roboto',sans-serif;padding:7px 12px;border-radius:7px;cursor:pointer}
.notifications-segmented button:hover{background:#fff;color:var(--teal)}
#notifications-type-filter{padding:8px 11px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--ink2);font:500 12px 'Roboto',sans-serif}
.notifications-list{display:flex;flex-direction:column;gap:10px}
.notification-card{--notification-color:#2563a8;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;background:#fff;border:1px solid var(--border);border-left:4px solid var(--notification-color);border-radius:13px;overflow:hidden;transition:box-shadow .15s,border-color .15s}
.notification-card:hover{box-shadow:0 8px 22px rgba(21,42,58,.09)}
.notification-card.is-read{border-left-color:#cbd5e1;opacity:.72}
.notification-main{display:flex;align-items:center;gap:13px;min-width:0;padding:14px 16px;background:none;border:0;text-align:left;cursor:pointer;font-family:inherit}
.notification-icon{display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;border-radius:11px;background:color-mix(in srgb,var(--notification-color) 10%,#fff);font-size:19px}
.notification-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
.notification-meta{display:flex;gap:12px;justify-content:space-between;align-items:center}
.notification-meta strong{font-size:13px;color:var(--ink)}
.notification-meta time{font-size:10.5px;color:var(--ink3);white-space:nowrap}
.notification-message{font-size:12.5px;color:var(--ink2);line-height:1.4}
.notification-count{display:grid;place-items:center;min-width:28px;height:24px;padding:0 8px;border-radius:99px;background:var(--notification-color);color:#fff;font-size:11px;font-weight:800}
.notification-read-action{border:0;border-left:1px solid var(--border);background:var(--surface);padding:0 15px;color:var(--teal);font:600 11.5px 'Roboto',sans-serif;cursor:pointer;white-space:nowrap}
.notification-card.is-read .notification-read-action{color:var(--ink3);cursor:default}
.notifications-empty{display:flex;min-height:260px;align-items:center;justify-content:center;flex-direction:column;gap:7px;border:1px dashed var(--border);border-radius:14px;color:var(--ink3)}
.notifications-empty span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#e9f7ef;color:#0e8c5e;font-size:24px}
.notifications-empty strong{font-size:14px;color:var(--ink2)}
.notifications-empty small{font-size:12px}

@media(max-width:768px){
  #notification-toast-host{top:10px}
  .notification-toast-main{padding-left:12px}
  .notifications-page{padding-top:10px}
  .notifications-toolbar{align-items:stretch;flex-direction:column}
  .notifications-toolbar-primary{align-items:stretch;flex-direction:column;gap:8px}
  .notifications-toolbar-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .notifications-segmented{display:grid;grid-template-columns:repeat(3,1fr)}
  .notifications-segmented button{padding-inline:6px}
  #notifications-type-filter{width:100%}
  .notification-card{grid-template-columns:1fr}
  .notification-main{padding:12px;gap:10px}
  .notification-icon{width:36px;height:36px}
  .notification-meta{align-items:flex-start;flex-direction:column;gap:2px}
  .notification-count{margin-left:auto}
  .notification-read-action{border-left:0;border-top:1px solid var(--border);padding:9px 12px;text-align:right}
}