/*
 * KummaraDS — kds-tarjeta (#2034)
 * ============================================================
 * Un ítem de catálogo o de lista: foto, título, datos, importe y una acción. Sirve para el producto de la tienda y
 * para las tarjetas de otros sistemas: nada de clases de tarjeta propias de cada página (#2007).
 *
 *   <article class="kds-tarjeta">
 *     <figure class="kds-foto"><img src="…" alt="Filtro de aceite FA-12" loading="lazy"></figure>
 *     <div class="kds-tarjeta__etiquetas"><span class="kds-badge kds-badge--neutral kds-badge--solid">15 % OFF</span></div>
 *     <h3 class="kds-tarjeta__titulo"><a href="/producto/123">Filtro de aceite FA-12</a></h3>
 *     <p class="kds-tarjeta__meta">Código FA-12 · Marca Ejemplo</p>
 *     <span class="kds-importe"><s class="kds-importe__antes">…</s><strong class="kds-importe__ahora">…</strong></span>
 *     <div class="kds-tarjeta__accion"><button type="button" class="kds-boton kds-boton--primario kds-boton--bloque">Agregar</button></div>
 *   </article>
 *
 * Una sola parada de Tab para la tarjeta: el enlace del título se estira sobre toda la tarjeta (su ::after) y la
 * acción queda encima, aparte y con su nombre. El foco se ve alrededor de la tarjeta entera, sólo cuando se llega con el
 * teclado (con el mouse no queda el recuadro después de un clic).
 *
 * DESCUENTOS Y PROMOCIONES (#2035), siempre con piezas de la librería:
 *   el porcentaje y el nombre de la promoción   kds-badge en .kds-tarjeta__etiquetas, sobre la foto («25 % OFF»
 *                                               en --neutral --solid; el nombre, «Promo de invierno», en el tinte)
 *   el precio de antes y el de ahora             kds-importe con __antes tachado
 *   los beneficios                               .kds-tarjeta__beneficios: kds-badge --success (envío gratis, un
 *                                               regalo, cuotas sin interés) y --warning (la última unidad), debajo
 *                                               del precio
 *   el video                                     un .kds-foto__video en la foto (kds-foto.css)
 *
 *   --vidriera  la de la tienda (#2038): la foto en su marco, sin caja alrededor, y debajo, con aire, el precio con el
 *               agregar a la derecha, la disponibilidad, los beneficios, el código y el nombre, chico y en gris. Al
 *               pasar el mouse la foto se aclara un poco. Con la foto recortada (--cubrir) va de borde a borde.
 *   --fila      la foto al costado (una lista, un resultado de búsqueda); el texto va en .kds-tarjeta__cuerpo
 *   --compacta  menos aire y el título más chico (un carrusel, el costado del carrito)
 *   sin foto    sin la figura, o con una .kds-foto--vacia para que la grilla no salte
 *   .is-agotada la foto apagada y .kds-tarjeta__motivo dice por qué no se puede comprar; la acción queda apagada
 *   pasar el mouse: el borde en el gris del texto, sin subir ni sombra
 * ============================================================
 */

.kds-tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
    padding: .75rem;
    border: 1px solid var(--kds-borde, #eee);
    border-radius: calc(var(--kds-radio-superficie, .375rem) * 2);
    background: var(--kds-superficie, #fff);
    color: var(--kds-texto, #212529);
    transition: border-color .15s ease;
}

.kds-tarjeta:hover { border-color: var(--kds-texto-2, #606060); }

.kds-tarjeta:has(:focus-visible) {
    outline: var(--kds-foco-ancho, 2px) solid var(--kds-foco, #2EB8A8);
    outline-offset: var(--kds-foco-sep, 2px);
}

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

.kds-tarjeta__titulo {
    margin: 0;
    font-size: var(--kds-fs-3, 1rem);
    font-weight: var(--kds-peso-ui, 600);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kds-tarjeta__titulo a {
    color: inherit;
    text-decoration: none;
}

.kds-tarjeta__titulo a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.kds-tarjeta__titulo a:focus { outline: none; }

.kds-tarjeta__meta {
    margin: 0;
    color: var(--kds-texto-2, #606060);
    font-size: var(--kds-fs-2, .875rem);
    line-height: 1.35;
}

.kds-tarjeta__motivo {
    margin: 0;
    color: var(--kds-peligro-texto, #b8294a);
    font-size: var(--kds-fs-2, .875rem);
    font-weight: var(--kds-peso-ui, 600);
}

.kds-tarjeta__etiquetas {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    right: 1.25rem;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    pointer-events: none;
}

.kds-tarjeta__beneficios {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kds-tarjeta__beneficios > li { display: flex; max-width: 100%; }

.kds-tarjeta__beneficios .kds-badge {
    max-width: 100%;
    white-space: normal;
    line-height: 1.2;
    text-align: left;
}

.kds-tarjeta__accion {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding-top: .25rem;
}

.kds-tarjeta.is-agotada .kds-foto > :is(img, video, picture) { opacity: .45; filter: grayscale(.6); }

.kds-tarjeta--compacta {
    gap: .375rem;
    padding: .5rem;
}

.kds-tarjeta--compacta .kds-tarjeta__titulo { font-size: var(--kds-fs-2, .875rem); }

.kds-tarjeta--fila {
    flex-direction: row;
    align-items: flex-start;
    gap: .875rem;
}

.kds-tarjeta--fila > .kds-foto {
    flex: 0 0 auto;
    width: var(--kds-tarjeta-foto-ancho, 6rem);
}

.kds-tarjeta--fila .kds-tarjeta__etiquetas {
    top: .875rem;
    left: .875rem;
    right: auto;
}

.kds-tarjeta--fila .kds-tarjeta__accion { margin-top: .25rem; }

.kds-tarjeta--vidriera {
    gap: 0;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
}

.kds-tarjeta--vidriera > .kds-foto { --kds-foto-radio: 0; }
.kds-tarjeta--vidriera > .kds-foto--cubrir { --kds-foto-fondo: transparent; }

.kds-tarjeta--vidriera > .kds-foto > :is(img, picture) { transition: opacity .2s; }
.kds-tarjeta--vidriera:hover > .kds-foto > :is(img, picture) { opacity: .9; }

.kds-tarjeta--vidriera .kds-tarjeta__cuerpo {
    gap: 0;
    min-height: 200px;
    padding: 1.25rem;
    color: var(--kds-texto, #333);
}

.kds-tarjeta--vidriera .kds-tarjeta__titulo {
    display: block;
    overflow: visible;
    margin: 0 0 .5rem;
    color: var(--kds-texto-2, rgba(33, 37, 41, .75));
    font-size: .9rem;
    font-weight: 400;
    line-height: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .kds-tarjeta { transition: none; }
    .kds-tarjeta--vidriera > .kds-foto > :is(img, picture) { transition: none; }
}