/* ==========================================================================
   Panel de cuenta (/users/*)
   --------------------------------------------------------------------------
   La captura solo traia el cascaron: menu lateral y un panel vacio. Sus reglas
   de rejilla (.book-item { width: 33.333% }) estan pensadas para el ancho
   completo, asi que dentro del panel salian descuadradas. Esto ordena el panel
   y lo hace responsive, con los mismos tokens que el resto (mb-suggest.css).
   ========================================================================== */

/* ---- estructura: menu + contenido ------------------------------------- */
#profile-page .profile {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

#profile-page .profile-menu,
#profile-page .profile-content {
    background: var(--mbs-surface-2);
    border: 1px solid var(--mbs-line);
    border-radius: var(--mbs-radius);
    padding: 12px;
    margin: 0;
}

#profile-page .profile-menu .cover { display: none; }   /* portada vacia: fuera */

#profile-page .nav-pills { gap: 2px; }

#profile-page .nav-link {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--mbs-text-2);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color var(--mbs-fast) var(--mbs-ease),
                color var(--mbs-fast) var(--mbs-ease);
}
#profile-page .nav-link:hover { background: var(--mbs-surface-3); color: var(--mbs-text); }
#profile-page .nav-link.active {
    background: var(--mbs-accent);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--mbs-star);   /* la marca de pagina activa */
}
#profile-page .nav-link:focus-visible { outline: 2px solid var(--mbs-accent-soft); outline-offset: 2px; }

#profile-page .profile-content { padding: 16px 18px 22px; min-height: 320px; }

/* ---- cabecera de la pestana ------------------------------------------- */
.mb-pane-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mbs-line);
}
.mb-pane-head h1,
.mb-pane-head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--mbs-text);
}
.mb-pane-head .count { font-size: 12px; color: var(--mbs-text-3); }

/* ---- rejilla de portadas dentro del panel ----------------------------- */
#profile-page .list.manga-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 16px 14px;
    margin: 0;
}
#profile-page .list.manga-list .book-item {
    width: 100% !important;        /* la regla del theme es de otro contexto */
    padding: 0;
    margin: 0;
}
#profile-page .list.manga-list .book-item .thumb { width: 100%; }
#profile-page .list.manga-list .book-item img {
    width: 100%;
    aspect-ratio: 2 / 3;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}
#profile-page .list.manga-list .book-item .title h3 {
    font-size: 12.5px;
    line-height: 1.3;
    margin: 7px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#profile-page .list.manga-list .book-item .chapters { margin-top: 3px; }
#profile-page .list.manga-list .book-item .chap-item h4 { font-size: 11.5px; margin: 0; }
#profile-page .list.manga-list .book-item .updated-date span { font-size: 10.5px; color: var(--mbs-text-3); }

/* ---- comentarios y reseñas -------------------------------------------- */
#profile-page .comment-item {
    display: block;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--mbs-line);
    border-left: 3px solid var(--mbs-accent);
    border-radius: 10px;
    background: var(--mbs-surface);
}
#profile-page .comment-item .comment-summary > a {
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    color: var(--mbs-accent-soft) !important;
    text-decoration: none !important;
    margin-bottom: 2px;
}
#profile-page .comment-item .comment-date {
    display: block;
    font-size: 11px;
    color: var(--mbs-text-3);
    text-decoration: none;
    border: 0;
    margin-bottom: 6px;
}
#profile-page .comment-item .summary {
    font-size: 13px;
    line-height: 1.55;
    color: var(--mbs-text-2);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- listas del usuario ------------------------------------------------ */
