/* ================================================================
   MURO · ACCIONES DE PUBLICACIÓN v4 (sin cajas)
   Me gusta, comentar, tokens en venta, compartir, eliminar y reportar.
   Solo icono + número/texto con su color. Sin bordes ni fondos fijos;
   un leve fondo aparece únicamente al tocar.
   Se carga DESPUÉS de muro.css.
   ================================================================ */

/* ---------- Barra de estadísticas ---------- */
.post-card .post-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 10px 0 0;
    margin-top: 4px;
    border: 0;
}

.post-card .post-stats > span {
    --ac: 139, 168, 184;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 4px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: rgb(var(--ac));
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background 0.18s ease, color 0.18s ease;
}

.post-card .post-stats > span .count {
    font-variant-numeric: tabular-nums;
}

.post-card .post-stats > span:hover {
    background: rgba(255, 255, 255, 0.05);
}

.post-card .post-stats > span:active {
    background: rgba(255, 255, 255, 0.09);
}

/* Comentar: cian */
.post-card .post-stats .comment-btn { --ac: 0, 229, 255; }

/* Me gusta: rosa */
.post-card .post-stats .like-btn { --ac: 255, 77, 109; }

/* Me gusta activo: el corazón se rellena */
.post-card .post-stats .like-btn[data-liked="true"] .icon-ui {
    fill: rgb(var(--ac));
}

/* Venta activa: dorado, informativo (no clicable) */
.post-card .post-stats .venta-activa {
    --ac: 212, 175, 55;
    cursor: default;
}

.post-card .post-stats .venta-activa:hover,
.post-card .post-stats .venta-activa:active {
    background: transparent;
}

.post-card .post-stats .icon-ui {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.post-card .post-stats .icon-sm-ui {
    width: 14px;
    height: 14px;
}

/* ---------- Acciones del encabezado (compartir, eliminar, reportar) ---------- */
.post-card .post-actions-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.post-card .post-actions-header button {
    --ac: 139, 168, 184;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: rgb(var(--ac));
    cursor: pointer;
    transition: background 0.18s ease;
}

.post-card .post-actions-header button svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.post-card .post-actions-header button:hover,
.post-card .post-actions-header button:active {
    background: rgba(255, 255, 255, 0.06);
}

.post-card .post-actions-header button:focus-visible {
    outline: 2px solid rgb(var(--ac));
    outline-offset: 2px;
}

/* Compartir: violeta */
.post-card .post-actions-header .btn-share { --ac: 168, 85, 247; }

/* Eliminar: rosa */
.post-card .post-actions-header .btn-delete { --ac: 255, 77, 109; }

/* Reportar: dorado */
.post-card .post-actions-header .btn-report { --ac: 247, 212, 74; }

/* ---------- Herramientas del compositor ---------- */
.post-form .form-actions .tools button {
    border: 0;
    border-radius: 8px;
    padding: 6px 9px;
    color: var(--text-muted, #8aa8b8);
    background: transparent;
    transition: color 0.18s ease, background 0.18s ease;
}

.post-form .form-actions .tools button svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.post-form .form-actions .tools button:hover {
    color: var(--cyan, #00e5ff);
    background: rgba(0, 229, 255, 0.06);
}

/* ---------- Iconos de filtros y navegación ---------- */
.muro-filter-nav .filter-tab svg,
.filter-tab .icon-sm {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.main-nav .nav-link .icon-sm {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -2px;
    margin-right: 4px;
}

.logo-badge .icon-sm {
    width: 8px;
    height: 8px;
    fill: currentColor;
    stroke: none;
    vertical-align: 0;
    margin-right: 3px;
}

.footer-net {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0.4;
}

.footer-net .icon-sm {
    width: 12px;
    height: 12px;
    fill: currentColor;
    stroke: none;
}

.cs-story-ring .icon {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Móvil ---------- */
@media (max-width: 480px) {
    .post-card .post-stats { gap: 14px; }

    .post-card .post-stats > span {
        height: 28px;
        font-size: 0.74rem;
    }

    .post-card .post-actions-header { gap: 2px; }

    .post-card .post-actions-header button {
        width: 30px;
        height: 30px;
    }
}

/* ---------- Tema día ---------- */
html.tema-dia .post-card .post-stats > span:hover,
html[data-tema="dia"] .post-card .post-stats > span:hover,
html.tema-dia .post-card .post-actions-header button:hover,
html[data-tema="dia"] .post-card .post-actions-header button:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
    .post-card .post-stats > span,
    .post-card .post-actions-header button {
        transition: none;
    }
}