/*
 * RUN 100 — forms skin (WPForms + run100_* shortcodes).
 * Scoped under body.run100-skin (see functions.php) so it only touches this theme's pages.
 * Enqueued conditionally from functions.php (see run100_forms_assets_needed()).
 *
 * Specificity note: WPForms' own stylesheet styles most of this markup with 3-class
 * selectors, e.g. `.wpforms-container-full .wpforms-form .wpforms-field-label`. Every
 * rule below matching that markup uses `[class*="wpforms-container"]` (an attribute
 * selector — same specificity weight as a class) instead of writing out both
 * `.wpforms-container` and `.wpforms-container-full` per rule; combined with
 * `.run100-skin` and `.wpforms-form` that's 3 classes of our own stacked on top of the
 * target class, always at least 1 ahead of WPForms' rules, no !important needed.
 */

/* ===================== WPForms — dark palette ===================== */

.run100-skin [class*="wpforms-container"].wpforms-container{
  max-width:720px;
  margin:0; /* left-aligned inside the existing .entry-content column — never re-centered */
}

.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field{
  margin-bottom:24px;
}
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field:last-child{
  margin-bottom:0;
}

.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-label{
  display:block;
  font-family:'Sora',sans-serif;
  font-weight:600;
  font-size:15px;
  color:var(--white);
  margin-bottom:8px;
}
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-required-label{
  color:var(--c-magenta);
  margin-left:2px;
}
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-sublabel{
  display:block;
  font-family:'Sora',sans-serif;
  font-weight:400;
  font-size:13px;
  color:var(--mute);
  margin-top:4px;
}
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-description{
  font-family:'Sora',sans-serif;
  font-weight:300;
  font-size:13px;
  color:var(--mute);
  margin-top:8px;
}

/* text-like inputs, select, textarea */
.run100-skin [class*="wpforms-container"] .wpforms-form input[type=text],
.run100-skin [class*="wpforms-container"] .wpforms-form input[type=email],
.run100-skin [class*="wpforms-container"] .wpforms-form input[type=tel],
.run100-skin [class*="wpforms-container"] .wpforms-form input[type=number],
.run100-skin [class*="wpforms-container"] .wpforms-form input[type=date],
.run100-skin [class*="wpforms-container"] .wpforms-form input[type=url],
.run100-skin [class*="wpforms-container"] .wpforms-form input[type=password],
.run100-skin [class*="wpforms-container"] .wpforms-form select,
.run100-skin [class*="wpforms-container"] .wpforms-form textarea{
  width:100%;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 16px;
  color:var(--white);
  font-family:'Sora',sans-serif;
  font-size:16px; /* 16px prevents iOS auto-zoom on focus */
  transition:border-color .25s,box-shadow .25s;
}
.run100-skin [class*="wpforms-container"] .wpforms-form textarea{
  min-height:120px;
  resize:vertical;
}
.run100-skin [class*="wpforms-container"] .wpforms-form input::placeholder,
.run100-skin [class*="wpforms-container"] .wpforms-form textarea::placeholder{
  color:var(--mute-2);
}
.run100-skin [class*="wpforms-container"] .wpforms-form input:focus,
.run100-skin [class*="wpforms-container"] .wpforms-form select:focus,
.run100-skin [class*="wpforms-container"] .wpforms-form textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(212,166,54,.25);
}

/* select: hide native arrow, paint a gold chevron (data URI can't read var(), so the hex is
   the literal value of --gold — keep both in sync if the token ever changes) */
.run100-skin [class*="wpforms-container"] .wpforms-form select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  cursor:pointer;
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23D4A636' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:12px 8px;
}

/* file upload (classic <input type=file>; modern dropzone markup falls back to browser default) */
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-file-upload input[type=file]{
  width:100%;
  background:var(--panel);
  border:1px dashed var(--line);
  border-radius:12px;
  padding:14px 16px;
  color:var(--mute);
  font-family:'Sora',sans-serif;
  font-size:14px;
}

