/* ==========================================
   FORMULARIO DE ALTA DE SOCIOS
   ========================================== */
.sa-layout--registro-socios {
    background: #e7b47a;
    /* naranja */
}

.sa-main--registro-socios .sa-main__header {
    margin: 0 auto 25px;
    text-align: center;
}

.sa-main--registro-socios .sa-main__title,w
.sa-main--registro-socios .sa-main__subtitle {
    text-align: center;
    color: #ffffff !important;
}

/* Contenedor del formulario: como el login (420px) */
.sa-socios-form-wrapper {
    max-width: 520px;             /* igual que .sa-form--login */
    margin: 1.5rem auto 2rem;     /* centrado */
}

/* Cuerpo del formulario: alineado a la izquierda como el login */
.sa-socios-form {
    max-width: 100%;
    border-radius: 0 0 40px 40px;
    color: #1070B7;
    text-align: left;             /* como el login */
}

/* -------- TÍTULOS -------- */

.sa-socios-form h1 {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.3rem;
    color: #ffffff !important;
}

.sa-socios-form__subtitle {
    font-size: 0.8rem;
    margin-bottom: 1.5rem;
    color: #ffffff !important;
}

/* -------- SECCIONES DEL FORMULARIO -------- */

.sa-form--registro h3:first-of-type {
    margin-top: 1.3rem !important;
}

.sa-form--registro h3 {
    font-size: 20px !important;
    text-transform: uppercase !important;
    margin-top: 3rem !important; /* espacio entre bloques */
    margin-bottom: 0.8rem !important;
    color: #1070B7 !important;
    text-align: center;

}

/* -------- CAMPOS -------- */

.sa-form--registro .sa-form__group {
    margin-bottom: 0.6rem;
    text-align: left;
}

.sa-form--registro label {
    display: block;
    font-size: 16px;
    margin-bottom: 0.25rem;
    font-family: var(--sa-font-bold);
    color: #ffffff;
}

.sa-form--registro input,
.sa-form--registro select {
    width: 100%;
    border-radius: 999px;
    border: none;
    background: #ffffff;
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    font-family: var(--sa-font-book);
    outline: none;
    box-shadow: 0 0 0 1px #d9d9d9 inset;
    transition: box-shadow 0.2s ease;
}

.sa-form--registro input:focus,
.sa-form--registro select:focus {
    box-shadow: 0 0 0 2px #ffffff inset;
}

/* -------- TEXTO EXPLICATIVO -------- */

.sa-socios-form__text {
    font-size: 0.74rem;
    line-height: 1.45;
    color: #ffffff;
    margin-bottom: 0.5rem;
    text-align: left;
}

/* -------- RADIO SÍ/NO -------- */

.sa-form__group--inline-options {
    display: flex;
    align-items: center;
    gap: 2rem; /* separación entre sí/no */
}

.sa-radio {
     display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    
}

/* Quitar outline/recuadro de los radios */
.sa-form__group--inline-options input[type="radio"],
.sa-radio input[type="radio"] {
    outline: none !important;
    box-shadow: none !important;
}

/* Por si los navegadores usan focus-visible */
.sa-form__group--inline-options input[type="radio"]:focus-visible,
.sa-radio input[type="radio"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Por si usan :focus estándar */
.sa-form__group--inline-options input[type="radio"]:focus,
.sa-radio input[type="radio"]:focus {
    outline: none !important;
    box-shadow: none !important;
}
/* Safari iPhone: quitar márgenes raros en radios */
.sa-form--registro .sa-radio input[type="radio"] {
    margin: 0;
    padding: 0;
}


/* -------- BOTÓN -------- */

.sa-form__actions {
    margin-top: 1.7rem;
}

.sa-btn {
    display: inline-block;
    width: 100%;
    border-radius: 999px;
    padding: 0.7rem 1rem;
    border: none;
    cursor: pointer;
    font-family: var(--sa-font-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
}

.sa-btn--secondary {
    background: #1d4ed8;
    color: #ffffff;
}

/* Botones fantasma para añadir tutor / alumno */
.sa-btn--ghost {
    margin-top: 1rem;
    width: 100%;
    border-radius: 999px;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.8);
    color: #ffffff;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.6rem 1rem;
}
.sa-btn--ghost:active,
.sa-btn--ghost:focus {
    background: transparent !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.8) !important;
    outline: none !important;
    box-shadow: none !important;
}

.sa-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Botón deshabilitado cuando ya se añadió el 2º tutor */
.sa-btn--disabled {
    opacity: 0.6;
    cursor: default;
}

/* Separadores opcionales para que se vea ordenado */
.sa-tutor__separator,
.sa-alumno__separator {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    margin: 1.2rem 0;
}

.sa-link-remove,
.sa-alumno-remove,
.sa-tutor-remove {
    background: none;
    border: none;
    color: #fff !important;
    text-decoration: underline;
    font-size: 0.8rem;
    cursor: pointer;
    margin-top: 0.4rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;

}

/* HOVER */
.sa-link-remove:hover,
.sa-alumno-remove:hover,
.sa-tutor-remove:hover {
    background: none;
    color: #e11d48 !important;
    border: none;
    text-decoration: underline;
    opacity: 0.8;
}


/*Carteles notificaciones*/
.sa-notice {
    padding: 8px 8px;
    margin-bottom: 16px;
    border-radius: 6px;
    font-weight: 500;
}
.sa-client-errors {
    text-align: center;
}
.sa-client-errors li {
    text-align: center;
}
.sa-client-errors ul {
  list-style: none;   /* quita la viñeta */
  margin: 0;
  padding: 0;
}

.sa-notice--success { 
    background: #e6ffed; 
   
    color: #047a2f;
 }
.sa-notice--error   { 
    background: #ffecec; 
   
    color: #e20d0d; 
}

.sa-form__group--recaptcha {
  margin: 35px 0;
  display: flex;
  justify-content: center;
}