/* ============================================================
   Nodoq Emprendimientos — Form público [nodoq_alta_emprendimiento]
   Font: Plus Jakarta Sans (replaces Geist from design system)
   All selectors scoped under .nodoq-form-wrap
   Overrides ACF Forms default look via CSS only.
   ============================================================ */

.nodoq-form-wrap {
  --bg: #F4F1EC;
  --ink: #0E0E10;
  --ink-soft: rgba(14,14,16,0.72);
  --ink-dim: rgba(14,14,16,0.5);
  --ink-faint: rgba(14,14,16,0.38);
  --line: rgba(14,14,16,0.14);
  --hairline: rgba(14,14,16,0.08);
  --card: #FFFFFF;

  --magenta: #FF3DA8;
  --violet:  #7A4DFF;
  --cyan:    #34E7E4;
  --plasma: linear-gradient(120deg, #FF3DA8 0%, #7A4DFF 50%, #34E7E4 100%);
  --glow: 255, 61, 168;

  --display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --body:    "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;
  --italic:  "Instrument Serif", "Times New Roman", serif;

  max-width: 640px;
  margin: 0 auto;
  font-family: var(--body);
  color: var(--ink);
}

.nodoq-form-wrap { box-sizing: border-box; }
.nodoq-form-wrap *, .nodoq-form-wrap *::before, .nodoq-form-wrap *::after { box-sizing: border-box; }
.nodoq-form-wrap ::selection { background: var(--magenta); color: #fff; }

/* Reset theme inheritance */
.nodoq-form-wrap h1, .nodoq-form-wrap h2, .nodoq-form-wrap h3,
.nodoq-form-wrap h4, .nodoq-form-wrap h5, .nodoq-form-wrap h6 {
  font-family: var(--display) !important;
  font-weight: 600 !important;
  margin: 0 !important; padding: 0 !important;
  border: none !important; background: none !important;
  text-transform: none !important; text-decoration: none !important;
  color: var(--ink) !important;
  line-height: 1.1 !important;
}
.nodoq-form-wrap p { margin: 0 !important; padding: 0 !important; }
.nodoq-form-wrap label { margin: 0 !important; padding: 0 !important; }

/* ── Card shell (el form es la surface) ─────────────────── */
.nodoq-form-wrap .acf-form {
  background: var(--card) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 18px !important;
  padding: 36px !important;
  box-shadow:
    0 1px 0 rgba(14,14,16,0.04),
    0 30px 60px -30px rgba(14,14,16,0.22) !important;
}

/* ── Fields layout ──────────────────────────────────────── */
.nodoq-form-wrap .acf-fields {
  border: none !important;
  background: none !important;
}
/* El stepper mueve cada campo adentro de un .nodoq-step, así que el
   hijo directo de .acf-fields deja de ser el campo. Las dos formas
   conviven: sin JS (o con un solo paso) el form queda plano. */
.nodoq-form-wrap .acf-fields > .acf-field,
.nodoq-form-wrap .nodoq-step > .acf-field {
  border: none !important;
  border-top: 1px solid var(--hairline) !important;
  padding: 22px 0 !important;
  margin: 0 !important;
  background: none !important;
}
.nodoq-form-wrap .acf-fields > .acf-field:first-child,
.nodoq-form-wrap .nodoq-step > .acf-field:first-child {
  border-top: none !important;
  padding-top: 0 !important;
}

/* ── Stepper (nodoq-form.js) ────────────────────────────── */
/* El JS agrupa los .acf-field en .nodoq-step y muestra uno por vez.
   Los pasos ocultos siguen viajando en el POST: [hidden] es
   display:none, y display:none no excluye un control del envío.
   Los !important son porque tanto ACF como el theme pueden pisar
   display en elementos de form. */
.nodoq-form-wrap .nodoq-step[hidden],
.nodoq-form-wrap .nodoq-steps-nav [hidden],
.nodoq-form-wrap .acf-form-submit[hidden] {
  display: none !important;
}

/* La animación no se dispara al togglear [hidden] por sí sola: se
   reinicia cuando el elemento vuelve de display:none, que es
   exactamente cada vez que entra un paso nuevo. */
.nodoq-form-wrap .nodoq-step {
  animation: nodoq-step-in 260ms ease both;
}
@keyframes nodoq-step-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Encabezado: barra segmentada + eyebrow + título del paso */
.nodoq-form-wrap .nodoq-steps-head {
  margin: 0 0 28px !important;
}
.nodoq-form-wrap .nodoq-steps-track {
  display: flex;
  gap: 6px;
  margin: 0 0 18px;
}
.nodoq-form-wrap .nodoq-steps-seg {
  flex: 1 1 0;
  height: 4px;
  border-radius: 999px;
  background: rgba(14,14,16,0.10);
  transition: background 260ms ease, box-shadow 260ms ease;
}
.nodoq-form-wrap .nodoq-steps-seg.is-done {
  background: var(--violet);
}
.nodoq-form-wrap .nodoq-steps-seg.is-current {
  background: var(--magenta);
  box-shadow: 0 6px 18px -8px rgba(var(--glow), 0.9);
}
.nodoq-form-wrap .nodoq-steps-eyebrow {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--ink-dim) !important;
  margin: 0 0 8px !important;
}
.nodoq-form-wrap .nodoq-steps-title {
  font-family: var(--display) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  color: var(--ink) !important;
}
/* El título recibe el foco al cambiar de paso (tabindex -1) para que
   el lector de pantalla lea el paso nuevo. Es foco programático, no
   navegación por teclado: el anillo sería ruido visual. */
.nodoq-form-wrap .nodoq-steps-title:focus {
  outline: 0 !important;
}
.nodoq-form-wrap .nodoq-steps-desc {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--ink-soft) !important;
  margin: 8px 0 0 !important;
}
.nodoq-form-wrap .nodoq-steps-desc[hidden] {
  display: none !important;
}