/* ── choices: radio & checkbox rendered as pills ──
   WPForms wraps each choice as .wpforms-field-radio/.wpforms-field-checkbox > ul > li > input + label
   and additionally toggles a `wpforms-selected` class on the <li> via its own JS — we style off
   both signals. WPForms' own CSS sets `li{display:block;margin:0 0 10px}` at 3-class specificity;
   everything here matches or beats that (see file header). */
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-radio ul,
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-checkbox ul{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:0;
  margin:0;
  list-style:none;
}
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-radio li,
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-checkbox li{
  display:inline-flex;
  width:auto;
  margin:0;
  position:relative;
}

/* hidden-but-focusable native input: standard sr-only recipe, not display:none/visibility:hidden,
   so keyboard and screen-reader users keep full access to it */
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-radio li input,
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-checkbox li input{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
  opacity:0;
}

.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-radio li label.wpforms-field-label-inline,
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-checkbox li label.wpforms-field-label-inline{
  display:inline-flex;
  align-items:center;
  cursor:pointer;
  padding:12px 20px;
  border-radius:40px;
  border:1.5px solid var(--line);
  background:rgba(255,255,255,.02);
  color:var(--mute);
  font-family:'Sora',sans-serif;
  font-size:14px;
  font-weight:600;
  transition:border-color .25s,background .25s,color .25s;
}
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-radio li label.wpforms-field-label-inline::before,
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-checkbox li label.wpforms-field-label-inline::before{
  content:"";
  flex-shrink:0;
  width:8px;
  height:8px;
  margin-right:10px;
  border-radius:50%;
  border:1.5px solid var(--mute-2);
  transition:background .25s,border-color .25s;
}
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-checkbox li label.wpforms-field-label-inline::before{
  border-radius:4px; /* square dot distinguishes checkbox from radio */
}

