/* ================================================================
   PAWPrints — Librería
   catalogo.css: Estilos específicos de la página del Catálogo
   ================================================================ */

/* Contenedor principal de la página de catálogo */
.page-catalogo {
  background-color: var(--white); /* Fondo blanco base para la página */
}

/* Estructura del área <main> */
.page-catalogo main {
  max-width: calc(var(--max-w) + 2 * var(--gutter)); /* Ancho máximo con márgenes laterales */
  margin-inline: auto;                               /* Centrado horizontal automático */
  padding: var(--sp-10) var(--gutter) var(--sp-16);  /* Relleno superior, lateral e inferior */
  display: flex;
  flex-direction: column;                            /* Distribución vertical de secciones */
  gap: var(--sp-10);                                 /* Separación uniforme entre secciones */
}

/* ================================================================
   1. HERO / SECCIÓN DE PRESENTACIÓN Y BÚSQUEDA DEL CATÁLOGO
   ================================================================ */
/* Tarjeta de bienvenida e introducción al catálogo */
.page-catalogo main > section:nth-of-type(1) {
  background: linear-gradient(135deg, var(--v50) 0%, var(--cream) 100%); /* Gradiente suave lavanda/crema */
  border: 1px solid var(--border-v);                                     /* Borde sutil lavanda */
  border-radius: var(--r-xl);                                           /* Esquinas redondeadas grandes (16px) */
  padding: var(--sp-10) var(--sp-8);                                    /* Relleno interno amplio */
  text-align: center;                                                   /* Alineación del texto al centro */
  display: flex;
  flex-direction: column;                                               /* Disposición vertical de contenido */
  align-items: center;                                                  /* Centrado horizontal de elementos */
  gap: var(--sp-4);                                                     /* Espacio entre título, párrafo y buscador */
  box-shadow: var(--sh-sm);                                             /* Sombra sutil de elevación */
}

/* Título principal del catálogo (H1) */
.page-catalogo main > section:nth-of-type(1) h1 {
  font-family: var(--font-serif);                          /* Tipografía serif Garamond */
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); /* Tamaño fluido adaptable a la pantalla */
  font-weight: 800;                                        /* Peso de fuente negrita */
  color: var(--v900);                                      /* Violeta muy oscuro corporativo */
  line-height: 1.1;                                        /* Interlineado ajustado */
  letter-spacing: -0.01em;                                 /* Espaciado entre letras */
}

/* Párrafo descriptivo del Hero */
.page-catalogo main > section:nth-of-type(1) > p {
  font-size: var(--text-base); /* Tamaño base de texto (16px) */
  color: var(--muted);          /* Color neutro secundario */
  max-width: 50ch;              /* Ancho máximo de 50 caracteres para mejor lecturabilidad */
  line-height: 1.6;             /* Interlineado cómodo */
}

/* Formulario de búsqueda en el Hero */
.page-catalogo main > section:nth-of-type(1) search {
  width: 100%;             /* Ocupa el ancho disponible */
  max-width: 560px;        /* Ancho máximo restringido para no desbordarse */
  margin-top: var(--sp-2); /* Margen superior ligero */
}

/* Caja contenedora del formulario de búsqueda */
.page-catalogo main > section:nth-of-type(1) search form {
  display: flex;
  gap: var(--sp-2);                                           /* Espacio entre el input y el botón */
  background: var(--white);                                   /* Fondo blanco puro */
  padding: var(--sp-2);                                       /* Relleno interno */
  border-radius: 999px;                                       /* Borde redondeado cápsula/píldora */
  border: 2px solid var(--border-v);                          /* Borde lavanda */
  box-shadow: var(--sh-sm);                                   /* Sombra suave */
  transition: border-color var(--ease), box-shadow var(--ease);/* Transición suave al enfocar */
}

