/*
  Paleta y tipografia tomadas de andreslancheros.dev: acromatica, pensada
  como densidad de tinta sobre papel sin estucar. La jerarquia la marca el
  peso de la tinta (negrita, cursiva, opacidad), no el color. El unico
  acento cromatico de toda la pagina es el verde, y aparece solo en la
  confirmacion de "Copiado" — igual que en el sitio de origen el verde de
  WhatsApp aparece solo en los botones que abren WhatsApp.
*/

@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-latin-var.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Alegreya Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/alegreya-sans-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "Alegreya Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/alegreya-sans-latin-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Alegreya Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/alegreya-sans-latin-700.woff2") format("woff2");
}

:root {
  --papel: #e8e6e1;
  --alto: #f4f3f0;
  --tinta: #191919;
  --suave: #646461;
  --linea: #c9c7c1;
  --burbuja: #dad8d2;
  --exito: #10783f;
  --exito-hover: #0b5c30;
  --exito-ink: #ffffff;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(25, 25, 25, 0.06), 0 3px 10px rgba(25, 25, 25, 0.05);
  --font-display: 'Archivo Variable', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Alegreya Sans', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #131314;
    --alto: #1c1c1e;
    --tinta: #e9e8e4;
    --suave: #96958f;
    --linea: #2c2c2e;
    --burbuja: #2a2a2c;
    --exito: #25d366;
    --exito-hover: #4ade8b;
    --exito-ink: #131314;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font-body);
  background: var(--papel);
  color: var(--tinta);
  line-height: 1.6;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
}

body > main { flex: 1 0 auto; }
body > .site-footer { flex-shrink: 0; }

::selection { background: var(--burbuja); color: var(--tinta); }

a { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--linea); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

/* Mismo canvas ancho en toda la guia. El indice de especimenes (categoria)
   y la portada llenan ese ancho de forma pareja (grid, contenido centrado).
   La ficha de una etiqueta es una sola columna de lectura: sin recentrarla,
   el titulo y el codigo quedarian pegados a la izquierda de una caja mucho
   mas ancha. La regla combinada de abajo la recentra sin depender del
   orden en la hoja de estilos. */
.container-wide {
  max-width: 1320px;
}

.container-wide.tag-detail {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* Header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
  background: var(--alto);
  border-bottom: 1px solid var(--linea);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 108%;
  font-size: 1.15rem;
  color: var(--tinta);
  text-decoration: none;
}
.brand-logo {
  display: block;
  height: 40px;
  width: auto;
}
.brand:hover { color: var(--suave); }

.main-nav { display: flex; gap: 4px; }

.nav-link {
  padding: 6px 12px;
  border-radius: var(--radius);
  color: var(--suave);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
}
.nav-link:hover { background: var(--burbuja); }
.nav-link.active { background: var(--tinta); color: var(--papel); }
.nav-link.disabled { opacity: 0.4; pointer-events: none; }

/* Footer */
.site-footer {
  text-align: center;
  padding: 24px 20px;
  color: var(--suave);
  font-size: 0.85rem;
  border-top: 1px solid var(--linea);
}

/* Home */
.hero { text-align: center; padding: 44px 0 28px; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 0.94;
  letter-spacing: -0.02em;
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  margin-bottom: 10px;
}
.hero p { font-style: italic; color: var(--suave); max-width: 560px; margin: 0 auto; }

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 32px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.category-card {
  display: block;
  background: var(--alto);
  border: 1px solid var(--linea);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  color: var(--tinta);
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.category-card:hover { transform: translateY(-2px); border-color: var(--tinta); }
.category-card.disabled { opacity: 0.5; cursor: default; }
.category-card.disabled:hover { transform: none; border-color: var(--linea); }

.category-card h2 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 700; font-stretch: 108%; font-size: 1.2rem; }
.category-card .tagline { font-style: italic; color: var(--suave); font-size: 0.9rem; margin: 0 0 8px; }
.category-card .description { color: var(--suave); font-size: 0.9rem; margin: 0 0 12px; }
.category-card .status {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tinta);
}