/* selected state — real markup is <li><input type=radio|checkbox>[sibling]<label class="wpforms-field-label-inline">,
   so `input:checked + label` is the reliable signal; `li.wpforms-selected label` is kept as a
   second hook for WPForms versions/JS states that also toggle that class on the <li>. Both
   sides of the selector carry .wpforms-field-label-inline (not a bare `label` tag) so this wins
   over any WPForms rule keyed off that same class, and nothing declared after this block may
   touch border/background/color on it (see hover/hidden-label rules above — none do). */
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-radio li input[type=radio]:checked + label.wpforms-field-label-inline,
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-checkbox li input[type=checkbox]:checked + label.wpforms-field-label-inline,
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-radio li.wpforms-selected label.wpforms-field-label-inline,
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-checkbox li.wpforms-selected label.wpforms-field-label-inline{
  border-color:var(--gold);
  background:rgba(212,166,54,.14);
  color:var(--white);
}
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-radio li input[type=radio]:checked + label.wpforms-field-label-inline::before,
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-checkbox li input[type=checkbox]:checked + label.wpforms-field-label-inline::before,
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-radio li.wpforms-selected label.wpforms-field-label-inline::before,
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-checkbox li.wpforms-selected label.wpforms-field-label-inline::before{
  content:"✓";
  display:grid;
  place-items:center;
  width:14px;
  height:14px;
  margin-right:10px;
  border-radius:50%;
  border-color:var(--gold);
  background:var(--gold);
  color:#1a1300;
  font-size:9px;
  font-weight:700;
  line-height:1;
}
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-checkbox li input[type=checkbox]:checked + label.wpforms-field-label-inline::before,
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-checkbox li.wpforms-selected label.wpforms-field-label-inline::before{
  border-radius:4px;
}
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-radio li input[type=radio]:focus-visible + label.wpforms-field-label-inline,
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-checkbox li input[type=checkbox]:focus-visible + label.wpforms-field-label-inline{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/* single-choice consent checkboxes (long sentence) read as a full-width card, not a lozenge */
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-checkbox li:only-child{
  width:100%;
}
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-checkbox li:only-child label.wpforms-field-label-inline{
  width:100%;
  border-radius:14px;
  align-items:flex-start;
  text-align:left;
  white-space:normal;
  line-height:1.5;
}

/* Categoria (field 1) and Socio/Invitado (field 2) read as big segmented choices, still inline.
   Field IDs come from wp/forms/run100-forms.json; WPForms prints the container id as
   #wpforms-{form_id}-field_{field_id}-container, so an attribute suffix match survives the
   form_id varying between environments. Update these two selectors if the field IDs ever change. */
.run100-skin [class*="wpforms-container"] .wpforms-form [id$="-field_1-container"] li label.wpforms-field-label-inline,
.run100-skin [class*="wpforms-container"] .wpforms-form [id$="-field_2-container"] li label.wpforms-field-label-inline{
  padding:16px 22px;
  font-size:17px;
  font-weight:700;
}

@media(max-width:480px){
  .run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-radio li:not(:only-child),
  .run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-checkbox li:not(:only-child){
    width:100%;
  }
  .run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-radio li:not(:only-child) label.wpforms-field-label-inline,
  .run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-checkbox li:not(:only-child) label.wpforms-field-label-inline{
    width:100%;
    justify-content:center;
  }
}

/* html fields used as section eyebrows ("Tu carrera", "Tus datos", "Kit y seguridad").
   WPForms Lite has no html field type, so on Lite forms nothing matches this block — that's
   expected and harmless, no other rule in this file depends on it existing. */
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-html{
  margin-top:40px;
}
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-html:first-child{
  margin-top:0;
}
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-html h3{
  font-family:'Anton',sans-serif;
  font-size:22px;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.15;
  padding-left:16px;
  border-left:3px solid var(--gold);
}
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field-html p{
  color:var(--mute);
  font-size:14px;
  font-weight:300;
  margin-top:8px;
}

/* submit button — same look as .btn.btn-gold, duplicated here because WPForms owns the markup */
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-submit-container{
  margin-top:32px;
  width:100%;
}
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  min-height:52px;
  padding:15px 32px;
  border:none;
  border-radius:40px;
  cursor:pointer;
  font-family:'Sora',sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:.04em;
  background:linear-gradient(120deg,var(--gold),var(--gold-hi));
  color:#1a1300;
  box-shadow:0 8px 26px rgba(212,166,54,.32);
  transition:transform .25s var(--speed),box-shadow .25s,filter .25s;
}
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-submit:hover{
  transform:translateY(-2px);
  filter:brightness(1.07);
  box-shadow:0 12px 34px rgba(212,166,54,.46);
}
@media(min-width:480px){
  .run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-submit{
    width:auto;
  }
}

/* error states */
.run100-skin [class*="wpforms-container"] .wpforms-form input.wpforms-error,
.run100-skin [class*="wpforms-container"] .wpforms-form select.wpforms-error,
.run100-skin [class*="wpforms-container"] .wpforms-form textarea.wpforms-error{
  border-color:var(--c-magenta);
}
.run100-skin [class*="wpforms-container"] .wpforms-form label.wpforms-error{
  display:block;
  margin-top:6px;
  color:var(--c-magenta);
  font-family:'Sora',sans-serif;
  font-size:13px;
  font-weight:600;
}
.run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-error-container{
  margin-bottom:20px;
  padding:14px 18px;
  border:1px solid var(--c-magenta);
  border-radius:12px;
  background:rgba(224,33,138,.08);
  color:var(--c-magenta);
  font-family:'Sora',sans-serif;
  font-size:14px;
}

/* two-column pairs — only activates if the field carries WPForms' own CSS classes
   (added in the field's "Advanced > CSS Classes" setting). No effect otherwise. */
@media(min-width:720px){
  .run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field.wpforms-one-half{
    display:inline-block;
    width:calc(50% - 12px);
    vertical-align:top;
  }
  .run100-skin [class*="wpforms-container"] .wpforms-form .wpforms-field.wpforms-one-half.wpforms-first{
    margin-right:24px;
  }
}

@media(prefers-reduced-motion:reduce){
  .run100-skin [class*="wpforms-container"] *{
    transition:none!important;
  }
}

