/* Campana de novedades (dueño, 2026-10-20). */
@layer tn.patterns {
  .tn-bell { position: relative; }
  .tn-bell__btn { position: relative; }
  .tn-bell__badge {
    /* Pasada final (2026-11-04): en la esquina, por fuera, para que la campana se vea con «9+». */
    position: absolute; top: -5px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--tn-r-full);
    display: grid; place-items: center; font-size: 10.5px; font-weight: var(--tn-fw-semibold); line-height: 1;
    background: var(--tn-signal); color: var(--tn-signal-ink); box-shadow: 0 0 0 2px var(--tn-surface);
  }
  .tn-bell__panel {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; width: min(400px, calc(100vw - 24px)); max-height: min(70vh, 560px);
    overflow: auto; border-radius: var(--tn-r-lg); background: var(--tn-surface); color: var(--tn-text); border: 1px solid var(--tn-line); box-shadow: var(--tn-sh-3);
  }
  .tn-bell__head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; background: var(--tn-surface); border-bottom: 1px solid var(--tn-line); z-index: 1; }
  .tn-bell .tn-bell__panel .icon-btn { color: var(--tn-text-2); }
  .tn-bell__empty { margin: 0; padding: 18px 14px; font-size: var(--tn-fs-sm); color: var(--tn-text-3); }
  .tn-bell__all { display: block; padding: 11px 14px; text-align: center; font-size: var(--tn-fs-sm); font-weight: var(--tn-fw-medium); color: var(--tn-brand); border-top: 1px solid var(--tn-line); text-decoration: none; }
  .tn-notices { margin: 0; padding: 0; list-style: none; }
  .tn-notice + .tn-notice { border-top: 1px solid var(--tn-line); }
  .tn-notice__link { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; color: inherit; text-decoration: none; }
  .tn-notice form, .tn-bell__head form { margin: 0; }
  button.tn-notice__link { width: 100%; border: 0; border-radius: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
  button.tn-notice__link:disabled { cursor: progress; }
  button.tn-notice__link:focus-visible { outline: 2px solid var(--tn-brand); outline-offset: -3px; }
  button.tn-notice__link:hover, a.tn-notice__link:hover { background: var(--tn-surface-2); }
  .tn-notice.is-unread .tn-notice__link { background: color-mix(in srgb, var(--tn-signal-soft) 70%, transparent); }
  .tn-notice__icon { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--tn-sunken); color: var(--tn-ink); }
  .tn-notice.is-unread .tn-notice__icon { background: var(--tn-ink); color: var(--tn-signal); }
  /* Turno caído o documento observado: amarillo, no verde (dueño, 2026-10-28). */
  .tn-notice.is-attention .tn-notice__icon { background: var(--tn-action-bg); color: var(--tn-action-fg); }
  .tn-notice.is-attention.is-unread .tn-notice__link { background: color-mix(in srgb, var(--tn-action-bg) 75%, transparent); }
  .tn-notice.is-attention.is-unread .tn-notice__icon { background: var(--tn-action-fg); color: var(--tn-action-bg); }
  .tn-notice__body { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: var(--tn-fs-sm); }
  .tn-notice__who { color: var(--tn-text-2); font-weight: var(--tn-fw-medium); }
  .tn-notice__text { color: var(--tn-text-2); overflow-wrap: anywhere; }
  .tn-notice__body time { font-size: var(--tn-fs-xs); color: var(--tn-text-3); }
  .tn-notices--page .tn-notice__link { padding: 14px 20px; }
  @media (max-width: 760px) {
    .tn-bell__panel { position: fixed; left: 12px; right: 12px; top: calc(var(--tn-topbar-h) + 8px); width: auto; }
  }
}