/* Atlantis Forms — formularios en la web.
   Personalizable con variables CSS (en la plantilla o en «Clase CSS» del formulario). */
.af {
  --af-acento: var(--sd-boton, var(--bs-primary, #2a69b8));
  --af-acento-texto: #fff;
  --af-texto: inherit;
  --af-borde: color-mix(in srgb, currentColor 25%, transparent);
  --af-fondo-input: var(--bs-body-bg, transparent);
  --af-suave: color-mix(in srgb, currentColor 6%, transparent);
  --af-error: #c52827;
  --af-exito: #1e7b3c;
  --af-radio: 10px;
  --af-hueco: 16px;
  color: var(--af-texto);
  max-width: 100%;
  container-type: inline-size;
}
.af *, .af *::before, .af *::after { box-sizing: border-box; }
.af-titulo { margin: 0 0 .5em; }
.af-descripcion { margin-bottom: 1.25em; }

.af-campos { display: flex; flex-wrap: wrap; gap: var(--af-hueco); }
.af-campo { flex: 0 0 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
@container (min-width: 540px) {
  .af-w-75 { flex-basis: calc(75% - var(--af-hueco) / 4); }
  .af-w-66 { flex-basis: calc(66.666% - var(--af-hueco) / 3); }
  .af-w-50 { flex-basis: calc(50% - var(--af-hueco) / 2); }
  .af-w-33 { flex-basis: calc(33.333% - var(--af-hueco) * 2 / 3); }
  .af-w-25 { flex-basis: calc(25% - var(--af-hueco) * 3 / 4); }
}
.af-campo[hidden] { display: none !important; }

.af-etiqueta { display: block; font-weight: 600; margin: 0 0 6px; padding: 0; font-size: 1em; float: none; width: auto; }
.af-req { color: var(--af-error); }
.af-ayuda { font-size: .875em; opacity: .75; margin-top: 4px; }
.af-encabezado { margin: .75em 0 0; font-size: 1.2em; }
.af-t-heading .af-ayuda { margin-top: 2px; }

.af-input {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; color: inherit;
  background: var(--af-fondo-input); border: 1.5px solid var(--af-borde); border-radius: var(--af-radio);
  transition: border-color .15s, box-shadow .15s;
}
textarea.af-input { min-height: 0; resize: vertical; }
.af-input:focus { outline: none; border-color: var(--af-acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--af-acento) 25%, transparent); }
.af-input[readonly], .af-select:disabled { background: var(--af-suave); opacity: .9; }
.af-file { padding: 8px; }

.af-opciones { display: flex; flex-direction: column; gap: 8px; }
.af-en-linea .af-opciones { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
.af-opcion { display: flex; align-items: flex-start; gap: 10px; }
.af-opcion input { width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--af-acento); }
.af-opcion label { margin: 0; cursor: pointer; }

/* Escala 1–N */
.af-escala { display: grid; grid-template-columns: repeat(var(--af-n, 5), minmax(0, 1fr)); gap: 6px; max-width: calc(var(--af-n, 5) * 64px); }
.af-escala input, .af-estrellas input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.af-escala label {
  display: flex; align-items: center; justify-content: center; height: 44px; border: 1.5px solid var(--af-borde);
  border-radius: var(--af-radio); cursor: pointer; font-weight: 700; margin: 0; user-select: none;
}
.af-escala label:hover { border-color: var(--af-acento); }
.af-escala input:checked + label { background: var(--af-acento); border-color: var(--af-acento); color: var(--af-acento-texto); }
.af-escala input:focus-visible + label, .af-estrellas input:focus-visible + label { outline: 3px solid color-mix(in srgb, var(--af-acento) 40%, transparent); outline-offset: 2px; }
.af-escala-extremos { display: flex; justify-content: space-between; font-size: .85em; opacity: .75; margin-top: 4px; max-width: calc(var(--af-n, 5) * 64px); }

/* Estrellas */
.af-estrellas { display: inline-flex; flex-direction: row; gap: 2px; }
.af-estrellas label { font-size: 32px; line-height: 1; cursor: pointer; color: color-mix(in srgb, currentColor 25%, transparent); margin: 0; padding: 2px; transition: color .1s, transform .1s; }
.af-estrellas:hover label { color: #f2b01e; }
.af-estrellas label:hover ~ label { color: color-mix(in srgb, currentColor 25%, transparent); }
.af-estrellas:not(:hover) input:checked ~ label { color: color-mix(in srgb, currentColor 25%, transparent); }
.af-estrellas:not(:hover) label:has(~ input:checked), .af-estrellas:not(:hover) input:checked + label { color: #f2b01e; }
.af-estrellas label:hover { transform: scale(1.1); }
.af-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.af-calc { display: block; font-size: 1.4em; font-weight: 700; padding: 6px 0; }

/* Errores y avisos */
.af-error { color: var(--af-error); font-size: .875em; margin-top: 4px; font-weight: 600; }
.af-con-error .af-input, .af-con-error .af-escala label { border-color: var(--af-error); }
.af-errores { border: 1.5px solid var(--af-error); border-radius: var(--af-radio); padding: 12px 16px; margin-bottom: var(--af-hueco); color: var(--af-error); }
.af-errores p { margin: 0 0 4px; font-weight: 700; }
.af-errores ul { margin: 0; padding-left: 1.2em; }
.af-aviso, .af-exito { border-radius: var(--af-radio); padding: 16px 20px; background: var(--af-suave); border-left: 4px solid var(--af-acento); }
.af-exito { border-left-color: var(--af-exito); }
.af-exito:focus { outline: none; }
.af-exito > :last-child, .af-aviso > :last-child { margin-bottom: 0; }

/* Páginas */
.af-pagina[hidden] { display: none; }
.af-pagina-titulo { margin: 0 0 .25em; font-size: 1.25em; }
.af-pagina-titulo:focus { outline: none; }
.af-pagina-ayuda { opacity: .8; margin: 0 0 1em; }
.af-progreso { margin-bottom: 20px; }
.af-progreso-barra { height: 6px; border-radius: 3px; background: var(--af-suave); overflow: hidden; }
.af-progreso-barra span { display: block; height: 100%; width: 0; background: var(--af-acento); transition: width .25s; }
.af-progreso-txt { font-size: .85em; opacity: .75; margin-top: 6px; }

/* Botones */
.af-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; align-items: center; }
.af-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 24px;
  font: inherit; font-weight: 700; color: var(--af-acento-texto); background: var(--af-acento); border: 1.5px solid var(--af-acento);
  border-radius: 999px; cursor: pointer; transition: filter .15s;
}
.af-btn:hover { filter: brightness(1.08); }
.af-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--af-acento) 40%, transparent); outline-offset: 2px; }
.af-btn[hidden] { display: none; }
.af-btn-sec { background: transparent; color: inherit; border-color: var(--af-borde); }
.af-btn:disabled { opacity: .6; cursor: wait; }
.af-estado { margin-top: 12px; font-size: .95em; }
.af-estado:empty { display: none; }
.af-estado-error { color: var(--af-error); font-weight: 600; }
.af-enviando { opacity: .85; }

.af-captcha { margin-top: var(--af-hueco); }
.af-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

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