/* Estilos exclusivos del formulario público de inscripción AMPA.
   Usa las mismas variables de color que portada.php; no toca ampa_familias.css. */

:root {
    --ia-verde: #164f45;
    --ia-verde-oscuro: #123f38;
    --ia-crema: #fbfaf3;
    --ia-texto-suave: #64736c;
    --ia-amarillo: #f9e3a1;
    --ia-amarillo-fuerte: #f5c84c;
    --ia-verde-card: #dfe8cf;
    --ia-borde: #d8ddd2;
    --ia-blanco: #ffffff;
    --ia-rojo: #8b241c;
    --ia-rojo-suave: #fbeaea;
    --ia-radius: 16px;
    --ia-radius-sm: 10px;
    --ia-sombra: 0 2px 14px rgba(18, 63, 56, 0.08);
}

* { box-sizing: border-box; }

body.ia-body {
    margin: 0;
    background: var(--ia-crema);
    color: var(--ia-verde-oscuro);
    font-family: "DM Sans", Arial, sans-serif;
    line-height: 1.5;
}

.ia-wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: 16px 16px 48px;
}

/* ===== CABECERA ===== */
.ia-header {
    text-align: center;
    padding: 14px 0 10px;
}

.ia-header img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    margin-bottom: 8px;
}

.ia-header h1 {
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    margin: 0 0 2px;
    color: var(--ia-verde-oscuro);
}

.ia-header .ia-curso {
    font-size: 14px;
    color: var(--ia-texto-suave);
    font-weight: 600;
    margin: 0 0 8px;
}

.ia-header p {
    font-size: 13.5px;
    color: var(--ia-texto-suave);
    margin: 0;
}

/* ===== INDICADOR DE PASOS ===== */
.ia-pasos {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin: 14px 0 18px;
}

.ia-pasos span {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ia-texto-suave);
    background: var(--ia-blanco);
    border: 1px solid var(--ia-borde);
    border-radius: 999px;
    padding: 5px 10px;
}

.ia-pasos span.activo {
    background: var(--ia-verde);
    border-color: var(--ia-verde);
    color: #fff;
}

/* ===== MENSAJES ===== */
.ia-error, .ia-exito, .ia-info {
    border-radius: var(--ia-radius-sm);
    padding: 12px 14px;
    font-size: 14px;
    margin-bottom: 16px;
}

.ia-error { background: var(--ia-rojo-suave); color: var(--ia-rojo); border: 1px solid #e5b9b5; }
.ia-info { background: var(--ia-verde-card); color: var(--ia-verde-oscuro); border: 1px solid #c3d6ac; }
.ia-exito { background: var(--ia-verde-card); color: var(--ia-verde-oscuro); border: 1px solid #c3d6ac; }

/* ===== TARJETAS / PANELES ===== */
.ia-panel {
    background: var(--ia-blanco);
    border: 1px solid var(--ia-borde);
    border-radius: var(--ia-radius);
    box-shadow: var(--ia-sombra);
    padding: 20px;
    margin-bottom: 16px;
}

.ia-panel h2 {
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    margin: 0 0 6px;
    color: var(--ia-verde-oscuro);
}

.ia-panel .ia-ayuda {
    font-size: 13.5px;
    color: var(--ia-texto-suave);
    margin: 0 0 14px;
}

/* Paso 1: tipo de inscripción */
.ia-tipos { display: flex; flex-direction: column; gap: 12px; }

.ia-tipo-card {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--ia-blanco);
    border: 2px solid var(--ia-borde);
    border-radius: var(--ia-radius);
    padding: 18px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    box-shadow: var(--ia-sombra);
    transition: border-color .15s ease, transform .1s ease;
}

.ia-tipo-card:hover { border-color: var(--ia-verde); }
.ia-tipo-card:active { transform: scale(.99); }
.ia-tipo-card:focus-visible { outline: 3px solid var(--ia-verde); outline-offset: 2px; }

.ia-tipo-card .ia-tipo-icono { font-size: 26px; margin-bottom: 6px; }
.ia-tipo-card .ia-tipo-titulo { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 16px; margin-bottom: 4px; }
.ia-tipo-card .ia-tipo-desc { font-size: 13.5px; color: var(--ia-texto-suave); }

/* ===== BUSCADOR DE ALUMNOS ===== */
.ia-buscador { position: relative; margin-bottom: 4px; }

.ia-buscador input[type="text"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--ia-borde);
    border-radius: var(--ia-radius-sm);
    font-size: 15px;
    min-height: 44px;
    background: var(--ia-crema);
    color: var(--ia-verde-oscuro);
}

.ia-buscador input:focus, .ia-buscador input:focus-visible {
    outline: none;
    border-color: var(--ia-verde);
    box-shadow: 0 0 0 3px rgba(22, 79, 69, .15);
}

.ia-resultados { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }

.ia-resultado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--ia-crema);
    border: 1px solid var(--ia-borde);
    border-radius: var(--ia-radius-sm);
    padding: 10px 12px;
}

.ia-resultado-info strong { display: block; font-size: 14px; }
.ia-resultado-info small { display: block; font-size: 12.5px; color: var(--ia-texto-suave); }

.ia-resultado-msg { font-size: 13.5px; color: var(--ia-texto-suave); padding: 6px 2px; }

/* ===== BOTONES ===== */
.ia-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: var(--ia-radius-sm);
    font-weight: 700;
    font-size: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
}