/* Estado de enfoque en el formulario de búsqueda */
.page-catalogo main > section:nth-of-type(1) search form:focus-within {
  border-color: var(--v700);                      /* Borde violeta corporativo activo */
  box-shadow: 0 0 0 4px rgba(92, 6, 140, 0.15); /* Anillo de enfoque translúcido */
}

/* Ocultar accesiblemente la etiqueta label para lectores de pantalla */
.page-catalogo main > section:nth-of-type(1) search label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Campo de entrada de texto de la búsqueda */
.page-catalogo main > section:nth-of-type(1) search input[type="search"] {
  flex: 1;                     /* Expande el campo para ocupar todo el espacio sobrante */
  border: none;                /* Sin borde propio */
  background: transparent;     /* Fondo transparente */
  padding: 0 var(--sp-4);      /* Relleno lateral */
  font-size: var(--text-base); /* Tamaño de texto */
  color: var(--dark);          /* Color de texto principal */
  outline: none;               /* Quita el contorno por defecto del navegador */
}

/* Placeholder del buscador */
.page-catalogo main > section:nth-of-type(1) search input[type="search"]::placeholder {
  color: var(--muted); /* Texto en gris secundario */
}

/* Botón de envío del buscador */
.page-catalogo main > section:nth-of-type(1) search button {
  background: var(--v700);                                     /* Fondo violeta principal */
  color: var(--white);                                         /* Texto blanco */
  border: none;                                                /* Sin bordes */
  border-radius: 999px;                                        /* Forma redondeada estilo cápsula */
  padding: var(--sp-2) var(--sp-6);                            /* Relleno vertical y horizontal */
  font-size: var(--text-sm);                                   /* Tamaño de texto pequeño (14px) */
  font-weight: 600;                                            /* Fuente semi-negrita */
  cursor: pointer;                                             /* Cursor de mano */
  transition: background var(--ease), transform var(--ease);  /* Transición de hover suave */
}

/* Hover del botón del buscador */
.page-catalogo main > section:nth-of-type(1) search button:hover {
  background: var(--v600); /* Violeta ligeramente más oscuro */
}

/* ================================================================
   2. SECCIÓN PRINCIPAL DEL CATÁLOGO (LAYOUT DE 2 COLUMNAS)
   ================================================================ */
/* Grilla principal: Columna izquierda de Filtros (280px) + Grilla de Libros (1fr) */
.page-catalogo main > section:nth-of-type(2) {
  display: grid;
  grid-template-columns: 280px 1fr; /* Columna de filtros fija y columna de resultados flexible */
  gap: var(--sp-10);                /* Espacio entre la barra lateral y los resultados */
  align-items: start;               /* Alineación superior */
}

/* Ocultar accesiblemente el H2 de la sección */
.page-catalogo #titulo-seccion-catalogo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── BARRA LATERAL DE FILTROS (Aside) ────────────────────────── */
.page-catalogo aside[aria-labelledby="titulo-filtros"] {
  background: var(--white);         /* Fondo blanco */
  border: 1px solid var(--border);  /* Borde gris neutro */
  border-radius: var(--r-xl);       /* Esquinas redondeadas (16px) */
  padding: var(--sp-6);             /* Relleno interno */
  box-shadow: var(--sh-sm);         /* Sombra suave */
  position: sticky;                 /* Permanece fijo en pantalla al hacer scroll */
  top: 80px;                        /* Desfase para no solaparse con el header sticky */
}

/* Título del panel de Filtros */
.page-catalogo #titulo-filtros {
  font-family: var(--font-serif);        /* Fuente Garamond */
  font-size: var(--text-xl);             /* Tamaño de fuente grande (20px) */
  font-weight: 700;                      /* Negrita */
  color: var(--v800);                    /* Violeta oscuro */
  border-bottom: 2px solid var(--v50);   /* Línea divisoria en lavanda claro */
  padding-bottom: var(--sp-3);           /* Espacio bajo el título */
  margin-bottom: var(--sp-5);            /* Margen hacia los campos de filtro */
}

