/* ════════════════════════════════════════════════
   catalogo.css — Universolibro
   Página de Catálogo de Libros
   Mobile First · WCAG 2.1 AA · Smooth transitions
   Usa tokens de base.css (no los redefine)
   ════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════
   COLORES LOCALES DE CATEGORÍAS
   (complementan los tokens de base.css)
   ════════════════════════════════════════════════ */
:root {
  --cat-plan:        #2980B9;  /* azul escolar  */
  --cat-plan-bg:     #EBF5FB;
  --cat-textos:      #27AE60;  /* verde          */
  --cat-textos-bg:   #E9F7EF;
  --cat-literatura:  #8B0000;  /* rojo marca     */
  --cat-literatura-bg: #FDEDEC;
  --cat-sagas:       #7D3C98;  /* púrpura        */
  --cat-sagas-bg:    #F4ECF7;
  --cat-desarrollo:  #E65100;  /* naranja marca  */
  --cat-desarrollo-bg: #FBE9E7;
  --cat-infantil:    #F9A825;  /* amarillo marca */
  --cat-infantil-bg: #FEF9E7;
  --cat-universitarios: #17202A; /* casi negro   */
  --cat-universitarios-bg: #EAECEE;
}

/* ════════════════════════════════════════════════
   HERO DEL CATÁLOGO
   ════════════════════════════════════════════════ */
.cat-hero {
  background: linear-gradient(135deg, var(--c-rojo) 0%, var(--c-rojo-oscuro) 100%);
  padding-block: var(--s-xl) calc(var(--s-xl) + 1.5rem);
  position: relative;
  overflow: hidden;
}

/* Decoración de fondo sutil */
.cat-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(249,168,37,.15) 0%, transparent 50%),
    radial-gradient(circle at 10% 80%, rgba(255,255,255,.05) 0%, transparent 40%);
  pointer-events: none;
}

.cat-hero__interior {
  position: relative;
  z-index: 1;
}

.cat-hero__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family:    var(--f-titulo);
  font-size:      var(--t-xs);
  font-weight:    800;
  letter-spacing: 0.08em;
  color:          rgba(255,255,255,.75);
  text-transform: uppercase;
  margin-bottom:  var(--s-sm);
}

.cat-hero__etiqueta span { color: var(--c-amarillo); }

.cat-hero__titulo {
  font-family: var(--f-titulo);
  font-size:   clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 900;
  color:       #fff;
  line-height: 1.15;
  margin-bottom: var(--s-sm);
}

.cat-hero__titulo span { color: var(--c-amarillo); }

.cat-hero__descripcion {
  font-size:     var(--t-md);
  color:         rgba(255,255,255,.85);
  margin-bottom: var(--s-lg);
  max-width:     52ch;
}

/* ── Buscador avanzado ── */
.cat-buscador-avanzado {
  background:    rgba(255,255,255,.08);
  border:        1px solid rgba(255,255,255,.18);
  border-radius: var(--r-lg);
  padding:       var(--s-md);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  max-width: 860px;
}

.cat-buscador-avanzado__fila {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--s-sm);
  align-items: flex-end;
}

.cat-campo-grupo {
  display:        flex;
  flex-direction: column;
  gap:            0.35rem;
  flex: 1 1 200px;
  min-width: 160px;
}

.cat-campo-grupo--angosto { flex: 0 1 120px; min-width: 90px; }

.cat-campo-grupo__label {
  display:     inline-flex;
  align-items: center;
  gap:         0.35em;
  font-size:   var(--t-xs);
  font-weight: 600;
  color:       rgba(255,255,255,.85);
  cursor:      pointer;
}

.cat-campo {
  width:         100%;
  height:        44px;              /* WCAG táctil mínimo */
  padding:       0 var(--s-md);
  border:        1.5px solid rgba(255,255,255,.25);
  border-radius: var(--r-sm);
  background:    rgba(255,255,255,.95);
  color:         var(--c-texto);
  font-family:   var(--f-cuerpo);
  font-size:     var(--t-base);
  transition:    border-color var(--tr-r), box-shadow var(--tr-r);
  -webkit-appearance: none;
  appearance:    none;
}

.cat-campo::placeholder { color: var(--c-texto-tenue); }

.cat-campo:focus {
  outline:      none;
  border-color: var(--c-amarillo);
  box-shadow:   0 0 0 3px rgba(249,168,37,.35);
}

