/* Campana y bandeja de notificaciones. Los colores salen de las variables del tema del sitio (con valores por defecto). */
.nt-campana { position: relative; display: inline-block; --nt-fondo: var(--bg3, #ffffff); --nt-texto: var(--text, #222222); --nt-texto2: var(--text2, #666666); --nt-linea: var(--border, #dddddd); --nt-acento: var(--accent, #2a6fdb); --nt-acento-texto: var(--accent-texto, #ffffff); --nt-radio: var(--radius, 10px); }
.nt-boton { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.nt-boton:hover, .nt-boton:focus-visible { background: rgba(127, 127, 127, .18); }
.nt-contador { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--nt-acento); color: var(--nt-acento-texto); font: 700 11px/18px system-ui, sans-serif; text-align: center; }
.nt-contador[hidden], .nt-panel[hidden] { display: none; }
.nt-panel { position: absolute; z-index: 50; top: calc(100% + 6px); right: 0; width: min(92vw, 360px); max-height: min(70vh, 460px); overflow-y: auto; background: var(--nt-fondo); color: var(--nt-texto); border: 1px solid var(--nt-linea); border-radius: var(--nt-radio); box-shadow: 0 12px 30px rgba(0, 0, 0, .25); text-align: left; font-size: 14px; line-height: 1.4; }
.nt-item { display: block; padding: 12px 14px; border-bottom: 1px solid var(--nt-linea); color: inherit; text-decoration: none; }
.nt-item:hover, .nt-item:focus-visible { background: rgba(127, 127, 127, .12); }
.nt-item-titulo { display: block; font-weight: 700; }
.nt-item-cuerpo { display: block; margin-top: 2px; color: var(--nt-texto2); }
.nt-item-fecha { display: block; margin-top: 4px; font-size: 12px; color: var(--nt-texto2); }
.nt-vacio { margin: 0; padding: 18px 14px; color: var(--nt-texto2); }
.nt-pie { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--nt-fondo); border-top: 1px solid var(--nt-linea); }
.nt-enlace { padding: 0; border: 0; background: none; color: var(--nt-acento); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; }
@media (max-width: 520px) { .nt-campana { position: static; } .nt-panel { position: fixed; top: 56px; left: 8px; right: 8px; width: auto; } }

/* Página de la bandeja */
.nt-bandeja { max-width: 720px; margin: 0 auto; }
.nt-bandeja-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.nt-bandeja-cabecera h1 { margin: 8px 0 12px; }
.nt-bandeja .nt-enlace { color: var(--accent, #2a6fdb); }
.nt-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border, #dddddd); border-radius: var(--radius, 10px); overflow: hidden; background: var(--bg3, #ffffff); }
.nt-fila { border-bottom: 1px solid var(--border, #dddddd); }
.nt-fila:last-child { border-bottom: 0; }
.nt-fila-enlace { display: block; padding: 14px 16px; color: inherit; text-decoration: none; }
a.nt-fila-enlace:hover, a.nt-fila-enlace:focus-visible { background: rgba(127, 127, 127, .12); }
.nt-fila--nueva { box-shadow: inset 4px 0 0 var(--accent, #2a6fdb); }
.nt-fila-titulo { display: block; font-weight: 700; }
.nt-fila-cuerpo { display: block; margin-top: 2px; color: var(--text2, #666666); }
.nt-fila-fecha { display: block; margin-top: 4px; font-size: 13px; color: var(--text2, #666666); }
.nt-vacio-pagina, .nt-bandeja .nt-vacio { padding: 24px 4px; color: var(--text2, #666666); }
.nt-paginas { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 0; }

/* Avisos en el dispositivo (push) */
.nt-pie-push { position: static; justify-content: flex-start; border-top: 1px solid var(--nt-linea); }
.nt-push { max-width: 720px; margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--border, #dddddd); border-radius: var(--radius, 10px); background: var(--bg3, #ffffff); }
.nt-push[hidden] { display: none; }
.nt-push-titulo { margin: 0 0 4px; font-size: 16px; }
.nt-push-texto { margin: 0 0 10px; color: var(--text2, #666666); }
.nt-push-boton { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--accent, #2a6fdb); color: var(--accent-texto, #ffffff); font: inherit; font-weight: 600; cursor: pointer; }
.nt-push-boton[hidden] { display: none; }
.nt-push-boton:disabled { opacity: .6; cursor: wait; }

/* Invitación discreta a activar los avisos */
.nt-invitacion { margin: 16px 0; padding: 14px 16px; border: 1px solid var(--border, #dddddd); border-radius: var(--radius, 10px); background: var(--bg3, #ffffff); }
.nt-invitacion[hidden] { display: none; }
.nt-invitacion-titulo { margin: 0 0 2px; font-weight: 700; }
.nt-invitacion-texto { margin: 0 0 10px; color: var(--text2, #666666); }
.nt-invitacion-error { margin: 0 0 10px; color: #f87171; }
.nt-invitacion-acciones { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nt-invitacion .nt-enlace { color: var(--text2, #666666); }

/* Variante compacta de los avisos de un tema: sin tarjeta, para meterla dentro de otro bloque */
.nt-push--compacto { border: 0; background: none; padding: 0; margin: 0; max-width: none; }
.nt-push--compacto .nt-push-texto:empty { display: none; }