/* onclic.shop — Componentes UI (ver DISENO.md) */

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: var(--sp-3) var(--sp-5);
  font-weight: var(--fw-semibold); font-size: var(--fs-base);
  border-radius: var(--r-md); border: 1.5px solid transparent;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  touch-action: manipulation; text-decoration: none;
}
.btn:active { transform: scale(.98); }
.btn[disabled], .btn.is-loading { opacity: .5; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--accent-600); color: var(--white); }
.btn--primary:hover:not([disabled]) { background: var(--accent-700); }
.btn--brand { background: var(--brand-600); color: var(--white); }
.btn--brand:hover:not([disabled]) { background: var(--brand-700); }
.btn--secondary { background: var(--white); border-color: var(--gray-300); color: var(--gray-900); }
.btn--secondary:hover:not([disabled]) { background: var(--gray-100); }
.btn--block { width: 100%; }

/* Spinner para estado loading */
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: var(--white);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Inputs ---------- */
.field { display: block; }
.field__label { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--gray-700); }
.input {
  width: 100%; min-height: 48px; padding: var(--sp-3) var(--sp-4);
  font-size: 16px; color: var(--gray-900);
  background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--r-md);
}
.input::placeholder { color: var(--gray-500); }
.input:focus-visible { border-color: var(--brand-500); }
.field__error { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--error-600); }

/* ---------- Badges de estado ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap;
}
.badge .icon { width: 14px; height: 14px; }
.badge--available { background: var(--accent-100); color: var(--accent-700); }
.badge--taken     { background: var(--error-50);  color: var(--error-600); }
.badge--active    { background: var(--success-50); color: var(--success-600); }
.badge--pending   { background: var(--warning-50); color: var(--warning-600); }

/* Toast (confirmaciones) */
.toast-wrap { position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--sp-2); }
.toast { background: var(--brand-900); color: var(--white); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); font-size: var(--fs-sm);
  display: flex; align-items: center; gap: var(--sp-3); max-width: 340px;
  opacity: 0; transform: translateY(10px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.toast.is-in { opacity: 1; transform: none; }
.toast--ok { background: var(--accent-700); }
.toast--err { background: var(--error-600); }
.toast__link { color: var(--white); text-decoration: underline; font-weight: var(--fw-semibold); white-space: nowrap; }
@media (max-width: 600px) { .toast-wrap { left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); } .toast { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ---------- Navbar ---------- */
.navbar {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--white); box-shadow: var(--shadow-xs);
}
.navbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.navbar__brand { display: flex; align-items: center; gap: var(--sp-2); }
.brand__mark { height: 32px; width: 32px; flex-shrink: 0; }
.navbar__brand .brand__ring { stroke: var(--brand-600); }
.navbar__brand .brand__cursor { fill: var(--accent-600); }
.brand__word { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--brand-900); }
.brand__shop { color: var(--accent-600); }

/* Iconos SVG inline */
.icon { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: middle; }
.navbar__toggle .icon { width: 26px; height: 26px; }
.cart-link .icon { width: 24px; height: 24px; color: var(--gray-700); }
.navbar__links a { color: var(--gray-700); font-weight: var(--fw-medium); }
.navbar__links a:hover { color: var(--brand-600); text-decoration: none; }
/* Barra derecha siempre visible en móvil (carrito + hamburguesa) */
.navbar__bar { display: flex; align-items: center; gap: var(--sp-2); }
.navbar__toggle { display: block; font-size: 1.5rem; line-height: 1; padding: var(--sp-2);
  color: var(--brand-900); min-height: 44px; min-width: 44px; }
