/* CLUBPRO BOOKMAKER FICHA - Ficha individual de casa de apuestas (INST11).
   Archivo independiente (no toca feed.css ni prediction-detail.css).
   Misma identidad que el área de contenido del dashboard: tarjetas
   blancas sobre #e5e7eb, borde #e2e8f0, acento índigo #6366f1.
   Restricción del sistema: border-radius máximo 8px (salvo avatares). */

.bkf {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.bkf-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.1rem 1.25rem;
    min-width: 0;
}

.bkf-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 0.85rem 0;
}
.bkf-section-title i { color: #6366f1; font-size: 0.9rem; }
.bkf-section-sub {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 500;
    margin-left: auto;
}

/* ---------- CABECERA ---------- */
.bkf-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    border-top: 3px solid #6366f1;
}
.bkf-hero-logo,
.bkf-hero-logo-fallback {
    flex: 0 0 auto;
    width: 176px;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    background: #0d131a;
    overflow: hidden;
}
.bkf-hero-logo {
    display: block;
    max-width: none;
    height: auto;
    object-fit: contain;
    object-position: center;
}
.bkf-hero-logo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e8edf2;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1px;
}
@supports not (aspect-ratio: 16 / 9) {
    .bkf-hero-logo, .bkf-hero-logo-fallback { height: 99px; }
}
.bkf-hero-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.bkf-hero-name {
    font-size: 1.45rem;
    font-weight: 800;
    color: #111827;
    margin: 0;
    line-height: 1.2;
    word-break: break-word;
}
.bkf-countries {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: #64748b;
}
.bkf-countries-label { font-weight: 600; margin-right: 0.15rem; }
.bkf-country {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0.1rem 0.5rem 0.1rem 0.3rem;
    color: #475569;
}
.bkf-country img { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; }

