/* =====================================================================
   tarjetas.css — las miniaturas de color de la tarjeta de producto.

   PARA QUE ESTO SE APLIQUE hay que enlazarlo desde layout/base.html,
   DESPUES de tienda.css:

       <link rel="stylesheet" th:href="@{/css/tienda.css}">
       <link rel="stylesheet" th:href="@{/css/tarjetas.css}">

   Mientras tanto el fragmento tarjetaProducto lleva los mismos valores
   en estilos en linea, asi que la tarjeta ya se ve bien sin este archivo.

   SON DOS PASOS, y hay que hacer LOS DOS:
     1. poner el <link> de arriba en layout/base.html;
     2. borrar los estilos en linea del fragmento tarjetaProducto
        (los th:style y los style= de la fila de colores).

   El paso 2 no es opcional: un estilo en linea le gana a cualquier regla
   de una hoja de estilos, asi que mientras esten ahi mandan ellos y lo
   que este archivo agrega de mas (el :hover, la version chica para el
   celular) no llega a aplicarse nunca. Los valores base son identicos en
   los dos lados, asi que al borrarlos la tarjeta no se mueve un pixel.

   Las variables (--borde, --gris, --marca…) las define tienda.css.
   ===================================================================== */


/* --- La fila de colores debajo del nombre ---------------------------- */

.tarjeta-colores {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 2px 0 7px;
}


/* --- Miniatura: la foto del color ------------------------------------
   Es lo que muestra miwok.com.ar: un cuadradito con la prenda en ese
   color. Solo aparece cuando la foto tiene el color asignado. */

.tarjeta-color-foto {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: cover;
    border: 1px solid var(--borde);
    border-radius: 5px;
    background: var(--fondo-hueco);
    transition: border-color var(--transicion);
}

.tarjeta:hover .tarjeta-color-foto { border-color: var(--gris-claro); }


/* --- Pastilla: el NOMBRE del color -----------------------------------
   El reemplazo para cuando las fotos todavia no distinguen color.
   Ver el comentario largo en fragmentos/comunes.html. */

/* La pastilla puede ocupar todo el ancho de la tarjeta y prefiere gastar
   un renglon antes que recortar. El catalogo tiene "Gris melange claro" y
   "Gris melange oscuro" en la misma prenda: recortadas quedan las dos en
   "Gris mela…", identicas e inutiles. El text-overflow queda igual, pero
   como red de seguridad para un nombre absurdamente largo. */
.tarjeta-color-nombre {
    display: inline-block;
    max-width: 100%;
    padding: 3px 9px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--fondo);
    color: var(--tinta-suave);
    font-size: .6875rem;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* --- Color sin stock -------------------------------------------------
   No se esconde: que el cliente sepa que la prenda existe en ese color
   y que hoy no lo tenemos. Se distingue por DOS vias a la vez (opacidad
   y tachado / gris) para que tambien se note sin percibir bien el color. */

.tarjeta-color-nombre.sin-stock {
    opacity: .5;
    text-decoration: line-through;
}

.tarjeta-color-foto.sin-stock {
    opacity: .42;
    filter: grayscale(1);
}


/* --- "+2" cuando hay mas colores de los que entran ------------------- */

.tarjeta-color-mas {
    font-size: .6875rem;
    color: var(--gris);
    white-space: nowrap;
}


/* --- Celular: la grilla es de 2 columnas -----------------------------
   En una tarjeta de ~170px de ancho cuatro cuadraditos de 34px entran
   justos. Se achican un poco para que nunca queden apretados contra el
   borde ni empujen el precio a una linea de mas. */

@media (max-width: 640px) {

    .tarjeta-colores { gap: 5px; }

    .tarjeta-color-foto { width: 30px; height: 30px; }

    .tarjeta-color-nombre {
        padding: 2px 7px;
        font-size: .6563rem;
    }
}