/* Zona colapsable (enlaces + región + auth): oculta en móvil hasta abrir */
.navbar__collapse { display: none; }
.navbar__links { display: flex; flex-direction: column; gap: var(--sp-1); align-items: stretch; }
/* Menú desplegado en móvil */
.navbar__collapse.is-open {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-4);
  position: absolute; left: 0; right: 0; top: 64px;
  background: var(--white); padding: var(--sp-4); box-shadow: var(--shadow-md);
  border-top: 1px solid var(--gray-200);
  max-height: calc(100vh - 64px); overflow-y: auto;
}
.navbar__collapse.is-open .navbar__links a { padding: var(--sp-3) var(--sp-2); border-radius: var(--r-sm); }
.navbar__collapse.is-open .navbar__links a:hover { background: var(--brand-50); }
.navbar__actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); }
.navbar__actions .btn { width: 100%; }
.region-form { width: 100%; }
.region-select {
  width: 100%; min-height: 44px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--gray-300);
  border-radius: var(--r-md); background: var(--white); font-size: var(--fs-base); color: var(--gray-700);
}
.region-select:focus-visible { border-color: var(--brand-500); }
.region-iva { font-size: var(--fs-sm); color: var(--brand-600); font-weight: var(--fw-medium); white-space: nowrap; text-decoration: none; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--gray-200); border-radius: var(--r-md); }
.region-iva:hover { border-color: var(--brand-500); text-decoration: none; }
.cart-link { position: relative; padding: var(--sp-2); display: inline-flex; align-items: center;
  min-height: 44px; min-width: 44px; justify-content: center; }
.cart-link__count {
  position: absolute; top: 0; right: 0; min-width: 18px; height: 18px;
  display: grid; place-items: center; padding: 0 4px;
  background: var(--accent-600); color: var(--white);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); border-radius: var(--r-full);
}
@media (min-width: 768px) {
  /* Desktop: barra horizontal sin hamburguesa */
  .navbar__inner { gap: var(--sp-5); }
  .navbar__toggle { display: none; }
  .navbar__bar { order: 3; }            /* carrito al extremo derecho */
  .navbar__collapse { order: 2; display: flex; flex: 1; align-items: center; justify-content: space-between; gap: var(--sp-5); position: static; }
  .navbar__links { flex-direction: row; gap: var(--sp-5); align-items: center; }
  .navbar__actions { flex-direction: row; align-items: center; gap: var(--sp-3); }
  .navbar__actions .btn { width: auto; }
  .region-form { width: auto; }
  .region-select { width: auto; min-height: 40px; font-size: var(--fs-sm); max-width: 160px; }
}

/* ---------- Footer ---------- */
.footer { background: var(--brand-900); color: var(--brand-100); margin-top: var(--sp-9); }
.footer__grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; padding-block: var(--sp-7); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(4, 1fr); } }
.footer h4 { color: var(--white); font-size: var(--fs-base); margin-bottom: var(--sp-3); }
.footer__brand { display: flex; align-items: center; gap: var(--sp-2); color: var(--white); margin-bottom: var(--sp-3); }
.footer__brand .brand__mark { height: 30px; width: 30px; }
.footer__brand .brand__word { color: var(--white); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.footer__brand .brand__shop { color: rgba(255,255,255,.72); }
.footer a { color: var(--brand-100); font-size: var(--fs-sm); display: block; padding: var(--sp-1) 0; }
.footer a:hover { color: var(--white); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding-block: var(--sp-4); font-size: var(--fs-sm); display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center; }
.footer__seals { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.footer__seals span { display: inline-flex; align-items: center; gap: var(--sp-1); background: rgba(255,255,255,.08); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full); font-size: var(--fs-xs); color: var(--brand-100); }
.footer__seals .icon { width: 14px; height: 14px; color: var(--accent-600); }

/* ---------- Franja de confianza ---------- */
.trust-bar { background: var(--brand-50); border-block: 1px solid var(--brand-100); }
.trust-bar__list { display: flex; flex-wrap: wrap; gap: var(--sp-5); justify-content: center; padding-block: var(--sp-4); }
.trust-bar__item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--brand-700); }
.trust-bar__item .icon { width: 20px; height: 20px; color: var(--brand-600); }

/* ---------- Buscador de dominio (héroe) ---------- */
.domain-search { max-width: 720px; margin-inline: auto; }