/* ===================== [run100_pago] payment card ===================== */
/* Rewritten against the plugin's real semantic markup (see coordinator-provided
   pago-markup.html) — no positional (nth-of-type) or generic tag selectors, no
   generated ::before/::after text; every string the visitor reads comes from the
   plugin's own HTML. */

.run100-pago,
.run100-pago--error{
  max-width:640px;
  margin:0 auto;
  padding:32px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
}
@media(max-width:480px){
  .run100-pago,
  .run100-pago--error{
    padding:24px;
  }
}
.run100-pago--error{
  font-family:'Sora',sans-serif;
  font-size:15px;
  color:var(--mute);
}

.run100-pago__eyebrow{
  margin:0;
  font-family:'Sora',sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
}
.run100-pago__saludo{
  margin:6px 0 18px;
  font-family:'Anton',sans-serif;
  font-weight:400;
  font-size:28px;
  color:var(--white);
}

.run100-pago__codigo{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin:0 0 18px;
}
.run100-pago__codigo-label{
  font-family:'Sora',sans-serif;
  font-size:13px;
  color:var(--mute);
}
#run100-codigo{
  background:none;
  padding:0;
  font-family:'Anton',sans-serif;
  font-size:40px;
  letter-spacing:.02em;
  color:var(--gold);
}
.run100-copy{
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--white);
  cursor:pointer;
  font-family:'Sora',sans-serif;
  font-weight:700;
  font-size:13px;
  transition:border-color .25s,color .25s;
}
.run100-copy:hover,
.run100-copy:focus-visible{
  border-color:var(--gold);
  outline:none;
}
.run100-copy.is-copied{
  border-color:var(--gold);
  color:var(--gold);
}

.run100-pago__monto{
  display:block;
  margin:18px 0 24px;
}
.run100-pago__monto-label{
  display:block;
  margin-bottom:4px;
  font-family:'Sora',sans-serif;
  font-size:13px;
  color:var(--mute);
}
.run100-pago__monto strong{
  font-family:'Anton',sans-serif;
  font-weight:400;
  font-size:48px;
  line-height:1;
  color:var(--white);
}
.run100-pago__moneda{
  margin-left:8px;
  font-family:'Sora',sans-serif;
  font-size:14px;
  color:var(--mute);
}

.run100-pago__pasos{
  margin:0 0 24px;
  padding-left:0;
  list-style:none;
  counter-reset:run100-step;
  font-family:'Sora',sans-serif;
  font-size:15px;
  color:var(--white);
}
.run100-pago__pasos li{
  position:relative;
  margin:10px 0;
  padding-left:36px;
  counter-increment:run100-step;
}
.run100-pago__pasos li::before{
  content:counter(run100-step);
  position:absolute;
  left:0;
  top:0;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--gold);
  color:var(--ink);
  font-family:'Anton',sans-serif;
  font-size:14px;
}
/* the ONLY monospace element in the card — real Davivienda field-name/value chips */
.run100-pago__field{
  display:inline-block;
  padding:2px 8px;
  border:1px solid var(--line);
  border-radius:6px;
  background:rgba(255,255,255,.06);
  color:var(--gold-hi);
  font-family:ui-monospace,Menlo,monospace;
  font-size:13px;
  white-space:nowrap;
}

.run100-pago__cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}
/* .btn/.btn-gold/.btn-ghost already come from style.css — do not restyle them here */
.run100-pago .btn{
  display:inline-flex;
}
@media(max-width:480px){
  .run100-pago .btn{
    width:100%;
    justify-content:center;
  }
}

.run100-pago__nota{
  margin-top:16px;
  font-family:'Sora',sans-serif;
  font-size:13px;
  color:var(--mute);
}

@media(prefers-reduced-motion:reduce){
  .run100-pago *,
  .run100-copy{
    transition:none!important;
  }
}

/* ===================== [run100_estado] lookup + result ===================== */

.run100-estado-form{
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:480px;
  margin-bottom:20px;
}
/* label/input styling for run100_documento/run100_celular now comes from the shared
   .run100-field__label / .run100-field__control skin (see "native plugin forms" below) —
   the shortcode wraps both inputs in that same markup, so no bespoke rule is needed here
   (and none is missing input[type=tel] the way the old bespoke input[type=text]-only rule was). */
