/* catalogo.css - Diseño tipo mosaico (grid) y tarjetas compactas */

:root{
  --gap:12px;
  --card-radius:8px;
  --muted:#777;
  --accent:#3498db;
  --price:#27ae60;
}

/* Contenedor en grid que muestra la mayor cantidad posible de items */
.product-list{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--gap);
  align-items:start;
  margin-top:8px;
}

/* Tarjeta compacta: imagen dominante + nombre + info breve */
.product-card{
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:var(--card-radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
  user-select:none;
}

.product-card:hover{transform:translateY(-6px);box-shadow:0 10px 24px rgba(0,0,0,0.08)}

/* Imagen ocupa la parte superior, cuadrada y recortada para dar protagonismo */
.product-image{
  width:100%;
  aspect-ratio:1/1;
  background:#f7f7f7;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.product-image img{width:100%;height:100%;object-fit:cover;display:block}

.product-compact-info{
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.product-name{font-size:0.95rem;font-weight:700;color:#22303a;margin:0;line-height:1.1}

.product-subline{display:flex;align-items:center;justify-content:space-between;gap:8px}

.product-price{font-weight:800;color:var(--price);font-size:1rem}
.original-price{font-size:0.82rem;color:#9aa5ad;text-decoration:line-through}

.product-stock-brief{font-size:0.78rem;color:var(--muted);margin:0}

/* Indicador de agotado sobre la imagen */
.product-card.out-of-stock{opacity:.7}
.badge-out{position:absolute;left:8px;top:8px;background:#e74c3c;color:#fff;padding:4px 6px;border-radius:4px;font-size:0.72rem;font-weight:700}

/* Para mantener accesibilidad del modal y detalles, ocultamos la info larga en compact view */
.product-details{display:none}

/* Layout principal y sidebar (mantener) */
.inventory-layout{display:flex;gap:20px;margin-top:20px}
.category-sidebar{flex:0 0 180px;background-color:#f9f9f9;padding:20px;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,0.06);height:fit-content}
.main-content{flex:1}

/* Responsive: en pantallas pequeñas reducimos columnas para mantener tamaño de imagen */
@media (max-width: 1100px){.product-list{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}
@media (max-width: 768px){
  .inventory-layout{flex-direction:column}
  .category-sidebar{order:2}
  .product-list{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
}

/* Breadcrumbs y títulos */
.category-main-title{margin-bottom:1rem;border-bottom:2px solid #f0f0f0;padding-bottom:8px;color:#22303a}
.breadcrumb{margin-bottom:1rem;font-size:0.9rem;color:var(--muted)}
.breadcrumb a{color:var(--accent);text-decoration:none}

/* Modal styles are in separate CSS; keep compatibility */


.breadcrumb a:hover {
    text-decoration: underline;
}

/* Layout for inventory page with sidebar */
.inventory-layout {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.category-sidebar {
    flex: 0 0 200px;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: fit-content;
}

.category-sidebar h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
    font-size: 1.2em;
}

/* Modal de detalles */
.modal.hidden { display: none; }
.modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}
.modal-content {
    position: relative;
    background: #fff;
    max-width: 980px;
    width: 95%;
    border-radius: 8px;
    z-index: 1201;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    overflow: hidden;
}
.modal-close {
    position: absolute;
    right: 12px;
    top: 8px;
    background: transparent;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: #333;
}
.modal-body {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
}
.modal-left { flex: 0 0 420px; }
.modal-right { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; }
.modal-image { background: #f7f7f7; display:flex; align-items:center; justify-content:center; height:320px; border-radius:4px; overflow:hidden; }
.modal-image img { max-width:100%; max-height:100%; object-fit:contain; }
.modal-image-controls { display:flex; align-items:center; gap:0.5rem; margin-top:0.6rem; }
.modal-control { background:#e9e9e9; border:none; padding:6px 10px; border-radius:4px; cursor:pointer; }
.modal-thumbs { display:flex; gap:0.4rem; overflow:auto; }
.modal-thumb { width:56px; height:44px; object-fit:cover; border-radius:4px; opacity:0.7; cursor:pointer; border:2px solid transparent; }
.modal-thumb.active { opacity:1; border-color:#3498db; }

.video-thumb { width:56px; height:44px; border:2px solid transparent; border-radius:4px; opacity:0.7; cursor:pointer; }
.video-thumb.active { opacity:1; border-color:#3498db; }
.modal-price { font-weight:900; color:#27ae60; font-size:1.2rem; }
.modal-desc { color:#444; margin:0.25rem 0 0.6rem; }
.modal-desc ul { margin: 0.4rem 0; padding-left: 1.2rem; }
.modal-desc li { margin-bottom: 0.35rem; }

@media (max-width: 900px) {
    .modal-body { flex-direction: column; }
    .modal-left { flex: 0 0 auto; width: 100%; }
    .modal-image { height:220px; }
}

@media (max-width: 768px) {
    .product-card { flex-direction: column; gap: 12px; padding: 12px; }
    .product-image {
        flex: 0 0 auto;
        width: 100%;
        height: 150px;
        align-self: auto;
        max-width: 100%;
    }

    .product-image img { object-fit: contain; height: 100%; width: auto; }
    .product-details { flex: 0 0 auto; max-width: 100%; width: 100%; }
}


.category-sidebar li {
    margin-bottom: 10px;
}

.category-sidebar a {
    text-decoration: none;
    color: #007bff;
    font-weight: 500;
    display: block;
    padding: 8px 10px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.category-sidebar a:hover {
    background-color: #e9f5ff;
    color: #0056b3;
}

.category-sidebar a.active {
    background-color: #007bff;
    color: white;
    font-weight: bold;
}

.main-content {
    flex: 1;
}

/* Responsive para tablets y móviles */
@media (max-width: 768px) {
    .product-card {
        flex-direction: column;
    }

    .product-image {
        flex: 0 0 auto;
        width: 100%;
        height: 200px;
    }

    .inventory-layout {
        flex-direction: column;
    }

    .category-sidebar {
        flex: 0 0 auto;
    }
}