/* ===========================================================================
 * cpg-formularios.css — «Solicitud de plaza» e «Inscripción», con la estética
 * del portal. Se aplica POR ENCIMA del programa: ni un campo, ni una
 * validación, ni el envío se tocan.
 *
 * Todo cuelga de `.cpg-form` (la clase que pone cpg-formularios.js solo en esas
 * dos pantallas), así que el resto del portal no se entera.
 *
 * Reversible: quitar el <link> de index.html.
 * =========================================================================== */

/* ---- 1. La cabecera: la banda de color del portal, con la cola abajo ---- */
.cpg-form .cpg-form-cab{
  position:relative; overflow:hidden;
  background:radial-gradient(130% 150% at 88% -30%, #8a44a3 0%, #5a2470 42%, #3a1546 100%);
  border-radius:20px; padding:24px 28px; margin:0 0 20px;
  box-shadow:0 12px 34px rgba(58,21,70,.28);
}
.cpg-form .cpg-form-cab::after{
  content:""; position:absolute; right:-24px; bottom:-26px; width:300px; height:132px;
  background:url('/assets/cola.png') right bottom / contain no-repeat;
  opacity:.22; mix-blend-mode:screen; pointer-events:none;
}
.cpg-form .cpg-form-cab > *{ position:relative; }
.cpg-form .cpg-form-cab h1{
  font-family:'Poppins','Inter',sans-serif; font-weight:600; letter-spacing:-.01em;
  color:#fff; font-size:27px; line-height:1.15; margin:0;
}
.cpg-form .cpg-form-cab p{ color:rgba(255,255,255,.78); margin:9px 0 0; max-width:60ch; }
/* El «Paso previo a la inscripción» de arriba, como antetítulo */
.cpg-form .cpg-form-cab > div:first-child{
  color:rgba(255,255,255,.62) !important;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.cpg-form .cpg-form-cab svg{ color:rgba(255,255,255,.62); }

/* ---- 2. El progreso: de fila de círculos que se arrastra, a barra de tramos ----
   Los círculos numerados se ocultan y sus contenedores se convierten en tramos
   de una barra. Así cabe en el móvil sin arrastrar nada. */
.cpg-form .cpg-form-pasos{
  overflow:visible !important; gap:5px !important; padding:0 !important; margin:0 0 8px !important;
}
.cpg-form .cpg-form-pasos > div{
  flex:1 1 0; min-width:0; gap:0 !important;
  height:6px; border-radius:3px; background:#e6dcf0; overflow:hidden;
}
/* El paso actual y los ya hechos, teñidos */
.cpg-form .cpg-form-pasos > div.text-primary{ background:#481650; }
.cpg-form .cpg-form-pasos > div.text-success{ background:#A878B5; }
/* Dentro de cada tramo no se pinta nada: ni el número, ni el nombre, ni la flecha */
.cpg-form .cpg-form-pasos > div > *{ display:none !important; }

/* La línea «Paso 2 de 4: Tutor legal» pasa a ser el rótulo grande del progreso */
.cpg-form .cpg-form-paso-n{
  font-family:'Poppins','Inter',sans-serif; font-size:16px; color:#3a1546 !important;
  font-weight:600; margin:0 0 18px !important;
}
.cpg-form .cpg-form-paso-n span{ color:#481650 !important; }

/* ---- 3. La tarjeta del paso ---- */
.cpg-form .cpg-form-caja{
  border:1px solid #e2e3ec; border-radius:15px;
  box-shadow:0 1px 2px rgba(58,21,70,.05), 0 8px 22px rgba(58,21,70,.07);
}
.cpg-form .cpg-form-caja legend{
  font-family:'Poppins','Inter',sans-serif; font-weight:600; letter-spacing:-.01em; color:#3a1546;
}

/* ---- 4. Campos: más aire, foco lila de marca, y el error bien visible ---- */
.cpg-form input, .cpg-form select, .cpg-form textarea{
  border-radius:10px; border:1px solid #d9d2e2;
}
.cpg-form input:focus, .cpg-form select:focus, .cpg-form textarea:focus{
  outline:none; border-color:#A878B5; box-shadow:0 0 0 3px rgba(168,120,181,.22);
}
.cpg-form [aria-invalid="true"]{ border-color:#e0a0a4 !important; background:#fffafa; }
.cpg-form [aria-invalid="true"]:focus{ box-shadow:0 0 0 3px rgba(180,35,42,.16); }

/* ---- 5. El aviso de error, con su enlace al primer campo que falla ---- */
.cpg-form .cpg-form-aviso{ border-radius:12px; align-items:center; }
.cpg-form .cpg-ir-error{
  margin-left:auto; white-space:nowrap; align-self:center;
  font-weight:700; font-size:13.5px; color:#7d1f24; text-decoration:none;
  border:1px solid rgba(125,31,36,.28); border-radius:9px; padding:7px 11px;
  background:rgba(255,255,255,.6);
}
.cpg-form .cpg-ir-error:hover{ background:#fff; text-decoration:none; }

/* ---- 6. Botones de avanzar y retroceder, con la presencia del portal ---- */
.cpg-form .cpg-form-caja button[class*="bg-primary"]{
  box-shadow:0 4px 12px rgba(72,22,80,.26);
  transition:box-shadow .16s ease, transform .16s ease;
}
.cpg-form .cpg-form-caja button[class*="bg-primary"]:hover{
  box-shadow:0 7px 18px rgba(72,22,80,.34); transform:translateY(-1px);
}

/* ---- 7. La pantalla de enviado: la referencia, que se lea sola ---- */
.cpg-form strong{ color:#331038; }

@media(max-width:640px){
  .cpg-form .cpg-form-cab{ padding:20px; border-radius:16px; }
  .cpg-form .cpg-form-cab::after{ display:none; }
  .cpg-form .cpg-form-cab h1{ font-size:23px; }
  .cpg-form .cpg-form-paso-n{ font-size:15px; }
  .cpg-form .cpg-ir-error{ margin-left:0; margin-top:8px; }
}
@media (prefers-reduced-motion: reduce){
  .cpg-form .cpg-form-caja button[class*="bg-primary"]{ transition:none; }
}