.run100-estado-form button[type=submit]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:52px;
  padding:15px 32px;
  border:none;
  border-radius:40px;
  cursor:pointer;
  font-family:'Sora',sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:.04em;
  background:linear-gradient(120deg,var(--gold),var(--gold-hi));
  color:#1a1300;
  box-shadow:0 8px 26px rgba(212,166,54,.32);
  transition:transform .25s var(--speed),box-shadow .25s,filter .25s;
}
.run100-estado-form button[type=submit]:hover{
  transform:translateY(-2px);
  filter:brightness(1.07);
  box-shadow:0 12px 34px rgba(212,166,54,.46);
}

/* base pill = "registrado"; forms.js adds .is-pendiente / .is-inscrito by reading the
   plugin's plain-text result (there is no state-specific class to hook into) */
.run100-estado-resultado{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 22px;
  border-radius:40px;
  background:rgba(154,154,174,.12);
  border:1px solid var(--line);
  color:var(--mute);
  font-family:'Sora',sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:.02em;
}
.run100-estado-resultado.is-pendiente{
  background:rgba(212,166,54,.12);
  border-color:var(--gold);
  color:var(--gold-hi);
}
.run100-estado-resultado.is-inscrito{
  background:rgba(22,181,160,.14);
  border-color:var(--c-teal);
  color:var(--c-teal);
}

@media(prefers-reduced-motion:reduce){
  .run100-estado-form *,
  .run100-estado-resultado{
    transition:none!important;
  }
}

/* ===================== native plugin forms (run100-form) ===================== */
/* Registro/comprobante now render their own markup — no WPForms wrapper — so this
 * section is scoped directly under `.run100-form`, no body class needed. Checked against
 * the real rendered HTML (native-registro-markup.html, native-comprobante-markup.html)
 * requested for this pass; both files are deleted once this skin is verified.
 */

.run100-form{
  display:block;
  max-width:720px;
  margin:0;
}

/* honeypot: must stay in the DOM and focusable-by-bot but off the visible viewport —
   display:none would make some spam bots skip filling it, defeating the trap */
.run100-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.run100-form__section{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  margin:0 0 40px;
  padding:0;
  border:0;
  min-width:0; /* fieldset's UA default (min-width:min-content) fights grid item shrinking */
}
.run100-form__section:last-of-type{
  margin-bottom:0;
}
@media(min-width:720px){
  .run100-form__section{
    grid-template-columns:1fr 1fr;
    gap:18px 20px;
  }
}

.run100-form__legend{
  grid-column:1 / -1;
  display:block;
  font-family:'Anton',sans-serif;
  font-size:22px;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.15;
  padding-left:16px;
  border-left:3px solid var(--gold);
  margin:0 0 24px;
}

.run100-field{
  grid-column:1 / -1;
  min-width:0;
}

/* two-up pairs on desktop — order in the real markup is checked to always place these
   adjacent, so `auto` placement lands them side by side without naming a wrapper */
@media(min-width:720px){
  .run100-field--nombres,
  .run100-field--apellidos,
  .run100-field--emergencia_nombre,
  .run100-field--emergencia_tel,
  .run100-field--acudiente_doc,
  .run100-field--acudiente_tel,
  .run100-field--tipo_doc,
  .run100-field--documento{
    grid-column:auto;
  }
}

/* the guardian block wraps acudiente_nombre/doc/tel in its own div — display:contents lets
   its children join the section's grid directly instead of the wrapper eating a full row.
   If JS ever toggles this block with the `hidden` attribute instead of a class, the second
   rule keeps that working (author `display:contents` would otherwise beat the UA `[hidden]`
   rule and the block would stay visible). */
.run100-form__acudiente{
  display:contents;
}
.run100-form__acudiente[hidden]{
  display:none;
}

/* heading above a consent checkbox (Autorización de imagen, Exoneración de responsabilidad,
   Política de datos) — bold and smaller than .run100-field__label, which stays reserved for
   the actual control label/sentence right below it */
