/*
  Quick Services — Componentes UI
  Botones · Badges/Tags · Cards · Inputs — spec real, Manual §13.
*/

/* ===== Botones ===== */
.qs-btn {
  --qs-btn-h: var(--qs-btn-h-m);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--qs-space-1);
  height: var(--qs-btn-h);
  padding-inline: var(--qs-space-3);
  border-radius: var(--qs-radius);
  border: var(--qs-border-width) solid transparent;
  font-family: var(--qs-font-display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--qs-dur-hover) var(--qs-ease-hover),
              color var(--qs-dur-hover) var(--qs-ease-hover),
              border-color var(--qs-dur-hover) var(--qs-ease-hover);
  position: relative;
  overflow: hidden;
}
.qs-btn:focus-visible { outline-offset: 3px; }
.qs-btn--s { --qs-btn-h: var(--qs-btn-h-s); font-size: 0.85rem; padding-inline: var(--qs-space-2); }
.qs-btn--l { --qs-btn-h: var(--qs-btn-h-l); font-size: 1.05rem; padding-inline: var(--qs-space-4); }

.qs-btn__arrow { transition: transform var(--qs-dur-hover) var(--qs-ease-hover); }
.qs-btn:hover .qs-btn__arrow { transform: translateX(3px); }

/* Primario — magenta, con una sola línea cyan que carga el borde inferior. */
.qs-btn--primary {
  background: var(--qs-magenta);
  color: var(--qs-white);
  border-color: var(--qs-magenta);
}
.qs-btn--primary::before {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--qs-cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--qs-dur-hover) var(--qs-ease-hover);
  pointer-events: none;
}
.qs-btn--primary:hover::before,
.qs-btn--primary:focus-visible::before { transform: scaleX(1); }
.qs-btn--primary:hover, .qs-btn--primary:focus-visible { background: #c40850; }
.qs-btn--primary:active { background: #a8073f; }
.qs-btn--primary:disabled { background: var(--qs-ink-400); border-color: var(--qs-ink-400); cursor: not-allowed; }

/* Secundario — borde negro, transparente */
.qs-btn--secondary {
  background: transparent;
  color: var(--qs-ink-900);
  border-color: var(--qs-ink-900);
}
.qs-btn--secondary:hover, .qs-btn--secondary:focus-visible { background: var(--qs-ink-900); color: var(--qs-white); }
.qs-surface-black .qs-btn--secondary,
.qs-surface-magenta .qs-btn--secondary { color: var(--qs-white); border-color: var(--qs-white); }
.qs-surface-black .qs-btn--secondary:hover,
.qs-surface-magenta .qs-btn--secondary:hover { background: var(--qs-white); color: var(--qs-black); }

/* Inverso — blanco sobre negro/magenta */
.qs-btn--inverse {
  background: transparent;
  color: var(--qs-white);
  border-color: var(--qs-white);
}
.qs-btn--inverse:hover, .qs-btn--inverse:focus-visible { background: var(--qs-white); color: var(--qs-black); }

@media (max-width: 767.98px) {
  .qs-btn { --qs-btn-h: max(var(--qs-btn-h-m), 44px); }
}

/* ===== Badges / Tags ===== */
.qs-tag {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding-inline: var(--qs-space-2);
  border: 1.5px solid var(--qs-line-200);
  border-radius: var(--qs-radius);
  font-family: var(--qs-font-mono);
  font-size: 13px;
  color: var(--qs-ink-700);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--qs-dur-hover) var(--qs-ease-hover), color var(--qs-dur-hover) var(--qs-ease-hover);
}
.qs-tag:hover { border-color: var(--qs-ink-900); color: var(--qs-ink-900); }
.qs-tag[aria-pressed="true"] {
  border-color: var(--qs-cyan);
  color: var(--qs-ink-900);
  background: rgba(43,169,224,.08);
}

.qs-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline: var(--qs-space-1);
  font-family: var(--qs-font-mono);
  font-size: 11px;
  letter-spacing: var(--qs-ls-label);
  text-transform: uppercase;
  border: 1px solid currentColor;
  color: var(--qs-ink-400);
}
/* --info marca la familia/categoría: es el dato de proceso real (Manual §06),
   por eso es la única variante en cyan. La marca (.qs-badge base) es atribución,
   no dato técnico — se queda en un neutro para no competir con --info. */
.qs-badge--info { color: var(--qs-cyan); }

/* ===== Cards de producto — Manual §13, invertida a negativo ===== */
.qs-card {
  position: relative;
  background: var(--qs-black);
  color: var(--qs-white);
  border-radius: var(--qs-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.qs-card__stage {
  position: relative;
  background: var(--qs-surface-100);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--qs-space-3);
}
.qs-card__numeral {
  position: absolute;
  left: var(--qs-space-2);
  top: var(--qs-space-1);
  font-family: var(--qs-font-mono);
  font-weight: 600;
  font-size: 13px;
  color: var(--qs-ink-500);
  z-index: 2;
}
.qs-card__stage img { max-height: 100%; width: auto; object-fit: contain; }
.qs-card__body {
  padding: var(--qs-space-2) var(--qs-space-2) var(--qs-space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  border-top: 1px solid transparent;
  position: relative;
}
.qs-card__body::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: var(--qs-lines-stroke-digital);
  background-image: repeating-linear-gradient(to right, var(--qs-magenta) 0 4px, transparent 4px 8px);
}
.qs-card__codigo { font-family: var(--qs-font-mono); font-size: 12px; color: var(--qs-ink-400); }
.qs-card__nombre { color: var(--qs-white); font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.qs-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.qs-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--qs-magenta);
  font-family: var(--qs-font-display);
  font-weight: 700;
  font-size: 0.9rem;
  padding-top: var(--qs-space-1);
}
.qs-card__cta .qs-btn__arrow { transition: transform var(--qs-dur-hover) var(--qs-ease-hover); }
.qs-card:hover .qs-card__cta .qs-btn__arrow,
.qs-card:focus-within .qs-card__cta .qs-btn__arrow { transform: translateX(3px); }
.qs-card:hover, .qs-card:focus-within { outline: 1px solid var(--qs-cyan); outline-offset: -1px; }