/* Category / tag grid */
.category-intro { margin-bottom: 24px; }
.category-intro h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 116%;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
  font-size: clamp(1.8rem, 4vw, 2.3rem);
}
.category-intro p { font-style: italic; color: var(--suave); max-width: 640px; }

.tag-search {
  width: 100%;
  max-width: 480px;
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--linea);
  background: var(--alto);
  color: var(--tinta);
  font-family: var(--font-body);
  font-size: 0.98rem;
}
.tag-search:focus { outline: 2px solid var(--tinta); outline-offset: 1px; }
.tag-search::placeholder { color: var(--suave); }

.group-title {
  margin: 32px 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 106%;
  font-size: 1.05rem;
  color: var(--tinta);
}

.tag-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 900px) {
  .tag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .tag-grid { grid-template-columns: 1fr; }
}

.tag-card {
  display: block;
  background: var(--alto);
  border: 1px solid var(--linea);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--tinta);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.tag-card:hover { border-color: var(--tinta); transform: translateY(-1px); }
.tag-label { font-family: var(--font-mono); color: var(--tinta); font-weight: 700; }
.tag-desc { margin: 6px 0 0; font-size: 0.85rem; color: var(--suave); }

.no-results { text-align: center; font-style: italic; color: var(--suave); margin-top: 24px; }

/* Boton de volver: a la categoria desde una ficha, al inicio desde el indice */
.back-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  margin-bottom: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--linea);
  background: var(--alto);
  color: var(--tinta);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  box-shadow: var(--shadow);
}
.back-nav:hover { border-color: var(--tinta); }

/* Tag detail */
.tag-title { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tag-title code { font-family: var(--font-mono); font-weight: 700; font-size: 1.6rem; color: var(--tinta); }
.tag-description { color: var(--suave); margin-bottom: 20px; }

.badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: var(--radius);
  border: 1px solid var(--tinta);
}
.badge-warn { background: var(--tinta); color: var(--papel); }

.note {
  background: var(--burbuja);
  color: var(--tinta);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  font-style: italic;
  border-left: 3px solid var(--tinta);
}

.attributes { margin-bottom: 24px; max-width: 820px; }
.attr-table { width: 100%; border-collapse: collapse; background: var(--alto); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.attr-table th, .attr-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--linea); font-size: 0.9rem; }
.attr-table th { color: var(--suave); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.attr-table td:first-child code { font-family: var(--font-mono); font-weight: 700; }
.attr-table tr:last-child td { border-bottom: none; }

.attributes h2,
.preview-block h2,
.code-block h2 {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--suave);
  margin-bottom: 10px;
}

.preview-block, .code-block { margin-bottom: 28px; max-width: 820px; }

.preview {
  width: 100%;
  min-height: 180px;
  height: 220px;
  resize: vertical;
  overflow: auto;
  border: 1px solid var(--linea);
  border-radius: var(--radius);
  background: var(--alto);
}

/* Pager */
.tag-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 24px;
}

.pager-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--linea);
  background: var(--alto);
  color: var(--tinta);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  box-shadow: var(--shadow);
  max-width: 40%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pager-link:hover { border-color: var(--tinta); }
.pager-disabled { opacity: 0.4; cursor: default; }
.pager-arrow { font-size: 1.05rem; line-height: 1; color: var(--suave); }
.pager-text { overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); }

.pager-position {
  font-size: 0.78rem;
  color: var(--suave);
  white-space: nowrap;
}

/* Not found */
.not-found { text-align: center; padding: 80px 0; }
.not-found h1 { font-family: var(--font-display); font-weight: 800; font-stretch: 115%; font-size: 3.2rem; margin: 0; color: var(--tinta); }
.back-link { display: inline-block; margin-top: 16px; color: var(--tinta); }

@media (prefers-reduced-motion: reduce) {
  .tag-card, .category-card { transition: none; }
}