/* Quita flechas del input number en WebKit */
.cat-campo[type="number"]::-webkit-inner-spin-button,
.cat-campo[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.cat-campo[type="number"] { -moz-appearance: textfield; }

/* Botón buscar principal */
.cat-btn-buscar {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  gap:           0.5em;
  height:        44px;
  padding:       0 var(--s-lg);
  background:    var(--c-amarillo);
  color:         #1a1a1a;
  font-family:   var(--f-titulo);
  font-weight:   800;
  font-size:     var(--t-base);
  border-radius: var(--r-sm);
  border:        none;
  cursor:        pointer;
  white-space:   nowrap;
  flex:          0 0 auto;
  transition:    background var(--tr-r), transform var(--tr-r), box-shadow var(--tr-r);
}

.cat-btn-buscar:hover {
  background:  #e8971e;
  box-shadow:  var(--sh-md);
  transform:   translateY(-1px);
}

.cat-btn-buscar:active { transform: translateY(0); }

.cat-btn-buscar:focus-visible {
  outline:        3px solid #fff;
  outline-offset: 3px;
}

/* Botón limpiar filtros */
.cat-btn-limpiar {
  display:     inline-flex;
  align-items: center;
  gap:         0.4em;
  margin-top:  var(--s-sm);
  padding:     0.4em 1em;
  background:  transparent;
  color:       rgba(255,255,255,.75);
  font-size:   var(--t-xs);
  font-weight: 600;
  border:      1px solid rgba(255,255,255,.3);
  border-radius: var(--r-pill);
  cursor:      pointer;
  transition:  color var(--tr-r), border-color var(--tr-r), background var(--tr-r);
}

.cat-btn-limpiar:hover {
  color:        #fff;
  border-color: rgba(255,255,255,.6);
  background:   rgba(255,255,255,.1);
}

/* ════════════════════════════════════════════════
   FILTROS DE CATEGORÍA EN EL NAV
   (extiende enc-nav__item de encabezado.css)
   ════════════════════════════════════════════════ */
.enc-nav__item.cat-filtro--activo {
  background: var(--c-rojo);
  color:      #fff;
  border-color: var(--c-rojo);
}

/* ════════════════════════════════════════════════
   ZONA DE RESULTADOS
   ════════════════════════════════════════════════ */
.cat-resultados {
  padding-block: var(--s-lg) var(--s-xl);
}

/* ── Barra de estado ── */
.cat-barra-estado {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--s-sm);
  padding-block:   var(--s-sm);
  border-bottom:   1px solid var(--c-borde);
  margin-bottom:   var(--s-md);
}

.cat-barra-estado__info {
  font-size:   var(--t-sm);
  color:       var(--c-texto-suave);
  font-weight: 600;
}

.cat-barra-estado__controles {
  display:     flex;
  align-items: center;
  gap:         var(--s-md);
  flex-wrap:   wrap;
}

/* Select de cantidad por página */
.cat-por-pagina__label {
  display:     inline-flex;
  align-items: center;
  gap:         0.4em;
  font-size:   var(--t-sm);
  color:       var(--c-texto-suave);
  font-weight: 600;
  cursor:      pointer;
}

.cat-select {
  height:        36px;
  padding:       0 0.6em;
  border:        1.5px solid var(--c-borde);
  border-radius: var(--r-sm);
  background:    var(--c-fondo);
  color:         var(--c-texto);
  font-family:   var(--f-cuerpo);
  font-size:     var(--t-sm);
  cursor:        pointer;
  transition:    border-color var(--tr-r);
}

.cat-select:focus-visible {
  outline:      none;
  border-color: var(--c-rojo);
  box-shadow:   0 0 0 3px rgba(139,0,0,.15);
}

/* Botones de vista grilla / lista */
.cat-vista {
  display: flex;
  gap:     0.25rem;
}

.cat-vista__btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  min-width:       36px;
  border-radius:   var(--r-sm);
  border:          1.5px solid var(--c-borde);
  background:      var(--c-fondo);
  color:           var(--c-texto-tenue);
  cursor:          pointer;
  transition:      background var(--tr-r), color var(--tr-r), border-color var(--tr-r);
}

.cat-vista__btn--activo,
.cat-vista__btn:hover {
  background:   var(--c-rojo);
  color:        #fff;
  border-color: var(--c-rojo);
}

.cat-vista__btn:focus-visible {
  outline:        3px solid var(--c-rojo);
  outline-offset: 2px;
}

/* ════════════════════════════════════════════════
   ESTADOS: CARGANDO / VACÍO
   ════════════════════════════════════════════════ */
.cat-estado {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--s-md);
  text-align:      center;
  padding:         clamp(3rem, 8vw, 6rem) var(--s-lg);
  color:           var(--c-texto-suave);
}

