/* Arbopedia components.
   Two surface treatments exist — plate (fill + house shadow) and outline (2px ink,
   no shadow) — and they are mutually exclusive. Never both on one element. */

/* ---------------------------------------------------------------- etiqueta */
/* The condensed uppercase micro-label. Smaller size means wider tracking. */

.ap-label {
  display: inline-block;
  font-family: var(--font-body);
  font-stretch: var(--label-stretch);
  font-weight: var(--label-weight);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--noche);
}
.ap-label--xs { font-size: 9.5px; letter-spacing: .14em; }
.ap-label--sm { font-size: 10px; letter-spacing: .14em; }
.ap-label--lg { font-size: 13px; letter-spacing: .1em; }
.ap-label--cream { color: var(--crema); }
.ap-label--muted { opacity: .7; }

/* A section rule: the label with the 2px underline beneath it. */
.ap-label--rule {
  display: block;
  padding-bottom: 7px;
  border-bottom: var(--borde-fuerte);
}
.ap-label--rule.ap-label--cream { border-bottom-color: var(--crema-borde); }

/* ---------------------------------------------------------------- boton */

.ap-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radio-pill);
  padding: 12px 18px;
  font-family: var(--font-body);
  font-stretch: var(--label-stretch);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transicion-boton);
  border: 2px solid transparent;
  background: var(--ambar);
  color: var(--noche);
}
.ap-button:hover { transform: var(--hover-boton); }
.ap-button--sm { padding: 9px 15px; font-size: 10.5px; }
.ap-button--lg { padding: 15px 26px; font-size: 13px; }

.ap-button--amber { background: var(--ambar); color: var(--noche); border-color: var(--ambar); }
.ap-button--night { background: var(--noche); color: var(--ambar); border-color: var(--noche); }
.ap-button--outline { background: transparent; color: var(--noche); border-color: var(--linea-fuerte); }
.ap-button--cream { background: var(--crema); color: var(--noche); border-color: var(--crema); }
/* On dark grounds the outline button borrows the cream ink — but a cream plate
   nested inside a dark section must win it back, or the button turns invisible. */
.ap-on-dark .ap-button--outline {
  color: var(--crema);
  border-color: var(--crema-borde);
}
.ap-on-dark .ap-hero__plate .ap-button--outline,
.ap-on-dark .ap-card--plate .ap-button--outline,
.ap-on-dark .ap-card--outline .ap-button--outline {
  color: var(--noche);
  border-color: var(--linea-fuerte);
}

.ap-button[disabled] { opacity: .4; cursor: not-allowed; }
.ap-button[disabled]:hover { transform: none; }

/* ---------------------------------------------------------------- pastilla */
/* Pressed inverts to solid noche with ambar text. One active pattern, everywhere. */

.ap-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  border: var(--borde-pill-resting);
  background: transparent;
  color: var(--noche);
  border-radius: var(--radio-pill);
  padding: 8px 14px;
  font-family: var(--font-body);
  font-stretch: var(--label-stretch);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.ap-pill__count { opacity: .65; letter-spacing: .1em; font-size: 10px; }
.ap-pill[aria-current] {
  background: var(--noche);
  color: var(--ambar);
  border-color: var(--noche);
}
.ap-pill--wide { justify-content: space-between; width: 100%; }
.ap-pill--square {
  border-radius: var(--radio-suave);
  padding: 9px 0;
  justify-content: center;
  letter-spacing: 0;
}

/* Removable chip above the results grid. */
.ap-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: var(--noche);
  color: var(--ambar);
  border-radius: var(--radio-pill);
  padding: 8px 14px;
  font-family: var(--font-body);
  font-stretch: var(--label-stretch);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.ap-chip__x { font-size: 14px; line-height: 1; }

/* ---------------------------------------------------------------- insignia */

.ap-badge {
  display: inline-block;
  border: 2px solid transparent;
  border-radius: var(--radio-pill);
  padding: 4px 12px 5px;
  font-family: var(--font-body);
  font-stretch: var(--label-stretch);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ap-badge--verified { background: var(--verde); color: var(--crema); }
/* The design system says --rojo survives "as a text-free accent and as the UICN
   danger badge" — but this badge does carry text, and crema on rojo measures
   3.39:1 (noche on rojo is 4.46:1; both fail AA for 10px type). --colorin is the
   system's own AA-safe lift of rojo, and noche on it measures 5.45:1. Same alarm,
   verified pairing. See docs/decisions/0008. */
.ap-badge--danger { background: var(--colorin); color: var(--noche); }
.ap-badge--native { background: transparent; color: var(--noche); border: var(--borde-pill-resting); }
.ap-badge--introduced { background: var(--relleno-suave); color: var(--noche); }
.ap-badge--pending {
  background: transparent;
  color: var(--noche);
  border: 2px dashed var(--borde-pill);
  font-family: var(--font-mono);
  font-stretch: normal;
  font-weight: 500;
  letter-spacing: .04em;
}

/* ---------------------------------------------------------------- capsula */

.ap-search {
  display: flex;
  align-items: center;
  background: var(--noche);
  border-radius: var(--radio-pill);
  padding: 6px 6px 6px 20px;
  box-shadow: var(--sombra-capsula);
  position: relative;
}
.ap-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--crema);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  padding: 11px 0;
  outline: none;
}
.ap-search__input::placeholder { color: var(--crema); opacity: .55; }
.ap-search__input::-webkit-search-cancel-button { filter: invert(1); }

