/* ===========================================================================
   Tarjetas de catálogo de la portada — DHARCK STORE
   ===========================================================================
   La piel nueva de las tarjetas de juegos, encerrada aquí: TODAS las reglas van
   bajo `#catalogos-grid`, así que ganan por especificidad a las de
   `dharckstorecss.css` (`.catalogo-card`) y el resto de la portada no cambia ni
   un píxel.

   Cada tarjeta lleva: el arte 5:4, la etiqueta que el admin escriba en el panel
   (o el «−5%» del código, cuando el cliente lo tiene aplicado), el nombre del
   juego, «desde» el monto más barato disponible de ese juego, el precio y el
   botón de compra a todo lo ancho.

   OJO: la etiqueta del panel es SOLO un rótulo. No toca ningún precio — ni el
   que se muestra ni el que se cobra: los dos salen del motor de precios.
   =========================================================================== */

#catalogos-grid {
    /* Tokens del modo oscuro limpio, solo para esta rejilla. */
    --dsc-card: #131d31;
    --dsc-card-hover: #1b2a4a;
    --dsc-border: #1e293b;
    --dsc-muted: #94a3b8;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
    gap: 16px;
}

#catalogos-grid .dsc-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--dsc-border);
    border-radius: 18px;
    background: var(--dsc-card);
    box-shadow: none;
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease,
                box-shadow .18s ease;
}

/* El buscador de la portada oculta tarjetas con el atributo `hidden`: sin esto
   `#catalogos-grid .dsc-card` (que gana por especificidad) las dejaría a la
   vista y la búsqueda no filtraría nada. */
#catalogos-grid .dsc-card[hidden] { display: none !important; }

#catalogos-grid .dsc-card:hover {
    transform: translateY(-3px);
    border-color: rgba(59, 130, 246, .6);
    background: var(--dsc-card-hover);
    box-shadow: 0 18px 34px -22px rgba(59, 130, 246, .9);
}

#catalogos-grid .dsc-art { position: relative; display: block; background: #0a1224; }
#catalogos-grid .dsc-art img {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    margin: 0;
    border: 0;
    border-radius: 0;
    transition: transform .25s ease;
}
#catalogos-grid .dsc-card:hover .dsc-art img { transform: scale(1.03); }

/* La etiqueta (texto libre del panel) o el porcentaje del código aplicado. */
#catalogos-grid .dsc-off {
    position: absolute;
    top: 9px;
    left: 9px;
    padding: 5px 9px;
    border-radius: 9px;
    background: var(--ds-azul-boton, #2563eb);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .01em;
    box-shadow: 0 8px 18px -10px rgba(59, 130, 246, .95);
}

#catalogos-grid .dsc-fav {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    background: rgba(11, 15, 25, .72);
    color: #e2e8f0;
    backdrop-filter: blur(4px);
}
#catalogos-grid .dsc-fav svg { width: 15px; height: 15px; }

#catalogos-grid .dsc-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    padding: 12px 13px 13px;
}

#catalogos-grid .dsc-name {
    margin: 0;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: -.01em;
    text-align: left;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#catalogos-grid .dsc-sub {
    font-size: .72rem;
    line-height: 1.35;
    color: var(--dsc-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#catalogos-grid .dsc-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;
    margin-top: auto;
    padding-top: 9px;
}
#catalogos-grid .dsc-old { font-size: .75rem; color: #7a8798; text-decoration: line-through; }
#catalogos-grid .dsc-new {
    font-size: .98rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--ds-azul, #38bdf8);
}
#catalogos-grid .dsc-new-soft { font-size: .85rem; font-weight: 600; color: var(--dsc-muted); }

#catalogos-grid .dsc-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 9px;
    border-radius: 11px;
    background: linear-gradient(to right, var(--ds-azul-boton-claro, #3b82f6), var(--ds-azul-boton, #2563eb));
    color: #fff;
    font-size: .84rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: filter .18s ease, transform .12s ease;
}
#catalogos-grid .dsc-buy:hover { filter: brightness(1.08); color: #fff; }
#catalogos-grid .dsc-buy:active { transform: translateY(1px); }
#catalogos-grid .dsc-buy:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
#catalogos-grid .dsc-buy-ghost {
    border: 1px solid var(--dsc-border);
    background: transparent;
    color: #cbd5e1;
}
#catalogos-grid .dsc-buy-ghost:hover {
    border-color: var(--ds-azul-boton-claro, #3b82f6);
    background: var(--dsc-card-hover);
    color: #fff;
}

/* ------------------------------- móvil ---------------------------------- */
@media (max-width: 640px) {
    /* Dos tarjetas por fila y todo un poco más compacto, con el botón alto
       (46 px) para que el dedo no falle. */
    #catalogos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
    #catalogos-grid .dsc-card { border-radius: 15px; }
    #catalogos-grid .dsc-body { padding: 10px 10px 11px; gap: 4px; }
    #catalogos-grid .dsc-name { font-size: .82rem; }
    #catalogos-grid .dsc-sub { font-size: .68rem; }
    #catalogos-grid .dsc-old { font-size: .68rem; }
    #catalogos-grid .dsc-new { font-size: .88rem; }
    #catalogos-grid .dsc-off { top: 7px; left: 7px; padding: 4px 7px; font-size: .66rem; border-radius: 8px; }
    #catalogos-grid .dsc-fav { width: 27px; height: 27px; top: 7px; right: 7px; }
    #catalogos-grid .dsc-buy { min-height: 46px; font-size: .8rem; }
}

@media (max-width: 360px) {
    /* En pantallas muy justas, los nombres largos se parten en dos líneas en
       vez de cortarse con puntos suspensivos. */
    #catalogos-grid .dsc-name,
    #catalogos-grid .dsc-sub { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    #catalogos-grid .dsc-card,
    #catalogos-grid .dsc-art img { transition: none; }
    #catalogos-grid .dsc-card:hover { transform: none; }
    #catalogos-grid .dsc-card:hover .dsc-art img { transform: none; }
}