/* ==========================================================================
   Lector: indice de capitulos y cajon de comentarios
   --------------------------------------------------------------------------
   Las dos piezas que el bundle del sitio original traia y la captura no. El
   lenguaje sale del propio objeto que se esta leyendo: el indice de un tomo
   (numeracion tabular a la izquierda, titulo, fecha al margen) y la solapa que
   se desliza por el canto derecho. El unico derroche es el marcador: la barra
   de acento y el numero en oro sobre el capitulo en el que estas, al que el
   panel se desplaza solo al abrirse.

   Tokens: los de mb-suggest.css.
   ========================================================================== */

/* ---- indice de capitulos ------------------------------------------------ */
#chapter-list { position: relative; }

.mbc-panel {
    position: absolute;
    z-index: 60;
    top: calc(100% + 8px);
    left: 0;
    width: min(380px, calc(100vw - 24px));
    padding: 8px;
    border: 1px solid var(--mbs-line);
    border-radius: var(--mbs-radius);
    background: var(--mbs-surface);
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .9), 0 2px 10px rgba(0, 0, 0, .6);
    /* solo opacidad y transform: abrir no reordena nada */
    animation: mbc-in var(--mbs-fast) var(--mbs-ease) both;
}
.mbc-panel[hidden] { display: none; }

@keyframes mbc-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.mbc-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px 10px;
}
.mbc-panel__title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mbs-text-3);
}
.mbc-panel__count {
    font-size: 11px;
    font-weight: 800;
    color: var(--mbs-text-2);
    background: var(--mbs-surface-2);
    border-radius: 99px;
    padding: 2px 8px;
    font-variant-numeric: tabular-nums;
}

.mbc-find {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 0 10px;
    border: 1px solid var(--mbs-line);
    border-radius: var(--mbs-radius-row);
    background: var(--mbs-surface-2);
}
.mbc-find i { color: var(--mbs-text-3); font-size: 12px; }
.mbc-find input {
    flex: 1;
    min-width: 0;
    height: 36px;
    border: 0;
    background: none;
    color: var(--mbs-text);
    font-size: 13px;
    outline: none;
}
.mbc-find input::placeholder { color: var(--mbs-text-3); }
.mbc-find:focus-within { border-color: var(--mbs-accent-soft); }

.mbc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: min(58vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* miles de filas: el navegador solo maqueta las visibles */
    content-visibility: auto;
    contain-intrinsic-size: auto 44px;
}
.mbc-list::-webkit-scrollbar { width: 8px; }
.mbc-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 99px; }

.mbc-row { margin: 0; }
.mbc-row + .mbc-row { box-shadow: inset 0 1px 0 var(--mbs-line); }

.mbc-row > a {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--mbs-radius-row);
    color: var(--mbs-text-2);
    text-decoration: none !important;
    transition: background-color var(--mbs-fast) var(--mbs-ease),
                color var(--mbs-fast) var(--mbs-ease);
}
.mbc-row > a:hover,
.mbc-row > a:focus-visible {
    background: var(--mbs-surface-3);
    color: var(--mbs-text);
    outline: none;
}
.mbc-row > a:focus-visible { box-shadow: inset 0 0 0 2px var(--mbs-accent-soft); }

.mbc-num {
    font-size: 13px;
    font-weight: 800;
    text-align: right;
    color: var(--mbs-text-3);
    font-variant-numeric: tabular-nums;
}
.mbc-name {
    font-size: 13px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mbc-when {
    font-size: 11px;
    color: var(--mbs-text-3);
    white-space: nowrap;
}

/* el marcador: donde te quedaste */
.mbc-row.is-current > a {
    position: relative;
    background: var(--mbs-surface-2);
    color: #fff;
}
.mbc-row.is-current > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 99px;
    background: var(--mbs-star);
}
.mbc-row.is-current .mbc-num { color: var(--mbs-star); }

.mbc-empty {
    margin: 0;
    padding: 18px 12px;
    text-align: center;
    color: var(--mbs-text-3);
    font-size: 12.5px;
}
.mbc-empty[hidden] { display: none; }

#load-chapters.is-open {
    background: var(--mbs-accent) !important;
    color: #fff !important;
}