/* Typeahead panel. */
.ap-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 70;
  background: var(--crema);
  border: var(--borde-fuerte);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  box-shadow: var(--sombra-tarjeta);
}
.ap-suggestions:empty { display: none; }
.ap-suggestion {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 16px;
  text-decoration: none;
  border-bottom: 1px solid var(--linea-suave);
}
.ap-suggestion:last-child { border-bottom: 0; }
.ap-suggestion:hover,
.ap-suggestion:focus { background: var(--noche); color: var(--crema); }
.ap-suggestion__name { font-weight: 700; font-size: 15px; }
.ap-suggestion__bin { font-style: italic; font-size: 13px; opacity: .75; }

/* ---------------------------------------------------------------- tarjeta */

.ap-card {
  border-radius: var(--radio-tarjeta);
  padding: 18px 20px;
  background: var(--crema);
  color: var(--noche);
  border: 2px solid transparent;
}
.ap-card--plate { box-shadow: var(--sombra-tarjeta); }
.ap-card--outline { border: var(--borde-fuerte); box-shadow: none; }
.ap-card--empty {
  background: transparent;
  border: 2px dashed rgba(16, 32, 26, .45);
  box-shadow: none;
}
.ap-card--dark {
  background: var(--selva);
  color: var(--crema);
  box-shadow: var(--sombra-tarjeta);
}

/* ---------------------------------------------------------------- tarjeta de especie */

.ap-species {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radio-tarjeta);
  padding: 17px;
  min-height: 342px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  background: var(--species-bg, var(--verde));
  color: var(--species-ink, var(--crema));
  box-shadow: var(--sombra-tarjeta);
  transition: var(--transicion-tarjeta);
}
.ap-species:hover { transform: var(--hover-tarjeta); }

/* The arced photo window, bleeding 8px past the bottom-right corner. */
.ap-species__photo {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 40%;
  aspect-ratio: 3 / 4.8;
  border-radius: 999px 999px 14px 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 10px;
  text-align: center;
  background: color-mix(in srgb, currentColor 16%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 16%, transparent);
}
.ap-species__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Duotone: the photograph supplies the light, the card supplies the colour.
     `luminosity` and not `color`, which is the same trade the other way round —
     hue from the photo over a flat backdrop with no shading of its own, so the
     result is a wash of colour with every detail gone. The prototype used
     `color` correctly, on a tint overlay ABOVE the photo; porting that
     declaration onto the image itself inverted it, and it looked fine for as
     long as there were no photographs. */
  mix-blend-mode: luminosity;
  transition: mix-blend-mode .22s ease;
}
/* Hover shows the photograph as it was taken. */
.ap-species:hover .ap-species__photo img { mix-blend-mode: normal; }
.ap-species__no-photo {
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .9;
}

/* The three wrappers exist for the 620px two-column restack; on desktop they are
   plain stacked blocks so the card reads as one column. */
