/* Estilos base y contenedores */
.reacciones-wrapper {display: flex;flex-direction: column;gap: 0.5em;}
.reacciones-header {text-align: center;padding-bottom: 1em;border-bottom: 1px solid #eee;}
h2.titulo-reaccion {text-align: center;margin-top: 0.5em;border-bottom: none;margin-bottom: 0 !important;}
.votacion-container {display: grid;grid-auto-flow: column;justify-content: center;grid-gap: 5px !important;overflow: visible !important;}
.reacciones-strip {display: flex;justify-content: space-around;gap: 0.5em;}
.reaccion-item {flex: 1;text-align: center;}
.vote-button {position: relative;width: 100px;padding: 5px;background: #FFFFFF;border: none;cursor: pointer;transition: all 0.3s;overflow: visible;width: auto !important;min-width: 100px;padding: 10px 15px !important;margin: 0 5px;box-sizing: border-box;}
.vote-button:hover {background: none;transform: scale(1.10);z-index: 2;}
.vote-button:disabled {opacity: 0.7;cursor: not-allowed; margin-left:5px;}
.vote-button.loading {position: relative;color: transparent;}
.vote-button.loading:after {content: "";position: absolute;top: 50%;left: 50%;width: 15px;height: 15px;margin: -8px 0 0 -8px;border: 2px solid #ccc;border-top-color: #333;border-radius: 50%;animation: spin 0.6s linear infinite;}
.emojii {width: 50px;height: 50px;background: #FFFFFF;}
.emojii.clicked {animation: bounce 0.4s ease;}
.image-container {width: 50px;height: 50px;margin: 0 auto;position: relative;}
.image-container img {width: 100%;height: 100%;object-fit: contain;}
.reaccion-name, a.name-vote, span.name-vote {display: grid;margin-top: 0.5em;color: black;font-size: 0.9em;}
.reaccion-score, .vote-score {display: block;text-align: center;font-size: 18px;font-weight: bold;color: #008a9c;margin-top: 1em;}
.total-counter {text-align: center;}
.total-counter span {font-size: 0.9em;color: #666;}
.reacciones-question h4 {margin: 0.5em 0 0;font-size: 1.2em;font-weight: 600;}
.upvote-indicator {position: relative;height: 20px;margin-bottom: 5px;opacity: 0;transition: opacity 0.3s;}
.reaccion-button.active .upvote-indicator {opacity: 1;}
.indicator {position: absolute;width: 100%;height: 100%;background: #4CAF50;border-radius: 50%;}
.vote-tooltip {position: absolute;top: -5px;left: 50%;transform: translateX(-50%);background-color: #99FFCC;color: #000000;padding: 6px 10px;border-radius: 4px;
font-size: 12px;white-space: nowrap;z-index: 10;animation: fadeInOut 3s ease forwards;}
.voto-efecto {position: absolute;top: 10px;left: 50%;transform: translateX(-50%);font-size: 18px;font-weight: bold;color: #4CAF50;opacity: 0;animation: votoAnimacion 3s ease-out;z-index: 10;pointer-events: none;}
.vote-error {padding: 10px;margin-bottom: 15px;background: #fff8f8;border-left: 4px solid #ff3860;color: #ff3860;animation: fadeIn 0.3s;}
@keyframes votoAnimacion {0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-30px); }}
@keyframes fadeIn {from { opacity: 0; }
    to { opacity: 1; }}
@keyframes spin {to { transform: rotate(360deg); }}
@keyframes fadeInOut {0% { opacity: 0; transform: translateX(-50%) translateY(-5px); }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) translateY(-5px); }}
@keyframes bounce {0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }}