/* ==========================================================================
   Desplegable de sugerencias del buscador
   --------------------------------------------------------------------------
   El theme trae `.suggestions` como una caja suelta sin estilo de fila: esto
   la convierte en un estante de tomos. Cada resultado es una portada con su
   "obi" (la faja del tomo japones) reinterpretada como cinta de estado.

   Los tokens salen del propio theme (el azul casi negro de `.suggestions`, el
   #3A6073 de su `.view-all` y el #f39c12 de sus estrellas), para que la pieza
   pertenezca al sitio y no parezca pegada.
   ========================================================================== */

:root {
    /* superficie y elevaciones */
    --mbs-surface:      #020d18;   /* fondo del panel, el del theme */
    --mbs-surface-2:    #071a2b;   /* fila en reposo alterna / cabecera */
    --mbs-surface-3:    #0a2237;   /* fila activa */
    --mbs-line:         rgba(255, 255, 255, .06);

    /* acentos */
    --mbs-accent:       #3a6073;   /* el del boton "view all" del theme */
    --mbs-accent-soft:  #4d7f99;
    --mbs-star:         #f39c12;   /* la estrella que ya usa el theme */
    --mbs-ongoing:      #38a3ff;
    --mbs-completed:    #2ecc71;

    /* texto en tres niveles de enfasis */
    --mbs-text:         #eef3f8;
    --mbs-text-2:       #9fb3c8;
    --mbs-text-3:       #64798d;

    /* espaciado (base 4) y forma */
    --mbs-gap:          12px;
    --mbs-radius:       12px;
    --mbs-radius-row:   8px;
    --mbs-radius-cover: 4px;
    --mbs-cover-w:      40px;
    --mbs-cover-h:      58px;      /* 2:3, el ratio real de las portadas */

    /* movimiento */
    --mbs-ease:         cubic-bezier(.2, .7, .3, 1);
    --mbs-fast:         140ms;
}

/* ---- panel -------------------------------------------------------------
   OJO: el contenedor existe siempre en el marcado y el JS del theme lo rellena
   al buscar. Vacio no debe pintar NADA: en /search el bundle lo pone en flujo
   (position:relative) y se veia una caja oscura suelta bajo el formulario.
   ---------------------------------------------------------------------- */
#header-autocomplete-list:empty,
#autocomplete-list:empty,
.suggestions:empty {
    display: none !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

#header-autocomplete-list.suggestions {
    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), 0 2px 8px rgba(0, 0, 0, .6);
    max-height: min(70vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* solo opacidad y transform: la animacion no toca el layout */
    animation: mbs-in var(--mbs-fast) var(--mbs-ease) both;
}

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

#header-autocomplete-list.suggestions::-webkit-scrollbar { width: 8px; }
#header-autocomplete-list.suggestions::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .12);
    border-radius: 99px;
}

/* ---- fila -------------------------------------------------------------- */
.mbs-item {
    display: grid;
    grid-template-columns: auto var(--mbs-cover-w) 1fr;
    align-items: center;
    gap: var(--mbs-gap);
    padding: 8px 10px;
    border-radius: var(--mbs-radius-row);
    color: var(--mbs-text);
    text-decoration: none !important;
    /* el color se anima; nada que provoque reflow */
    transition: background-color var(--mbs-fast) var(--mbs-ease);
}

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

.mbs-item:hover,
.mbs-item:focus-visible,
.mbs-item.is-active {
    background: var(--mbs-surface-3);
    outline: none;
}

.mbs-item:focus-visible { box-shadow: inset 0 0 0 2px var(--mbs-accent-soft); }

/* la "obi": cinta de estado pegada al lomo del tomo — el detalle firma */
.mbs-obi {
    width: 3px;
    height: var(--mbs-cover-h);
    border-radius: 99px;
    background: var(--mbs-accent);
}
.mbs-obi[data-status="ongoing"],
.mbs-obi[data-status="publishing"] { background: var(--mbs-ongoing); }
.mbs-obi[data-status="completed"]  { background: var(--mbs-completed); }

.mbs-cover {
    width: var(--mbs-cover-w);
    height: var(--mbs-cover-h);
    object-fit: cover;
    border-radius: var(--mbs-radius-cover);
    background: var(--mbs-surface-2);   /* color de espera: sin salto de layout */
    display: block;
}

.mbs-body { min-width: 0; }             /* deja que el texto se recorte */

.mbs-title {
    margin: 0 0 3px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--mbs-text);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mbs-title mark {
    background: transparent;
    color: var(--mbs-accent-soft);
    font-weight: 800;
    padding: 0;
}

.mbs-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--mbs-text-2);
    /* los numeros no bailan al cambiar de resultado */
    font-variant-numeric: tabular-nums;
}

.mbs-meta .mbs-rating { color: var(--mbs-star); font-weight: 700; }
.mbs-meta .mbs-rating i { font-size: 10px; margin-right: 3px; }
.mbs-meta .mbs-author {
    color: var(--mbs-text-3);
    max-width: 42ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mbs-meta .mbs-dot { color: var(--mbs-text-3); }

/* ---- pie: ver todo ----------------------------------------------------- */
#header-autocomplete-list .mbs-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    padding: 11px;
    border-radius: var(--mbs-radius-row);
    background: var(--mbs-accent);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none !important;
    transition: background-color var(--mbs-fast) var(--mbs-ease);
}
#header-autocomplete-list .mbs-all:hover,
#header-autocomplete-list .mbs-all:focus-visible { background: var(--mbs-accent-soft); }

/* ---- estados vacios ---------------------------------------------------- */
.mbs-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 14px;
    color: var(--mbs-text-2);
    font-size: 13px;
}
.mbs-empty i { color: var(--mbs-text-3); font-size: 16px; }
.mbs-empty b { color: var(--mbs-text); }
.mbs-empty small { display: block; color: var(--mbs-text-3); font-size: 11.5px; margin-top: 2px; }

/* ---- carga: esqueleto, no ruleta --------------------------------------- */
.mbs-skeleton { padding: 8px 10px; display: grid; gap: 10px; }
.mbs-skeleton-row {
    display: grid;
    grid-template-columns: var(--mbs-cover-w) 1fr;
    gap: var(--mbs-gap);
    align-items: center;
}
.mbs-skeleton-row .b {
    background: linear-gradient(90deg, var(--mbs-surface-2), var(--mbs-surface-3), var(--mbs-surface-2));
    background-size: 200% 100%;
    border-radius: 4px;
    animation: mbs-shimmer 1.1s linear infinite;
}
.mbs-skeleton-row .b.cover { height: var(--mbs-cover-h); }
.mbs-skeleton-row .b.line  { height: 10px; }
.mbs-skeleton-row .b.line.short { width: 45%; margin-top: 6px; }

@keyframes mbs-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ---- movimiento reducido ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #header-autocomplete-list.suggestions { animation: none; }
    .mbs-skeleton-row .b { animation: none; }
    .mbs-item { transition: none; }
}

/* ---- movil: el panel ocupa el ancho util ------------------------------- */
@media (max-width: 767px) {
    :root { --mbs-cover-w: 34px; --mbs-cover-h: 50px; --mbs-gap: 10px; }
    .mbs-title { font-size: 13px; }
    .mbs-meta .mbs-author { display: none; }   /* se cae lo prescindible */
}