/* Comentarios (inc/extras.php: ht_comment_template; js/comments.js).
   El avatar con su efecto y la estampilla favorita van siempre enteros. */

/* ─── Barra: destacado y orden ─── */
.ht-cm-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 4px;
    padding: 0 12px;
}

/* Aire a los lados: las tarjetas no van pegadas al borde de la sección. */
.comments .comment-list {
    padding: 0 12px;
}

.ht-cm-featured-bar {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 2px solid #e8d8a0;
    border-radius: 6px;
    background: #fff8e1;
    box-shadow: 0 0 0 1px #f0dfa6;
    font-size: 0.85rem;
    color: #6b5200;
    text-decoration: none;
}

.ht-cm-featured-bar:hover {
    background: #fff2c4;
    color: #6b5200;
}

.ht-cm-featured-bar > i {
    color: #e6a100;
}

.ht-cm-featured-bar span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ht-cm-featured-bar small {
    font-weight: bold;
    color: #c0392b;
    white-space: nowrap;
}

.ht-cm-sort {
    display: flex;
    gap: 5px;
    margin-left: auto;
}

.ht-cm-sort-btn {
    padding: 6px 10px;
    border: 0;
    border-bottom: 2px solid #b7d6e1;
    border-radius: 4px;
    background: #ebf9ff;
    box-shadow: 0 0 1px 1px rgb(0, 134, 183);
    font: inherit;
    font-size: 0.8rem;
    font-weight: bold;
    color: #004960;
    cursor: pointer;
    white-space: nowrap;
}

.ht-cm-sort-btn:hover {
    background: #fff;
}

.ht-cm-sort-btn.active {
    background: #0093c2;
    border-bottom-color: #005f80;
    box-shadow: 0 0 1px 1px rgb(0, 79, 108);
    color: #fff;
}

/* ─── Tarjeta ─── */
.comment-list li.ht-cm {
    margin: 10px 0;
    list-style: none;
}

.ht-cm-card {
    display: grid;
    grid-template-columns: 102px minmax(0, 1fr) 110px;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 10px;
    background: #f5f9fb;
    box-shadow: 0 0 0 2px #000;
}

/* El fondo del perfil no se repite: el recuadro del avatar mide siempre lo
   mismo aunque el comentario sea largo o se esté editando. */
.ht-cm-avatar {
    display: block;
    grid-column: 1;
    align-self: start;
    height: 102px;
}

.ht-cm .comment-image {
    float: none;
    width: 102px;
    height: 102px;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
}

