/* 454.ª B com_muro · Reacciones del muro (👍 😆 😍 😡). La carga includes/com_reacciones.php
   solo en las pantallas que pintan el botón. Usa las variables de style.css (tema claro/oscuro). */
.reac{position:relative;display:inline-flex;align-items:center;gap:6px}
.reac .reac-f{margin:0}
.reac .reac-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;cursor:pointer;
  color:var(--muted,#667);font-size:.84rem;font-weight:600;padding:6px 10px;border-radius:9px;font-family:inherit;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.reac .reac-btn:hover{background:var(--bg-2,#eef2f9)}
.reac .reac-btn:focus-visible,.reac .reac-op:focus-visible,.reac .reac-res:focus-visible{outline:2px solid var(--acc-2,#2f7ff0);outline-offset:2px}
.reac .reac-btn.on{color:var(--acc-2,#2f7ff0);font-weight:700}
.reac .reac-btn.reac-divierte{color:#c26a00}
.reac .reac-btn.reac-enoja{color:#d9480f}
.reac .reac-btn.reac-encanta{color:#e0245e}
.reac .reac-ic{font-size:1.02rem;line-height:1}
/* La bandeja: flota encima del botón, como en Facebook/LinkedIn */
.reac-bandeja{position:absolute;left:0;bottom:calc(100% + 6px);z-index:40;display:flex;gap:2px;padding:5px 6px;
  background:var(--panel,#fff);border:1px solid var(--line,#e2e8f0);border-radius:999px;
  box-shadow:0 8px 24px rgba(15,23,42,.18);white-space:nowrap}
.reac-bandeja[hidden]{display:none}
.reac-bandeja form{margin:0}
.reac-op{position:relative;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:transparent;
  cursor:pointer;font-size:1.55rem;line-height:1;padding:0;transition:transform .12s ease}
.reac-op small{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);padding:2px 7px;border-radius:999px;
  background:rgba(15,23,42,.88);color:#fff;font-size:.68rem;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .1s}
.reac-op:hover,.reac-op:focus-visible{transform:scale(1.25) translateY(-3px)}
.reac-op:hover small,.reac-op:focus-visible small{opacity:1}
.reac-op.on{background:var(--bg-2,#eef2f9)}
@media (prefers-reduced-motion:reduce){.reac-op{transition:none}.reac-op:hover,.reac-op:focus-visible{transform:none}}
/* Resumen: 3 emojis apilados + total; desglose al pasar o enfocar */
.reac-res{position:relative;display:inline-flex;align-items:center;gap:4px;font-size:.8rem;color:var(--dim,#7a8699);cursor:default;border-radius:999px;padding:2px 4px}
.reac-res[hidden]{display:none}
.reac-res-ic{display:inline-flex}
.reac-res-ic i{font-style:normal;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--panel,#fff);
  border:1px solid var(--line,#e2e8f0);font-size:.72rem;margin-left:-4px}
.reac-res-ic i:first-child{margin-left:0}
.reac-res b{font-weight:800;color:var(--muted,#667)}
.reac-res-det{position:absolute;left:0;bottom:calc(100% + 6px);z-index:41;display:none;flex-direction:column;gap:3px;padding:7px 10px;
  border-radius:10px;background:rgba(15,23,42,.92);color:#fff;font-size:.76rem;white-space:nowrap}
.reac-res-det b{color:#fff}
.reac-res:hover .reac-res-det,.reac-res:focus .reac-res-det,.reac-res:focus-within .reac-res-det{display:flex}
@media (max-width:480px){.reac-op{width:38px;height:38px;font-size:1.4rem}.reac-bandeja{left:-4px}}