/* Indicadores: editorial y usuarios SEPARADOS y diferenciados */
.bkf-scores {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.bkf-score {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: 8px;
    padding: 0.45rem 0.75rem;
    min-width: 0;
}
.bkf-score-editorial { background: #eef2ff; border: 1px solid #c7d2fe; }
.bkf-score-users     { background: #fffbeb; border: 1px solid #fde68a; }
.bkf-score-value {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
}
.bkf-score-editorial .bkf-score-value { color: #4338ca; }
.bkf-score-users .bkf-score-value     { color: #b45309; }
.bkf-score-value small { font-size: 0.7rem; font-weight: 600; opacity: 0.75; }
.bkf-score-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.bkf-score-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
}
.bkf-score-detail { font-size: 0.72rem; color: #475569; }
.bkf-score-empty .bkf-score-value { font-size: 0.85rem; font-weight: 600; color: #94a3b8; }

/* ---------- ESTRELLAS (solo opiniones de usuarios) ---------- */
.bkf-stars { display: inline-flex; gap: 1px; color: #f59e0b; font-size: 0.8rem; }
.bkf-stars .is-empty { color: #e2e8f0; }

/* ---------- REJILLA DE SECCIONES ---------- */
.bkf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    align-items: start;
}

/* ---------- ANÁLISIS EDITORIAL ---------- */
.bkf-editorial-top {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.9rem;
}
.bkf-global {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 8px;
    background: linear-gradient(135deg, #6366f1, #a78bfa);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.bkf-global strong { font-size: 1.45rem; font-weight: 800; }
.bkf-global span { font-size: 0.6rem; opacity: 0.85; margin-top: 2px; }
.bkf-editorial-caption { font-size: 0.78rem; color: #64748b; }
.bkf-editorial-caption strong { display: block; color: #1a202c; font-size: 0.85rem; }

.bkf-bars { display: flex; flex-direction: column; gap: 0.5rem; }
.bkf-bar-row {
    display: grid;
    grid-template-columns: minmax(90px, 38%) 1fr 34px;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.78rem;
    color: #475569;
}
.bkf-bar-track {
    height: 6px;
    background: #eef2f7;
    border-radius: 3px;
    overflow: hidden;
}
.bkf-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #a78bfa);
    border-radius: 3px;
}
.bkf-bar-value { text-align: right; font-weight: 700; color: #1a202c; }

.bkf-verdict {
    margin: 1rem 0 0 0;
    padding: 0.75rem 0.9rem;
    background: #f8fafc;
    border-left: 3px solid #6366f1;
    border-radius: 0 6px 6px 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: #334155;
}
.bkf-verdict-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6366f1;
    margin-bottom: 0.3rem;
}

/* ---------- CARACTERÍSTICAS ---------- */
.bkf-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.bkf-feature {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
    color: #334155;
    font-weight: 500;
}
.bkf-feature i { color: #10b981; font-size: 0.8rem; }
.bkf-facts {
    margin: 0.9rem 0 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.bkf-fact {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.8rem;
}
.bkf-fact-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: #eef2ff;
    color: #6366f1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}
.bkf-fact-label { display: block; font-size: 0.66rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
.bkf-fact-value { color: #1a202c; font-weight: 600; }
.bkf-fact-value small { color: #64748b; font-weight: 500; }

/* ---------- BONO ---------- */
.bkf-bonus { border-left: 3px solid #10b981; }
.bkf-bonus-text { font-size: 0.95rem; font-weight: 700; color: #065f46; margin: 0 0 0.5rem 0; }
.bkf-bonus-terms { font-size: 0.75rem; color: #64748b; line-height: 1.5; margin: 0.6rem 0 0 0; }

/* ---------- OPINIONES DE USUARIOS ---------- */
.bkf-reviews-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.9rem;
}
.bkf-reviews-avg { font-size: 1.8rem; font-weight: 800; color: #b45309; line-height: 1; }
.bkf-reviews-summary .bkf-stars { font-size: 0.95rem; }
.bkf-reviews-count { font-size: 0.75rem; color: #92400e; margin-top: 0.2rem; }
.bkf-reviews-note { font-size: 0.7rem; color: #a16207; margin-left: auto; text-align: right; max-width: 240px; }

.bkf-review-list { display: flex; flex-direction: column; gap: 0.75rem; }
.bkf-review {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    background: #ffffff;
}
.bkf-review-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.bkf-review-avatar,
.bkf-review-avatar-fallback {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}
.bkf-review-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6366f1;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
}
.bkf-review-author { display: flex; flex-direction: column; min-width: 0; }
.bkf-review-name { font-size: 0.85rem; font-weight: 700; color: #1a202c; }
.bkf-review-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.62rem;
    font-weight: 600;
    color: #047857;
    width: fit-content;
}
.bkf-review-head .bkf-stars { margin-left: auto; }
.bkf-review-title { font-size: 0.9rem; font-weight: 700; color: #111827; margin: 0.6rem 0 0.3rem 0; }
.bkf-review-content { font-size: 0.84rem; line-height: 1.6; color: #334155; margin: 0; word-break: break-word; }
.bkf-review-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    margin-top: 0.6rem;
    font-size: 0.7rem;
    color: #94a3b8;
}
.bkf-review-meta i { margin-right: 0.25rem; }
.bkf-reviews-more { font-size: 0.75rem; color: #64748b; margin: 0.75rem 0 0 0; text-align: center; }

/* ---------- ESTADOS VACÍOS ---------- */
.bkf-empty {
    text-align: center;
    padding: 1.4rem 1rem;
    color: #94a3b8;
    font-size: 0.8rem;
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 8px;
}
.bkf-empty i { display: block; font-size: 1.5rem; color: #cbd5e1; margin-bottom: 0.5rem; }
.bkf-empty strong { display: block; color: #64748b; font-size: 0.85rem; margin-bottom: 0.2rem; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 767.98px) {
    .bkf-hero { flex-direction: column; align-items: stretch; gap: 0.9rem; }
    .bkf-hero-logo, .bkf-hero-logo-fallback { width: 100%; max-width: 240px; align-self: center; }
    .bkf-hero-name { text-align: center; }
    .bkf-countries, .bkf-scores { justify-content: center; }
    .bkf-reviews-note { display: none; }
}
@media (max-width: 575.98px) {
    .bkf-card { padding: 0.9rem 0.95rem; }
    .bkf-score { flex: 1 1 100%; }
    .bkf-bar-row { grid-template-columns: minmax(80px, 42%) 1fr 30px; }
}

/* ============================================================
   TU RESEÑA (INST16) - bloque de escritura / edición
   Prefijo .bkr-. Mismos tokens que la ficha (índigo #6366f1,
   ámbar #f59e0b para estrellas, radios <= 8px).
   ============================================================ */
.bkr-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bkr-status {
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
    margin-bottom: 0.85rem;
    border: 1px solid transparent;
}
.bkr-status[hidden] { display: none; }
.bkr-status.is-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.bkr-status.is-error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.bkr-status.is-info    { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }

.bkr-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.bkr-intro p { margin: 0; color: #475569; font-size: 0.88rem; }

.bkr-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 6px;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.2;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.bkr-btn:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.bkr-btn[disabled] { opacity: 0.65; cursor: not-allowed; }
.bkr-btn[hidden] { display: none; }
.bkr-btn-primary { background: #6366f1; color: #ffffff; }
.bkr-btn-primary:hover:not([disabled]) { background: #4f46e5; }
.bkr-btn-secondary { background: #ffffff; color: #4f46e5; border-color: #c7d2fe; }
.bkr-btn-secondary:hover { background: #eef2ff; }
.bkr-btn-link { background: transparent; color: #64748b; padding-left: 0.5rem; padding-right: 0.5rem; }
.bkr-btn-link:hover { color: #1a202c; }

/* Reseña propia */
.bkr-own { border-color: #c7d2fe; background: #fafaff; }
.bkr-own-note { margin: 0.35rem 0 0.25rem; font-size: 0.8rem; color: #64748b; }
.bkr-actions-top { margin-top: 0.75rem; }
.bkr-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 4px;
    padding: 0.12rem 0.45rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.bkr-badge.is-published { background: #ecfdf5; color: #047857; }
.bkr-badge.is-pending   { background: #fffbeb; color: #b45309; }
.bkr-badge.is-rejected  { background: #fef2f2; color: #b91c1c; }

/* Formulario */
.bkr-form {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.bkr-form[hidden] { display: none; }
.bkr-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.bkr-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.35rem;
    padding: 0;
}
.bkr-req { color: #dc2626; }
.bkr-optional { font-weight: 500; color: #94a3b8; }
.bkr-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.55rem 0.7rem;
    font-size: 0.9rem;
    color: #1a202c;
    background: #ffffff;
    font-family: inherit;
}
.bkr-input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); }
.bkr-input[aria-invalid="true"] { border-color: #dc2626; }
.bkr-textarea { resize: vertical; min-height: 8rem; line-height: 1.5; }
.bkr-field-date .bkr-input { max-width: 14rem; }
.bkr-help {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.74rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}
.bkr-count { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bkr-hint { font-size: 0.78rem; color: #b45309; margin: 0.35rem 0 0; }
.bkr-error { font-size: 0.78rem; color: #b91c1c; margin: 0.3rem 0 0; }
.bkr-error[hidden] { display: none; }

/* Selector de estrellas: 5 radios (2/4/6/8/10), pintados por JS (.is-on) */
.bkr-stars { display: flex; align-items: center; gap: 0.15rem; flex-wrap: wrap; }
.bkr-star-input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    pointer-events: none;
}
.bkr-star {
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: #cbd5e1;
    padding: 0.15rem;
    border-radius: 4px;
    transition: color .1s ease, transform .1s ease;
}
.bkr-star:hover { transform: scale(1.08); }
/* INST17: colores explícitos en la etiqueta y en el icono (gris neutro /
   dorado cálido). El JS aplica además los mismos colores en línea. */
.bkr-stars .bkr-star,
.bkr-stars .bkr-star i { color: #cbd5e1; }
.bkr-stars .bkr-star.is-on,
.bkr-stars .bkr-star.is-on i,
.bkr-stars .bkr-star-input:checked + .bkr-star,
.bkr-stars .bkr-star-input:checked + .bkr-star i { color: #f5b301; }
.bkr-star-input:focus-visible + .bkr-star { outline: 2px solid #6366f1; outline-offset: 1px; }
.bkr-stars-text { margin-left: 0.5rem; font-size: 0.82rem; color: #64748b; font-weight: 600; }

.bkr-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

@media (max-width: 575.98px) {
    .bkr-intro { flex-direction: column; align-items: stretch; }
    .bkr-intro .bkr-btn, .bkr-actions .bkr-btn-primary { justify-content: center; }
    .bkr-actions .bkr-btn-primary { flex: 1 1 100%; }
    .bkr-field-date .bkr-input { max-width: none; }
    .bkr-star { font-size: 1.7rem; }
}

/* ============================================================
   REACCIONES A OPINIONES (INST22) - Me gusta / No me gusta
   Prefijo .bkf-rx-. Mismos tokens que la ficha (índigo #6366f1,
   bordes #e2e8f0, radios <= 8px). Botones compactos con contador.
   ============================================================ */
.bkf-rx {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.65rem 0 0 0;
    padding-top: 0.6rem;
    border-top: 1px solid #f1f5f9;
}
.bkf-rx-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 32px;
    padding: 0.25rem 0.65rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.bkf-rx-btn i { font-size: 0.85rem; }
.bkf-rx-count { min-width: 1ch; font-variant-numeric: tabular-nums; }
.bkf-rx-btn:hover { background: #f8fafc; border-color: #cbd5e1; color: #334155; }
.bkf-rx-btn:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }

/* Seleccionado: color + fondo + borde (no depende solo del color: el
   estado también se expone con aria-pressed) */
.bkf-rx-btn.is-like.is-active    { background: #eef2ff; border-color: #a5b4fc; color: #4338ca; }
.bkf-rx-btn.is-dislike.is-active { background: #fff1f2; border-color: #fda4af; color: #be123c; }
.bkf-rx-btn.is-active i { transform: scale(1.08); }

/* Carga */
.bkf-rx.is-loading .bkf-rx-btn { opacity: 0.6; cursor: progress; }
.bkf-rx-btn:disabled { cursor: progress; }

/* Error */
.bkf-rx-status { font-size: 0.72rem; }
.bkf-rx-status.is-error { color: #b91c1c; font-weight: 600; }
.bkf-rx-status[hidden] { display: none; }
.bkf-rx.is-error .bkf-rx-btn { border-color: #fecaca; }

@media (max-width: 575.98px) {
    .bkf-rx-btn { min-height: 38px; padding: 0.3rem 0.8rem; font-size: 0.82rem; }
    .bkf-rx-status { flex: 1 1 100%; }
}

/* ============================================================
   COMENTARIOS EN OPINIONES (INST24)
   Prefijo .bkf-cm-. Debajo de las reacciones (.bkf-rx). Mismos tokens
   que la ficha (índigo #6366f1, bordes #e2e8f0, radios <= 8px).
   El despliegue usa <details>/<summary> (funciona sin JS).
   ============================================================ */
.bkf-cm { margin: 0.5rem 0 0 0; }
.bkf-cm-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 32px;
    padding: 0.25rem 0.65rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.bkf-cm-toggle::-webkit-details-marker { display: none; }
.bkf-cm-toggle::marker { content: ''; }
.bkf-cm-toggle:hover { background: #f8fafc; border-color: #cbd5e1; color: #334155; }
.bkf-cm-toggle:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.bkf-cm[open] > .bkf-cm-toggle { background: #eef2ff; border-color: #a5b4fc; color: #4338ca; }
.bkf-cm-total {
    min-width: 1ch;
    font-variant-numeric: tabular-nums;
}

.bkf-cm-panel {
    margin-top: 0.55rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    background: #f8fafc;
}
.bkf-cm-empty { margin: 0 0 0.5rem 0; font-size: 0.78rem; color: #64748b; }
.bkf-cm-empty[hidden] { display: none; }

/* Lista */
.bkf-cm-list { list-style: none; margin: 0; padding: 0; }
.bkf-cm-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid #e2e8f0;
}
.bkf-cm-item:first-child { padding-top: 0; }
.bkf-cm-item:last-child { border-bottom: 0; }
.bkf-cm-item.is-new { animation: bkf-cm-flash 1.6s ease-out; }
@keyframes bkf-cm-flash { from { background: #eef2ff; } to { background: transparent; } }

.bkf-cm-avatar,
.bkf-cm-avatar-fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}
.bkf-cm-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6366f1;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
}
.bkf-cm-body { flex: 1 1 auto; min-width: 0; }
.bkf-cm-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.15rem 0.5rem;
}
.bkf-cm-author { font-size: 0.8rem; font-weight: 700; color: #1a202c; text-decoration: none; }
a.bkf-cm-author:hover { color: #4338ca; text-decoration: underline; }
a.bkf-cm-author:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; border-radius: 2px; }
.bkf-cm-date { font-size: 0.7rem; color: #94a3b8; }
.bkf-cm-text {
    margin: 0.2rem 0 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #334155;
    white-space: pre-wrap;          /* conserva saltos de línea sin nl2br */
    overflow-wrap: anywhere;        /* URLs o palabras largas no desbordan */
}

/* Ver más */
.bkf-cm-more {
    display: block;
    margin: 0.5rem 0 0 0;
    padding: 0.2rem 0;
    border: 0;
    background: none;
    color: #4f46e5;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
.bkf-cm-more:hover { text-decoration: underline; }
.bkf-cm-more:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; border-radius: 2px; }
.bkf-cm-more[hidden] { display: none; }
.bkf-cm-more:disabled { opacity: 0.6; cursor: progress; }

/* Formulario */
.bkf-cm-form { margin-top: 0.7rem; }
.bkf-cm-input {
    display: block;
    width: 100%;
    min-height: 68px;
    padding: 0.5rem 0.6rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
    color: #1a202c;
    font: inherit;
    font-size: 0.82rem;
    line-height: 1.45;
    resize: vertical;
    box-sizing: border-box;
}
.bkf-cm-input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }
.bkf-cm-input.is-invalid { border-color: #fca5a5; }
.bkf-cm-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }
.bkf-cm-form-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.4rem;
}
.bkf-cm-count { font-size: 0.72rem; color: #94a3b8; font-variant-numeric: tabular-nums; }
.bkf-cm-count.is-over { color: #b91c1c; font-weight: 700; }
.bkf-cm-submit,
.bkf-cm-login {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 32px;
    padding: 0.3rem 0.9rem;
    border: 1px solid #6366f1;
    border-radius: 6px;
    background: #6366f1;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.bkf-cm-submit:hover,
.bkf-cm-login:hover { background: #4f46e5; border-color: #4f46e5; }
.bkf-cm-submit:focus-visible,
.bkf-cm-login:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.bkf-cm-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.bkf-cm-form.is-loading .bkf-cm-submit { cursor: progress; }
.bkf-cm-form.is-loading .bkf-cm-input { opacity: 0.75; }

/* Estados y mensajes */
.bkf-cm-status,
.bkf-cm-list-status { margin: 0.4rem 0 0 0; font-size: 0.74rem; color: #047857; }
.bkf-cm-status.is-error,
.bkf-cm-list-status.is-error { color: #b91c1c; font-weight: 600; }
.bkf-cm-status[hidden],
.bkf-cm-list-status[hidden] { display: none; }
.bkf-cm-guest { margin-top: 0.7rem; }
.bkf-cm-note {
    margin: 0.7rem 0 0 0;
    font-size: 0.76rem;
    color: #64748b;
}
.bkf-cm-note i { color: #94a3b8; margin-right: 0.2rem; }

/* INST27: Editar / Ocultar comentario propio (mismo lenguaje visual que "Ver más") */
.bkf-cm-own { display: flex; gap: 0.75rem; margin-top: 0.2rem; }
.bkf-cm-own[hidden],
.bkf-cm-text[hidden] { display: none; }
.bkf-cm-own-btn {
    padding: 0.1rem 0;
    border: 0;
    background: none;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}
.bkf-cm-own-btn:hover { color: #4f46e5; text-decoration: underline; }
.bkf-cm-own-btn:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; border-radius: 2px; }
.bkf-cm-own-btn:disabled { opacity: 0.6; cursor: progress; text-decoration: none; }
.bkf-cm-edit { margin-top: 0.3rem; }
.bkf-cm-edit-actions { display: inline-flex; align-items: center; gap: 0.75rem; }
.bkf-cm-item[aria-busy="true"] .bkf-cm-input { opacity: 0.75; }

@media (max-width: 575.98px) {
    .bkf-cm-toggle { min-height: 38px; padding: 0.3rem 0.8rem; font-size: 0.82rem; }
    .bkf-cm-panel { padding: 0.6rem; }
    .bkf-cm-input { font-size: 16px; }   /* evita el zoom automático de iOS */
    .bkf-cm-submit,
    .bkf-cm-login { min-height: 40px; }
    .bkf-cm-login { width: 100%; justify-content: center; }
    .bkf-cm-more { min-height: 38px; }
    .bkf-cm-own-btn { min-height: 36px; }
}