/* ===== Inputs ===== */
.qs-field { display: flex; flex-direction: column; gap: 6px; }
.qs-field__label { font-family: var(--qs-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--qs-ink-500); }
.qs-input {
  height: var(--qs-btn-h-m);
  border: var(--qs-border-width) solid var(--qs-line-200);
  border-radius: var(--qs-radius);
  padding-inline: var(--qs-space-2);
  font-family: var(--qs-font-display);
  font-size: 1rem;
  background: var(--qs-white);
  color: var(--qs-ink-900);
  transition: border-color var(--qs-dur-focus) var(--qs-ease-focus);
}
.qs-input:focus-visible {
  border-color: var(--qs-cyan);
  outline: 2px solid var(--qs-cyan);
  outline-offset: 0;
}
.qs-input::placeholder { color: var(--qs-ink-400); }

/* ===== Nav ===== */
.qs-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(11,11,12,.94);
  backdrop-filter: none;
}
.qs-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.qs-nav__logo img { height: 28px; width: auto; }
.qs-nav__links { display: flex; align-items: center; gap: var(--qs-space-3); list-style: none; margin: 0; padding: 0; }
.qs-nav__links a {
  color: var(--qs-white);
  font-family: var(--qs-font-display);
  font-weight: 600;
  font-size: .95rem;
}
.qs-nav__links a:hover { color: var(--qs-cyan); }
.qs-nav__toggle {
  display: none;
  background: transparent;
  border: 1.5px solid var(--qs-white);
  color: var(--qs-white);
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
}
@media (max-width: 991.98px) {
  .qs-nav__links { display: none; }
  .qs-nav__toggle { display: inline-flex; }
  .qs-nav__links--open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    left: 0; right: 0; top: 72px;
    background: var(--qs-black);
    padding: var(--qs-space-3) var(--qs-margin-mobile) var(--qs-space-4);
    gap: var(--qs-space-2);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    box-shadow: 0 16px 30px rgba(0,0,0,.35);
  }
  .qs-nav__links--open li,
  .qs-nav__links--open a { width: 100%; }
  .qs-nav__links--open a { min-height: 44px; display:flex; align-items:center; }
}

/* ===== Pantalla de carga / escáner QS ===== */
.qs-loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#0b0b0c;color:#fff;transition:opacity .48s ease,visibility .48s ease}
.qs-loader[hidden]{display:none}.qs-loader.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
.qs-loader__panel{width:min(86vw,420px);text-align:center}.qs-loader__mark{position:relative;width:116px;height:116px;margin:0 auto 30px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));overflow:hidden}
.qs-loader__mark img{width:62px;height:62px;object-fit:contain;animation:qs-loader-pulse 1.4s ease-in-out infinite}
.qs-loader__scan{position:absolute;left:0;right:0;height:4px;background:var(--qs-cyan);box-shadow:0 0 16px var(--qs-cyan);animation:qs-loader-scan 1.25s cubic-bezier(.65,0,.35,1) infinite alternate}
.qs-loader__eyebrow{display:block;margin-bottom:10px;color:var(--qs-cyan);font:600 10px/1.2 var(--qs-font-mono);letter-spacing:.16em;text-transform:uppercase}
.qs-loader__title{font-size:clamp(1.55rem,6vw,2.4rem);font-weight:900;line-height:.94;text-transform:uppercase}.qs-loader__title em{color:var(--qs-magenta);font-style:normal}
.qs-loader__track{position:relative;height:3px;margin-top:26px;background:rgba(255,255,255,.14);overflow:hidden}.qs-loader__bar{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--qs-magenta) 0 72%,var(--qs-cyan) 72%);transition:width .24s ease}
.qs-loader__meta{display:flex;justify-content:space-between;gap:16px;margin-top:10px;color:#96969b;font:600 10px/1.2 var(--qs-font-mono);letter-spacing:.08em;text-transform:uppercase}.qs-loader__percent{color:#fff}
@keyframes qs-loader-scan{from{transform:translateY(-58px)}to{transform:translateY(58px)}}
@keyframes qs-loader-pulse{50%{transform:scale(.92);opacity:.72}}
@media(max-width:767.98px){.qs-nav__bar{height:64px}.qs-nav__links--open{top:64px}.qs-loader__panel{width:min(84vw,340px)}.qs-loader__mark{width:104px;height:104px}}
@media(prefers-reduced-motion:reduce){.qs-loader__mark img,.qs-loader__scan{animation:none}.qs-loader__scan{top:50%}.qs-loader,.qs-loader__bar{transition:none}}