.mb-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--mbs-line);
    border-radius: 10px;
    background: var(--mbs-surface);
    transition: border-color var(--mbs-fast) var(--mbs-ease);
}
.mb-list-row:hover { border-color: var(--mbs-accent-soft); }
.mb-list-row .name {
    font-size: 14px;
    font-weight: 700;
    color: var(--mbs-text);
    text-decoration: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mb-list-row .stats { font-size: 11.5px; color: var(--mbs-text-3); white-space: nowrap; }
.mb-list-row .danger {
    border: 0;
    background: none;
    color: #e05563;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
}
.mb-list-row .danger:hover { background: rgba(224, 85, 99, .12); }

/* ---- formularios del panel -------------------------------------------- */
#profile-page .form-group { margin-bottom: 12px; }
#profile-page .form-control,
#profile-page textarea.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--mbs-line);
    border-radius: 8px;
    background: var(--mbs-surface);
    color: var(--mbs-text);
    font-size: 13px;
}
#profile-page .form-control:focus {
    outline: none;
    border-color: var(--mbs-accent-soft);
    box-shadow: 0 0 0 3px rgba(77, 127, 153, .2);
}
#profile-page .main__button {
    min-height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 8px;
    background: var(--mbs-accent);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .03em;
    cursor: pointer;
    transition: background-color var(--mbs-fast) var(--mbs-ease);
}
#profile-page .main__button:hover { background: var(--mbs-accent-soft); }
#profile-page .alert {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 14px;
}
#profile-page .alert-success { background: rgba(46, 204, 113, .12); color: #7fe0a6; }
#profile-page .alert-error { background: rgba(224, 85, 99, .12); color: #ff9aa4; }

/* ---- buscador para añadir obras a una lista ---------------------------- */
.mb-adder { position: relative; margin-bottom: 14px; }
.mb-adder .results {
    position: absolute;
    z-index: 20;
    left: 0; right: 0;
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--mbs-line);
    border-radius: var(--mbs-radius);
    background: var(--mbs-surface);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .85);
    max-height: 320px;
    overflow-y: auto;
}
.mb-adder .results:empty { display: none; }
.mb-adder .row-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--mbs-text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.mb-adder .row-item:hover { background: var(--mbs-surface-3); }
.mb-adder .row-item img { width: 34px; height: 49px; object-fit: cover; border-radius: 4px; }
.mb-adder .row-item .add { font-size: 11px; font-weight: 800; color: var(--mbs-accent-soft); }

/* ---- vacio ------------------------------------------------------------- */
.mb-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--mbs-text-2);
    border: 1px dashed var(--mbs-line);
    border-radius: var(--mbs-radius);
}
.mb-empty b { display: block; color: var(--mbs-text); margin-bottom: 4px; font-size: 14px; }
.mb-empty a { color: var(--mbs-accent-soft); }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 991px) {
    #profile-page .profile { grid-template-columns: 1fr; }
    #profile-page .profile-menu { padding: 8px; }
    #profile-page .nav-pills {
        flex-direction: row !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
    #profile-page .nav-item { flex: 0 0 auto; }
    #profile-page .nav-link { white-space: nowrap; }
    #profile-page .nav-link.active { box-shadow: inset 0 -3px 0 var(--mbs-star); }
}

@media (max-width: 575px) {
    #profile-page .list.manga-list { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px 10px; }
    #profile-page .profile-content { padding: 12px; }
    .mb-list-row { grid-template-columns: minmax(0, 1fr) auto; }
    .mb-list-row .stats { grid-column: 1 / -1; }
}

/* ==========================================================================
   Avisos (toast)
   --------------------------------------------------------------------------
   El theme deja el contenedor #msgbox-area vacio y su bundle le daba forma;
   sin el, el mensaje salia como texto suelto en la esquina. Esto le pone la
   forma que le falta.
   ========================================================================== */
#msgbox-area {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

#msgbox-area .msgbox {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(92vw, 380px);
    padding: 12px 16px;
    border: 1px solid var(--mbs-line);
    border-left: 3px solid var(--mbs-completed);
    border-radius: 10px;
    background: var(--mbs-surface-2);
    color: var(--mbs-text);
    font-size: 13px;
    line-height: 1.45;
    box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .8);
    pointer-events: auto;
    animation: mb-toast-in 180ms var(--mbs-ease) both;
}

@keyframes mb-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    #msgbox-area .msgbox { animation: none; }
}

@media (max-width: 575px) {
    #msgbox-area { right: 10px; left: 10px; bottom: 10px; }
    #msgbox-area .msgbox { max-width: none; }
}