/* Navegación. El submit de ACF se muda adentro de esta fila, así que
   el borde y el padding que traía pasan acá. */
.nodoq-form-wrap .nodoq-steps-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 28px 0 0;
  margin: 0;
  border-top: 1px solid var(--hairline);
}
.nodoq-form-wrap .nodoq-steps-nav .acf-form-submit {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  border-top: none !important;
}
.nodoq-form-wrap .nodoq-step-back { flex: 0 0 auto; }
.nodoq-form-wrap .nodoq-step-next { flex: 1 1 auto; }

.nodoq-form-wrap .nodoq-step-btn {
  font-family: var(--body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  line-height: 1.2 !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  padding: 16px 22px !important;
  margin: 0 !important;
  cursor: pointer;
  text-shadow: none !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: transform 220ms ease, box-shadow 220ms ease,
              border-color 220ms ease, color 220ms ease;
}
.nodoq-form-wrap .nodoq-step-next {
  background: var(--magenta) !important;
  border-color: var(--magenta) !important;
  color: #fff !important;
}
.nodoq-form-wrap .nodoq-step-next:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--magenta), 0 12px 32px -12px rgba(var(--glow), 0.7) !important;
}
.nodoq-form-wrap .nodoq-step-back {
  background: transparent !important;
  border-color: var(--line) !important;
  color: var(--ink-soft) !important;
}
.nodoq-form-wrap .nodoq-step-back:hover {
  border-color: rgba(14,14,16,0.28) !important;
  color: var(--ink) !important;
}
.nodoq-form-wrap .nodoq-step-btn:focus-visible {
  outline: 0 !important;
  box-shadow: 0 0 0 4px rgba(255,61,168,0.18) !important;
}

