/* =====================================================================
   TABLÓN DE AVISOS
   ===================================================================== */

/* Contador del menú */
.nav a { position: relative; }
.nav-badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center;
  animation: pop .3s ease both;
}
.nav-badge.is-urgente { background: var(--danger); }
.nav-badge[hidden] { display: none; }

/* Tarjeta de aviso */
.avisos-lista { display: flex; flex-direction: column; gap: 12px; }
.aviso-card {
  --prio: var(--border-strong);
  position: relative; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--prio);
  border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
  transition: opacity .25s ease, transform .25s ease, border-color .2s ease, box-shadow .2s ease;
}
.aviso-card.prio-normal { --prio: var(--primary); }
.aviso-card.prio-importante { --prio: #f59e0b; }
.aviso-card.prio-urgente { --prio: var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.aviso-card.is-nuevo { box-shadow: 0 0 0 1px color-mix(in srgb, var(--prio) 40%, transparent), 0 8px 24px -16px var(--prio); }
.aviso-card.is-nuevo::after {
  content: ''; position: absolute; top: 16px; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--prio);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--prio) 20%, transparent);
}
.aviso-card.leyendo { opacity: .5; transform: scale(.99); }
.aviso-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding-right: 18px; }
.aviso-top h3 { font-size: 16px; font-weight: 650; display: flex; align-items: center; gap: 6px; margin: 0; }
.aviso-pin { color: var(--prio); display: inline-flex; }
.aviso-pin .ico { width: 16px; height: 16px; transform: rotate(35deg); }
.aviso-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.aviso-prio { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; color: var(--prio); background: color-mix(in srgb, var(--prio) 14%, transparent); }
.aviso-pub { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
.aviso-pub .ico { width: 12px; height: 12px; }
.aviso-texto { font-size: 14px; line-height: 1.55; color: var(--text-2); overflow-wrap: anywhere; }
.aviso-texto.is-corto { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.aviso-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.aviso-acc { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.aviso-ok { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ok); font-weight: 550; }
.aviso-ok .ico { width: 14px; height: 14px; }

/* Dashboard */
.avisos-card[hidden] { display: none; }
.avisos-dash { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.avisos-dash .aviso-card { padding: 12px 14px; gap: 6px; }
.avisos-dash .aviso-top h3 { font-size: 14.5px; }
.aviso-count { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); margin-left: 6px; }

/* Formulario: prioridad */
.prio-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.prio-opt { position: relative; cursor: pointer; }
.prio-opt input { position: absolute; opacity: 0; pointer-events: none; }
.prio-opt span {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 550;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2); transition: all .18s ease;
}
.prio-opt span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.prio-normal { --c: var(--primary); }
.prio-importante { --c: #f59e0b; }
.prio-urgente { --c: var(--danger); }
.prio-opt input:checked + span { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--text); }
.prio-opt input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.check .ico { width: 14px; height: 14px; vertical-align: -2px; }

/* Lecturas */
.lect-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lect-cols h4 { display: flex; align-items: center; gap: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 8px; }
.lect-cols h4 .ico { width: 14px; height: 14px; }
.lect { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lect li { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.lect small { color: var(--muted); }

@media (max-width: 720px) {
  .lect-cols { grid-template-columns: 1fr; }
  .avisos-dash { grid-template-columns: 1fr; }
}