/**
 * Comentarios B10 — estilo de la paginación numerada y el contador del título.
 *
 * La numeración la genera paginate_comments_links() del core:
 *   <a class="prev page-numbers">, <a class="page-numbers">,
 *   <span class="page-numbers current">, <span class="page-numbers dots">
 *
 * Especificidad deliberadamente alta (.cmb10-comments-area .cmb10-paginacion)
 * para ganar a los estilos de enlaces del tema BuddyBoss en cualquier contexto
 * (lección aprendida en tableros-b10). Colores sobre --bb-primary-color con
 * fallback para integrarse con la paleta configurada del sitio.
 */

.cmb10-comments-area .cmb10-paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 20px 0;
}

.cmb10-comments-area .cmb10-paginacion--arriba {
    margin-top: 10px;
}

.cmb10-comments-area .cmb10-paginacion .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 19px;
    border: 1px solid #dfe4ea;
    background: #fff;
    color: #4d5c6d;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, outline-color .15s ease;
}

.cmb10-comments-area .cmb10-paginacion a.page-numbers:hover,
.cmb10-comments-area .cmb10-paginacion a.page-numbers:focus {
    border-color: var(--bb-primary-color, #1e7be5);
    color: var(--bb-primary-color, #1e7be5);
    background: #f4f8fe;
    text-decoration: none;
}

/* Página actual: pastilla sólida con el color primario del tema. */
.cmb10-comments-area .cmb10-paginacion .page-numbers.current {
    background: var(--bb-primary-color, #1e7be5);
    border-color: var(--bb-primary-color, #1e7be5);
    color: #fff;
    cursor: default;
}

/*
 * Dentro de lecciones/tópicos, learndash.min.css (plugin LearnDash) aplica
 * ".learndash-wrapper:not(...):not(...) a:not(.button):not(...) {
 * border-bottom: none !important }" — especificidad (0,5,1) con !important, que
 * ganaba a nuestras reglas de 3 clases y dejaba las pastillas sin borde
 * inferior (verificado por estilos computados y bisección de hojas). Anclar al
 * ID #comments (1,x,x) vence a cualquier pila de clases del tema o de
 * LearnDash sin carrera de especificidad (variante de la lección aprendida en
 * tableros-b10); la elipsis recupera su excepción al final.
 */
#comments.cmb10-comments-area .cmb10-paginacion .page-numbers,
#comments.cmb10-comments-area .cmb10-orden .cmb10-orden-opcion {
    border: 1px solid #dfe4ea !important;
    /*
     * Cinturón y tirantes: el aro se dibuja TAMBIÉN con outline, que ninguna
     * regla del tema ni de LearnDash toca. Con offset -1px cae exactamente
     * sobre el borde: si el border sobrevive se superponen (un solo aro
     * visible) y si alguna regla lo mata, el outline lo cubre igual.
     */
    outline: 1px solid #dfe4ea;
    outline-offset: -1px;
}

#comments.cmb10-comments-area .cmb10-paginacion a.page-numbers:hover,
#comments.cmb10-comments-area .cmb10-paginacion a.page-numbers:focus,
#comments.cmb10-comments-area .cmb10-orden a.cmb10-orden-opcion:hover,
#comments.cmb10-comments-area .cmb10-orden a.cmb10-orden-opcion:focus {
    border-color: var(--bb-primary-color, #1e7be5) !important;
    outline-color: var(--bb-primary-color, #1e7be5);
}

#comments.cmb10-comments-area .cmb10-paginacion .page-numbers.current,
#comments.cmb10-comments-area .cmb10-orden .cmb10-orden-opcion.is-actual {
    border-color: var(--bb-primary-color, #1e7be5) !important;
    outline-color: var(--bb-primary-color, #1e7be5);
}

#comments.cmb10-comments-area .cmb10-paginacion .page-numbers.dots {
    border: none !important;
    outline: none;
}

/* Elipsis: sin caja, solo el texto. */
.cmb10-comments-area .cmb10-paginacion .page-numbers.dots {
    border: none;
    background: transparent;
    min-width: auto;
    padding: 0 4px;
    color: #8a94a6;
}

.cmb10-comments-area .cmb10-paginacion .page-numbers.prev,
.cmb10-comments-area .cmb10-paginacion .page-numbers.next {
    padding: 0 16px;
}

/* Contador de respuestas junto al título "Responses". */
.cmb10-comments-area .comments-title .cmb10-total {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 12px;
    background: var(--bb-primary-color, #1e7be5);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

/* ------------------------------------------------------------------ *
 * Fase 2 — selector de orden y estado de carga AJAX.
 * ------------------------------------------------------------------ */

/* Selector "Más antiguos / Más recientes primero": control segmentado. */
.cmb10-comments-area .cmb10-orden {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 14px 0 4px;
}

.cmb10-comments-area .cmb10-orden .cmb10-orden-opcion {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border: 1px solid #dfe4ea;
    background: #fff;
    color: #4d5c6d;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, outline-color .15s ease;
}

.cmb10-comments-area .cmb10-orden .cmb10-orden-opcion:first-child {
    border-radius: 16px 0 0 16px;
}

.cmb10-comments-area .cmb10-orden .cmb10-orden-opcion:last-child {
    border-radius: 0 16px 16px 0;
    margin-left: -1px;
}

.cmb10-comments-area .cmb10-orden a.cmb10-orden-opcion:hover,
.cmb10-comments-area .cmb10-orden a.cmb10-orden-opcion:focus {
    border-color: var(--bb-primary-color, #1e7be5);
    color: var(--bb-primary-color, #1e7be5);
    background: #f4f8fe;
    text-decoration: none;
    position: relative; /* que el borde coloreado gane al solapado del vecino */
    z-index: 1;
}

.cmb10-comments-area .cmb10-orden .cmb10-orden-opcion.is-actual {
    background: var(--bb-primary-color, #1e7be5);
    border-color: var(--bb-primary-color, #1e7be5);
    color: #fff;
    cursor: default;
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------------ *
 * Fase 3 — resaltado de los comentarios del autor de la entrada/lección.
 *
 * Costo cero: la clase bypostauthor la pone el core de WP en comment_class()
 * (comparación en memoria comentario.user_id vs post_author, sin SQL) y las
 * tarjetas del tema ya la incluyen — esto es solo presentación.
 * ------------------------------------------------------------------ */

/* Autor (bypostauthor, clase del core) y co-autores (cmb10-coautor, clase
   añadida por el módulo cuando coautores está activo) comparten el acento. */
.cmb10-comments-area .comment-list li.bypostauthor > .comment-body,
.cmb10-comments-area .comment-list li.cmb10-coautor > .comment-body {
    border-left: 3px solid var(--bb-primary-color, #1e7be5);
    border-radius: 4px;
    /* tinte sutil del primario; fallback plano para navegadores sin color-mix */
    background: #f4f8fe;
    background: color-mix(in srgb, var(--bb-primary-color, #1e7be5) 5%, #fff);
}

/* Distintivo junto al nombre (solo dentro de la meta, no en el avatar). */
.cmb10-comments-area li.bypostauthor > .comment-body .comment-meta cite.comment-author::after,
.cmb10-comments-area li.cmb10-coautor > .comment-body .comment-meta cite.comment-author::after {
    content: "Autor";
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 1px 9px;
    border-radius: 10px;
    background: var(--bb-primary-color, #1e7be5);
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.6;
}

.cmb10-comments-area li.cmb10-coautor > .comment-body .comment-meta cite.comment-author::after {
    content: "Co-autor";
}

/* Estado de carga durante el fetch: atenuar y bloquear la sección. */
.cmb10-comments-area.cmb10-cargando {
    opacity: .55;
    pointer-events: none;
    transition: opacity .15s ease;
}

@media (max-width: 480px) {
    .cmb10-comments-area .cmb10-paginacion .page-numbers {
        min-width: 34px;
        height: 34px;
        padding: 0 9px;
        font-size: 13px;
    }
}