/* ==============================
   Estilos de la vista de detalle de lugar.
   Este archivo interactúa con los siguientes elementos del HTML:

   1. Bloque general de reacción del lugar:
      - #placeReactionCard

   2. Botones de reacción:
      - #placeLikeButton
      - #placeDislikeButton
      - .place-reaction-btn

   3. Estado visual activo de reacción:
      - #placeLikeButton.is-active-like
      - #placeDislikeButton.is-active-dislike

   4. Iconos SVG de reacción:
      - .place-reaction-icon
      - .place-reaction-icon svg

   5. Contadores visuales:
      - #placeLikesCount
      - #placeDislikesCount

   6. Tarjetas internas del detalle:
      - .card
      - .bg-light.rounded-4.p-3.h-100
      - .border.rounded-4.p-3

   7. Adaptación responsive del bloque de reacción:
      - #placeReactionCard
      - .place-reaction-btn
   ============================== */


/* ==============================
   Tarjeta contenedora de reacción del lugar
   Interactúa con:
   - #placeReactionCard
   ============================== */

#placeReactionCard {
    position: relative;
    border-radius: 1rem;
}


/* ==============================
   Botones principales de reacción del lugar
   Interactúa con:
   - #placeLikeButton
   - #placeDislikeButton
   - .place-reaction-btn
   ============================== */

.place-reaction-btn {
    min-height: 56px;
    background: #ffffff;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}


/* ==============================
   Estado hover de los botones de reacción
   Interactúa con:
   - #placeLikeButton:hover
   - #placeDislikeButton:hover
   - .place-reaction-btn:hover
   ============================== */

.place-reaction-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.35rem 0.8rem rgba(15, 23, 42, 0.08);
}


/* ==============================
   Estado focus visible para accesibilidad
   Interactúa con:
   - #placeLikeButton:focus-visible
   - #placeDislikeButton:focus-visible
   - .place-reaction-btn:focus-visible
   ============================== */

.place-reaction-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 0.2rem rgba(14, 165, 233, 0.18),
        0 0.35rem 0.8rem rgba(15, 23, 42, 0.08);
}


/* ==============================
   Estado activo del botón "Me gusta"
   Interactúa con:
   - #placeLikeButton.is-active-like
   - .place-reaction-btn.is-active-like
   ============================== */

.place-reaction-btn.is-active-like {
    border-color: #0ea5e9 !important;
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.14), rgba(14, 165, 233, 0.08));
    color: #075985;
}


/* ==============================
   Estado activo del botón "No me gusta"
   Interactúa con:
   - #placeDislikeButton.is-active-dislike
   - .place-reaction-btn.is-active-dislike
   ============================== */

.place-reaction-btn.is-active-dislike {
    border-color: #0f766e !important;
    background: linear-gradient(180deg, rgba(15, 118, 110, 0.14), rgba(15, 118, 110, 0.08));
    color: #115e59;
}


/* ==============================
   Contenedor del icono decorativo de reacción
   Interactúa con:
   - .place-reaction-icon
   ============================== */

.place-reaction-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
}


/* ==============================
   SVG interno del icono de reacción
   Interactúa con:
   - .place-reaction-icon svg
   ============================== */

.place-reaction-icon svg {
    display: block;
}


/* ==============================
   Contadores numéricos de likes y dislikes
   Interactúa con:
   - #placeLikesCount
   - #placeDislikesCount
   ============================== */

#placeLikesCount,
#placeDislikesCount {
    min-width: 1.5rem;
    text-align: right;
}


/* ==============================
   Refinamiento visual de las tarjetas de resumen e información
   Interactúa con:
   - .bg-light.rounded-4.p-3.h-100
   - .border.rounded-4.p-3
   ============================== */

.bg-light.rounded-4.p-3.h-100,
.border.rounded-4.p-3 {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}


/* ==============================
   Suaviza la apariencia de las tarjetas informativas al pasar el cursor
   Interactúa con:
   - .bg-light.rounded-4.p-3.h-100:hover
   - .border.rounded-4.p-3:hover
   ============================== */

.bg-light.rounded-4.p-3.h-100:hover,
.border.rounded-4.p-3:hover {
    box-shadow: 0 0.35rem 1rem rgba(15, 23, 42, 0.04);
}


/* ==============================
   Ajuste responsive para pantallas medianas y menores
   Interactúa con:
   - #placeReactionCard
   - .place-reaction-btn
   ============================== */

@media (max-width: 991.98px) {
    #placeReactionCard {
        padding-bottom: 0.25rem;
    }

    .place-reaction-btn {
        min-height: 52px;
    }
}


/* ==============================
   Ajuste responsive para pantallas pequeñas
   Interactúa con:
   - .place-reaction-btn
   - .place-reaction-icon
   - #placeLikesCount
   - #placeDislikesCount
   ============================== */

@media (max-width: 575.98px) {
    .place-reaction-btn {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .place-reaction-icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    #placeLikesCount,
    #placeDislikesCount {
        min-width: 1.25rem;
    }
}

/* ==============================
   Botón de ayuda del popover del algoritmo
   Interactúa con:
   - #placeRankingInfoButton
   - .place-info-popover-btn
   ============================== */

.place-info-popover-btn {
    width: 1.6rem;
    height: 1.6rem;
    min-width: 1.6rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0369a1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

/* ==============================
   Hover del botón de ayuda del popover
   Interactúa con:
   - #placeRankingInfoButton:hover
   - .place-info-popover-btn:hover
   ============================== */

.place-info-popover-btn:hover {
    background: rgba(14, 165, 233, 0.08);
    border-color: #0ea5e9;
    color: #075985;
    transform: translateY(-1px);
}

/* ==============================
   Focus visible del botón de ayuda del popover
   Interactúa con:
   - #placeRankingInfoButton:focus-visible
   - .place-info-popover-btn:focus-visible
   ============================== */

.place-info-popover-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(14, 165, 233, 0.18);
}