.run100-field__title{
  display:block;
  font-family:'Sora',sans-serif;
  font-weight:700;
  font-size:14px;
  color:var(--white);
  margin:0 0 .35rem;
}

.run100-field__label{
  display:block;
  font-family:'Sora',sans-serif;
  font-weight:600;
  font-size:15px;
  color:var(--white);
  margin-bottom:8px;
}
.run100-field__req{
  color:var(--c-magenta);
  margin-left:2px;
}
.run100-field__help{
  font-family:'Sora',sans-serif;
  font-weight:300;
  font-size:13px;
  color:var(--mute);
  margin-top:8px;
}
.run100-field__error{
  color:var(--c-magenta);
  font-family:'Sora',sans-serif;
  font-size:13px;
  font-weight:600;
  margin-top:6px;
}

/* consent checkboxes reuse .run100-field__control on the <input> itself, wrapped by a label
   that also carries the sentence — :has() splits the checkbox layout from the text-input one
   without needing a per-field class */
.run100-field__label:has(> input[type=checkbox]){
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
  font-weight:400;
  color:var(--mute);
}
.run100-field__label a{
  color:var(--gold-hi);
  text-decoration:underline;
}

.run100-field__control{
  font-family:'Sora',sans-serif;
  font-size:16px;
  color:var(--white);
  border-radius:12px;
  transition:border-color .25s,box-shadow .25s;
}
.run100-field__control:not([type=checkbox]):not([type=radio]){
  display:block;
  width:100%;
  background:var(--panel);
  border:1px solid var(--line);
  padding:14px 16px;
}
textarea.run100-field__control{
  min-height:120px;
  resize:vertical;
}
.run100-field__control::placeholder{
  color:var(--mute-2);
}
.run100-field__control:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(212,166,54,.25);
}

/* select: hide native arrow, paint a gold chevron (data URI can't read var(), so the hex is
   the literal value of --gold — keep both in sync if the token ever changes) */
select.run100-field__control{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  cursor:pointer;
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23D4A636' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:12px 8px;
}

/* date: keep the native picker (no JS date widget), just theme it for the dark panel */
input[type=date].run100-field__control{
  color-scheme:dark;
}

/* file: native control stays fully visible and clickable — only the drop-zone framing and
   the ::file-selector-button chip are styled, no JS overlay */
input[type=file].run100-field__control{
  border:1.5px dashed var(--line);
  background:rgba(255,255,255,.02);
  padding:20px 16px;
  color:var(--mute);
  font-size:14px;
  cursor:pointer;
}
input[type=file].run100-field__control:hover{
  border-color:var(--gold);
}
input[type=file].run100-field__control::file-selector-button{
  margin-right:14px;
  padding:10px 18px;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--white);
  font-family:'Sora',sans-serif;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  transition:border-color .25s,color .25s;
}
input[type=file].run100-field__control::file-selector-button:hover{
  border-color:var(--gold);
  color:var(--gold-hi);
}

/* checkbox: native box, just sized and tinted to match the palette */
input[type=checkbox].run100-field__control{
  flex-shrink:0;
  width:20px;
  height:20px;
  margin-top:2px;
  accent-color:var(--gold);
  cursor:pointer;
}

/* ── choices: radio pills ──
   markup is label.run100-choice > input[type=radio] + span.run100-choice__text.
   Checked state needs two layers: `:has()` paints the pill itself (border/background) in
   browsers that support it; the `input:checked + .run100-choice__text::before` badge is the
   fallback that also works without `:has()`, so both run unconditionally. */
