/**
 * Página /mi-garaje.
 * Tokens del diseño ACMOTOS declarados en la propia sección para no depender
 * de que el tema los exponga (mismo criterio que compat-motos.css).
 */
.ac-garage {
  --ac-red: #DC1F1A;
  --ac-ink: #0E0E10;
  --ac-bone: #F4F1EB;
  --ac-bone-2: #ECE7DD;
  --ac-line: #E4DFD4;
  --ac-muted: #6E6A60;
  --ac-display: "Oswald", "Arial Narrow", Arial, sans-serif;
  --ac-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  color: var(--ac-ink);
}

.ac-garage.is-loading {
  opacity: .6;
  pointer-events: none;
}

.ac-garage__lead {
  margin: 0 0 1rem;
  font-size: 1rem;
  color: var(--ac-muted);
}

.ac-garage__notice {
  margin: 0 0 1.75rem;
  padding: .75rem 1rem;
  border-left: 3px solid var(--ac-red);
  background: var(--ac-bone);
  font-size: .875rem;
  color: var(--ac-muted);
}

.ac-garage__subtitle {
  margin: 0 0 1rem;
  font-family: var(--ac-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── Alta de moto ───────────────────────────────────────────────────────── */

.ac-garage__add {
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  border: 1px solid var(--ac-line);
  background: var(--ac-bone);
}

.ac-garage__form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  align-items: end;
}

.ac-garage__field {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  margin: 0;
  min-width: 0;
}

.ac-garage__field.is-disabled {
  opacity: .55;
}

.ac-garage__label {
  font-family: var(--ac-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ac-muted);
}

.ac-garage__field select,
.ac-garage__field input {
  width: 100%;
  height: 44px;
  padding: 0 .75rem;
  border: 1px solid var(--ac-line);
  border-radius: 0;
  background: #fff;
  color: var(--ac-ink);
  font-size: .9375rem;
}

.ac-garage__field select:focus,
.ac-garage__field input:focus {
  outline: none;
  border-color: var(--ac-ink);
}

.ac-garage__submit {
  grid-column: 1 / -1;
  justify-self: start;
  height: 44px;
  padding: 0 1.75rem;
  border: 0;
  border-radius: 0;
  background: var(--ac-red);
  color: #fff;
  font-family: var(--ac-display);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease;
}

.ac-garage__submit:hover:not(:disabled) {
  background: #B41714;
}

.ac-garage__submit:disabled {
  background: var(--ac-bone-2);
  color: var(--ac-muted);
  cursor: not-allowed;
}

.ac-garage__error {
  margin: 1rem 0 0;
  padding: .625rem .875rem;
  border-left: 3px solid var(--ac-red);
  background: #fff;
  font-size: .875rem;
  color: var(--ac-red);
}

/* ── Motos guardadas ────────────────────────────────────────────────────── */

.ac-garage__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .75rem;
}

.ac-garage__item {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--ac-line);
  background: #fff;
}

.ac-garage__item.is-current {
  border-color: var(--ac-red);
  box-shadow: inset 0 0 0 1px var(--ac-red);
}

.ac-garage__bike {
  min-width: 0;
}

.ac-garage__badge {
  display: inline-block;
  margin-bottom: .375rem;
  padding: .1875rem .5rem;
  background: var(--ac-red);
  color: #fff;
  font-family: var(--ac-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ac-garage__name {
  margin: 0;
  font-family: var(--ac-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.ac-garage__year {
  margin-left: .5rem;
  font-family: var(--ac-mono);
  font-size: .8125rem;
  font-weight: 400;
  color: var(--ac-muted);
}

.ac-garage__nickname {
  margin: .25rem 0 0;
  font-size: .875rem;
  font-style: italic;
  color: var(--ac-muted);
}

.ac-garage__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.ac-garage__link,
.ac-garage__btn {
  height: 36px;
  padding: 0 .875rem;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ac-line);
  border-radius: 0;
  background: #fff;
  color: var(--ac-ink);
  font-family: var(--ac-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

.ac-garage__link {
  border-color: var(--ac-ink);
  background: var(--ac-ink);
  color: #fff;
}

.ac-garage__link:hover,
.ac-garage__link:focus {
  color: #fff;
  text-decoration: none;
  opacity: .85;
}

.ac-garage__btn:hover:not(:disabled) {
  border-color: var(--ac-ink);
}

.ac-garage__btn--danger:hover:not(:disabled) {
  border-color: var(--ac-red);
  color: var(--ac-red);
}

.ac-garage__btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.ac-garage__empty {
  padding: 1.5rem;
  border: 1px dashed var(--ac-line);
  background: var(--ac-bone);
  color: var(--ac-muted);
  text-align: center;
}

/* ── Móvil ──────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .ac-garage__form {
    grid-template-columns: 1fr;
  }

  .ac-garage__submit {
    justify-self: stretch;
    width: 100%;
  }

  .ac-garage__item {
    flex-direction: column;
    align-items: flex-start;
  }

  .ac-garage__actions {
    width: 100%;
  }

  /* Objetivos de pulsación cómodos en móvil (>=44px). */
  .ac-garage__link,
  .ac-garage__btn {
    height: 44px;
    flex: 1 1 auto;
    justify-content: center;
  }
}