/* Formulario de filtros */
.page-catalogo aside form {
  display: flex;
  flex-direction: column; /* Apila los grupos de filtros verticalmente */
  gap: var(--sp-6);        /* Espacio entre grupos (Categorías, Formato, Precio) */
}

/* Grupos de opciones (fieldset) */
.page-catalogo aside fieldset {
  border: none; /* Sin borde de fieldset por defecto */
  padding: 0;   /* Sin relleno */
  margin: 0;    /* Sin margen */
}

/* Etiqueta legend para cada grupo de filtros */
.page-catalogo aside legend {
  font-family: var(--font-sans);  /* Fuente Sans-serif limpia */
  font-size: var(--text-xs);      /* Texto pequeño (11px) */
  font-weight: 700;               /* Negrita */
  letter-spacing: 0.1em;          /* Espaciado mayúsculas */
  text-transform: uppercase;      /* Texto en mayúsculas */
  color: var(--v700);             /* Violeta corporativo */
  margin-bottom: var(--sp-3);     /* Margen hacia la lista de checkboxes */
}

/* Lista de ítems de filtro */
.page-catalogo aside fieldset ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2); /* Espacio entre cada opción de filtro */
}

.page-catalogo aside fieldset li {
  display: flex;
  align-items: center; /* Centrado vertical entre la casilla y el texto */
}

/* Casillas de verificación (checkbox) y botones de opción (radio) */
.page-catalogo aside fieldset input[type="checkbox"],
.page-catalogo aside fieldset input[type="radio"] {
  accent-color: var(--v700); /* Color violeta nativo para el checkbox/radio activo */
  width: 1.1rem;
  height: 1.1rem;
  margin-right: var(--sp-3); /* Separación respecto a la etiqueta */
  cursor: pointer;
}

/* Etiquetas de filtro */
.page-catalogo aside fieldset label {
  font-size: var(--text-sm);
  color: var(--dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Alinea el nombre a la izquierda y la cantidad a la derecha */
  width: 100%;
  transition: color var(--ease);
}

.page-catalogo aside fieldset label:hover {
  color: var(--v700); /* Cambia a violeta al pasar el cursor */
}

/* Contador numérico de libros por categoría (<small>) */
.page-catalogo aside fieldset label small {
  color: var(--muted);
  font-size: var(--text-xs);
  background: var(--v50);   /* Fondo lavanda suave en formato badge */
  padding: 2px 8px;
  border-radius: 999px;     /* Redondeado tipo cápsula */
  font-weight: 600;
}

/* Botón "Aplicar Filtros" */
.page-catalogo aside button[type="submit"] {
  width: 100%;
  background: var(--v700);
  color: var(--white);
  border: 1px solid var(--v700);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ease), box-shadow var(--ease);
  margin-top: var(--sp-2);
}

.page-catalogo aside button[type="submit"]:hover {
  background: var(--v600);
  box-shadow: var(--sh-md);
}

/* ================================================================
   3. SECCIÓN DE RESULTADOS Y GRILLA DE LIBROS
   ================================================================ */
/* Contenedor de lista de resultados */
.page-catalogo section[aria-labelledby="titulo-lista-libros"] {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* Ocultar accesiblemente el H3 de la lista */
.page-catalogo #titulo-lista-libros {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Párrafo de resultados de búsqueda */
.page-catalogo section[aria-labelledby="titulo-lista-libros"] > p {
  font-size: var(--text-sm);
  color: var(--muted);
}

.page-catalogo section[aria-labelledby="titulo-lista-libros"] > p strong {
  color: var(--v800);
}

/* Barra superior de herramientas: orden y cantidad de libros por página */
.page-catalogo section[aria-labelledby="titulo-lista-libros"] form[action="/catalogo"] {
  display: flex;
  align-items: center;
  /* Dos pares de etiqueta y desplegable más el botón no entran en una línea en pantallas
     intermedias; antes del breakpoint que los apila, pasan a dos filas en lugar de desbordar. */
  flex-wrap: wrap;
  gap: var(--sp-3);
  background: var(--v50);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-v);
  margin-bottom: var(--sp-2);
}