.run100-choices{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.run100-choice{
  position:relative;
  display:inline-flex;
  align-items:center;
  padding:12px 18px;
  border-radius:999px;
  border:1.5px solid var(--line);
  background:rgba(255,255,255,.02);
  color:var(--mute);
  font-family:'Sora',sans-serif;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  user-select:none;
  transition:border-color .25s,background .25s,color .25s;
}

/* hidden-but-focusable native input: standard sr-only recipe, not display:none/visibility:hidden,
   so keyboard and screen-reader users keep full access to it */
.run100-choice input{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
  opacity:0;
}

.run100-choice:has(input:checked){
  border-color:var(--gold);
  background:rgba(212,166,54,.14);
  color:var(--white);
}
.run100-choice:has(input:focus-visible){
  outline:2px solid var(--gold);
  outline-offset:3px;
}
.run100-choice input:checked + .run100-choice__text::before{
  content:"✓";
  display:inline-grid;
  place-items:center;
  width:14px;
  height:14px;
  margin-right:8px;
  border-radius:50%;
  background:var(--gold);
  color:#1a1300;
  font-size:9px;
  font-weight:700;
  line-height:1;
}

/* Categoria and Socio/Invitado read as big segmented choices */
.run100-field--categoria .run100-choice,
.run100-field--asociado .run100-choice{
  padding:16px 22px;
  font-size:17px;
  font-weight:700;
}

@media(max-width:480px){
  .run100-choices{
    width:100%;
  }
  .run100-field--categoria .run100-choice,
  .run100-field--asociado .run100-choice,
  .run100-field--genero .run100-choice,
  .run100-field--menor .run100-choice{
    flex:1 1 auto;
    justify-content:center;
  }
}

.run100-form__precio{
  grid-column:1 / -1;
  margin-top:4px;
  padding:14px 18px;
  border:1px solid var(--gold);
  border-radius:12px;
  background:rgba(212,166,54,.08);
  color:var(--white);
  font-family:'Sora',sans-serif;
  font-size:15px;
  font-weight:600;
}
.run100-form__precio strong{
  display:block;
  margin-top:4px;
  font-family:'Anton',sans-serif;
  font-weight:400;
  font-size:22px;
  color:var(--gold-hi);
}

/* invalid state — applies to text/select controls and to a whole choices group */
.is-invalid .run100-field__control{
  border-color:var(--c-magenta);
}
.is-invalid .run100-field__control:focus{
  box-shadow:0 0 0 4px rgba(224,33,138,.25);
}
.is-invalid .run100-choice{
  border-color:rgba(224,33,138,.4);
}

/* "Inscripción RUN100-0000" line shown above the comprobante form when it was
   opened from a tokenized [run100_pago] link (código prefilled and readonly) */
.run100-form__prefill{
  margin:0 0 20px;
  font-family:'Sora',sans-serif;
  font-weight:600;
  font-size:14px;
  color:var(--gold-hi);
}

.run100-form__errors{
  margin-bottom:24px;
  padding:16px 20px;
  border:1px solid var(--c-magenta);
  border-radius:12px;
  background:rgba(224,33,138,.08);
  color:var(--c-magenta);
  font-family:'Sora',sans-serif;
  font-size:14px;
}
.run100-form__errors ul{
  display:grid;
  gap:6px;
  margin:8px 0 0;
  padding:0;
  list-style:none;
}
.run100-form__errors a{
  color:var(--c-magenta);
  font-weight:600;
  text-decoration:underline;
}
.run100-form__errors a:hover{
  color:var(--white);
}

.run100-form__submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  min-height:52px;
  margin-top:8px;
}
@media(min-width:480px){
  .run100-form__submit{
    width:auto;
  }
}
.run100-form__submit[disabled]{
  opacity:.5;
  filter:none;
  box-shadow:none;
  transform:none;
  cursor:not-allowed;
}

@media(prefers-reduced-motion:reduce){
  .run100-form *{
    transition:none!important;
  }
}

/* ===================== [run100_contador] ===================== */

.run100-contador{
  display:inline-block;
  padding:.08em .04em;
  margin:-.08em -.04em; /* Anton's tall glyphs clip at line-height 1 without this, see .gold-text above */
  font-family:'Anton',sans-serif;
  font-size:56px;
  line-height:1;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-deep));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* optional: wrap accompanying copy in the page editor with this class, e.g.
   [run100_contador] <span class="run100-contador-label">inscritos</span> */
.run100-contador-label{
  margin-left:8px;
  font-family:'Sora',sans-serif;
  font-weight:600;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
}