/* ===========================================================================
   ContaXML — controles de formulario para las páginas que sirve el servidor
   de licencias (/demo, /comprar). NO forma parte del sitio.

   Por qué existe: el sitio de contaxml.com no tiene un solo formulario, así
   que `estilos.css` no trae ni un input. Esto lo completa usando SUS MISMOS
   tokens (--acento, --borde, --radio…), que llegan de estilos.css. Si esta
   hoja se carga sola, sin la del sitio, las variables no existen y todo sale
   sin color: las dos van juntas, en este orden.

   Se sirve desde el VPS en /formulario.css. Si se prefiere no montar un
   archivo estático, su contenido cabe en un <style> dentro de cada plantilla.
   =========================================================================== */

/* --- 1. La caja de la página --------------------------------------------- */
.formulario__envoltura { padding: clamp(2.5rem, 6vw, 4rem) 0; }

.formulario__caja {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-md);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.formulario__titulo {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 660;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--tinta);
  margin: 0 0 0.75rem;
}

.formulario__entrada {
  color: var(--texto-apagado);
  font-size: 1rem;
  max-width: 62ch;
  margin: 0 0 1.75rem;
}
.formulario__entrada strong { color: var(--tinta); font-weight: 620; }

/* --- 2. Campos ------------------------------------------------------------ */
.campo { margin-bottom: 1.25rem; }

.campo__etiqueta {
  display: block;
  font-weight: 620;
  color: var(--tinta);
  font-size: 0.9375rem;
  margin-bottom: 0.375rem;
}
.campo__ayuda {
  display: block;
  font-weight: 400;
  color: var(--texto-suave);
  font-size: 0.8125rem;
  margin-top: 0.125rem;
}

.campo__control {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.campo__control::placeholder { color: var(--texto-suave); }
.campo__control:hover { border-color: var(--acento); }
.campo__control:focus-visible {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-tenue);
}

/* --- 3. Casillas y opciones ---------------------------------------------- */
.opcion {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.625rem;
  align-items: start;
  padding: 0.5rem 0;
  color: var(--texto-apagado);
  font-size: 0.9375rem;
  line-height: 1.5;
  cursor: pointer;
}
.opcion input { margin: 0.25rem 0 0; width: 1.0625rem; height: 1.0625rem; accent-color: var(--acento); flex: none; }
.opcion strong { color: var(--tinta); font-weight: 620; }
.opcion a { color: var(--acento-texto); }

/* Bloque de casillas legales: se separa del resto para que no parezca un
   campo más. Es lo que el visitante acepta, no lo que captura. */
.legales {
  margin: 1.5rem 0;
  padding: 1rem 1.125rem;
  background: var(--superficie-hundida);
  border-radius: var(--radio-sm);
}

/* --- 4. Grupo de opciones (nueva / renovación) ---------------------------- */
.grupo { margin-bottom: 1.5rem; }
.grupo__titulo {
  font-weight: 620; color: var(--tinta); font-size: 0.9375rem; margin: 0 0 0.375rem;
}

/* --- 5. Subtítulo de sección dentro del formulario ------------------------ */
.formulario__seccion {
  margin: 2rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--borde);
}
.formulario__seccion h2 {
  font-size: 1.125rem; font-weight: 640; color: var(--tinta);
  letter-spacing: -0.015em; margin: 0 0 0.375rem;
}
.formulario__seccion p { color: var(--texto-apagado); font-size: 0.9375rem; margin: 0; }

/* --- 6. Avisos: error y confirmación -------------------------------------- */
.recado {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.875rem 1.125rem;
  border-radius: var(--radio-sm);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin-bottom: 1.5rem;
}
.recado svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.125rem; }

.recado--error {
  background: var(--atencion-fondo);
  border: 1px solid var(--atencion-borde);
  color: var(--atencion);
}
.recado--error svg { stroke: var(--atencion); }
.recado--error strong { color: var(--atencion); font-weight: 640; }

.recado--bien {
  background: var(--acento-apenas);
  border: 1px solid var(--acento-tenue);
  color: var(--acento-texto);
}
.recado--bien svg { stroke: var(--acento-texto); }

/* --- 7. Pantallas de resultado ------------------------------------------- */
.resultado { text-align: left; }
.resultado__icono {
  width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--acento-tenue);
  margin-bottom: 1.25rem;
}
.resultado__icono svg { width: 1.5rem; height: 1.5rem; stroke: var(--acento-texto); }
.resultado__icono--espera { background: var(--atencion-fondo); }
.resultado__icono--espera svg { stroke: var(--atencion); }

.resultado__texto { color: var(--texto-apagado); font-size: 1rem; margin: 0 0 1rem; max-width: 62ch; }
.resultado__texto strong { color: var(--tinta); font-weight: 620; }
.resultado__nota {
  color: var(--texto-suave); font-size: 0.875rem; margin: 1.5rem 0 0;
  padding-top: 1.25rem; border-top: 1px solid var(--borde);
}

/* --- 8. Renglones de importe --------------------------------------------- */
.importe { margin: 1.5rem 0; border: 1px solid var(--borde); border-radius: var(--radio-sm); overflow: hidden; }
.importe__renglon {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.6875rem 1.125rem; font-size: 0.9375rem; color: var(--texto-apagado);
}
.importe__renglon + .importe__renglon { border-top: 1px solid var(--borde); }
.importe__renglon--total {
  background: var(--superficie-hundida); color: var(--tinta); font-weight: 660; font-size: 1.0625rem;
}
.importe__cifra { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --- 9. El botón de enviar ------------------------------------------------
   Reutiliza .boton y .boton--grande de estilos.css; aquí solo se estira. */
.formulario__enviar { width: 100%; margin-top: 0.5rem; }
.formulario__pie-nota { color: var(--texto-suave); font-size: 0.875rem; margin: 0.875rem 0 0; }