/* ./css/fichas.css */

/* =================================================================
   NIVEL 1: VISTA DE CATÁLOGO (FICHAS INDIVIDUALES)
   ================================================================= */

/* --- NUEVO ESTILO: ALINEACIÓN DEL TÍTULO (Punto a) --- */
/* Se le aplican las mismas reglas de centrado que a .fichas-container */
h2 {
/*    max-width: 75rem; 
    margin: 0 auto; */
    padding: 0.625rem; /* Mismo padding que el contenedor de fichas */
/*    box-sizing: border-box; */
}


.fichas-container {
    display: grid;
    /* Móvil: minmax de 280px -> 17.5rem */
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); 
    gap: 0.8rem; /* 20px -> 1.25rem */
    padding: 0.625rem; /* 10px -> 0.625rem */
    
    /* Centra la cuadrícula de fichas en el área de resultados: 1200px -> 75rem */
/*    max-width: 75rem; 
    margin: 0 auto; */
}

/* En tabletas y escritorios, 2 o 3 columnas */
@media (min-width: 600px) {
    .fichas-container {
        grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
        gap: 0.8rem;
    }
}

.ficha-articulo {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    
    /* Máximo de 350px -> 21.875rem */
/*    max-width: 12.5rem; */
    width: 100%; 
}

.ficha-articulo:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Área de Imagen/Video (Área 1) */
.ficha-adjunto-area {
    position: relative;
    width: 100%;
    /* Relación de aspecto 4:3 para la imagen (o la que se prefiera) */
    padding-top: 75%; 
    overflow: hidden;
    flex-shrink: 0; /* No se encoge */
    /* CENTRADO DE LA IMAGEN DENTRO DEL CONTENEDOR */
    display: flex; 
    justify-content: center; /* Centrado horizontal */
    align-items: center;   /* Centrado vertical */
}

.ficha-adjunto-area img,
.ficha-adjunto-area video {
    position: absolute;
    top: 0;
    /* CORRECCIÓN: Centrado horizontal para elemento con position: absolute */
    left: 50%;
    transform: translateX(-50%); /* Tira del elemento hacia atrás la mitad de su propio ancho */
    width: 90%;
    height: 90%;
    object-fit: contain; /* <-- Clave para que la imagen "entre toda" */

	/* === 1. ESCALA DE GRISES POR DEFECTO === */
/*    filter: grayscale(100%); */
    /* 2. TRANSICIÓN SUAVE PARA EL EFECTO HOVER */
/*    transition: filter 0.3s ease-in-out; */
}

/* === 3. EFECTO HOVER: VUELVE AL COLOR ORIGINAL === */
/*.ficha-articulo:hover .ficha-adjunto-area img,
.ficha-articulo:hover .ficha-adjunto-area video {
    filter: grayscale(0%);
}
*/
.ficha-adjunto-area .no-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    color: #ccc;
    font-size: 3rem;
}

/* Etiqueta "Último disponible" */
.ficha-tag.ultimo-disponible {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #e74c3c;
    color: white;
    padding: 2px 2px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: normal;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Área de Datos (Área 2) */
.ficha-datos-area {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-grow: 1; /* Permite que el área de datos se expanda */
}

.ficha-nombre {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    line-height: 1.3;
}

.ficha-precio {
    font-size: 1.2rem;
    font-weight: 700;
    color: #27ae60;
    margin-top: 5px;
    margin-bottom: 5px;
}

.ficha-codigo {
    font-size: 0.85rem;
    color: #7f8c8d;
}