/* =====================================================================
   Formularios de CAPTACIÓN (los de BlueCaribu), compartidos por los cinco
   sitios. Una sola hoja y una sola familia de clases: `.formulario`.

   Antes vivía copiado en la base de rm, rmcol y trc —4,3 KB idénticos en
   cada una— mientras rsm y cvega usaban otras clases con el CSS metido
   dentro de cada Insert. Aquí hay una sola copia, enlazada desde los cinco.

   NO es el formulario del módulo de marcas (el antiguo retumar_php): ese
   tiene su propia hoja, `assets/css/formulario.css`, se carga solo en las
   páginas del módulo y no se toca.

   Lo que el cliente edite en Apariencia › Estilo de formulario se emite
   DESPUÉS de esta hoja, así que sigue ganando sobre lo de aquí.
   ===================================================================== */

.formulario{max-width:720px;margin-inline:auto;text-align:left;
            background:#FFFFFF;border:1px solid #E3E6EA;border-radius:var(--radio);
            padding:var(--e-xl);box-shadow:var(--sombra)}
/* En móvil el relleno de 40 px se come el ancho útil del campo. */
@media (max-width:640px){.formulario{padding:var(--e-lg)}}

/* Cabecera centrada, campos alineados: el título y la intro se leen como un
   encabezado, y las etiquetas a la izquierda porque centradas cuesta
   relacionar cada una con su campo. Se declara aquí y en todos los anchos,
   para que no dependa de lo que haga la sección que lo contiene. */
.formulario__titulo,.formulario__intro,.formulario__acciones{text-align:center}
.formulario form{text-align:left}

.formulario__titulo{font-family:var(--display);font-weight:700;color:var(--tinta);
                    font-size:var(--paso-1);line-height:1.25;margin:0 0 var(--e-sm)}
.formulario__intro{color:#5B6472;font-size:var(--paso--1);line-height:1.6;
                   margin:0 0 var(--e-lg);max-width:52ch;margin-inline:auto}

/* Dos columnas en escritorio, una en móvil. Un campo nuevo entra solo. */
.formulario__rejilla{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-md)}
.formulario__campo{display:flex;flex-direction:column;min-width:0}
.formulario__campo--ancho{grid-column:1 / -1}
@media (max-width:640px){.formulario__rejilla{grid-template-columns:1fr}}

.formulario label{font-size:var(--paso--1);font-weight:600;color:#3A424E;
                  margin:0 0 .35em;display:block}
.formulario__obligatorio{color:var(--accion);margin-left:.15em}

/* Todos los controles, por etiqueta: lo que hace que un campo nuevo no
   necesite CSS propio. */
.formulario :is(input:not([type=checkbox]):not([type=radio]),select,textarea){
  width:100%;background:#FFFFFF;color:var(--texto);
  border:1px solid #CBD2DA;border-radius:8px;
  padding:.7em .85em;font:inherit;font-size:var(--paso--1);
  transition:border-color .15s ease, box-shadow .15s ease}
.formulario textarea{min-height:7em;resize:vertical}
.formulario :is(input,select,textarea)::placeholder{color:#9AA3AE}
.formulario :is(input,select,textarea):focus{outline:none;border-color:var(--accion);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accion) 22%, transparent)}
.formulario :is(input,select,textarea):disabled{background:#F4F6F8;color:#9AA3AE}

/* Casilla de aceptación */
.formulario__privacidad{margin-top:var(--e-md);font-size:var(--paso--1);color:#5B6472}
.formulario__privacidad label{display:flex;gap:.6em;align-items:flex-start;
                              font-weight:400;font-size:inherit;color:inherit;margin:0}
.formulario__privacidad input[type=checkbox]{width:1.05em;height:1.05em;margin-top:.2em;
                                             accent-color:var(--accion);flex:0 0 auto}
.formulario__privacidad a{color:var(--accion);text-underline-offset:2px}

.formulario__acciones{margin-top:var(--e-lg);display:flex;justify-content:center}
.formulario__boton{font:inherit;font-family:var(--nav);font-weight:600;cursor:pointer;
  border:0;border-radius:var(--radio-btn);padding:.8em 2em;
  background:var(--accion);color:#FFFFFF;transition:background .15s ease}
.formulario__boton:hover{background:var(--accion-hover)}

/* Aviso de error o de envío, si el formulario lo necesita. */
.formulario__aviso{margin:0 0 var(--e-md);padding:.7em .9em;border-radius:8px;
                   font-size:var(--paso--1);background:#FBE9E7;color:#8A1F14}

.formulario__oculto{position:absolute;width:1px;height:1px;overflow:hidden;
                    clip:rect(0 0 0 0);white-space:nowrap}