/* ── assets/votos.css ──────────────────────────────────────────────────────── * Estilos para el sistema de votos 👍 / 👎 en las tarjetas de TipDía. * INCLUIR en de index.php: * * ─────────────────────────────────────────────────────────────────────────── */ /* Bloque de votos dentro de la tarjeta */ .tip-card__votos { display: flex; align-items: center; gap: 0.5rem; margin: 0.6rem 0 0.4rem; } /* Botón base */ .btn-voto { display: inline-flex; align-items: center; gap: 0.3rem; background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.25); border-radius: 20px; color: rgba(255, 255, 255, 0.75); font-size: 0.82rem; padding: 0.28rem 0.75rem; cursor: pointer; transition: all 0.2s ease; font-family: inherit; line-height: 1; } .btn-voto:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.6); color: #fff; background: rgba(255, 255, 255, 0.1); transform: scale(1.05); } /* Voto activo (el que eligió el usuario) */ .btn-voto--activo.btn-voto--like { background: rgba(74, 222, 128, 0.25); border-color: #4ade80; color: #4ade80; font-weight: 600; } .btn-voto--activo.btn-voto--dislike { background: rgba(248, 113, 113, 0.25); border-color: #f87171; color: #f87171; font-weight: 600; } /* Deshabilitado tras votar */ .btn-voto:disabled { cursor: default; opacity: 0.7; } .btn-voto:disabled:not(.btn-voto--activo) { opacity: 0.35; } /* Contador numérico */ .voto-count-like, .voto-count-dislike { font-variant-numeric: tabular-nums; min-width: 1ch; } /* ── Tabla de ranking en el panel de admin ────────────────────────────────── */ .votos-ranking { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-top: 1rem; } .votos-ranking th, .votos-ranking td { padding: 0.55rem 0.8rem; text-align: left; border-bottom: 1px solid #e5e7eb; } .votos-ranking th { background: #f3f4f6; font-weight: 600; color: #374151; } .votos-ranking tr:hover td { background: #f9fafb; } .votos-ranking .voto-bar { display: inline-block; height: 8px; border-radius: 4px; background: #4ade80; margin-right: 4px; vertical-align: middle; } .votos-ranking .voto-bar--dislike { background: #f87171; } .votos-score-positive { color: #16a34a; font-weight: 600; } .votos-score-negative { color: #dc2626; font-weight: 600; } .votos-score-neutral { color: #6b7280; }