/* ==========================================================================
   Librería TU-CO — hoja de estilos única
   1. Tokens
   2. Base
   3. Utilidades
   4. Layout global
   5. Componentes
   6. Estados e interacción
   7. Responsive
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
  --color-fondo: #F3F6F2;
  --color-superficie: #FFFFFF;
  --color-superficie-alt: #E7EEE9;
  --color-texto: #14211F;
  --color-texto-suave: #465A55;
  --color-borde: #B9C8C2;
  --color-borde-control: #6F8B83;
  --color-primario: #0F5C57;
  --color-primario-oscuro: #0A3F3B;
  --color-primario-suave: #D8E8E4;
  --color-acento: #8A4B00;
  --color-acento-suave: #F6E4CC;
  --color-exito: #1E6B3C;
  --color-exito-suave: #DFF0E4;
  --color-error: #A3231C;
  --color-error-suave: #FBE3E1;
  --color-foco: #0B4F8A;
  --color-foco-inverso: #FFD166;

  --fuente-titulos: Georgia, "Times New Roman", serif;
  --fuente-cuerpo: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --texto-xs: 0.75rem;
  --texto-s: 0.875rem;
  --texto-m: 1rem;
  --texto-l: 1.125rem;
  --texto-xl: 1.375rem;
  --texto-2xl: 1.75rem;
  --texto-3xl: 2.25rem;
  --interlinea: 1.6;
  --ancho-lectura: 80ch;

  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-5: 1.5rem;
  --espacio-6: 2rem;
  --espacio-7: 3rem;
  --espacio-8: 4rem;

  --ancho-contenido: 75rem;

  --radio-s: 0.25rem;
  --radio-m: 0.5rem;
  --radio-l: 1rem;
  --radio-pastilla: 999px;

  --sombra-1: 0 1px 2px rgba(10, 63, 59, 0.08), 0 4px 12px rgba(10, 63, 59, 0.06);
  --sombra-2: 0 2px 6px rgba(10, 63, 59, 0.12), 0 16px 32px rgba(10, 63, 59, 0.14);

  --foco-grosor: 3px;
  --foco-offset: 2px;
}

/* 2. Base ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
p,
ul,
fieldset,
legend,
figure,
blockquote {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-m);
  line-height: var(--interlinea);
  text-align: left;
}

h1,
h2,
h3 {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primario-oscuro);
  text-wrap: balance;
}

h1 {
  font-size: var(--texto-2xl);
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--texto-xl);
}

h3 {
  font-size: var(--texto-l);
}

p {
  max-width: var(--ancho-lectura);
}

a {
  color: var(--color-primario);
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

img {
  max-width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
}

[hidden] {
  display: none !important;
}

/* 3. Utilidades ------------------------------------------------------------ */

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 4. Layout global --------------------------------------------------------- */

header,
footer {
  padding-inline: max(var(--espacio-4), calc((100% - var(--ancho-contenido)) / 2));
}

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--espacio-5);
  row-gap: var(--espacio-2);
  background: var(--color-primario-oscuro);
  padding-block: var(--espacio-5) var(--espacio-3);
  border-bottom: 4px solid var(--color-acento-suave);
}

.marca {
  max-width: none;
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--color-superficie);
}

.navegacion {
  flex: 1 1 100%;
  background: var(--color-primario-oscuro);
}

.navegacion ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--espacio-1);
}

.navegacion a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--espacio-1) var(--espacio-3);
  border-radius: var(--radio-s);
  color: var(--color-superficie);
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.navegacion a:hover {
  background: var(--color-primario);
}

main {
  flex: 1 0 auto;
  width: min(100% - 2 * var(--espacio-4), var(--ancho-contenido));
  margin-inline: auto;
  padding-block: var(--espacio-5) var(--espacio-7);
}

main > h1 {
  margin-bottom: var(--espacio-5);
}

main > section + section {
  margin-top: var(--espacio-6);
}

main > section {
  min-width: 0;
}

main h2 {
  margin-bottom: var(--espacio-4);
  padding-bottom: var(--espacio-2);
  border-bottom: 1px solid var(--color-borde);
}

footer {
  flex-shrink: 0;
  padding-block: var(--espacio-5);
  background: var(--color-superficie-alt);
  border-top: 1px solid var(--color-borde);
  color: var(--color-texto-suave);
  font-size: var(--texto-s);
}

footer p {
  max-width: none;
}

/* 5. Componentes ----------------------------------------------------------- */

/* Formularios */

.formulario {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espacio-4);
  padding: var(--espacio-4);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-1);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  min-width: 0;
  max-width: none;
}