/* Pestañas Registrar / Transferir */
.search-tabs__nav { display: flex; gap: var(--sp-1); justify-content: center; margin-bottom: var(--sp-3); }
.search-tab { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-full); background: transparent; color: var(--gray-700); font-weight: var(--fw-medium);
  border: 1px solid transparent; cursor: pointer; }
.search-tab .icon { width: 18px; height: 18px; }
.search-tab.is-active { background: var(--white); color: var(--brand-700); box-shadow: var(--shadow-sm); }
.search-tabs__panel[hidden] { display: none; }
.transfer-epp { margin-top: var(--sp-2); width: 100%; }
.domain-search__box {
  display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--white); padding: var(--sp-2);
  border: 1px solid var(--gray-300); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.domain-search__box:focus-within { border-color: var(--brand-500); box-shadow: var(--shadow-focus); }
.domain-search__icon { display: none; color: var(--gray-500); padding-inline: var(--sp-2); }
.domain-search__icon .icon { width: 22px; height: 22px; }
@media (min-width: 600px) { .domain-search__icon { display: flex; align-items: center; } }
.domain-search__input {
  flex: 1; min-height: 52px; border: none; padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-lg); background: transparent;
}
.domain-search__input:focus-visible { box-shadow: none; }
.domain-search__chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; padding: 0 var(--sp-2) var(--sp-1); }
.chip {
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full);
  background: var(--brand-50); color: var(--brand-700);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); border: 1px solid var(--brand-100);
}
.chip[aria-pressed="true"] { background: var(--brand-600); color: var(--white); border-color: var(--brand-600); }
@media (min-width: 600px) {
  .domain-search__box { flex-direction: row; align-items: center; }
  .domain-search__box .btn { min-height: 52px; }
}

/* Resultados */
.domain-results { margin-top: var(--sp-5); }
.domain-result {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-md);
  padding: var(--sp-4); margin-bottom: var(--sp-3);
}
.domain-result__name { flex: 1; min-width: 180px; font-weight: var(--fw-semibold); font-family: var(--font-mono); }
.domain-result__price { font-weight: var(--fw-semibold); }
.domain-search__msg {
  padding: var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-sm);
  background: var(--error-50); color: var(--error-600); display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between;
}

/* Chips multi-toggle + enlace "más extensiones" */
.chip--toggle[aria-pressed="true"] { background: var(--brand-600); color: var(--white); border-color: var(--brand-600); }
.chip--more { background: transparent; border: 1px dashed var(--gray-300); color: var(--brand-600); font-weight: var(--fw-medium); text-decoration: none; }
.chip--more:hover { border-color: var(--brand-500); color: var(--brand-700); text-decoration: none; }

/* Card hero del dominio exacto */
.domain-hero {
  border: 1px solid var(--gray-200); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: var(--sp-5); margin-bottom: var(--sp-5); display: grid; gap: var(--sp-3); text-align: left;
}
.domain-hero--available { border-color: var(--accent-600); background: var(--accent-100); }
.domain-hero--taken { border-color: var(--gray-300); background: var(--gray-50); }
.domain-hero__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.domain-hero__name { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--gray-900); word-break: break-all; }
.domain-hero__price { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--brand-700); font-variant-numeric: tabular-nums; }
.domain-hero__per { font-size: var(--fs-base); font-weight: var(--fw-regular); color: var(--gray-500); }
.domain-hero__renew { display: block; font-size: var(--fs-sm); color: var(--gray-500); margin-top: var(--sp-1); }
.domain-hero__cta { justify-self: start; }
.domain-hero__free { display: flex; align-items: center; gap: var(--sp-1); color: var(--accent-700); font-size: var(--fs-sm); font-weight: var(--fw-medium); margin-top: var(--sp-2); }
.domain-hero__free .icon { width: 16px; height: 16px; flex-shrink: 0; }
.domain-hero__msg { font-size: var(--fs-sm); }

