/* Botones ------------------------------------------------------------------ */

.button {
  font-family: var(--mono);
  font-size: var(--mono-md);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-align: center;
  padding: 15px 0;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  transition: background .14s ease-out, border-color .14s ease-out, color .14s ease-out;
}

.button--block { display: block; width: 100%; }

.button--ink:hover,
.button--ink:active {
  background: var(--green);
  border-color: var(--green);
}

.button--outline {
  background: transparent;
  border-color: var(--rule-35);
  color: var(--ink);
  font-size: var(--mono-meta);
  letter-spacing: var(--track-chip);
  padding: 12px 0;
}

.button--outline:hover,
.button--outline:active { border-color: var(--ink); }

.button--rust:hover,
.button--rust:active {
  border-color: var(--rust);
  color: var(--rust);
}

.button--small {
  flex: 1;
  background: transparent;
  border-color: var(--rule-35);
  color: var(--ink);
  font-size: var(--mono-meta);
  letter-spacing: var(--track-chip);
  padding: 10px 0;
}

.button--small:hover,
.button--small:active {
  background: var(--ink);
  color: var(--paper);
}

/* Botones cuadrados de acción de una fila */
.icon-button {
  width: 34px;
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-30);
  background: transparent;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  color: var(--ink);
  transition: background .14s ease-out, border-color .14s ease-out, color .14s ease-out;
}

.icon-button--swap:hover,
.icon-button--swap:active {
  border-color: var(--rust);
  color: var(--rust);
}

.icon-button--log:hover,
.icon-button--log:active {
  background: var(--ink);
  color: var(--paper);
}

/* Fichas -------------------------------------------------------------------- */

.chip {
  display: inline-block;
  border: 1px solid var(--rule-40);
  background: transparent;
  color: var(--ink-75);
  font-family: var(--serif);
  font-size: var(--size-chip);
  padding: var(--sp-7) 11px;
}

.chip.is-active {
  background: var(--ink);
  color: var(--paper);
}

.chip--liked { border-color: var(--green); color: var(--green-dark); }
.chip--avoided { border-color: var(--rust); color: var(--rust-dark); text-decoration: line-through; }

/* Estampas ------------------------------------------------------------------ */

.stamp {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--paper-thumb);
}

/* Campos -------------------------------------------------------------------- */

.field {
  width: 100%;
  border: 1px solid var(--rule-35);
  border-radius: var(--radius);
  background: transparent;
  padding: 12px 13px;
  font-family: var(--mono);
  font-size: var(--mono-lg);
  color: var(--ink);
  margin-top: var(--sp-14);
}

.field::placeholder { color: var(--ink-40); }

/* Insignia de racha del encabezado */
.badge {
  border: 1px solid var(--rule-40);
  padding: 3px var(--sp-7);
  font-family: var(--mono);
  font-size: var(--mono-kicker);
  letter-spacing: var(--track-kicker);
  color: var(--ink-70);
}

/* Aviso --------------------------------------------------------------------- */

.toast {
  position: absolute;
  left: var(--sp-16);
  right: var(--sp-16);
  bottom: 82px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  background: var(--ink);
  color: var(--paper);
  padding: 13px 15px;
  animation: fadein .2s ease-out;
}

.toast__kicker {
  font-family: var(--mono);
  font-size: var(--mono-kicker);
  letter-spacing: var(--track-kicker);
  color: var(--green-light);
  flex: none;
}

.toast__text { font-size: var(--size-toast); flex: 1; }

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes upsheet {
  from { transform: translateY(18px); opacity: .4; }
  to { transform: translateY(0); opacity: 1; }
}