/* ==========================================================================
   Correcciones sobre el layout del theme
   --------------------------------------------------------------------------
   `.profile` es flex con hijos al 20%/80%. Al pasarlo a rejilla esos anchos
   seguian aplicandose dentro de cada columna y descuadraban todo.
   ========================================================================== */
#profile-page .profile.mt-1 { display: grid; }
#profile-page .profile > .profile-menu,
#profile-page .profile > .profile-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px;
    float: none;
}
#profile-page .profile > .profile-content { padding: 16px 18px 22px; }
#profile-page .profile .tab-content { padding: 0 !important; }
#profile-page .profile .nav-link { margin: 0 !important; border: 0 !important; }

/* ==========================================================================
   Comentarios de la ficha
   --------------------------------------------------------------------------
   La captura trae el panel con display:none porque el sitio original lo abria
   como cajon lateral (body.show-comment). Aqui vive dentro de la ficha, asi
   que se anulan las reglas del cajon y se le da el color del theme: el bundle
   lo pinta con fondo blanco (#fff !important) sobre el fondo oscuro.
   ========================================================================== */
#comment-section { position: static !important; padding: 0 !important; }
body:not(.show-comment) #comment-list-holder { position: relative !important; width: auto !important; background: none !important; }
body:not(.show-comment) #comment-list-holder .cml-header { display: none; }

