.cc-reactions {
    --cc-ink: #032631;
    --cc-blue: #1B3749;
    --cc-muted: #6A7C88;
    --cc-line: #DBDEE0;
    --cc-soft: #F7F8F9;
    --cc-yellow: #F9D730;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 28px 0 0;
    padding: 7px 0;
    border-top: 1px solid var(--cc-line);
    border-bottom: 0;
    color: var(--cc-blue);
    box-sizing: border-box;
    white-space: nowrap;
}

.cc-reactions *,
.cc-reactions *::before,
.cc-reactions *::after {
    box-sizing: border-box;
}

/* Todos los elementos principales comparten exactamente la misma altura.
   Esto evita los pequeños desniveles provocados por los estilos del tema. */
.cc-reactions__title,
.cc-reactions__buttons,
.cc-reactions__summary {
    height: 28px;
    min-height: 28px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    align-self: center;
}

.cc-reactions__title,
.cc-reactions__summary {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    line-height: 1.2;
}

.cc-reactions__title {
    color: var(--cc-ink);
    font-size: 13px;
    font-weight: 500;
}

.cc-reactions__title-short,
.cc-reactions__summary-short {
    display: none;
}

.cc-reactions__buttons {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.cc-reaction-button {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 28px;
    min-height: 28px;
    margin: 0 !important;
    padding: 0 7px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--cc-muted);
    font: inherit;
    font-size: 12.5px;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.cc-reaction-button + .cc-reaction-button {
    position: relative;
    margin-left: 5px !important;
}

.cc-reaction-button + .cc-reaction-button::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 50%;
    width: 1px;
    height: 14px;
    background: var(--cc-line);
    transform: translateY(-50%);
}

.cc-reaction-button:hover {
    color: var(--cc-ink);
    background: var(--cc-soft);
}

.cc-reaction-button:focus-visible {
    outline: 2px solid var(--cc-yellow);
    outline-offset: 1px;
}

.cc-reaction-button.is-active {
    color: var(--cc-ink);
    background: var(--cc-soft);
}

.cc-reaction-button.is-active::after {
    content: "";
    width: 4px;
    height: 4px;
    margin-left: 1px;
    border-radius: 50%;
    background: var(--cc-yellow);
    flex: 0 0 4px;
}

.cc-reaction-button.is-loading {
    pointer-events: none;
    opacity: .55;
}

.cc-reaction-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    line-height: 0;
}

.cc-reaction-button__icon svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px;
    min-height: 14px;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: none !important;
}

.cc-reaction-button__icon svg path,
.cc-reaction-button__icon svg circle {
    fill: none !important;
    stroke: currentColor !important;
    vector-effect: non-scaling-stroke;
}

.cc-reaction-button__label,
.cc-reaction-button__count {
    display: inline-flex;
    align-items: center;
    height: 14px;
    line-height: 14px;
}

.cc-reaction-button__label {
    white-space: nowrap;
}

.cc-reaction-button__count {
    min-width: 12px;
    color: inherit;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    justify-content: center;
}

.cc-reactions__summary {
    margin-left: auto !important;
    padding-left: 12px;
    gap: 4px;
    color: var(--cc-muted);
    font-size: 11.5px;
}

.cc-reactions__status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 760px) {
    .cc-reactions {
        gap: 7px;
        margin-top: 24px;
        padding: 6px 0;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .cc-reactions::-webkit-scrollbar {
        display: none;
    }

    .cc-reactions__title-full,
    .cc-reactions__summary-full {
        display: none;
    }

    .cc-reactions__title-short,
    .cc-reactions__summary-short {
        display: inline;
    }

    .cc-reactions__title {
        font-size: 12px;
    }

    .cc-reaction-button {
        gap: 3px;
        padding: 0 5px;
        font-size: 11.5px;
    }

    .cc-reaction-button__icon,
    .cc-reaction-button__icon svg {
        width: 13px;
        height: 13px;
    }

    .cc-reactions__summary {
        margin-left: 4px !important;
        padding-left: 8px;
        gap: 3px;
        font-size: 10.5px;
    }
}

/* v1.2.5 — La barra conserva únicamente la línea superior.
   La separación inferior queda a cargo del divisor superior del bloque "Etiquetas"
   del tema, evitando tres líneas horizontales demasiado próximas. */

/* v1.1.3 — Zona segura para el botón flotante "Compartir".
   En escritorio se reserva el sector derecho donde se ubica el control flotante,
   evitando que tape el total de reacciones sin modificar el botón del tema. */
@media (min-width: 761px) {
    .cc-reactions {
        --cc-share-safe-area: 142px;
        /* La barra conserva el ancho completo para que los bordes superior e
           inferior lleguen hasta el final de la columna. El espacio para el
           botón flotante se reserva dentro de la barra, no recortando su ancho. */
        width: 100%;
        max-width: 100%;
        padding-right: var(--cc-share-safe-area);
    }
}

/* En anchos intermedios usamos las leyendas breves para conservar una sola línea. */
@media (min-width: 761px) and (max-width: 1050px) {
    .cc-reactions {
        gap: 8px;
    }

    .cc-reactions__title-full,
    .cc-reactions__summary-full {
        display: none;
    }

    .cc-reactions__title-short,
    .cc-reactions__summary-short {
        display: inline;
    }

    .cc-reaction-button {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* En móvil el botón compartir usa su comportamiento responsive propio y la barra
   vuelve a disponer del ancho completo. */
@media (max-width: 760px) {
    .cc-reactions {
        width: 100%;
        max-width: 100%;
    }
}
/* v1.2.6 — Ritmo vertical entre Reacciones y Etiquetas.
   Se reduce el espacio posterior a la barra para que el divisor superior de
   Etiquetas funcione como cierre visual y mantenga una distancia equivalente
   a la que existe entre ese divisor y el título “Etiquetas”. */
body.single .cc-single-tags {
    margin-top: 0;
}

@media (max-width: 760px) {
    body.single .cc-single-tags {
        margin-top: 0;
    }
}

/* v1.2.7 — Simetría vertical.
   El divisor de Etiquetas queda a la misma distancia visual por debajo de la
   fila de reacciones que el divisor superior queda por encima. */