/* ============================================================
   WormShop — Capa UX (usabilidad + microcopy)
   Reglas: solo presentación. No toca lógica, API ni variables JS.
   1. Radios en vez de select cuando hay pocas opciones
   2. Labels siempre visibles
   3. Ancho de input acorde al contenido
   4. Errores en palabras simples
   5. Estados en presente
   6. Números / fechas simplificados
   7. Botones con texto de acción
   8. Icono + label en una línea
   9. Tipografía legible (line-height 1.45)
   + Botón X para cerrar cualquier modal (login incluido)
   ============================================================ */

/* ---------- 9. Tipografía invisible ---------- */
.overlay .modal,
.overlay .modal p,
.overlay .modal label,
.overlay .modal .sub,
.ws-ux-form label,
.ws-ux-form .hint {
  line-height: 1.45;
}
.overlay .modal h3 { line-height: 1.25; letter-spacing: -0.01em; }

/* ---------- Botón cerrar (X) ---------- */
.overlay .modal { position: relative; }

.ws-ux-close {
  position: absolute;
  top: 10px !important;
  right: 10px !important;
  left: auto;
  bottom: auto;
  width: 34px !important;
  height: 34px !important;
  min-width: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--m-border, rgba(255,255,255,.14));
  background: rgba(255,255,255,.04);
  color: var(--m-muted, #9aa0ab);
  cursor: pointer;
  padding: 0;
  line-height: 0;
  z-index: 5;
  transition: transform .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease;
}
.ws-ux-close svg { width: 16px; height: 16px; display: block; }
.ws-ux-close:hover {
  color: #fff;
  border-color: var(--m-brand, #c084fc);
  background: color-mix(in oklab, var(--m-brand, #c084fc) 22%, transparent);
  transform: rotate(90deg);
}
.ws-ux-close:focus-visible {
  outline: 2px solid var(--m-brand, #c084fc);
  outline-offset: 2px;
}
/* deja aire arriba para que la X no pise el título */
.overlay .modal > h3:first-child,
.overlay .modal > .brand:first-child { padding-right: 40px; }

@media (max-width: 520px) {
  .ws-ux-close { top: 8px; right: 8px; width: 38px; height: 38px; }
}

/* ---------- 2. Labels siempre visibles ---------- */
.overlay .modal label,
.ws-ux-form label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--m-text, #e9edf3);
  margin: 14px 0 6px;
  opacity: .92;
}
.overlay .modal label.ws-ux-genlabel { opacity: .8; font-weight: 600; }
.overlay .modal label + input,
.overlay .modal label + select,
.overlay .modal label + textarea { margin-top: 0; }

/* pista opcional bajo el label */
.ws-ux-hint {
  display: block;
  font-size: 11.5px;
  color: var(--m-muted, #9aa0ab);
  margin: -2px 0 6px;
}

/* ---------- 3. Ancho de input segun contenido ---------- */
.overlay .modal input[data-ux-size="xs"],
input[data-ux-size="xs"] { max-width: 110px; }
.overlay .modal input[data-ux-size="sm"],
input[data-ux-size="sm"] { max-width: 190px; }
.overlay .modal input[data-ux-size="md"],
input[data-ux-size="md"] { max-width: 320px; }
/* los campos anchos (correo, nombre) se quedan al 100% */

/* ---------- 1. Radios en vez de select ---------- */
.ws-ux-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 4px;
}
.ws-ux-radio {
  flex: 1 1 140px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid var(--m-border, rgba(255,255,255,.14));
  background: rgba(255,255,255,.03);
  color: var(--m-text, #e9edf3);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.ws-ux-radio:hover { transform: translateY(-1px); border-color: color-mix(in oklab, var(--m-brand, #c084fc) 55%, transparent); }
.ws-ux-radio input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; margin: 0; }
.ws-ux-radio .ws-ux-dot {
  display: inline-block;
  flex: 0 0 16px !important;
  padding: 0;
  margin-right: 9px;
  width: 16px; height: 16px;
  min-width: 16px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid var(--m-border, rgba(255,255,255,.3));
  position: relative;
  flex: 0 0 auto;
  transition: border-color .16s ease;
}
.ws-ux-radio .ws-ux-dot::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--m-brand, #c084fc);
  transform: scale(0);
  transition: transform .16s ease;
}
.ws-ux-radio.is-active {
  border-color: var(--m-brand, #c084fc);
  background: color-mix(in oklab, var(--m-brand, #c084fc) 14%, transparent);
}
.ws-ux-radio.is-active .ws-ux-dot { border-color: var(--m-brand, #c084fc); }
.ws-ux-radio.is-active .ws-ux-dot::after { transform: scale(1); }
.ws-ux-radio:focus-within { outline: 2px solid var(--m-brand, #c084fc); outline-offset: 2px; }
select.ws-ux-hidden-select { position: absolute; opacity: 0; pointer-events: none; height: 0; width: 0; margin: 0; padding: 0; border: 0; }

/* ---------- 4/5. Mensajes: errores simples y estados en presente ---------- */
.ws-ux-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
  border-radius: 12px;
  padding: 10px 12px;
  margin: 10px 0;
  border: 1px solid var(--m-border, rgba(255,255,255,.14));
  background: rgba(255,255,255,.03);
}
.ws-ux-msg[data-tone="error"] {
  border-color: color-mix(in oklab, var(--m-brand, #c084fc) 55%, transparent);
  background: color-mix(in oklab, var(--m-brand, #c084fc) 12%, transparent);
}
.ws-ux-msg[data-tone="ok"] {
  border-color: rgba(52, 199, 123, .5);
  background: rgba(52, 199, 123, .12);
}

/* ---------- 7/8. Botones: texto de acción, icono en línea ---------- */
.btn, button.btn, .ws-modal-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  line-height: 1.2;
}
.btn > svg, .btn .a-icon, .btn .ws-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
.btn-block { width: 100%; }

/* ---------- 6. Números / fechas ---------- */
.ws-ux-num, .ws-ux-rel { font-variant-numeric: tabular-nums; }

/* ---------- accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  .ws-ux-close, .ws-ux-radio, .ws-ux-radio .ws-ux-dot::after { transition: none; }
  .ws-ux-close:hover { transform: none; }
}