.total-comments .comment-box { padding: 12px !important; }
.comment-box textarea.comment-content {
    width: 100%;
    min-height: 92px;
    padding: 10px 12px;
    border: 1px solid var(--mbs-line) !important;
    border-radius: 8px;
    background: var(--mbs-surface) !important;
    color: var(--mbs-text) !important;
    font-size: 13px;
    resize: vertical;
}
.comment-box textarea.comment-content:focus {
    outline: none;
    border-color: var(--mbs-accent-soft) !important;
    box-shadow: 0 0 0 3px rgba(77, 127, 153, .2);
}
.comment-box .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.comment-box #anonymous-form { display: flex; gap: 8px; flex: 1; min-width: 220px; }
.comment-box #anonymous-form input {
    flex: 1;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--mbs-line);
    border-radius: 8px;
    background: var(--mbs-surface);
    color: var(--mbs-text);
    font-size: 13px;
}
.comment-box .submit-btn {
    min-height: 38px;
    border: 0;
    border-radius: 8px;
    background: var(--mbs-accent) !important;
    color: #fff !important;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
}
.comment-box .submit-btn:hover { background: var(--mbs-accent-soft) !important; }
.comment-box #user-name { color: var(--mbs-text-3); font-size: 12px; }
.comment-box .comment-error { color: #ff9aa4; font-size: 12.5px; }

/* ---- la lista -----------------------------------------------------------
   El bundle del theme monta cada comentario con el avatar en position:absolute
   y la ficha con padding-left:45px, mas un recuadro gris (#d8d8d8) sobre fondo
   blanco (.comment-list{background:#fff !important}). En movil el bundle pone
   comment-info{margin-left:0} y ese recuadro se subia ENCIMA del avatar: eso
   es el borde blanco descuadrado. Aqui la fila pasa a ser una rejilla de dos
   columnas (avatar | contenido), que no se pisa a ningun ancho.
   ---------------------------------------------------------------------- */
.comment-list {
    background: none !important;
    margin: 0 !important;
    padding: 12px 0;
    display: grid;
    gap: 10px;
}

.comment-list .comment-item {
    padding: 0 !important;
    position: relative;
}
.comment-list .comment-item .comment-content-wrapper {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

/* el avatar sale del position:absolute y ocupa su propia columna */
.comment-list .comment-item div.author {
    position: static !important;
    min-width: 0 !important;
    padding: 0 !important;
    top: auto !important;
    left: auto !important;
}
.comment-list .comment-item div.author img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    object-fit: cover;
    background: var(--mbs-surface-2);
}
.comment-list .comment-item div.comment-info {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
}

/* el globo: fuera el recuadro gris del theme */
.comment-list .comment-item .comment-summary {
    padding: 10px 12px !important;
    border: 1px solid var(--mbs-line) !important;
    border-left: 3px solid var(--mbs-accent) !important;
    border-radius: 10px;
    background: var(--mbs-surface);
    color: var(--mbs-text-2) !important;
}
.comment-list .comment-item.my-comment .comment-summary { background: var(--mbs-surface-3) !important; }

.comment-list .comment-item .author-name { font-weight: 800; font-size: 13px; color: var(--mbs-text) !important; }
.comment-list .comment-item .comment-date,
.comment-list .comment-item abbr {
    color: var(--mbs-text-3) !important;
    font-size: 11px;
    border: 0 !important;
    padding-left: 6px !important;
    text-decoration: none;
}
.comment-list .comment-item .summary {
    color: var(--mbs-text-2);
    font-size: 13px;
    line-height: 1.55;
    margin-top: 4px;
    white-space: pre-wrap;
}
/* el degradado del "leer mas" iba a blanco */
.comment-list .comment-item .shortened.shortened:before {
    background: linear-gradient(rgba(2, 13, 24, 0), var(--mbs-surface)) !important;
}
.comment-list .comment-item .comment-tools { margin-top: 6px !important; }
.comment-list .comment-item .reaction-btn { color: var(--mbs-text-3); cursor: pointer; font-size: 12px; }
.comment-list .comment-item .reaction-btn.liked { color: var(--mbs-accent-soft); }

@media (max-width: 575px) {
    .comment-list .comment-item .comment-content-wrapper { grid-template-columns: 32px minmax(0, 1fr); gap: 8px; }
    .comment-list .comment-item div.author img { width: 32px !important; height: 32px !important; }
    .comment-list .comment-item .comment-summary { padding: 9px 10px !important; }
}

/* sin sesion: el aviso ocupa el sitio de los campos anonimos */
.comment-box .mb-comment-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mbs-accent-soft) !important;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none !important;
}
.comment-box .mb-comment-login:hover { color: #fff !important; }
.comment-box textarea.comment-content[readonly] { opacity: .75; cursor: pointer; }

/* ---- resenas de la ficha ------------------------------------------------
   La captura trae #review-holder con fondo blanco en linea (el sitio original
   pintaba ahi el widget de su bundle). Aqui las resenas comparten el estilo de
   los comentarios, sobre el fondo oscuro del theme.
   ---------------------------------------------------------------------- */
#review-holder { background: none !important; display: grid; gap: 10px; padding: 4px 0; }
#review-holder .comment-item {
    padding: 12px 14px;
    border: 1px solid var(--mbs-line);
    border-left: 3px solid var(--mbs-star);
    border-radius: 10px;
    background: var(--mbs-surface);
}
#review-holder .author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
#review-holder .author-name { color: var(--mbs-text) !important; font-weight: 800; font-size: 13px; }
#review-holder .rating-view { gap: 2px; margin: 4px 0; color: var(--mbs-star); font-size: 12px; }
#review-holder .summary { color: var(--mbs-text-2); font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
#review-holder .comment-date { color: var(--mbs-text-3); font-size: 11px; }

.mb-empty-reviews {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 16px;
    border: 1px dashed var(--mbs-line);
    border-radius: 10px;
    color: var(--mbs-text-2);
}
.mb-empty-reviews i { font-size: 20px; color: var(--mbs-star); }
.mb-empty-reviews b { display: block; color: var(--mbs-text); font-size: 13.5px; }
.mb-empty-reviews small { color: var(--mbs-text-3); font-size: 11.5px; }

/* el bloque "escribe una resena" ya no llega oculto */
#review-btn-holder { gap: 4px; padding: 14px; }
#review-btn-holder .notice-box { font-size: 12.5px; color: var(--mbs-text-2); }
#review-btn-holder .btn-danger { font-weight: 800; letter-spacing: .02em; }

/* la fieldset de estrellas del modal, legible sobre el fondo oscuro */
#write-review-modal .rating-popup { text-align: center; }
#write-review-modal #rate-text { color: var(--mbs-text-2); font-size: 12.5px; }
#write-review-modal textarea.form-control {
    background: var(--mbs-surface) !important;
    color: var(--mbs-text) !important;
    border: 1px solid var(--mbs-line) !important;
    height: 160px !important;
}
#write-review-modal .form-message { font-size: 11.5px; }