/* Tarjetas de mensajes: las usan el tablero de la web y las pantallas (TV). Color por importancia; tonos amables para cumpleaños y temas de personal. */
.msg{font-family:inherit;--c:#1e6bd6;--bg:#e8f1fc;--tc:#fff;position:relative;border-radius:14px;padding:.85em 1em .8em 1.1em;border-left:.45em solid var(--c);background:var(--bg);color:#1d2b33;overflow:hidden}
.msg .fila{display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.msg .etq-msg{display:inline-block;font-weight:700;font-size:.72em;letter-spacing:.05em;text-transform:uppercase;padding:.15em .65em;border-radius:99px;background:var(--c);color:var(--tc)}
.msg .icono{font-size:1.5em;line-height:1}
.msg h3{margin:.3em 0 .15em;font-size:1.2em;line-height:1.2;overflow-wrap:anywhere}
.msg p.texto{margin:0;white-space:pre-line;overflow-wrap:anywhere;line-height:1.35}
.msg .pie{margin-top:.55em;font-size:.78em;color:#4a5a63}
.msg img.foto{float:right;margin:0 0 .4em .8em;max-width:34%;max-height:9em;border-radius:12px;object-fit:cover}
.msg.nuevo::after{content:"NUEVO";position:absolute;top:.5em;right:.7em;font-size:.65em;font-weight:700;color:var(--c);letter-spacing:.06em}
.imp-informativo{--c:#1e6bd6;--bg:#e8f1fc;--tc:#fff}
.imp-importante{--c:#d98a00;--bg:#fff3d1;--tc:#2b1d00}
.imp-urgente{--c:#d32f2f;--bg:#fde4e2;--tc:#fff}
.tema-cumpleanos{--c:#d6447f;--bg:linear-gradient(135deg,#ffe3f1,#fff1cf);--tc:#fff}
.tema-aniversario{--c:#0f8f78;--bg:linear-gradient(135deg,#dff7ee,#e4efff);--tc:#fff}
.tema-bienvenida{--c:#2f7fd0;--bg:linear-gradient(135deg,#e3f2ff,#e5ffe9);--tc:#fff}
.tema-reconocimiento{--c:#c98700;--bg:linear-gradient(135deg,#fff3d1,#ffe5f1);--tc:#3b2800}
.tema-personal{--c:#7a55c4;--bg:linear-gradient(135deg,#f0e7ff,#e3f6ff);--tc:#fff}
.imp-urgente .icono.alerta{animation:latido 1.6s ease-in-out infinite}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){.imp-urgente .icono.alerta{animation:none}}
/* en la web */
.rejilla-msg{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.8rem;margin:.6rem 0 1.2rem}
.rejilla-msg .acc{margin-top:.6rem;display:flex;gap:.4rem;flex-wrap:wrap}
.canales{display:flex;gap:.4rem;flex-wrap:wrap;margin:.4rem 0 .6rem}
.canales a{padding:.3rem .8rem;border-radius:99px;background:var(--hoja);border:1px solid var(--linea);text-decoration:none;color:var(--tinta);font-size:.9rem}
.canales a.activo{background:var(--verde);color:#fff;border-color:var(--verde)}
.emojis{display:flex;gap:.25rem;flex-wrap:wrap;margin:.3rem 0}
.emojis button{font-size:1.25rem;line-height:1;padding:.2rem .35rem;border:1px solid var(--linea);background:var(--hoja);border-radius:8px;cursor:pointer}
.sucs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.1rem .8rem;max-height:14rem;overflow:auto;border:1px solid var(--linea);border-radius:8px;padding:.4rem .6rem;background:var(--hoja)}