/* u0-posts.css — 2026-11-09 */

/* ---------- Menciones: desplegable de autocompletado al tipear @ (jquery.atwho) ----------
   index.css lo dejaba con fondo #fff y el texto heredaba el blanco del tema: blanco sobre blanco.
   Global: sirve para responder, temas nuevos y MPs. */
body .atwho-view{background:#0b0d18;border:1px solid rgba(60,183,234,.28);border-radius:4px;box-shadow:0 12px 28px rgba(0,0,0,.65);min-width:190px;max-width:min(320px,calc(100vw - 24px));margin-top:22px;color:#e4e7ef;font:400 .9rem/1.3 var(--f-body,system-ui,sans-serif);overflow:hidden}
body .atwho-view ul{max-height:264px;overflow-y:auto;margin:0;padding:3px 0}
body .atwho-view ul li{display:block;padding:7px 12px;border-bottom:1px solid rgba(255,255,255,.06);color:#d9dde7;background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .atwho-view ul li:last-child{border-bottom:0}
body .atwho-view strong{color:#3CB7EA;font-weight:600}
body .atwho-view small{color:rgba(255,255,255,.55)}
body .atwho-view .cur{background:#212349;color:#fff;box-shadow:inset 2px 0 0 #3CB7EA}
body .atwho-view .cur strong{color:#fff;font-weight:700}
body .atwho-view .cur small{color:rgba(255,255,255,.8)}

/* ---------- Botonera de cada mensaje (Agradecer / Citar / Más...) ----------
   responsive.css pintaba cada <li> gris #333 y el hover iba a celeste lleno; el recorte "notch" cortaba el borde de "Más...". */
body.u0 .under_message{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem .75rem}
body.u0 .under_message>ul.floatleft{float:none;margin:0}
body.u0 .under_message>.quickbuttons{float:none;margin-left:auto;justify-content:flex-end}
body.u0 .quickbuttons li{background:transparent !important}
body.u0 .quickbuttons>li>a{gap:.4rem;padding:.42rem .8rem;color:#d4d8e2 !important;background:rgba(255,255,255,.025) !important;border:1px solid rgba(255,255,255,.13);border-radius:4px;box-shadow:none;clip-path:none;line-height:1.1}
body.u0 .quickbuttons>li>a:hover,body.u0 .quickbuttons>li>a:focus-visible{color:#fff !important;background:#212349 !important;border-color:rgba(60,183,234,.45)}
body.u0 .quickbuttons li a:hover .main_icons{filter:brightness(0) invert(1);opacity:1}
/* Agradecer: el ícono 🙏 (como en "Le agradecieron") lo distingue del "Me Gusta" de SMF */
body.u0 .quickbuttons li.u0p5-thx>a{color:#eef1f6 !important;border-color:rgba(60,183,234,.32)}
body.u0 .quickbuttons li.u0p5-thx .main_icons{display:none}
body.u0 .quickbuttons li.u0p5-thx>a::before{content:"\1F64F";font-size:.95rem;line-height:1}
body.u0 .quickbuttons li.u0p5-thx.is-on>a{color:var(--u0-green,#4ade80) !important;background:rgba(74,222,128,.06) !important;border-color:rgba(74,222,128,.35);cursor:default}
body.u0 .quickbuttons li.u0p5-thx.is-on>a:hover{background:rgba(74,222,128,.06) !important}
@media (max-width:600px){
  body.u0 .under_message>.quickbuttons{margin-left:0;width:100%;justify-content:flex-start}
}

/* ================================================================
   Barra de acciones del mensaje (2026-11-09): debajo de las reacciones,
   «Me gusta · Guardar · Agradecer» en una línea y con el mismo estilo.
   La arma u0p5_prepare_display_context (.u0p4-bar.u0act); el <ul> de Me gusta lo mete Display.template.php.
   ================================================================ */
body.u0 .u0act{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
body.u0 .u0act>ul.floatleft{float:none !important;display:contents;margin:0;padding:0;list-style:none}
body.u0 .u0act>ul>li{display:inline-flex;align-items:center;margin:0 !important;padding:0 !important;list-style:none;background:none !important}
body.u0 .u0act .msg_like,body.u0 .u0act .u0p4-save,body.u0 .u0act .u0p5-thx-b{
  display:inline-flex;align-items:center;gap:6px;height:32px;margin:0;padding:0 12px !important;
  font:500 .8125rem/1 var(--f-ui,system-ui,sans-serif) !important;letter-spacing:0 !important;text-transform:none !important;
  color:#dfe6ee !important;background:rgba(255,255,255,.03) !important;border:1px solid rgba(255,255,255,.18) !important;
  border-radius:6px;box-shadow:none !important;clip-path:none !important;cursor:pointer;text-decoration:none !important;white-space:nowrap}
body.u0 .u0act .msg_like:hover,body.u0 .u0act .u0p4-save:hover,body.u0 .u0act .u0p5-thx-b:not([aria-disabled]):hover,
body.u0 .u0act .msg_like:focus-visible,body.u0 .u0act .u0p4-save:focus-visible,body.u0 .u0act .u0p5-thx-b:focus-visible{
  color:#fff !important;background:#212349 !important;border-color:#3a3f7a !important;outline:none}
body.u0 .u0act .msg_like .main_icons{display:none}
body.u0 .u0act .msg_like::before{content:"👍"}
/* Estado activo (ya te gusta / guardado / agradecido): verde tenue, igual en los tres */
body.u0 .u0act .msg_like:has(.unlike),body.u0 .u0act .u0p4-save.is-on,body.u0 .u0act .u0p5-thx-b.is-on{
  color:#86e0ad !important;background:rgba(74,222,128,.07) !important;border-color:rgba(74,222,128,.42) !important}
body.u0 .u0act .u0p5-thx-b[aria-disabled]{cursor:default}
body.u0 .u0act .like_count{font-size:.8rem;color:var(--txt-3,rgba(255,255,255,.6));padding:0 2px !important}
body.u0 .u0act .like_count a{color:var(--txt-2,rgba(255,255,255,.8)) !important;text-decoration:underline;text-decoration-color:rgba(255,255,255,.25)}
body.u0 .u0act .u0p4-bounty,body.u0 .u0act .u0p4-offer{flex-basis:100%}
@media (max-width:480px){
  body.u0 .u0act{gap:6px}
  body.u0 .u0act .msg_like,body.u0 .u0act .u0p4-save,body.u0 .u0act .u0p5-thx-b{height:34px;padding:0 10px !important}
}

/* Modal «Agradecer» (2026-11-09). Selectores con dialog.u0thx-dlg para ganarle a los estilos generales de botones del tema. */
dialog.u0thx-dlg{width:min(480px,calc(100vw - 32px));max-height:calc(100vh - 32px);margin:auto;padding:0;overflow:auto;color:#e6ebf2;background:#0b0d18;border:1px solid #262b55;border-radius:12px;box-shadow:0 24px 64px rgba(0,0,0,.65)}
dialog.u0thx-dlg::backdrop{background:rgba(2,3,10,.74);backdrop-filter:blur(3px)}
dialog.u0thx-dlg[open]{animation:u0thxIn .18s ease-out}
@keyframes u0thxIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){dialog.u0thx-dlg[open]{animation:none}}
dialog.u0thx-dlg *{box-sizing:border-box}
dialog.u0thx-dlg .u0thx-f{margin:0;padding:22px 22px 20px}
dialog.u0thx-dlg .u0thx-h{display:flex;align-items:center;gap:14px;margin-bottom:18px}
dialog.u0thx-dlg .u0thx-av{position:relative;flex:none;width:48px;height:48px}
dialog.u0thx-dlg .u0thx-av img,dialog.u0thx-dlg .u0thx-ini{width:48px;height:48px;border-radius:10px;object-fit:cover;background:#212349}
dialog.u0thx-dlg .u0thx-ini{display:grid;place-items:center;font:600 1.2rem var(--f-ui,system-ui,sans-serif);color:#fff}
dialog.u0thx-dlg .u0thx-ini[hidden],dialog.u0thx-dlg .u0thx-av img[hidden]{display:none}
dialog.u0thx-dlg .u0thx-av i{position:absolute;right:-6px;bottom:-6px;display:grid;place-items:center;width:24px;height:24px;font-size:13px;font-style:normal;background:#0b0d18;border:1px solid #262b55;border-radius:50%}
dialog.u0thx-dlg .u0thx-ht{min-width:0}
dialog.u0thx-dlg h3{margin:0 0 3px;padding:0;font:600 1.1rem/1.3 var(--f-ui,system-ui,sans-serif);color:#fff;letter-spacing:0;text-transform:none;background:none;border:0}
dialog.u0thx-dlg .u0thx-ht p{margin:0;font-size:.85rem;line-height:1.35;color:rgba(230,235,242,.62);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
dialog.u0thx-dlg .u0thx-ht b{color:rgba(230,235,242,.88);font-weight:500}
dialog.u0thx-dlg button{font-family:var(--f-ui,system-ui,sans-serif) !important;letter-spacing:0 !important;text-transform:none !important;box-shadow:none !important;clip-path:none !important;min-height:0 !important;margin:0}
dialog.u0thx-dlg button.u0thx-x{align-self:flex-start;margin-left:auto;flex:none;width:34px;height:34px;padding:0 !important;font-size:22px !important;line-height:1 !important;color:rgba(230,235,242,.6) !important;background:transparent !important;border:0 !important;border-radius:8px;cursor:pointer}
dialog.u0thx-dlg button.u0thx-x:hover,dialog.u0thx-dlg button.u0thx-x:focus-visible{color:#fff !important;background:rgba(255,255,255,.07) !important;outline:none}
dialog.u0thx-dlg .u0thx-l{display:block;margin:0 0 7px;font-size:.85rem;font-weight:500;color:rgba(230,235,242,.85)}
dialog.u0thx-dlg .u0thx-l span{font-weight:400;color:rgba(230,235,242,.5)}
dialog.u0thx-dlg textarea{display:block;width:100%;min-height:92px;margin:0;padding:11px 13px;resize:vertical;font:400 .95rem/1.5 var(--f-ui,system-ui,sans-serif);color:#fff;background:#05060f;border:1px solid rgba(255,255,255,.16);border-radius:8px}
dialog.u0thx-dlg textarea::placeholder{color:rgba(230,235,242,.38)}
dialog.u0thx-dlg textarea:focus{outline:none;border-color:#3CB7EA;box-shadow:0 0 0 3px rgba(60,183,234,.16)}
dialog.u0thx-dlg .u0thx-m{display:flex;justify-content:space-between;gap:8px;min-height:18px;margin-top:6px;font-size:.78rem}
dialog.u0thx-dlg .u0thx-c{margin-left:auto;color:rgba(230,235,242,.45);font-variant-numeric:tabular-nums}
dialog.u0thx-dlg .u0thx-c.is-near{color:#f0b35a}
dialog.u0thx-dlg .u0thx-err{color:#ff8fa0}
dialog.u0thx-dlg .u0thx-sug{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
dialog.u0thx-dlg .u0thx-sug button{height:30px;padding:0 11px !important;font-size:.8rem !important;font-weight:500 !important;color:rgba(230,235,242,.85) !important;background:rgba(255,255,255,.04) !important;border:1px solid rgba(255,255,255,.14) !important;border-radius:999px;cursor:pointer}
dialog.u0thx-dlg .u0thx-sug button:hover,dialog.u0thx-dlg .u0thx-sug button:focus-visible{color:#fff !important;background:#212349 !important;border-color:#3a3f7a !important;outline:none}
dialog.u0thx-dlg .u0thx-note{margin:16px 0 0;font-size:.78rem;color:rgba(230,235,242,.5)}
dialog.u0thx-dlg .u0thx-a{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
dialog.u0thx-dlg .u0thx-a button{height:40px;padding:0 18px !important;font-size:.9rem !important;font-weight:600 !important;border-radius:8px;cursor:pointer}
dialog.u0thx-dlg button.u0thx-cancel{color:#dfe6ee !important;background:transparent !important;border:1px solid rgba(255,255,255,.18) !important}
dialog.u0thx-dlg button.u0thx-cancel:hover,dialog.u0thx-dlg button.u0thx-cancel:focus-visible{background:rgba(255,255,255,.06) !important;outline:none}
dialog.u0thx-dlg button.u0thx-ok{color:#04111a !important;background:#3CB7EA !important;border:1px solid #3CB7EA !important}
dialog.u0thx-dlg button.u0thx-ok:hover{background:#62c8f1 !important;border-color:#62c8f1 !important}
dialog.u0thx-dlg button.u0thx-ok:focus-visible{outline:2px solid #fff;outline-offset:2px}
dialog.u0thx-dlg button.u0thx-ok:disabled{opacity:.65;cursor:wait}
dialog.u0thx-dlg .u0thx-done{padding:38px 22px 34px;text-align:center}
dialog.u0thx-dlg .u0thx-done span{display:block;font-size:38px;margin-bottom:10px}
dialog.u0thx-dlg .u0thx-done b{display:block;font-size:1.1rem;color:#fff}
dialog.u0thx-dlg .u0thx-done p{margin:6px 0 0;font-size:.9rem;color:rgba(230,235,242,.7)}
/* Celular: hoja que sube desde abajo, por encima de la barra inferior */
@media (max-width:560px){
  dialog.u0thx-dlg{width:100vw;max-width:100vw;max-height:88vh;margin:auto 0 0;border-radius:16px 16px 0 0;border-bottom:0}
  dialog.u0thx-dlg[open]{animation:u0thxUp .2s ease-out}
  @keyframes u0thxUp{from{transform:translateY(100%)}to{transform:none}}
  dialog.u0thx-dlg .u0thx-f{padding:18px 16px calc(16px + env(safe-area-inset-bottom,0px))}
  dialog.u0thx-dlg .u0thx-a button{flex:1}
  dialog.u0thx-dlg textarea{font-size:16px}
}
@media (max-width:560px){dialog.u0thx-dlg .u0thx-a button{padding:0 10px !important;font-size:.875rem !important;white-space:nowrap}}

/* Compartir (2026-11-09): mismos botones que Me gusta / Guardar / Agradecer. */
body.u0 .u0act .u0sh{display:contents}
body.u0 .u0act .u0sh-b,body.u0 .u0act .u0sh-wa,body.u0 .u0act .u0sh-tg{
  display:inline-flex;align-items:center;gap:6px;height:32px;margin:0;padding:0 12px !important;
  font:500 .8125rem/1 var(--f-ui,system-ui,sans-serif) !important;letter-spacing:0 !important;text-transform:none !important;
  color:#dfe6ee !important;background:rgba(255,255,255,.03) !important;border:1px solid rgba(255,255,255,.18) !important;
  border-radius:6px;box-shadow:none !important;clip-path:none !important;cursor:pointer;text-decoration:none !important;white-space:nowrap}
body.u0 .u0act .u0sh-b:hover,body.u0 .u0act .u0sh-wa:hover,body.u0 .u0act .u0sh-tg:hover,
body.u0 .u0act .u0sh-b:focus-visible,body.u0 .u0act .u0sh-wa:focus-visible,body.u0 .u0act .u0sh-tg:focus-visible,
body.u0 .u0act .u0sh-b[aria-expanded=true]{color:#fff !important;background:#212349 !important;border-color:#3a3f7a !important;outline:none}
body.u0 .u0act .u0sh i{font-size:14px;width:14px;text-align:center}
body.u0 .u0act .u0sh-wa i{color:#3ccf73}
body.u0 .u0act .u0sh-tg i{color:#3aa9e6}
/* Separador visual entre acciones y compartir (solo si entra en la misma fila) */
body.u0 .u0act .u0sh-b{margin-left:auto}
@media (max-width:560px){
  body.u0 .u0act .u0sh-b{margin-left:0}
  body.u0 .u0act .u0sh-wa span,body.u0 .u0act .u0sh-tg span{display:none}
  body.u0 .u0act .u0sh-wa,body.u0 .u0act .u0sh-tg{width:34px;height:34px;padding:0 !important;justify-content:center}
  body.u0 .u0act .u0sh i{font-size:16px;width:auto}
}
/* Menú de compartir */
.u0sh-m{position:absolute;z-index:9995;min-width:220px;padding:6px;background:#0b0d18;border:1px solid #262b55;border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.55)}
.u0sh-m[hidden]{display:none}
.u0sh-m .u0sh-h{padding:6px 10px 8px;font:600 .72rem var(--f-ui,system-ui,sans-serif);letter-spacing:.06em;text-transform:uppercase;color:rgba(230,235,242,.5)}
.u0sh-m .u0sh-i{display:flex;align-items:center;gap:10px;padding:9px 10px;font:500 .875rem var(--f-ui,system-ui,sans-serif);color:#dfe6ee !important;text-decoration:none !important;border-radius:6px}
.u0sh-m .u0sh-i i{width:16px;text-align:center;font-size:15px;color:rgba(230,235,242,.7)}
.u0sh-m .u0sh-i:hover,.u0sh-m .u0sh-i:focus-visible{color:#fff !important;background:#212349;outline:none}
.u0sh-m .u0sh-i.is-ok,.u0sh-m .u0sh-i.is-ok i{color:#86e0ad !important}
.u0sh-m .u0sh-i .fa-whatsapp{color:#3ccf73}
.u0sh-m .u0sh-i .fa-telegram{color:#3aa9e6}