.ht-cm .ht-cm-body {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 102px;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 2px solid #fff;
    border-radius: 0;
    background: linear-gradient(#fff 30%, #e6eef2 100%);
}

.ht-cm-stamp {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-left: 2px solid #fff;
    background: #cfdde4;
    cursor: pointer;
}

.ht-cm-stamp img {
    max-width: none;
}

/* Cabecera: franja con nombre, distintivos y hora */
.ht-cm .ht-cm-head {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 4px 14px;
    overflow: visible;
    border-bottom: 1px solid #c5d6de;
    border-radius: 0;
    background: linear-gradient(#e9f2f6, #d5e3ea);
    box-shadow: inset 0 -1px 0 #fff;
    font-size: 1rem;
    font-weight: normal;
    color: inherit;
}

.ht-cm .ht-cm-head .vcard {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
    height: auto;
    padding: 0;
    font-size: 1rem;
}

.ht-cm .ht-cm-head a {
    margin: 0;
}

.ht-cm .ht-cm-time {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0;
    border: 0;
    float: none;
    font-size: 0.72rem;
    color: #4f6670;
    white-space: nowrap;
}

.ht-cm-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: bold;
    line-height: 1.5;
    color: #fff;
    white-space: nowrap;
}

.ht-cm-badge.is-author { background: #0093c2; }
.ht-cm-badge.is-admin { background: #b00000; }
.ht-cm-badge.is-reporter { background: #6a2bb3; }
.ht-cm-badge.is-guide { background: #1c9c44; }
.ht-cm-badge.is-events { background: #d97a00; }
.ht-cm-badge.is-publicity { background: #c2185b; }
.ht-cm-badge.is-designer { background: #00897b; }
.ht-cm-badge.is-blogger { background: #546e7a; }
.ht-cm-badge.is-featured { background: #e6a100; }

.ht-cm-badge.is-ct {
    background: #f0b400;
}

.ht-cm-badge.is-ct img {
    height: 13px;
}

.ht-cm-reply-to {
    padding: 4px 14px 0;
    font-size: 0.74rem;
    color: #5a6d75;
}

.ht-cm-reply-to a {
    font-weight: bold;
    color: #0080a8;
}

.ht-cm .comment-content {
    padding: 6px 14px 0;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.ht-cm .comment-edit-form {
    padding: 6px 14px 0;
}

.ht-cm-mention {
    padding: 0 3px;
    border-radius: 4px;
    background: #ebf9ff;
    font-weight: bold;
    color: #0080a8;
}

/* ─── Acciones ─── */
.ht-cm-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding: 5px 14px 6px;
}

.ht-cm-actions .like,
.ht-cm-actions .comment-reply-link,
.ht-cm-action,
.ht-cm-reaction,
.ht-cm-react-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    margin: 0;
    padding: 0 8px;
    float: none;
    border: 0;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 0 0 1px #c9d9e0;
    font: inherit;
    font-size: 0.75rem;
    font-weight: bold;
    color: #3d6f80;
    text-decoration: none;
    cursor: pointer;
}

.ht-cm-actions .like {
    color: #c0392b;
}

.ht-cm-actions .like:hover,
.ht-cm-actions .comment-reply-link:hover,
.ht-cm-action:hover,
.ht-cm-reaction:hover,
.ht-cm-react-btn:hover {
    background: #ebf9ff;
}

.ht-cm-actions .comment-edit-countdown {
    font-weight: normal;
}

.ht-cm-foot-time {
    display: none;
    margin-left: auto;
    font-size: 0.7rem;
    color: #5a6d75;
    white-space: nowrap;
}

.ht-cm-reactions {
    display: contents;
}

.ht-cm-reaction {
    font-size: 0.82rem;
}

.ht-cm-reaction b {
    font-size: 0.72rem;
}

.ht-cm-reaction.is-mine {
    background: #ebf9ff;
    box-shadow: 0 0 0 2px #0093c2;
}

.ht-cm-react {
    position: relative;
}

.ht-cm-react-btn .fa-plus {
    font-size: 0.55rem;
}

/* Como el selector de reacciones del chat (plugins/ht-chat/assets/chat.css). */
.ht-cm-react-picker {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 20;
    padding: 4px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
}

.ht-cm-react.is-open .ht-cm-react-picker {
    display: flex;
    gap: 2px;
}

.ht-cm-react-picker button {
    padding: 2px 4px;
    border: 0;
    border-radius: 50%;
    background: none;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.12s, background 0.12s;
}

.ht-cm-react-picker button:hover {
    background: #f3f4f6;
    transform: scale(1.35);
}

.ht-cm-react-picker img.emoji {
    width: 1.1em !important;
    height: 1.1em !important;
    margin: 0 !important;
}

/* El picker se sale de la tarjeta (que recorta sus esquinas). */
.ht-cm-card:has(.ht-cm-react.is-open) {
    overflow: visible;
}

/* ─── Agrupados: los seguidos de la misma persona son burbujas ─── */
.comment-list:not(.is-sorted) li.ht-cm.is-grouped {
    margin: 5px 0 5px 104px;
}

/* Mismo ancho que la zona de texto de la tarjeta de arriba: del final del
   avatar (104px) al principio de la estampilla (112px). */
.comment-list:not(.is-sorted) li.is-grouped > .ht-cm-card {
    display: block;
    margin-right: 112px;
    border-radius: 10px;
    background: #fff;
}

.comment-list:not(.is-sorted) li.is-grouped > .ht-cm-card > .ht-cm-avatar,
.comment-list:not(.is-sorted) li.is-grouped > .ht-cm-card > .ht-cm-stamp,
.comment-list:not(.is-sorted) li.is-grouped .ht-cm-head,
.comment-list:not(.is-sorted) li.is-grouped .ht-cm-reply-to {
    display: none;
}

.comment-list:not(.is-sorted) li.is-grouped .ht-cm-body {
    min-height: 0;
    border-left: 0;
    background: #fff;
}

.comment-list:not(.is-sorted) li.is-grouped .comment-content {
    padding: 6px 12px 0;
}

.comment-list:not(.is-sorted) li.is-grouped .ht-cm-actions {
    padding: 4px 12px 6px;
}

.comment-list:not(.is-sorted) li.is-grouped .ht-cm-foot-time {
    display: inline;
}

/* ─── Destacado y resaltado al saltar a un comentario ─── */
li.ht-cm.is-featured > .ht-cm-card {
    box-shadow: 0 0 0 2px #000, 0 0 12px 2px rgba(240, 180, 0, 0.7);
}

li.ht-cm.is-flash > .ht-cm-card {
    animation: ht-cm-flash 1.6s ease-out;
}

@keyframes ht-cm-flash {
    0%, 40% { box-shadow: 0 0 0 2px #000, 0 0 0 6px #0093c2; }
    100% { box-shadow: 0 0 0 2px #000; }
}

/* ─── "Ver más" y respuestas plegadas ─── */
.comment-list .children > li.is-reply-hidden {
    display: none;
}

.ht-cm-more {
    display: block;
    margin: 12px auto;
    padding: 8px 16px;
    font-size: 0.9rem;
}

.ht-cm-replies-more {
    margin: 6px 0;
    list-style: none;
}

.ht-cm-replies-more button {
    padding: 5px 12px;
    border: 0;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 0 0 1px #cfdde3;
    font: inherit;
    font-size: 0.8rem;
    font-weight: bold;
    color: #0080a8;
    cursor: pointer;
}

.ht-cm-replies-more button:hover {
    background: #ebf9ff;
}

/* ─── Sugerencias de @menciones ─── */
.ht-cm-mentions {
    display: none;
    position: absolute;
    z-index: 10000;
    padding: 4px;
    border: 2px solid #fff;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 0 2px #000, 0 4px 12px rgba(0, 0, 0, 0.25);
}

.ht-cm-mentions button {
    display: block;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    border-radius: 4px;
    background: none;
    font: inherit;
    font-size: 0.85rem;
    font-weight: bold;
    color: #004960;
    text-align: left;
    cursor: pointer;
}

.ht-cm-mentions button.active,
.ht-cm-mentions button:hover {
    background: #ebf9ff;
}

/* ─── Móvil: sin columna de estampilla (como antes) ─── */
@media (max-width: 780px) {
    .ht-cm-card {
        grid-template-columns: 102px minmax(0, 1fr);
    }

    .ht-cm-stamp {
        display: none;
    }

    .comment-list:not(.is-sorted) li.is-grouped > .ht-cm-card {
        margin-right: 0;
    }

    .ht-cm-toolbar {
        flex-wrap: wrap;
    }

    .ht-cm .ht-cm-head {
        flex-wrap: wrap;
    }
}

/* ─── Título del formulario al responder ───
   En vez de la franja naranja de sección, un panel claro con el nombre. */
#reply-title.is-replying {
    display: flex;
    border: 0;
    border-bottom: 2px solid #b7d6e1;
    border-radius: 8px;
    background: #eef7fb;
    box-shadow: 0 0 0 1px #c9dde5;
}

#reply-title.is-replying h4 {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    float: none;
    width: 100%;
    padding: 8px 12px;
    color: #004960;
    text-shadow: none;
}

.ht-cm-replying {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.ht-cm-replying > .fa-reply {
    color: #0093c2;
}

.ht-cm-replying-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 0 0 1px #c9dde5;
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: none;
}

.ht-cm-replying-name a {
    color: inherit;
}

#reply-title.is-replying small {
    margin-left: auto;
}

/* "Cancelar": una píldora discreta en vez del bloque rojo. */
.comment-list #reply-title #cancel-comment-reply-link,
#reply-title #cancel-comment-reply-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 3px 10px;
    border: 0;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 0 0 1px #e3c3c3;
    font-size: 0.78rem;
    font-weight: bold;
    letter-spacing: 0;
    color: #b00000;
    text-shadow: none;
    text-transform: none;
}

#reply-title #cancel-comment-reply-link:hover {
    background: #ffecec;
}

/* ─── Contador de caracteres ─── */
.ht-cm-counter {
    margin: 3px 2px 0 0;
    font-size: 0.72rem;
    color: #6b7b83;
    text-align: right;
}

.ht-cm-counter.is-near {
    font-weight: bold;
    color: #b06a00;
}

.ht-cm-counter.is-over {
    font-weight: bold;
    color: #b00000;
}