.page-catalogo section[aria-labelledby="titulo-lista-libros"] form label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--dark);
  white-space: nowrap;
}

/* Select de ordenamiento */
.page-catalogo section[aria-labelledby="titulo-lista-libros"] form select {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--dark);
  outline: none;
  cursor: pointer;
  transition: border-color var(--ease);
}

.page-catalogo section[aria-labelledby="titulo-lista-libros"] form select:focus {
  border-color: var(--v700);
}

/* Botón "Ordenar" */
.page-catalogo section[aria-labelledby="titulo-lista-libros"] form button {
  background: var(--white);
  color: var(--v700);
  border: 1px solid var(--v700);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}

.page-catalogo section[aria-labelledby="titulo-lista-libros"] form button:hover {
  background: var(--v700);
  color: var(--white);
}

/* Grilla de tarjetas de libros (CSS Grid con autorrelleno) */
.page-catalogo section[aria-labelledby="titulo-lista-libros"] > ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); /* Mínimo 240px por tarjeta */
  gap: var(--sp-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-catalogo section[aria-labelledby="titulo-lista-libros"] > ul > li {
  display: flex; /* Asegura que la tarjeta interna ocupe la altura completa del grid */
}

/* Tarjeta individual de libro (<article>) */
.page-catalogo article {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  width: 100%;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

/* Animación y sombra al pasar el cursor sobre la tarjeta */
.page-catalogo article:hover {
  transform: translateY(-4px);      /* Eleva la tarjeta 4px */
  box-shadow: var(--sh-md);          /* Aplica sombra de elevación */
  border-color: var(--border-v);     /* Resalta el borde en lavanda */
}

/* Imagen de portada del libro */
.page-catalogo article figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 3/4;                /* Mantén la proporción 3:4 típica de las portadas */
  background: var(--v50);
}

.page-catalogo article figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;               /* Ajusta la imagen sin deformarla */
  transition: transform 0.4s ease; /* Efecto de zoom progresivo al hacer hover */
}

.page-catalogo article:hover figure img {
  transform: scale(1.05); /* Zoom ligero del 5% a la portada */
}

.page-catalogo article figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Encabezado interno de la tarjeta (Género, Título, Autor) */
.page-catalogo article header {
  margin-top: var(--sp-4);
  display: flex;
  flex-direction: column;     /* Apila el género, el título y el autor en columna vertical */
  align-items: flex-start;    /* Alinea todo al margen izquierdo */
  gap: var(--sp-1);           /* Espaciado uniforme */
}

/* Badge de género */
.page-catalogo article header p:first-child small {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--v700);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Título del libro (H4) */
.page-catalogo article header h4 {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-top: var(--sp-1);
  line-height: 1.25;
}

.page-catalogo article header h4 a {
  color: var(--dark);
  transition: color var(--ease);
}

.page-catalogo article header h4 a:hover {
  color: var(--v700);
}

/* Nombre del autor */
.page-catalogo article header p:last-child {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: var(--sp-1);
}

/* Breve descripción del libro */
.page-catalogo article > p:nth-of-type(1) {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--sp-3);
  line-height: 1.5;
  flex-grow: 1; /* Ocupa el espacio vertical disponible para nivelar los precios */
}

/* Bloque del precio */
.page-catalogo article > p:nth-of-type(2) {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--v800);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--v50);
}

.page-catalogo article > p:nth-of-type(2) data {
  font-size: var(--text-lg);
  color: var(--v700);
}

/* Enlace "Ver detalles" */
.page-catalogo article > p:last-child {
  margin-top: var(--sp-3);
}

.page-catalogo article > p:last-child a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--v700);
  transition: transform var(--ease), color var(--ease);
}