.cat-estado__icono {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
}

.cat-estado__titulo {
  font-family: var(--f-titulo);
  font-size:   var(--t-xl);
  font-weight: 800;
  color:       var(--c-texto);
}

.cat-estado__subtexto {
  font-size:  var(--t-base);
  max-width:  40ch;
  line-height: 1.7;
}

/* Spinner de carga */
@keyframes cat-girar {
  to { transform: rotate(360deg); }
}

.cat-spinner svg {
  animation: cat-girar 0.9s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cat-spinner svg { animation: none; opacity: .5; }
}

/* Botón WhatsApp en estado vacío */
.cat-btn-ws {
  display:       inline-flex;
  align-items:   center;
  gap:           0.5em;
  padding:       0.7em 1.4em;
  background:    var(--c-verde-ws);
  color:         #fff;
  font-weight:   700;
  font-size:     var(--t-base);
  border-radius: var(--r-sm);
  transition:    background var(--tr-r), transform var(--tr-r);
  min-height:    44px;
}

.cat-btn-ws:hover {
  background: var(--c-verde-ws-h);
  transform:  translateY(-1px);
}

.cat-btn-ws:focus-visible {
  outline:        3px solid var(--c-verde-ws);
  outline-offset: 3px;
}

/* ════════════════════════════════════════════════
   GRILLA DE LIBROS
   Mobile First:
   1 col → 2 col → 3 col → 4 col → 5 col
   ════════════════════════════════════════════════ */
.cat-grilla {
  display: grid;
  gap:     clamp(0.75rem, 2vw, 1.25rem);

  /* Móvil: 1 columna */
  grid-template-columns: 1fr;

  /* Transición suave al cambiar resultados */
  transition: opacity var(--tr-n);
}

.cat-grilla--cargando { opacity: 0.4; pointer-events: none; }

/* 2 columnas desde 420px */
@media (min-width: 420px) {
  .cat-grilla { grid-template-columns: repeat(2, 1fr); }
}

/* 3 columnas desde 680px */
@media (min-width: 680px) {
  .cat-grilla { grid-template-columns: repeat(3, 1fr); }
}

/* 4 columnas desde 960px */
@media (min-width: 960px) {
  .cat-grilla { grid-template-columns: repeat(4, 1fr); }
}

/* 5 columnas desde 1200px */
@media (min-width: 1200px) {
  .cat-grilla { grid-template-columns: repeat(5, 1fr); }
}

/* ── Vista lista (clase alternativa) ── */
.cat-grilla--lista {
  grid-template-columns: 1fr;
  gap: var(--s-sm);
}

/* ════════════════════════════════════════════════
   TARJETA DE LIBRO — VISTA GRILLA
   ════════════════════════════════════════════════ */
.cat-tarjeta {
  background:    var(--c-fondo);
  border:        1.5px solid var(--c-borde);
  border-radius: var(--r-md);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  transition:
    transform   var(--tr-n),
    box-shadow  var(--tr-n),
    border-color var(--tr-n);
  /* Entrada animada */
  animation: cat-aparecer 0.3s ease both;
}

@keyframes cat-aparecer {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cat-tarjeta { animation: none; }
}

.cat-tarjeta:hover {
  transform:    translateY(-3px);
  box-shadow:   var(--sh-md);
  border-color: var(--c-rojo);
}

.cat-tarjeta:focus-within {
  outline:      3px solid var(--c-rojo);
  outline-offset: 2px;
}

/* Portada del libro */
.cat-tarjeta__portada {
  position:       relative;
  aspect-ratio:   2 / 3;        /* proporción de portada de libro */
  background:     var(--c-fondo-suave);
  overflow:       hidden;
}

.cat-tarjeta__portada img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--tr-l);
}

.cat-tarjeta:hover .cat-tarjeta__portada img {
  transform: scale(1.04);
}

/* Imagen de respaldo cuando no hay portada */
.cat-tarjeta__portada-placeholder {
  width:           100%;
  height:          100%;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;
  color:           var(--c-texto-tenue);
  font-size:       var(--t-xs);
  text-align:      center;
  padding:         var(--s-md);
}

.cat-tarjeta__portada-placeholder svg { opacity: 0.3; }

/* Badge de categoría sobre la portada */
.cat-tarjeta__badge {
  position:      absolute;
  top:           0.6rem;
  left:          0.6rem;
  padding:       0.25em 0.6em;
  border-radius: var(--r-pill);
  font-size:     0.65rem;
  font-weight:   700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height:   1;
  pointer-events: none;
}

