/* =========================================================================
   Campos y errores. Compartido por el asistente, el acceso, el portal y el
   panel — antes esto vivía dentro de un <style> en vender.html y no se
   podía reutilizar en ningún otro sitio.
   ========================================================================= */

.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.fields{grid-template-columns:1fr}}

.f{display:flex;flex-direction:column;gap:6px;
  font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.f-ancho{grid-column:1/-1}

.f input,.f select,.f textarea{font:inherit;font-size:15px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--ink);
  background:rgba(15,24,41,.75);border:1.5px solid var(--line);border-radius:12px;
  padding:12px 14px;transition:border-color .25s var(--ez)}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--amber)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(217,164,65,.18)}
.f select:disabled,.f input:disabled{opacity:.45;cursor:not-allowed}
.f select{appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9A441' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
  padding-right:36px}
.f small{font-size:11.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-3)}

/* errores de validación */
.err{display:none}
.err.on{display:block;background:rgba(214,72,72,.14);border:1.5px solid #E86A6A;
  border-radius:12px;padding:13px 16px;margin-bottom:22px}
.err p{margin:0;font-size:14.5px;color:#FFC9C9}
.err p+p{margin-top:5px}

/* avisos de un solo uso */
.flashes{margin-bottom:18px;display:flex;flex-direction:column;gap:8px}
.flash{margin:0;font-size:14px;border-radius:12px;padding:11px 15px;border:1.5px solid}
.flash-ok{background:rgba(90,180,120,.14);border-color:#5FBF86;color:#BFE9CF}
.flash-warn{background:rgba(217,164,65,.14);border-color:var(--amber);color:#F2DDB4}
.flash-error{background:rgba(214,72,72,.14);border-color:#E86A6A;color:#FFC9C9}

/* casillas en forma de pastilla — las usan el marketplace, el panel
   y el asistente, así que viven aquí y no en marketplace.css */
.chks{display:flex;flex-wrap:wrap;gap:7px}
.chk{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-size:13.5px;color:var(--ink-2);
  background:rgba(36,54,92,.55);border:1px solid transparent;
  border-radius:999px;padding:7px 13px;
  transition:border-color .25s var(--ez),background .25s var(--ez),color .25s var(--ez)}
.chk:hover{border-color:var(--amber);color:var(--ink)}
.chk input{accent-color:var(--amber);width:15px;height:15px;margin:0}
.chk:has(input:checked){background:rgba(217,164,65,.16);border-color:var(--amber);color:var(--ink)}