/* ── Labels ─────────────────────────────────────────────── */
.nodoq-form-wrap .acf-label {
  margin: 0 0 8px !important;
}
.nodoq-form-wrap .acf-label label {
  font-family: var(--body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  color: var(--ink) !important;
  margin: 0 !important;
  display: block !important;
}
.nodoq-form-wrap .acf-required {
  color: var(--magenta) !important;
}
.nodoq-form-wrap .acf-label .description,
.nodoq-form-wrap .acf-input .description {
  font-family: var(--body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--ink-dim) !important;
  margin: 4px 0 0 !important;
}

/* ── Inputs ─────────────────────────────────────────────── */
.nodoq-form-wrap .acf-input input[type="text"],
.nodoq-form-wrap .acf-input input[type="email"],
.nodoq-form-wrap .acf-input input[type="url"],
.nodoq-form-wrap .acf-input input[type="tel"],
.nodoq-form-wrap .acf-input input[type="number"],
.nodoq-form-wrap .acf-input input[type="password"],
.nodoq-form-wrap .acf-input textarea,
.nodoq-form-wrap .acf-input select {
  width: 100% !important;
  font-family: var(--body) !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  min-height: 52px !important;
  box-shadow: none !important;
  outline: 0 !important;
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.nodoq-form-wrap .acf-input textarea {
  min-height: 120px !important;
  resize: vertical;
  line-height: 1.5 !important;
}
.nodoq-form-wrap .acf-input input:hover,
.nodoq-form-wrap .acf-input textarea:hover,
.nodoq-form-wrap .acf-input select:hover {
  border-color: rgba(14,14,16,0.28) !important;
}
.nodoq-form-wrap .acf-input input:focus,
.nodoq-form-wrap .acf-input textarea:focus,
.nodoq-form-wrap .acf-input select:focus {
  border-color: var(--magenta) !important;
  box-shadow: 0 0 0 4px rgba(255,61,168,0.12) !important;
  background: var(--card) !important;
  outline: 0 !important;
}
.nodoq-form-wrap .acf-input input::placeholder,
.nodoq-form-wrap .acf-input textarea::placeholder {
  color: var(--ink-faint) !important;
}

/* ── Input group: prefijo + input como un control único ─── */
/* ACF flotea el prefijo y lo dimensiona por su cuenta, así que con
   nuestro alto de 52px quedaba una caja suelta al lado del input.
   Lo pasamos a flex. En el DOM ACF imprime prepend, append y recién
   después el input, por eso el order explícito. */
.nodoq-form-wrap .acf-input:has(> .acf-input-prepend),
.nodoq-form-wrap .acf-input:has(> .acf-input-append) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.nodoq-form-wrap .acf-input-prepend { order: 1; }
.nodoq-form-wrap .acf-input-wrap    { order: 2; }
.nodoq-form-wrap .acf-input-append  { order: 3; }

/* description y errores bajan a renglón completo */
.nodoq-form-wrap .acf-input:has(> .acf-input-prepend) > .description,
.nodoq-form-wrap .acf-input:has(> .acf-input-append) > .description,
.nodoq-form-wrap .acf-input:has(> .acf-input-prepend) > .acf-error-message,
.nodoq-form-wrap .acf-input:has(> .acf-input-append) > .acf-error-message {
  order: 4;
  flex: 0 0 100%;
}

.nodoq-form-wrap .acf-input:has(> .acf-input-prepend) > .acf-input-wrap,
.nodoq-form-wrap .acf-input:has(> .acf-input-append) > .acf-input-wrap {
  flex: 1 1 0;
  min-width: 0;
}

.nodoq-form-wrap .acf-input-prepend,
.nodoq-form-wrap .acf-input-append {
  display: flex !important;
  align-items: center;
  flex-shrink: 0;
  float: none !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  font-family: var(--body) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: var(--ink-dim) !important;
  background: rgba(14,14,16,0.04) !important;
  border: 1px solid var(--line) !important;
  white-space: nowrap;
}
.nodoq-form-wrap .acf-input-prepend {
  border-right: 0 !important;
  border-radius: 12px 0 0 12px !important;
}
.nodoq-form-wrap .acf-input-append {
  border-left: 0 !important;
  border-radius: 0 12px 12px 0 !important;
}

/* Las clases del input cambiaron entre versiones de ACF
   (acf-is-prepended vs. wrap .-prepend): cubrimos las dos. */
.nodoq-form-wrap .acf-input input.acf-is-prepended,
.nodoq-form-wrap .acf-input-wrap.-prepend input {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.nodoq-form-wrap .acf-input input.acf-is-appended,
.nodoq-form-wrap .acf-input-wrap.-append input {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* ── Campo URL: fuera el ícono de ACF ───────────────────── */
/* ACF inyecta un <i class="acf-icon -globe"> absoluto y reserva
   lugar con padding-left en el input. Nuestro padding pisa esa
   reserva, así que el ícono terminaba encima del placeholder.
   Además es de su propio set, no del Lucide del sistema. */
.nodoq-form-wrap .acf-url > i,
.nodoq-form-wrap .acf-url > .acf-icon {
  display: none !important;
}
.nodoq-form-wrap .acf-url input[type="url"],
.nodoq-form-wrap .acf-url input[type="text"] {
  padding-left: 18px !important;
}

/* Uploader básico (input file) */
.nodoq-form-wrap .acf-input input[type="file"] {
  font-family: var(--body) !important;
  font-size: 14px !important;
  color: var(--ink-soft) !important;
}

/* ── Checkbox / radio / true_false ──────────────────────── */
.nodoq-form-wrap .acf-input input[type="checkbox"],
.nodoq-form-wrap .acf-input input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 5px !important;
  accent-color: var(--magenta);
  cursor: pointer;
}
.nodoq-form-wrap .acf-input input[type="radio"] {
  border-radius: 999px !important;
}
.nodoq-form-wrap .acf-checkbox-list li,
.nodoq-form-wrap .acf-radio-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px !important;
  color: var(--ink) !important;
  margin: 0 0 8px !important;
}
.nodoq-form-wrap .acf-checkbox-list label,
.nodoq-form-wrap .acf-radio-list label {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  font-weight: 400 !important;
  cursor: pointer;
}

/* ── Taxonomías: rubro (checks) y departamento (radios) ─── */
/* ACF envuelve la lista en .categorychecklist-holder y su propio CSS
   le mete max-height:200px + overflow:auto. Neutralizarlo es lo que
   faltaba: sacar el max-height de la <ul> no alcanzaba, el recorte
   venía del contenedor de afuera. */
.nodoq-form-wrap .acf-taxonomy-field .categorychecklist-holder {
  max-height: none !important;
  overflow: visible !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Chips en vez de columnas fijas: fluyen según el largo de cada
   nombre, entran todas a la vista sin scroll y el estado elegido se
   lee de un golpe. Sin altura fija en ningún nivel. */
.nodoq-form-wrap .acf-taxonomy-field ul.acf-checkbox-list,
.nodoq-form-wrap .acf-taxonomy-field ul.acf-radio-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: none !important;
  overflow: visible !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.nodoq-form-wrap .acf-taxonomy-field ul.acf-checkbox-list li,
.nodoq-form-wrap .acf-taxonomy-field ul.acf-radio-list li {
  margin: 0 !important;
  padding: 0 !important;
}

/* Taxonomías jerárquicas: ACF anida los hijos en <ul class="children">.
   Sin esto el sub-nivel entra como un único flex item y la fila de
   chips se rompe o el nivel de abajo queda fuera de vista. */
.nodoq-form-wrap .acf-taxonomy-field ul.acf-checkbox-list ul,
.nodoq-form-wrap .acf-taxonomy-field ul.acf-radio-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-basis: 100%;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.nodoq-form-wrap .acf-taxonomy-field ul.acf-checkbox-list label,
.nodoq-form-wrap .acf-taxonomy-field ul.acf-radio-list label {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 9px 16px !important;
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  font-family: var(--body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.nodoq-form-wrap .acf-taxonomy-field ul.acf-checkbox-list label:hover,
.nodoq-form-wrap .acf-taxonomy-field ul.acf-radio-list label:hover {
  border-color: rgba(14,14,16,0.28) !important;
}

/* Estado elegido. El input va adentro del label en el markup de ACF,
   así que :has() es la única forma de pintar el chip sin JS. */
.nodoq-form-wrap .acf-taxonomy-field ul.acf-checkbox-list label:has(input:checked),
.nodoq-form-wrap .acf-taxonomy-field ul.acf-radio-list label:has(input:checked) {
  background: rgba(255,61,168,0.08) !important;
  border-color: var(--magenta) !important;
  color: var(--magenta) !important;
  font-weight: 600 !important;
}
.nodoq-form-wrap .acf-taxonomy-field ul.acf-checkbox-list label:focus-within,
.nodoq-form-wrap .acf-taxonomy-field ul.acf-radio-list label:focus-within {
  border-color: var(--magenta) !important;
  box-shadow: 0 0 0 4px rgba(255,61,168,0.12) !important;
}
.nodoq-form-wrap .acf-taxonomy-field ul.acf-checkbox-list input,
.nodoq-form-wrap .acf-taxonomy-field ul.acf-radio-list input {
  flex-shrink: 0;
  margin: 0 !important;
}

/* Si el campo se configura como Select en vez de radios, ACF lo
   envuelve en Select2. Esto alinea el control cerrado con el resto
   de los inputs. El panel desplegable se monta al final del <body>,
   fuera de .nodoq-form-wrap, así que no lo alcanzamos sin romper el
   aislamiento del prefijo .nodoq-. */
.nodoq-form-wrap .select2-container {
  width: 100% !important;
}
.nodoq-form-wrap .select2-container .select2-selection--single {
  height: 52px !important;
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  outline: 0 !important;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.nodoq-form-wrap .select2-container .select2-selection--single
  .select2-selection__rendered {
  font-family: var(--body) !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  line-height: 50px !important;
  padding-left: 18px !important;
  padding-right: 40px !important;
}
.nodoq-form-wrap .select2-container .select2-selection--single
  .select2-selection__placeholder {
  color: var(--ink-faint) !important;
}
.nodoq-form-wrap .select2-container .select2-selection--single
  .select2-selection__arrow {
  height: 50px !important;
  right: 12px !important;
}
.nodoq-form-wrap .select2-container--open .select2-selection--single {
  border-color: var(--magenta) !important;
  box-shadow: 0 0 0 4px rgba(255,61,168,0.12) !important;
  background: var(--card) !important;
}
/* add_term = 0 desde PHP ya lo saca; esto cubre el caso de que
   el theme o una versión distinta de ACF lo re-inyecte. */
.nodoq-form-wrap .acf-taxonomy-field .acf-actions {
  display: none !important;
}

/* ── True/false (ferias, prácticas sostenibles) ─────────── */
.nodoq-form-wrap .acf-true-false {
  display: flex !important;
  align-items: center;
  gap: 12px;
}
.nodoq-form-wrap .acf-true-false label {
  display: inline-flex !important;
  align-items: center;
  cursor: pointer;
}
.nodoq-form-wrap .acf-true-false .message {
  font-family: var(--body) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
}

/* Switch de ACF (solo si el campo tiene ui = 1) */
/* ACF mete los textos Sí/No DENTRO del track y le calcula el ancho
   por JS midiendo esos spans. Con nuestro alto propio el texto se
   montaba sobre el slider. Fijamos un track de tamaño conocido y
   sacamos los textos afuera, sin hardcodearlos: seguimos usando los
   spans reales de ACF, así respetan lo que esté configurado en
   ui_on_text / ui_off_text. */
.nodoq-form-wrap .acf-switch {
  position: relative !important;
  display: inline-block !important;
  width: 52px !important;
  min-width: 52px !important;
  height: 30px !important;
  /* Reserva para el texto de estado, que va posicionado afuera */
  margin-right: 44px !important;
  padding: 0 !important;
  background: rgba(14,14,16,0.12) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  flex-shrink: 0;
  transition: background 200ms ease, border-color 200ms ease;
}

/* Knob. El bloque de contención es el padding box del track:
   52 - 2px de borde = 50. Apagado va en 3, prendido en
   50 - 22 - 3 = 25. */
.nodoq-form-wrap .acf-switch .acf-switch-slider {
  position: absolute !important;
  top: 50% !important;
  left: 3px !important;
  transform: translateY(-50%);
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  background: var(--card) !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 3px rgba(14,14,16,0.25) !important;
  transition: left 200ms ease;
}
.nodoq-form-wrap .acf-switch.-on .acf-switch-slider {
  left: 25px !important;
}

/* Los dos textos se apilan en el mismo lugar, afuera del track;
   solo se muestra el del estado vigente. width:auto pisa el ancho
   inline que les setea el JS de ACF. */
.nodoq-form-wrap .acf-switch .acf-switch-on,
.nodoq-form-wrap .acf-switch .acf-switch-off {
  position: absolute !important;
  top: 50% !important;
  left: calc(100% + 10px) !important;
  transform: translateY(-50%);
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  font-family: var(--body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: left !important;
  text-indent: 0 !important;
  white-space: nowrap;
}
.nodoq-form-wrap .acf-switch .acf-switch-off { color: var(--ink-dim) !important; }
.nodoq-form-wrap .acf-switch .acf-switch-on  { color: var(--ink) !important; }

/* ACF solo agrega y saca la clase .-on; NUNCA existe una clase
   .-off. Por eso el estado apagado se define como default y el
   prendido lo invierte. Con selectores .-off no matcheaba nada y
   se veían los dos textos a la vez, encimados. */
.nodoq-form-wrap .acf-switch .acf-switch-off { display: block !important; }
.nodoq-form-wrap .acf-switch .acf-switch-on  { display: none !important; }

.nodoq-form-wrap .acf-switch.-on .acf-switch-off { display: none !important; }
.nodoq-form-wrap .acf-switch.-on .acf-switch-on  { display: block !important; }

.nodoq-form-wrap .acf-switch.-on {
  background: var(--magenta) !important;
  border-color: var(--magenta) !important;
}

/* ── Imagen (uploader básico) ───────────────────────────── */
/* uploader = 'basic' → input file nativo, sin modal de medios. */
.nodoq-form-wrap .acf-image-uploader .hide-if-value {
  border: 1px dashed var(--line) !important;
  border-radius: 12px !important;
  background: var(--bg) !important;
  padding: 18px !important;
  transition: border-color 200ms ease;
}
.nodoq-form-wrap .acf-image-uploader .hide-if-value:hover {
  border-color: var(--magenta) !important;
}
.nodoq-form-wrap .acf-image-uploader input[type="file"] {
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
.nodoq-form-wrap .acf-image-uploader input[type="file"]::file-selector-button {
  font-family: var(--body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  margin-right: 12px;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}
.nodoq-form-wrap .acf-image-uploader input[type="file"]::file-selector-button:hover {
  border-color: var(--magenta) !important;
  color: var(--magenta) !important;
}
.nodoq-form-wrap .acf-image-uploader .image-wrap img {
  display: block;
  max-width: 100% !important;
  height: auto !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 12px !important;
}

/* ── Validación (errores) ───────────────────────────────── */
/* Estados con la paleta del sistema: magenta, nunca rojo semáforo */
.nodoq-form-wrap .acf-error-message {
  background: rgba(255,61,168,0.08) !important;
  border: 1px solid rgba(255,61,168,0.35) !important;
  border-radius: 7px !important;
  padding: 8px 12px !important;
  margin: 8px 0 0 !important;
}
.nodoq-form-wrap .acf-error-message p {
  font-family: var(--body) !important;
  font-size: 13px !important;
  color: var(--magenta) !important;
  margin: 0 !important;
}
.nodoq-form-wrap .acf-error-message::before,
.nodoq-form-wrap .acf-error-message::after {
  display: none !important;
}
.nodoq-form-wrap .acf-notice.-error,
.nodoq-form-wrap .acf-error {
  background: rgba(255,61,168,0.08) !important;
  border: 1px solid rgba(255,61,168,0.35) !important;
  border-radius: 12px !important;
  color: var(--magenta) !important;
  padding: 14px 18px !important;
  margin: 0 0 18px !important;
}
.nodoq-form-wrap .acf-notice.-error p {
  color: var(--magenta) !important;
  font-size: 14px !important;
}

/* ── Mensaje de éxito (updated_message) ─────────────────── */
.nodoq-form-wrap #message.updated,
.nodoq-form-wrap .updated {
  background: rgba(52,231,228,0.10) !important;
  border: 1px solid rgba(52,231,228,0.45) !important;
  border-left-width: 1px !important; /* WP mete un left-border grueso */
  border-radius: 12px !important;
  padding: 18px 22px !important;
  margin: 0 0 22px !important;
  box-shadow: none !important;
}
.nodoq-form-wrap #message.updated p,
.nodoq-form-wrap .updated p {
  font-family: var(--body) !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

/* ── Submit ─────────────────────────────────────────────── */
.nodoq-form-wrap .acf-form-submit {
  padding: 28px 0 0 !important;
  margin: 0 !important;
  border-top: 1px solid var(--hairline) !important;
}
.nodoq-form-wrap .acf-button,
.nodoq-form-wrap .nodoq-form-submit {
  display: block !important;
  width: 100% !important;
  background: var(--magenta) !important;
  color: #fff !important;
  font-family: var(--body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 16px 22px !important;
  cursor: pointer;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.nodoq-form-wrap .acf-button:hover,
.nodoq-form-wrap .nodoq-form-submit:hover {
  background: var(--magenta) !important;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--magenta), 0 12px 32px -12px rgba(var(--glow), 0.7) !important;
}
.nodoq-form-wrap .acf-button:disabled {
  opacity: 0.6;
  transform: none;
  box-shadow: none !important;
}

/* Spinner de ACF al enviar */
/* Ojo con el !important acá: ACF muestra y oculta el spinner con
   style inline (display:inline-block / display:none) además de la
   clase .is-active, por compatibilidad con WP viejo. Si forzáramos
   display:none !important en el estado base, el spinner no se vería
   nunca, ni siquiera durante el envío. Por eso el estado oculto va
   sin !important y solo el activo lo lleva. */
.nodoq-form-wrap .acf-spinner {
  display: none;
  float: none !important;
  margin: 12px auto 0 !important;
}
.nodoq-form-wrap .acf-spinner.is-active {
  display: block !important;
}

/* ── Campo trampa (honeypot) ────────────────────────────── */
/* Nada de display:none ni visibility:hidden: los bots que valen algo
   los detectan y saltean el campo, que es justo lo contrario de lo
   que buscamos. Va con la técnica de "visually hidden" — ocupa un
   píxel recortado, sigue siendo un input de texto real y visible para
   el DOM. Del alcance de lectores de pantalla y del Tab lo sacan el
   aria-hidden y el tabindex="-1" que pone el PHP.
   Vive adentro de .acf-form-submit, que el stepper muda a la nav
   flex: por eso va absolute, para no entrar como flex item. */
.nodoq-form-wrap .nodoq-hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ── Acuse de alta enviada ──────────────────────────────── */
/* Reemplaza al form entero cuando ACF vuelve con la marca de éxito.
   Misma card que el form para que se lea como el mismo objeto, ahora
   resuelto. El cyan del sistema va como tinte de fondo y el trazo en
   ink: cyan puro sobre blanco no tiene contraste para un ícono de
   stroke, y el sistema no define una variante oscura. Es el mismo
   criterio que ya usaba el mensaje .updated. */
.nodoq-form-wrap .nodoq-done {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 44px 36px;
  text-align: center;
  box-shadow:
    0 1px 0 rgba(14,14,16,0.04),
    0 30px 60px -30px rgba(14,14,16,0.22);
  animation: nodoq-done-in 320ms ease both;
}
@keyframes nodoq-done-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.nodoq-form-wrap .nodoq-done-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 0 22px;
  border-radius: 999px;
  background: rgba(52,231,228,0.14);
  border: 1px solid rgba(52,231,228,0.5);
  color: var(--ink);
}
.nodoq-form-wrap .nodoq-done-icon svg {
  display: block;
  width: 26px;
  height: 26px;
}

.nodoq-form-wrap .nodoq-done-eyebrow {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--ink-dim) !important;
  margin: 0 0 10px !important;
}
.nodoq-form-wrap .nodoq-done-title {
  font-family: var(--display) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: var(--ink) !important;
}
.nodoq-form-wrap .nodoq-done-text {
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--ink-soft) !important;
  max-width: 42ch;
  margin: 12px auto 0 !important;
}
.nodoq-form-wrap .nodoq-done-again {
  margin: 28px 0 0 !important;
  padding: 22px 0 0 !important;
  border-top: 1px solid var(--hairline);
}
.nodoq-form-wrap .nodoq-done-again a {
  font-family: var(--body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--magenta) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,61,168,0.35);
  padding-bottom: 1px;
  transition: border-color 200ms ease;
}
.nodoq-form-wrap .nodoq-done-again a:hover {
  border-bottom-color: var(--magenta);
}
.nodoq-form-wrap .nodoq-done-again a:focus-visible {
  outline: 0 !important;
  border-radius: 5px;
  box-shadow: 0 0 0 4px rgba(255,61,168,0.18) !important;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 560px) {
  .nodoq-form-wrap .acf-form {
    padding: 22px !important;
    border-radius: 12px !important;
  }
  .nodoq-form-wrap .acf-fields > .acf-field,
  .nodoq-form-wrap .nodoq-step > .acf-field {
    padding: 18px 0 !important;
  }
  .nodoq-form-wrap .nodoq-steps-title {
    font-size: 20px !important;
  }
  .nodoq-form-wrap .nodoq-done {
    padding: 32px 22px !important;
    border-radius: 12px !important;
  }
  .nodoq-form-wrap .nodoq-done-title {
    font-size: 23px !important;
  }
  /* "Volver" + "Enviar postulación" en la misma fila no entran en
     320px con el padding grande. */
  .nodoq-form-wrap .nodoq-steps-nav {
    gap: 8px;
    padding-top: 22px;
  }
  .nodoq-form-wrap .nodoq-step-btn,
  .nodoq-form-wrap .nodoq-steps-nav .acf-button {
    font-size: 14px !important;
    padding: 14px 16px !important;
  }
  /* Los chips ya fluyen solos, no hace falta forzar columnas */
  /* "https://www.instagram.com/" no entra en 320px sin dejar el
     input en nada: achicamos el prefijo y lo dejamos elidir antes
     que comerse el espacio de escritura. */
  .nodoq-form-wrap .acf-input-prepend,
  .nodoq-form-wrap .acf-input-append {
    flex-shrink: 1;
    min-width: 0;
    padding: 0 10px !important;
    font-size: 12px !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nodoq-form-wrap .acf-input:has(> .acf-input-prepend) > .acf-input-wrap,
  .nodoq-form-wrap .acf-input:has(> .acf-input-append) > .acf-input-wrap {
    flex-basis: 90px;
  }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nodoq-form-wrap .acf-button,
  .nodoq-form-wrap .nodoq-form-submit,
  .nodoq-form-wrap .acf-input input,
  .nodoq-form-wrap .acf-input textarea,
  .nodoq-form-wrap .acf-input select,
  .nodoq-form-wrap .acf-switch,
  .nodoq-form-wrap .acf-switch .acf-switch-slider,
  .nodoq-form-wrap .acf-image-uploader .hide-if-value,
  .nodoq-form-wrap .acf-image-uploader input[type="file"]::file-selector-button {
    transition: none !important;
  }
  .nodoq-form-wrap .acf-button:hover,
  .nodoq-form-wrap .nodoq-form-submit:hover {
    transform: none;
  }

  /* Stepper: el paso entra sin animación y el scroll entre pasos ya
     sale instantáneo desde el JS. */
  .nodoq-form-wrap .nodoq-step,
  .nodoq-form-wrap .nodoq-done {
    animation: none !important;
  }
  .nodoq-form-wrap .nodoq-steps-seg,
  .nodoq-form-wrap .nodoq-step-btn {
    transition: none !important;
  }
  .nodoq-form-wrap .nodoq-step-next:hover {
    transform: none;
  }
}