/* Colores por categoría */
.cat-tarjeta__badge--plan-lector        { background: var(--cat-plan-bg);           color: var(--cat-plan); }
.cat-tarjeta__badge--textos-escolares   { background: var(--cat-textos-bg);         color: var(--cat-textos); }
.cat-tarjeta__badge--literatura         { background: var(--cat-literatura-bg);     color: var(--cat-literatura); }
.cat-tarjeta__badge--sagas              { background: var(--cat-sagas-bg);          color: var(--cat-sagas); }
.cat-tarjeta__badge--desarrollo         { background: var(--cat-desarrollo-bg);     color: var(--cat-desarrollo); }
.cat-tarjeta__badge--infantil           { background: var(--cat-infantil-bg);       color: #7a5c00; }
.cat-tarjeta__badge--universitarios     { background: var(--cat-universitarios-bg); color: var(--cat-universitarios); }

/* Cuerpo de la tarjeta */
.cat-tarjeta__cuerpo {
  padding:        var(--s-sm) var(--s-md) var(--s-md);
  display:        flex;
  flex-direction: column;
  flex:           1;
  gap:            0.3rem;
}

.cat-tarjeta__autor {
  font-size:      var(--t-xs);
  color:          var(--c-rojo);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
}

.cat-tarjeta__titulo {
  font-family:  var(--f-titulo);
  font-size:    var(--t-md);
  font-weight:  800;
  color:        var(--c-texto);
  line-height:  1.25;
  /* Máximo 2 líneas con ellipsis */
  display:             -webkit-box;
  -webkit-line-clamp:  2;
  -webkit-box-orient:  vertical;
  overflow:            hidden;
}

.cat-tarjeta__meta {
  font-size:  var(--t-xs);
  color:      var(--c-texto-tenue);
  overflow:   hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* Botón consultar (empuja al fondo de la tarjeta) */
.cat-tarjeta__consultar {
  display:       inline-flex;
  align-items:   center;
  gap:           0.4em;
  margin-top:    auto;
  padding-top:   var(--s-sm);
  padding-bottom: 0.1rem;
  color:         var(--c-rojo);
  font-weight:   700;
  font-size:     var(--t-sm);
  border-bottom: 2px solid transparent;
  transition:    color var(--tr-r), border-color var(--tr-r);
  min-height:    44px;
  align-self:    flex-start;
}

.cat-tarjeta__consultar:hover {
  color:        var(--c-rojo-hover);
  border-color: var(--c-rojo-hover);
}

.cat-tarjeta__consultar:focus-visible {
  outline:        3px solid var(--c-rojo);
  outline-offset: 2px;
  border-radius:  var(--r-sm);
}

/* ════════════════════════════════════════════════
   TARJETA — VISTA LISTA (más compacta, horizontal)
   ════════════════════════════════════════════════ */
.cat-grilla--lista .cat-tarjeta {
  flex-direction: row;
  align-items:    center;
  gap:            var(--s-md);
}

.cat-grilla--lista .cat-tarjeta__portada {
  width:        72px;
  min-width:    72px;
  aspect-ratio: 2 / 3;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}

.cat-grilla--lista .cat-tarjeta__cuerpo {
  flex-direction: row;
  flex-wrap:      wrap;
  align-items:    center;
  gap:            0.25rem var(--s-md);
  padding:        var(--s-sm) var(--s-md);
}

.cat-grilla--lista .cat-tarjeta__titulo {
  flex:              1 1 200px;
  -webkit-line-clamp: 1;
  font-size:         var(--t-base);
}

.cat-grilla--lista .cat-tarjeta__autor {
  flex:       1 1 140px;
  white-space: nowrap;
}

.cat-grilla--lista .cat-tarjeta__meta {
  flex:       1 1 140px;
}

.cat-grilla--lista .cat-tarjeta__badge {
  position:  static;
  flex:      0 0 auto;
  font-size: 0.6rem;
}

.cat-grilla--lista .cat-tarjeta__consultar {
  margin-top:  0;
  padding-top: 0;
  flex:        0 0 auto;
  margin-left: auto;
}

/* En lista, la imagen no se escala al hover */
.cat-grilla--lista .cat-tarjeta:hover .cat-tarjeta__portada img {
  transform: none;
}

/* ════════════════════════════════════════════════
   PAGINACIÓN
   ════════════════════════════════════════════════ */
.cat-paginacion {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--s-md);
  padding-block:   var(--s-xl);
  flex-wrap:       wrap;
}

.cat-pag__btn {
  display:       inline-flex;
  align-items:   center;
  gap:           0.4em;
  height:        44px;
  padding:       0 var(--s-md);
  background:    var(--c-fondo);
  color:         var(--c-texto);
  font-weight:   700;
  font-size:     var(--t-sm);
  border:        1.5px solid var(--c-borde);
  border-radius: var(--r-sm);
  cursor:        pointer;
  transition:    background var(--tr-r), border-color var(--tr-r), color var(--tr-r), transform var(--tr-r);
  white-space:   nowrap;
}

.cat-pag__btn:hover:not(:disabled) {
  background:   var(--c-rojo);
  border-color: var(--c-rojo);
  color:        #fff;
  transform:    translateY(-1px);
}

.cat-pag__btn:disabled {
  opacity: 0.4;
  cursor:  not-allowed;
}

.cat-pag__btn:focus-visible {
  outline:        3px solid var(--c-rojo);
  outline-offset: 2px;
}

/* Ocultamos el texto en móvil muy pequeño */
@media (max-width: 380px) {
  .cat-pag__btn-texto { display: none; }
}

/* Indicador de página central */
.cat-pag__indicador {
  display:     flex;
  align-items: center;
  gap:         0.5em;
  font-size:   var(--t-sm);
  font-weight: 600;
  color:       var(--c-texto-suave);
  white-space: nowrap;
}

/* Input para saltar a página */
.cat-pag__input {
  width:         52px;
  height:        36px;
  text-align:    center;
  border:        1.5px solid var(--c-borde);
  border-radius: var(--r-sm);
  background:    var(--c-fondo);
  color:         var(--c-texto);
  font-family:   var(--f-titulo);
  font-size:     var(--t-base);
  font-weight:   800;
  -moz-appearance: textfield;
  transition:    border-color var(--tr-r), box-shadow var(--tr-r);
}

.cat-pag__input::-webkit-inner-spin-button,
.cat-pag__input::-webkit-outer-spin-button { -webkit-appearance: none; }

.cat-pag__input:focus {
  outline:      none;
  border-color: var(--c-rojo);
  box-shadow:   0 0 0 3px rgba(139,0,0,.12);
}

/* ════════════════════════════════════════════════
   FOOTER MÍNIMO
   ════════════════════════════════════════════════ */
.cat-footer {
  background:   var(--c-fondo-suave);
  border-top:   1px solid var(--c-borde);
  padding-block: var(--s-lg);
  margin-top:    auto;
}

.cat-footer__interior {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--s-md);
}