.campo--completo {
  grid-column: 1 / -1;
}

.campo label,
.formulario--busqueda label {
  font-weight: 600;
}

.campo > p:not(.campo) {
  font-size: var(--texto-s);
  line-height: 1.5;
  color: var(--color-texto-suave);
  max-width: none;
}

.campo input,
.campo select,
.campo textarea,
.formulario--busqueda input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: var(--espacio-2) var(--espacio-3);
  border: 1px solid var(--color-borde-control);
  border-radius: var(--radio-s);
  background: var(--color-superficie);
  color: var(--color-texto);
  font: inherit;
  line-height: 1.4;
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover,
.formulario--busqueda input:hover {
  border-color: var(--color-texto-suave);
}

.campo select[multiple] {
  min-height: 8rem;
  padding: var(--espacio-1);
}

.campo textarea {
  resize: vertical;
}

fieldset.campo {
  gap: var(--espacio-2);
  padding: var(--espacio-4);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-m);
}

fieldset.campo legend {
  padding-inline: var(--espacio-2);
  font-weight: 600;
}

.formulario--busqueda {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--espacio-3);
}

.formulario--busqueda label {
  flex: 0 0 auto;
}

.formulario--busqueda input {
  flex: 1 1 16rem;
  width: auto;
}

/* Botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  width: 100%;
  min-height: 44px;
  padding: var(--espacio-2) var(--espacio-4);
  border: 1px solid transparent;
  border-radius: var(--radio-s);
  font-family: inherit;
  font-size: var(--texto-m);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.boton--primario {
  background: var(--color-primario);
  border-color: var(--color-primario);
  color: var(--color-superficie);
}

.boton--primario:hover {
  background: var(--color-primario-oscuro);
  border-color: var(--color-primario-oscuro);
}

.boton--secundario {
  background: var(--color-superficie);
  border-color: var(--color-primario);
  color: var(--color-primario);
}

.boton--secundario:hover {
  background: var(--color-primario-suave);
}

.boton--peligro {
  background: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-superficie);
}

.boton--peligro:hover {
  filter: brightness(0.92);
}

.boton--pequeno {
  padding: var(--espacio-1) var(--espacio-3);
  font-size: var(--texto-s);
}

/* Catálogo y tarjetas */

.grilla-catalogo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: var(--espacio-4);
  margin-top: var(--espacio-4);
}

.grilla-catalogo:empty {
  display: none;
}

.tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  min-width: 0;
  padding: var(--espacio-4);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-1);
}

.tarjeta:empty {
  display: none;
}

.tarjeta img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radio-s);
  background: var(--color-superficie-alt);
}

.tarjeta-titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-l);
  line-height: 1.3;
  color: var(--color-primario-oscuro);
  overflow-wrap: anywhere;
}

.tarjeta-isbn,
.tarjeta-editorial,
.tarjeta-genero,
.tarjeta-autores {
  max-width: none;
  font-size: var(--texto-s);
  line-height: 1.5;
  color: var(--color-texto-suave);
  overflow-wrap: anywhere;
}

.tarjeta-isbn {
  font-size: var(--texto-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.tarjeta-precio {
  margin-top: auto;
  padding-top: var(--espacio-2);
  border-top: 1px solid var(--color-borde);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primario-oscuro);
  font-variant-numeric: tabular-nums;
}

.tarjeta--detalle {
  max-width: 60rem;
}

/* Badges */

.badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 0.125rem var(--espacio-2);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pastilla);
  background: var(--color-superficie-alt);
  color: var(--color-texto);
  font-size: var(--texto-s);
  font-weight: 600;
  line-height: 1.4;
}

.badge--genero,
.tarjeta-genero.badge {
  border-color: var(--color-acento);
  background: var(--color-acento-suave);
  color: var(--color-acento);
}

.badge--total {
  justify-content: center;
  min-width: 4rem;
  padding: var(--espacio-1) var(--espacio-3);
  border-color: var(--color-primario);
  background: var(--color-primario-suave);
  color: var(--color-primario-oscuro);
  font-size: var(--texto-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Tablas */

.tabla-contenedor {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-m);
  background: var(--color-superficie);
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-m);
}

.tabla caption {
  padding: var(--espacio-3) var(--espacio-4);
  border-bottom: 1px solid var(--color-borde);
  background: var(--color-superficie);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-l);
  font-weight: 700;
  text-align: left;
  color: var(--color-primario-oscuro);
}