/* ---- cajon de comentarios ---------------------------------------------- */
#mbc-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(0, 4, 10, .6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms var(--mbs-ease);
}
#mbc-backdrop.is-on { opacity: 1; pointer-events: auto; }

/* cerrado: el cajon vive en el flujo, invisible y sin ocupar */
body:not(.show-comment) #comment-list-holder { display: none; }
body:not(.show-comment) #mbc-backdrop { display: none; }

body.show-comment #comment-list-holder {
    position: fixed !important;
    z-index: 1000;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto !important;
    width: min(460px, 100vw);
    display: flex !important;
    flex-direction: column;
    margin: 0;
    border-left: 1px solid var(--mbs-line);
    border-radius: 0;
    background: var(--mbs-surface) !important;
    box-shadow: -30px 0 60px -20px rgba(0, 0, 0, .9);
    animation: mbc-slide 220ms var(--mbs-ease) both;
}

@keyframes mbc-slide {
    from { transform: translateX(24px); opacity: .6; }
    to   { transform: none; opacity: 1; }
}

body.show-comment #comment-list-holder .cml-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    height: 52px;
    padding: 0 8px 0 16px;
    border-bottom: 1px solid var(--mbs-line);
    background: var(--mbs-surface-2);
}
body.show-comment #comment-list-holder .cml-header .total-comments span {
    color: var(--mbs-text) !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
body.show-comment #comment-list-holder .cml-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--mbs-text-2);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--mbs-fast) var(--mbs-ease);
}
body.show-comment #comment-list-holder .cml-close:hover {
    background: var(--mbs-surface-3);
    color: #fff;
}

/* el cuerpo scrollea; la cabecera no */
body.show-comment #comment-list-holder #comment-section {
    position: static !important;
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px !important;
    overflow-y: auto;
    overscroll-behavior: contain;
}
body.show-comment #comment-list-holder #comment-section::-webkit-scrollbar { width: 8px; }
body.show-comment #comment-list-holder #comment-section::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .12);
    border-radius: 99px;
}

/* dentro del cajon todo va a una columna: el ancho es la mitad que en la ficha */
body.show-comment #comment-list-holder .comment-box { padding: 0 0 12px !important; }
body.show-comment #comment-list-holder .comment-box .user-info { flex-direction: column; align-items: stretch; }
body.show-comment #comment-list-holder .comment-box .submit-btn { width: 100%; }
body.show-comment #comment-list-holder .notice-box {
    margin: 0 0 12px;
    width: 100%;
    padding: 8px 10px;
    border: 1px dashed var(--mbs-line);
    border-radius: 8px;
    background: none;
    color: var(--mbs-text-3);
    font-size: 11.5px;
}
body.show-comment #comment-list-holder .sort-view {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 0;
}
body.show-comment #comment-list-holder .sort-view i {
    color: var(--mbs-text-3);
    font-size: 11px;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .08em;
}
body.show-comment #comment-list-holder .sort-options a {
    padding: 5px 10px;
    border: 1px solid var(--mbs-line);
    border-radius: 99px;
    color: var(--mbs-text-2) !important;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none !important;
}
body.show-comment #comment-list-holder .sort-options a.active {
    background: var(--mbs-accent);
    border-color: var(--mbs-accent-soft);
    color: #fff !important;
}
body.show-comment #comment-list-holder .section.box { background: none !important; padding: 0 !important; }
body.show-comment #comment-list-holder .comment-list { padding: 0 !important; }

/* el bloque "COMMENTS" suelto de la pagina, que en el lector solo era un titulo */
.viewer .total-comments > .section-header { padding: 10px 14px; }

/* ---- movil -------------------------------------------------------------- */
@media (max-width: 767px) {
    .mbc-panel { width: min(340px, calc(100vw - 20px)); }
    .mbc-row > a { grid-template-columns: 36px minmax(0, 1fr); padding: 10px 8px; }
    .mbc-when { display: none; }            /* se cae lo prescindible */
    body.show-comment #comment-list-holder { width: 100vw; border-left: 0; }
}

/* ---- movimiento reducido ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .mbc-panel,
    body.show-comment #comment-list-holder { animation: none; }
    .mbc-row > a,
    #mbc-backdrop { transition: none; }
}