.cat-footer__marca {
  font-size:  var(--t-sm);
  color:      var(--c-texto-suave);
  line-height: 1.5;
}

.cat-footer__volver {
  display:     inline-flex;
  align-items: center;
  gap:         0.35em;
  font-size:   var(--t-sm);
  font-weight: 700;
  color:       var(--c-rojo);
  min-height:  44px;
  transition:  color var(--tr-r);
}

.cat-footer__volver:hover { color: var(--c-rojo-hover); }

.cat-footer__volver:focus-visible {
  outline:        3px solid var(--c-rojo);
  outline-offset: 2px;
  border-radius:  var(--r-sm);
}

/* ════════════════════════════════════════════════
   MODO OSCURO
   ════════════════════════════════════════════════ */
[data-tema="oscuro"] .cat-campo {
  background: var(--c-fondo-suave);
  color:      var(--c-texto);
  border-color: var(--c-borde);
}

[data-tema="oscuro"] .cat-tarjeta {
  background: var(--c-fondo-suave);
}

[data-tema="oscuro"] .cat-tarjeta__portada {
  background: var(--c-borde);
}

[data-tema="oscuro"] .cat-buscador-avanzado {
  background: rgba(0,0,0,.3);
  border-color: rgba(255,255,255,.1);
}

[data-tema="oscuro"] .cat-pag__btn,
[data-tema="oscuro"] .cat-pag__input,
[data-tema="oscuro"] .cat-select {
  background:   var(--c-fondo-suave);
  border-color: var(--c-borde);
  color:        var(--c-texto);
}

/* ════════════════════════════════════════════════
   ACCESIBILIDAD — FOCO VISIBLE GLOBAL
   (refuerza lo de base.css para elementos propios)
   ════════════════════════════════════════════════ */
.cat-campo:focus-visible,
.cat-select:focus-visible,
.cat-pag__input:focus-visible {
  outline:        3px solid var(--c-rojo);
  outline-offset: 2px;
}

/* ════════════════════════════════════════════════
   UTILIDAD: ocultar elementos con JS
   ════════════════════════════════════════════════ */
[hidden] { display: none !important; }