/* Lista de alternativas */
.domain-alts { margin-bottom: var(--sp-5); }
.domain-alts__title { font-size: var(--fs-base); color: var(--gray-700); margin-bottom: var(--sp-3); }
.domain-alt {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: var(--sp-3); align-items: center;
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2);
}
.domain-alt__name { font-weight: var(--fw-semibold); word-break: break-all; }
.domain-alt__price { font-variant-numeric: tabular-nums; color: var(--gray-700); font-size: var(--fs-sm); }
.domain-alts__more { display: inline-block; margin-top: var(--sp-2); color: var(--brand-600); font-weight: var(--fw-medium); font-size: var(--fs-sm); }
@media (max-width: 600px) {
  .domain-alt { grid-template-columns: 1fr auto; row-gap: var(--sp-2); }
  .domain-alt .btn { grid-column: 1 / -1; }
}

/* Aviso de extensión no soportada */
.domain-notice {
  display: flex; gap: var(--sp-2); align-items: center;
  background: var(--warning-50); color: var(--warning-600);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); font-size: var(--fs-sm);
}

/* Sugerencias de nombre */
.domain-suggest { margin-bottom: var(--sp-5); }
.domain-suggest__lead { font-size: var(--fs-sm); color: var(--gray-700); margin-bottom: var(--sp-2); }
.domain-suggest__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Upsell tras resultados del buscador */
.upsell-card {
  margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--r-lg);
}
.upsell-card__title { margin-bottom: var(--sp-3); color: var(--brand-900); }
.upsell-card__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.upsell-card__pack { font-size: var(--fs-sm); color: var(--brand-600); font-weight: var(--fw-medium); }

/* Skeleton (loading) */
.skeleton { height: 64px; border-radius: var(--r-md); margin-bottom: var(--sp-3);
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 37%, var(--gray-100) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
[hidden] { display: none !important; }

/* ---------- Tarjeta de pack ---------- */
.pack {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg);
  padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.pack:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pack--featured { border: 2px solid var(--brand-600); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); position: relative; }
.pack__badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--accent-600); color: var(--white); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  padding: var(--sp-1) var(--sp-4); border-radius: var(--r-full);
}
.pack__name { font-size: var(--fs-xl); }
.pack__price { font-family: var(--font-mono); font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--brand-900); }
.pack__price small { font-size: var(--fs-base); font-weight: var(--fw-regular); color: var(--gray-500); }
.pack__features { display: flex; flex-direction: column; gap: var(--sp-2); }
.pack__features li { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-sm); color: var(--gray-700); }
.pack__features svg { flex-shrink: 0; color: var(--accent-600); margin-top: 2px; }
@media (min-width: 1024px) { .pack--featured { transform: scale(1.03); } .pack--featured:hover { transform: scale(1.03) translateY(-4px); } }
.footer__legal-id { color: var(--brand-100); opacity: .7; font-size: var(--fs-xs); margin-top: var(--sp-1); }

/* Estado de disponibilidad en el configurador (packs) */
.cfg-check { min-height: 1.4em; margin: var(--sp-2) 0 0; font-size: var(--fs-sm); }
.cfg-check--wait { color: var(--gray-500); }
.cfg-check--ok { color: var(--success-600); font-weight: var(--fw-medium); }
.cfg-check--err { color: var(--error-600); }
.cfg-check__sug { display: inline-block; margin: 2px 4px 0 0; padding: 1px var(--sp-2); border: 1px solid var(--gray-300); border-radius: var(--r-full); background: var(--white); color: var(--gray-700); font-size: var(--fs-xs); cursor: pointer; }
.cfg-check__sug:hover { border-color: var(--brand-600); color: var(--brand-700); }
.cfg-check--warn { color: var(--warning-600); }
.cfg-check__add { display: inline-block; margin: 2px 0 0 4px; padding: 2px var(--sp-3); border: 0; border-radius: var(--r-full); background: var(--brand-600); color: var(--white); font-size: var(--fs-xs); font-weight: var(--fw-medium); cursor: pointer; }
.cfg-check__add:hover { background: var(--brand-700); }
.cfg-check__add:disabled { opacity: .6; cursor: default; }