.ap-species__text,
.ap-species__side,
.ap-species__foot {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Pushes the height + bloom bar to the foot of the card. */
.ap-species__side { margin-top: auto; }

.ap-species__family {
  font-stretch: var(--label-stretch);
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  opacity: .8;
}
.ap-species__name {
  font-family: var(--font-display);
  font-size: var(--display-card);
  line-height: .95;
  margin: 7px 0 3px;
  max-width: 88%;
}
.ap-species__bin {
  font-style: italic;
  font-weight: 500;
  font-size: 13.5px;
  max-width: 60%;
  line-height: 1.25;
}
.ap-species__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 11px;
  max-width: 56%;
}
.ap-species__wordmark {
  border: 1.5px solid currentColor;
  border-radius: var(--radio-pill);
  padding: 2px 8px;
  font-stretch: var(--label-stretch);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ap-species__measure {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 12px;
  max-width: 56%;
}
.ap-species__height {
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 1;
  white-space: nowrap;
}
.ap-species__height-pending {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  line-height: 1.6;
  opacity: .75;
  white-space: nowrap;
}
.ap-species__foliage {
  font-stretch: var(--label-stretch);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: .11em;
  text-transform: uppercase;
  line-height: 1.3;
}
.ap-species__months {
  display: flex;
  gap: 2px;
  margin-top: 9px;
  max-width: 56%;
}
.ap-species__month {
  flex: 1;
  height: 7px;
  border-radius: 2px;
  background: color-mix(in srgb, currentColor 22%, transparent);
}
.ap-species__month--on { background: currentColor; }
.ap-species__note {
  margin-top: 5px;
  font-stretch: var(--label-stretch);
  font-weight: 800;
  font-size: 8.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  max-width: 56%;
  line-height: 1.35;
}

/* ---------------------------------------------------------------- banda de floracion */

.ap-band { display: grid; gap: 6px; }
.ap-band__cells { display: flex; gap: 4px; }
.ap-band__cell {
  flex: 1;
  height: 14px;
  border-radius: 4px;
  border: 0;
  padding: 0;
  display: block;
  background: var(--relleno-suave);
}
.ap-band__cell--on { background: var(--band-color, var(--ambar)); }
.ap-band__cell[aria-current] { outline: 2px solid var(--noche); outline-offset: 1px; }
button.ap-band__cell { cursor: pointer; }
.ap-band__months {
  display: flex;
  gap: 4px;
  font-family: var(--font-body);
  font-stretch: var(--label-stretch);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .6;
}
.ap-band__months span { flex: 1; text-align: center; }

/* ---------------------------------------------------------------- fila de taxonomia */

.ap-taxon {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--linea-suave);
}
.ap-taxon__value { font-weight: 600; font-size: 15px; }
.ap-taxon__value--italico { font-style: italic; }

/* ---------------------------------------------------------------- placa de fuentes */

.ap-sources {
  border: var(--borde-fuerte);
  border-radius: var(--radio-tarjeta);
  padding: 18px 20px 16px;
  background: var(--crema);
}
.ap-sources__list {
  margin: 12px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  list-style: decimal;
}
.ap-sources__list li { font-size: 13.5px; font-weight: 500; line-height: 1.4; }
.ap-sources__revised {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 2px solid var(--linea-suave);
  font-family: var(--font-mono);
  font-size: 12px;
  opacity: .7;
}

/* ---------------------------------------------------------------- escala humana */

.ap-scale__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ap-scale svg { width: 100%; height: auto; display: block; margin-top: 8px; }

/* ---------------------------------------------------------------- mapa */

.ap-map svg { width: 100%; height: auto; display: block; margin-top: 10px; }
.ap-map__dot { cursor: pointer; }
.ap-map__dot:hover { r: 7; }

/* ---------------------------------------------------------------- navegacion */

.ap-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--selva);
  color: var(--crema);
}
.ap-nav__inner {
  max-width: var(--ancho-ficha);
  margin: 0 auto;
  padding: 0 22px;
  min-height: var(--alto-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.ap-nav--wide .ap-nav__inner { max-width: var(--ancho-directorio); }
.ap-wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--crema);
}
.ap-wordmark__mx { color: var(--ambar); }
.ap-nav__links { display: flex; gap: 22px; align-items: center; }
.ap-nav__link {
  font-stretch: var(--label-stretch);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-decoration: none;
  color: var(--crema);
}
.ap-nav__link[aria-current] { color: var(--ambar); font-weight: 800; }

/* Mobile disclosure — hidden until the links stop fitting. */
.ap-nav__menu { display: none; position: relative; }
.ap-nav__menu-button {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 15px;
  border: 2px solid var(--ambar);
  background: var(--ambar);
  color: var(--noche);
  border-radius: var(--radio-pill);
  font-stretch: var(--label-stretch);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.ap-nav__menu-button::-webkit-details-marker { display: none; }
.ap-nav__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 80;
  background: var(--selva);
  border: 2px solid var(--crema-borde);
  border-radius: var(--radio-tarjeta);
  padding: 8px;
  display: grid;
  gap: 2px;
  min-width: 190px;
}
.ap-nav__panel .ap-nav__link {
  padding: 12px 14px;
  border-radius: var(--radio-suave);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.ap-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-stretch: var(--label-stretch);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .9;
}
.ap-breadcrumbs a { text-decoration: none; }

/* ---------------------------------------------------------------- pie */

.ap-footer { background: var(--selva); color: var(--crema); }
.ap-footer__inner {
  max-width: var(--ancho-ficha);
  margin: 0 auto;
  padding: 48px 22px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: 34px;
}
.ap-footer__wordmark { font-family: var(--font-display); font-size: 26px; }
.ap-footer__tagline { margin-top: 10px; font-weight: 500; font-size: 14.5px; max-width: 38ch; line-height: 1.45; }
.ap-footer__column { display: grid; gap: 7px; margin-top: 12px; }
.ap-footer__column a { text-decoration: none; font-weight: 600; font-size: 14.5px; }
.ap-footer__licence-bar { border-top: 1px solid var(--crema-linea); }
.ap-footer__licence {
  max-width: var(--ancho-ficha);
  margin: 0 auto;
  padding: 16px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  opacity: .7;
}