.tabla th,
.tabla td {
  padding: var(--espacio-3) var(--espacio-4);
  border-bottom: 1px solid var(--color-borde);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.tabla thead th {
  background: var(--color-superficie-alt);
  font-size: var(--texto-s);
  font-weight: 700;
  color: var(--color-texto);
  white-space: nowrap;
}

.tabla tbody tr:nth-child(even) {
  background: var(--color-fondo);
}

.tabla tbody tr:last-child th,
.tabla tbody tr:last-child td {
  border-bottom: 0;
}

.tabla--ancha {
  min-width: 44rem;
}

.tabla a {
  font-weight: 600;
  text-underline-offset: 3px;
}

/* Mensajes */

.mensaje {
  max-width: var(--ancho-lectura);
  margin-block: var(--espacio-4);
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-m);
  background: var(--color-superficie);
  color: var(--color-texto);
  line-height: var(--interlinea);
}

.mensaje--vacio {
  border-style: dashed;
  background: transparent;
  color: var(--color-texto-suave);
  font-style: italic;
}

.mensaje--info {
  border-left: 4px solid var(--color-primario);
  background: var(--color-primario-suave);
  color: var(--color-texto);
}

.mensaje--error {
  border: 1px solid var(--color-error);
  border-left-width: 6px;
  background: var(--color-error-suave);
  color: var(--color-error);
  font-weight: 600;
}

.mensaje--exito {
  border: 1px solid var(--color-exito);
  border-top-width: 4px;
  background: var(--color-exito-suave);
  color: var(--color-exito);
  font-weight: 600;
}

.mensaje--aviso {
  border: 1px solid var(--color-acento);
  border-left-width: 6px;
  background: var(--color-acento-suave);
  color: var(--color-acento);
  font-weight: 600;
}

.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"],
.campo textarea[aria-invalid="true"],
.formulario--busqueda input[aria-invalid="true"] {
  border-width: 3px;
  border-color: var(--color-error);
}

/* 6. Estados e interacción ------------------------------------------------- */

:where(a, button, input, select, textarea, [tabindex="0"]):focus-visible {
  outline: var(--foco-grosor) solid var(--color-foco);
  outline-offset: var(--foco-offset);
}

.navegacion a:focus-visible,
.salto-contenido:focus,
.salto-contenido:focus-visible {
  outline-color: var(--color-foco-inverso);
}

main:focus-visible {
  outline: var(--foco-grosor) solid var(--color-foco);
  outline-offset: var(--foco-offset);
}

.navegacion a[aria-current="page"] {
  font-weight: 700;
  background: var(--color-primario);
  box-shadow: inset 0 -3px 0 var(--color-acento-suave);
}

.salto-contenido:focus,
.salto-contenido:focus-visible {
  position: fixed;
  top: var(--espacio-2);
  left: var(--espacio-2);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 44px;
  height: auto;
  margin: 0;
  padding: var(--espacio-2) var(--espacio-4);
  overflow: visible;
  clip-path: none;
  white-space: normal;
  background: var(--color-primario-oscuro);
  border-radius: var(--radio-s);
  box-shadow: var(--sombra-2);
  color: var(--color-superficie);
  font-weight: 600;
  text-decoration: none;
  outline-offset: 0;
}

/* 7. Responsive ------------------------------------------------------------ */

@media (min-width: 48rem) {
  main {
    padding-block: var(--espacio-6) var(--espacio-8);
  }

  .formulario {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espacio-5);
    padding: var(--espacio-5);
  }

  .formulario > fieldset,
  .formulario > .tabla-contenedor,
  .formulario > .mensaje,
  .formulario > .boton {
    grid-column: 1 / -1;
  }

  .formulario > .boton {
    justify-self: start;
  }

  .boton {
    width: auto;
  }

  .navegacion {
    flex: 0 1 auto;
  }

  .navegacion ul {
    flex-wrap: nowrap;
  }

  .grilla-catalogo {
    gap: var(--espacio-5);
  }
}

@media (min-width: 80rem) {
  h1 {
    font-size: var(--texto-3xl);
  }

  header {
    padding-block: var(--espacio-6) var(--espacio-3);
  }

  main {
    padding-block: var(--espacio-7) var(--espacio-8);
  }

  main > section + section {
    margin-top: var(--espacio-7);
  }

  .formulario {
    padding: var(--espacio-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .boton,
  .navegacion a {
    transition-duration: 0.01ms;
  }
}

/* Paginación */

.paginacion {
  display: flex;
  align-items: center;
  gap: var(--espacio-4);
  margin-block: var(--espacio-4);
}
.paginacion[hidden],
.mensaje[hidden] {
  display: none;
}