.ia-btn-primario { background: var(--ia-verde); color: #fff; width: 100%; }
.ia-btn-primario:hover { background: var(--ia-verde-oscuro); }
.ia-btn-primario:disabled { opacity: .55; cursor: not-allowed; }

.ia-btn-secundario { background: var(--ia-blanco); color: var(--ia-verde-oscuro); border-color: var(--ia-borde); }
.ia-btn-secundario:hover { border-color: var(--ia-verde); }

.ia-btn:focus-visible { outline: 3px solid var(--ia-verde); outline-offset: 2px; }

/* ===== ALUMNOS SELECCIONADOS (alta / renovación) ===== */
.ia-alumnos-lista { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }

.ia-alumno-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--ia-verde-card);
    border-radius: var(--ia-radius-sm);
    padding: 10px 12px;
}

.ia-alumno-item strong { display: block; font-size: 14px; }
.ia-alumno-item small { display: block; font-size: 12.5px; color: var(--ia-verde-oscuro); opacity: .8; }

.ia-alumno-quitar {
    background: none;
    border: none;
    color: var(--ia-rojo);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
    min-height: 32px;
}

.ia-alumno-check { display: flex; align-items: center; gap: 10px; }
.ia-alumno-check input { width: 20px; height: 20px; flex-shrink: 0; }

/* ===== FORMULARIO DE CONTACTO ===== */
.ia-grupo { margin-bottom: 14px; }

.ia-grupo label {
    display: block;
    font-weight: 700;
    font-size: 13.5px;
    margin-bottom: 5px;
    color: var(--ia-verde-oscuro);
}

.ia-grupo input[type="text"],
.ia-grupo input[type="email"],
.ia-grupo input[type="tel"],
.ia-grupo input[type="search"] {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--ia-borde);
    border-radius: var(--ia-radius-sm);
    font-size: 15px;
    background: #fff;
    color: var(--ia-verde-oscuro);
}

.ia-grupo input:focus, .ia-grupo input:focus-visible {
    outline: none;
    border-color: var(--ia-verde);
    box-shadow: 0 0 0 3px rgba(22, 79, 69, .15);
}

.ia-tutor-titulo {
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    font-size: 14.5px;
    margin: 18px 0 10px;
    color: var(--ia-verde-oscuro);
}

.ia-tutor-titulo:first-child { margin-top: 0; }

.ia-check-linea {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--ia-crema);
    border-radius: var(--ia-radius-sm);
    padding: 12px;
    margin: 6px 0 4px;
}

.ia-check-linea input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.ia-check-linea label { font-size: 13.5px; color: var(--ia-verde-oscuro); }

.ia-card-privacidad {
    background: var(--ia-crema);
    border: 1px solid var(--ia-borde);
    border-radius: var(--ia-radius-sm);
    padding: 14px 14px 12px;
    margin: 16px 0 12px;
}

.ia-card-privacidad-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}

.ia-card-privacidad-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(22,79,69,.08); color: var(--ia-verde-oscuro); font-size: 15px;
}

.ia-card-privacidad h3 {
    margin: 0; color: var(--ia-verde-oscuro); font-family: "Manrope", sans-serif; font-size: 15px;
}

.ia-card-privacidad p {
    margin: 0 0 8px; font-size: 13.2px; color: var(--ia-texto-suave); line-height: 1.5;
}

.ia-card-privacidad p:last-child { margin-bottom: 0; }
.ia-card-privacidad a { color: var(--ia-verde); font-weight: 700; text-decoration: none; }
.ia-card-privacidad a:hover { text-decoration: underline; }

/* ===== RESUMEN ===== */
.ia-resumen {
    background: var(--ia-crema);
    border: 1px dashed var(--ia-borde);
    border-radius: var(--ia-radius-sm);
    padding: 14px;
    margin: 14px 0;
    font-size: 14px;
}

.ia-resumen-fila { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; }
.ia-resumen-fila span:first-child { color: var(--ia-texto-suave); }
.ia-resumen-fila span:last-child { font-weight: 700; text-align: right; }

/* ===== PANTALLA FINAL ===== */
.ia-final { text-align: center; padding: 10px 4px; }
.ia-final .ia-check-icono {
    width: 62px; height: 62px; border-radius: 50%;
    background: var(--ia-verde-card);
    color: var(--ia-verde-oscuro);
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; margin: 0 auto 14px;
}
.ia-final h2 { margin: 0 0 4px; }
.ia-final .ia-curso { color: var(--ia-texto-suave); font-weight: 600; margin-bottom: 16px; }
.ia-final .ia-alumnos-lista { text-align: left; }
.ia-final .ia-estado {
    display: inline-block;
    margin-top: 14px;
    background: var(--ia-amarillo);
    color: #5c4a10;
    font-weight: 700;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 999px;
}

/* ===== UTILIDADES ===== */
.ia-oculto { display: none !important; }
.ia-link-volver { display: block; text-align: center; margin-top: 8px; font-size: 13.5px; color: var(--ia-texto-suave); text-decoration: none; }
.ia-link-volver:hover { text-decoration: underline; }
.ia-link-boton { background: none; border: none; width: 100%; font-family: inherit; cursor: pointer; }
.ia-link-boton:focus-visible { outline: 3px solid var(--ia-verde); outline-offset: 2px; }
.ia-divider {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin: 18px 0 10px; color: var(--ia-texto-suave); font-size: 12px; line-height: 1; 
    font-weight: 600; letter-spacing: .02em;
}
.ia-divider::before, .ia-divider::after {
    content: ""; display: block; flex: 1; height: 1px; background: var(--ia-borde);
    max-width: 120px;
}

/* ===== ESCRITORIO ===== */
@media (min-width: 760px) {
    .ia-wrap { max-width: 620px; padding-top: 32px; }
    .ia-tipos { flex-direction: row; }
    .ia-tipo-card { flex: 1; }
}