.page-catalogo article > p:last-child a:hover {
  color: var(--v900);
  transform: translateX(4px); /* Desplaza la flecha suavemente a la derecha */
}

/* ================================================================
   4. RESPONSIVO DE CATÁLOGO (MEDIA QUERIES)
   ================================================================ */
/* Pantallas medianas y tablets (hasta 900px) */
@media (max-width: 900px) {
  .page-catalogo main > section:nth-of-type(2) {
    grid-template-columns: 1fr; /* Pasa a 1 columna (filtros arriba, catálogo abajo) */
  }

  .page-catalogo aside[aria-labelledby="titulo-filtros"] {
    position: static; /* Quita el sticky para integrarse al flujo apilado */
  }

  .page-catalogo aside form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Filtros distribuidos horizontalmente */
    align-items: start;
  }

  .page-catalogo aside button[type="submit"] {
    grid-column: 1 / -1; /* Botón ocupa todo el ancho */
  }
}

/* Dispositivos móviles (hasta 600px) */
@media (max-width: 600px) {
  .page-catalogo main > section:nth-of-type(1) search form {
    flex-direction: column;    /* Apila input y botón en vertical */
    border-radius: var(--r-lg);
    padding: var(--sp-3);
  }

  .page-catalogo main > section:nth-of-type(1) search input[type="search"] {
    padding: var(--sp-2) 0;
  }

  .page-catalogo main > section:nth-of-type(1) search button {
    width: 100%;
    border-radius: var(--r-md);
  }

  .page-catalogo section[aria-labelledby="titulo-lista-libros"] form[action="/catalogo"] {
    flex-direction: column;
    align-items: stretch;
  }

  .page-catalogo section[aria-labelledby="titulo-lista-libros"] > ul {
    grid-template-columns: 1fr; /* 1 tarjeta por fila en celulares */
  }
}

/* ================================================================
   5. PAGINADO Y DESCARGA DEL CATÁLOGO
   Controles nuevos del TP3: el paginado de los resultados y el
   enlace al mismo listado en CSV.
   ================================================================ */
/* Barra de paginado, centrada debajo de las tarjetas */
.page-catalogo nav[aria-label="Paginado del catálogo"] {
  margin-top: var(--sp-8); /* Separación de la grilla de resultados */
}

.page-catalogo nav[aria-label="Paginado del catálogo"] ul {
  display: flex;
  flex-wrap: wrap;                 /* En pantallas chicas baja de fila */
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;                /* Es una barra de controles, no una lista de lectura */
}

/* Cada número y cada flecha, como botón */
.page-catalogo nav[aria-label="Paginado del catálogo"] a {
  display: inline-block;
  min-width: 2.5rem;                                   /* Todos del mismo ancho, aunque tengan 1 dígito */
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-v);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--v700);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}

.page-catalogo nav[aria-label="Paginado del catálogo"] a:hover {
  background: var(--v50);
  border-color: var(--v700);
}

/* La página actual: el mismo criterio que el menú principal, que se cuelga de aria-current */
.page-catalogo nav[aria-label="Paginado del catálogo"] a[aria-current="page"] {
  background: var(--v700);
  border-color: var(--v700);
  color: var(--white);
  cursor: default;
}

/* Enlace de descarga del CSV, al pie de los resultados */
.page-catalogo section[aria-labelledby="titulo-lista-libros"] > p:last-child {
  margin-top: var(--sp-6);
  font-size: var(--text-sm);
}

.page-catalogo section[aria-labelledby="titulo-lista-libros"] > p:last-child a {
  color: var(--v700);
  font-weight: 600;
  text-decoration: underline;
}

.page-catalogo section[aria-labelledby="titulo-lista-libros"] > p:last-child a:hover {
  color: var(--v900);
}

@media (max-width: 600px) {
  .page-catalogo nav[aria-label="Paginado del catálogo"] a {
    min-width: 2.25rem;
    padding: var(--sp-2);
  }
}