/* ==========================================================================
   40 · NOTIFICACIONES — los avisos de 30 días  (5 de octubre de 2026)
   ==========================================================================
   Lo primero del menú de ajustes de la administración. Por día, con filtro, y
   un punto en lo que no se ha abierto; el engranaje lleva el número.
   js/31-notificaciones.js. */

/* El número del engranaje y el del renglón del menú. */
.ajustes__b { position: relative; }
.ajustes__n {
  position: absolute; top: -6px; right: -6px;
  min-width: 19px; height: 19px; padding: 0 .3rem;
  display: grid; place-items: center; border-radius: 99px;
  background: var(--rojo-vivo); color: #fff; border: 2px solid var(--nori);
  font-size: .66rem; font-weight: 800; line-height: 1;
  animation: late .5s var(--resorte) 2;
}
.ajustes__on {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 .35rem;
  display: inline-grid; place-items: center; border-radius: 99px;
  background: var(--rojo-vivo); color: #fff; font-size: .7rem; font-weight: 800;
}
.ajustes__o--ntf { font-weight: 600; }

.velo--ntf .modal { width: min(640px, 100%); }
.ntf-caja { display: grid; gap: 1rem; }
.ntf-filtros { margin: 0; }

.ntf-dia h4 {
  margin: 0 0 .45rem; font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-3);
}
.ntf-dia + .ntf-dia { margin-top: .4rem; }
.ntf-dia ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }

.ntf {
  position: relative; display: flex; align-items: flex-start; gap: .8rem;
  padding: .85rem .95rem; border-radius: var(--radio);
  background: var(--surface); border: 1.5px solid var(--linea-sutil);
  cursor: default;
}
.ntf--nuevo { border-color: rgba(210, 38, 45, .28); background: #FFF8F4; cursor: pointer; }
.ntf__i {
  flex: none; display: grid; place-items: center; width: 2.3rem; height: 2.3rem;
  border-radius: 11px; font-size: 1.05rem; background: var(--crema-2); color: var(--tinta-2);
}
.ntf__i--cierre { background: var(--verde-sua); color: var(--verde); }
.ntf__i--resena { background: var(--ambar-sua); color: #B5650C; }
.ntf__i--semana { background: var(--rojo-sua); color: var(--rojo); }

.ntf__c { flex: 1; min-width: 0; display: grid; gap: .35rem; }
.ntf__cab { display: flex; align-items: baseline; gap: .6rem; }
.ntf__cab b { flex: 1; min-width: 0; font-size: .94rem; line-height: 1.35; overflow-wrap: anywhere; }
.ntf__cab time { flex: none; font-size: .78rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
/* El cuerpo viene en renglones (`\n`) desde el servidor: se respetan. */
.ntf__t {
  margin: 0; white-space: pre-line; overflow-wrap: anywhere;
  font-size: .86rem; line-height: 1.5; color: var(--tinta-2);
}
.ntf__abrir { justify-self: start; margin-top: .15rem; }
.ntf__punto {
  position: absolute; top: .7rem; right: .7rem;
  width: 9px; height: 9px; border-radius: 50%; background: var(--rojo-vivo);
}
.ntf--nuevo .ntf__cab { padding-right: 1rem; }

.ntf-vacio {
  display: flex; align-items: center; gap: .6rem; margin: .5rem 0;
  padding: 1rem; border-radius: var(--radio); background: var(--crema);
  color: var(--tinta-3); font-size: .9rem;
}

@media (prefers-reduced-motion: reduce) {
  .ajustes__n { animation: none; }
}