/* Formularios aprobados (los de TeslerLab: _form_familias / _form_organizaciones) con el aspecto de la web nueva.
   Colores y medidas del formulario del diseño de Guido (nl-org-form). */
.nl-form {
  --f-texto: #381066; --f-suave: #4B3D63; --f-claro: #6B5C85; --f-acento: #7021CC; --f-acento-suave: #F4ECFF;
  --f-borde: #E9DDFB; --f-casilla: #B9A3DA; --f-error: #B42318; --f-r: 12px; --f-r-lg: 16px;
  --f-t: all .2s cubic-bezier(.16,1,.3,1);
  color: var(--f-texto); line-height: 1.5; text-align: left; width: 100%; max-width: 640px; margin: 0 auto;
}
.nl-form *, .nl-form *::before, .nl-form *::after { box-sizing: border-box; }
.nl-form [hidden] { display: none !important; }
.nl-form-intro h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; font-weight: 600; letter-spacing: -.02em; margin: 0 0 12px; }
.nl-form-intro p { font-size: 1.0625rem; color: var(--f-suave); line-height: 1.6; margin: 0 0 28px; }
.nl-form .encuesta { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.nl-form .encuesta__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Tarjetas */
.nl-form .encuesta__grupo { background: #fff; border: 1px solid var(--f-borde); border-radius: var(--f-r-lg); padding: 22px; margin: 0; min-width: 0; box-shadow: 0 1px 3px rgba(56,16,102,.05); }
.nl-form .encuesta__grupo.is-error { border-color: #E5A39A; box-shadow: 0 0 0 3px rgba(180,35,24,.08); }
.nl-form legend.encuesta__titulo { float: left; width: 100%; padding: 0; }
.nl-form legend.encuesta__titulo + * { clear: both; }
.nl-form .encuesta__titulo { font-size: 1.0625rem; font-weight: 600; margin: 0 0 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.nl-form .encuesta__titulo label { font-weight: 600; }
.nl-form .encuesta__tag { font-size: .75rem; font-weight: 500; color: var(--f-claro); background: var(--f-acento-suave); padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
.nl-form .encuesta__ayuda { font-size: .875rem; color: var(--f-suave); margin: 0 0 16px; line-height: 1.45; }
.nl-form .encuesta__error { color: var(--f-error); font-size: .875rem; font-weight: 500; margin: 10px 0 0; }

/* Casillas como chips */
.nl-form .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nl-form .chips--pastillas { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nl-form .chip { position: relative; display: block; cursor: pointer; }
.nl-form .chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.nl-form .chip span { display: flex; align-items: center; gap: 10px; min-height: 52px; height: 100%; padding: 10px 12px; background: #fff; border: 1.5px solid var(--f-borde); border-radius: var(--f-r); font-size: .875rem; line-height: 1.35; transition: var(--f-t); user-select: none; }
.nl-form .chip span::before { content: ""; flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--f-casilla); background: #fff center / 12px no-repeat; transition: var(--f-t); }
.nl-form .chip input[type="radio"] + span::before { border-radius: 50%; }
.nl-form .chips--pastillas .chip span { justify-content: center; text-align: center; min-height: 48px; padding: 8px 6px; }
.nl-form .chips--pastillas .chip span::before { display: none; }
.nl-form .chip:hover span { border-color: var(--f-casilla); }
.nl-form .chip input:focus-visible + span { outline: 2px solid var(--f-texto); outline-offset: 2px; }
.nl-form .chip input:checked + span { border-color: var(--f-acento); background: var(--f-acento-suave); font-weight: 500; }
.nl-form .chip input:checked + span::before { border-color: var(--f-acento); background-color: var(--f-acento); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 5.2 4.5 8.2 10.5 1.5'/%3E%3C/svg%3E"); }

/* Campos */
.nl-form .form__row { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.nl-form .encuesta__otra { margin: 14px 0 0; }
.nl-form .form__row label { font-size: .9375rem; font-weight: 600; }
.nl-form input[type="text"], .nl-form input[type="email"], .nl-form select, .nl-form textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; background: #fff; border: 1.5px solid var(--f-borde); border-radius: var(--f-r);
  font: inherit; font-size: 1rem; color: var(--f-texto); transition: var(--f-t); appearance: none; -webkit-appearance: none;
}
.nl-form select { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%234B3D63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 12px 8px no-repeat; padding-right: 40px; }
.nl-form textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.nl-form input::placeholder, .nl-form textarea::placeholder { color: var(--f-claro); font-size: .9375rem; }
.nl-form input:focus, .nl-form select:focus, .nl-form textarea:focus { outline: none; border-color: var(--f-texto); box-shadow: 0 0 0 3px rgba(56,16,102,.08); }
.nl-form .is-error input, .nl-form .is-error select, .nl-form input.is-error, .nl-form select.is-error { border-color: #E5A39A; }

/* Consentimientos y textos legales */
.nl-form .form__check { display: flex; align-items: flex-start; gap: 12px; font-size: .875rem; line-height: 1.45; margin: 0 0 12px; cursor: pointer; }
.nl-form .form__check input { width: 20px; height: 20px; flex-shrink: 0; margin: 0; accent-color: var(--f-acento); }
.nl-form .form__legal { font-size: .8125rem; color: var(--f-suave); line-height: 1.5; margin: 10px 0 0; }
.nl-form .form__legal a, .nl-form .encuesta-gracias a { color: var(--f-texto); text-decoration: underline; text-underline-offset: 2px; }

/* Detalles opcionales (organizaciones) */
.nl-form .encuesta__detalles > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 1.0625rem; }
.nl-form .encuesta__detalles > summary::-webkit-details-marker { display: none; }
.nl-form .encuesta__detalles > summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--f-suave); }
.nl-form .encuesta__detalles[open] > summary { margin-bottom: 16px; }
.nl-form .encuesta__detalles[open] > summary::after { content: "−"; }
.nl-form .encuesta__sub { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }

/* Envío */
.nl-form .encuesta__envio { display: flex; flex-direction: column; gap: 4px; }
.nl-form .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600; cursor: pointer; border-radius: 999px; transition: var(--f-t); text-decoration: none; }
.nl-form .btn--primary { width: 100%; min-height: 52px; padding: 14px 24px; background: var(--f-acento); color: #fff; border: 0; font-size: 1.0625rem; }
.nl-form .btn--primary:hover:not(:disabled) { background: var(--f-texto); }
.nl-form .btn--primary:disabled { background: #DDD3EC; color: var(--f-claro); cursor: not-allowed; }
.nl-form .btn--primary:focus-visible, .nl-form .btn--ghost:focus-visible { outline: 2px solid var(--f-texto); outline-offset: 2px; }
.nl-form .btn--ghost { background: none; border: 1.5px solid var(--f-borde); color: var(--f-texto); padding: 10px 20px; font-size: .9375rem; }
.nl-form .btn--ghost:hover { background: var(--f-acento-suave); }
.nl-form .encuesta__resumen { color: var(--f-error); font-size: .9375rem; font-weight: 600; text-align: center; margin: 8px 0 0; }

/* Gracias */
.nl-form .encuesta-gracias { background: #fff; border: 1px solid var(--f-borde); border-radius: var(--f-r-lg); padding: 40px 24px; text-align: center; box-shadow: 0 8px 24px -4px rgba(56,16,102,.08); }
.nl-form .encuesta-gracias__icono { width: 56px; height: 56px; border-radius: 50%; background: var(--f-acento-suave); border: 1px solid #E3CCFF; color: var(--f-acento); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.nl-form .encuesta-gracias__icono svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nl-form .encuesta-gracias__titulo { font-size: 1.5rem; font-weight: 700; margin: 0 0 12px; line-height: 1.3; }
.nl-form .encuesta-gracias__texto { font-size: 1.0625rem; color: var(--f-suave); line-height: 1.55; margin: 0 auto; max-width: 440px; }
.nl-form .encuesta-gracias__extra { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--f-borde); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.nl-form .encuesta-gracias__extra p { margin: 0; color: var(--f-suave); font-size: .9375rem; }

@media (max-width: 479px) {
  .nl-form .chips { grid-template-columns: 1fr; }
  .nl-form .chips--pastillas { grid-template-columns: repeat(2, 1fr); }
  .nl-form .encuesta__grupo { padding: 18px; }
}