/* ==========================================================================
   Formulario de admisión — I.E.P. Santa María de Cervelló
   Paleta tomada de los documentos del colegio (rojo y amarillo), sobre fondo
   claro para que todo el texto se lea con buen contraste.
   ========================================================================== */

:root {
    --rojo:        #a80f1d;
    --rojo-oscuro: #7d0a15;
    --rojo-suave:  #fbeaec;
    --amarillo:    #f3d10e;
    --amarillo-suave: #fff7cf;
    --tinta:       #1c2430;   /* texto principal   (contraste 15:1 sobre blanco) */
    --tinta-suave: #566172;   /* texto secundario  (contraste 6:1  sobre blanco) */
    --borde:       #c9ced6;
    --fondo:       #f4f1ea;
    --tarjeta:     #ffffff;
    --ok:          #14672f;
    --ok-suave:    #e6f4ea;
    --aviso:       #8a5200;
    --aviso-suave: #fff3d6;
    --radio:       14px;
    --sombra:      0 1px 2px rgba(28, 36, 48, .06), 0 6px 18px rgba(28, 36, 48, .07);
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }

body.form-page {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    /* Sin esto, cualquier elemento más ancho que la pantalla ensancha toda la página
       y en el celular aparece un desplazamiento horizontal. */
    overflow-x: hidden;
}
.form-page *, .form-page *::before, .form-page *::after { box-sizing: border-box; }
.form-page img { max-width: 100%; height: auto; }

/* ---------- Cabecera ---------- */
.hero {
    background: linear-gradient(135deg, var(--rojo) 0%, var(--rojo-oscuro) 100%);
    border-bottom: 6px solid var(--amarillo);
    color: #fff;
}
.hero-in {
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
}
.hero-logo {
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    padding: 6px;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.hero-sup {
    margin: 0 0 2px;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--amarillo);
}
.hero h1 {
    margin: 0;
    font-size: clamp(1.35rem, 3.6vw, 2.1rem);
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
}

/* ---------- Estructura ---------- */
.contenedor {
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 16px 0;
}
.tarjeta {
    background: var(--tarjeta);
    border: 1px solid #e6e2d8;
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

/* ---------- Presentación ---------- */
.intro { padding: 20px 22px; margin-bottom: 20px; }
.intro h2 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 700; color: var(--rojo); }
.intro p  { margin: 0 0 10px; color: var(--tinta); }
.intro .subtitulo { margin: 14px 0 8px; font-weight: 600; }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    padding: 6px 12px;
    background: var(--amarillo-suave);
    border: 1px solid #ecd56a;
    border-radius: 999px;
    font-size: .93rem;
    color: var(--tinta);
}
.chip b { font-weight: 700; }
.chip span { color: var(--tinta-suave); }

/* ---------- Secciones del formulario ---------- */
.seccion {
    height: 100%;
    margin: 0;
    padding: 20px 20px 12px;
    background: var(--tarjeta);
    border: 1px solid #e6e2d8;
    border-top: 5px solid var(--rojo);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    min-width: 0;                 /* evita que un campo largo ensanche la tarjeta */
}
.seccion.estudiante { border-top-color: var(--amarillo); }
.seccion legend {
    float: left;                  /* como en Bootstrap: el título sale del borde de la tarjeta y no la corta */
    width: 100%;
    margin: 0 0 14px;
    padding: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rojo);
}
.seccion.estudiante legend { color: var(--tinta); }
.seccion legend + * { clear: both; }

/* ---------- Campos ---------- */
.form-page .mb-3 { margin-bottom: 14px !important; }

.form-page .form-label {
    display: block;
    margin-bottom: 5px;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tinta);
}
/* Asterisco en los campos obligatorios (sigue al atributo required, que el script
   cambia según el grado elegido). La regla del medio es para fmt_si_no(): el required
   queda en un <input> dentro del <div class="form-check..."> que sigue a la etiqueta,
   no en el hermano inmediato. */
.form-page .form-label:has(+ [required])::after,
.form-page .form-label:has(+ .form-check [required])::after,
.form-page .form-label:has(+ .fmt-bloque .fmt-ok[required])::after {
    content: " *";
    color: var(--rojo);
    font-weight: 700;
}

.form-page .form-control,
.form-page .form-select {
    min-height: 46px;
    padding: .6rem .8rem;
    font-size: 1rem;              /* 16 px: menos no, porque iOS amplía la pantalla al enfocar */
    color: var(--tinta);
    background-color: #fff;
    border: 1.5px solid var(--borde);
    border-radius: 10px;
}
.form-page .form-control:focus,
.form-page .form-select:focus {
    border-color: var(--rojo);
    box-shadow: 0 0 0 4px rgba(168, 15, 29, .16);
    outline: 0;
}
.form-page .form-control::placeholder { color: #8b94a3; }

.form-page input[type=file].form-control { padding: 0; overflow: hidden; }
.form-page input[type=file]::file-selector-button {
    margin: 0 12px 0 0;
    padding: .7rem 1rem;
    border: 0;
    border-right: 1.5px solid var(--borde);
    background: #f0ece1;
    color: var(--tinta);
    font-weight: 600;
    cursor: pointer;
}
.form-page input[type=file]::file-selector-button:hover { background: #e8e2d2; }
.form-page input[type=file].form-control { color: var(--tinta-suave); }

#vacantesInfo { color: var(--ok); font-weight: 600; }

/* ---------- Botones ---------- */
.form-page .btn-primary {
    --bs-btn-bg: var(--rojo);
    --bs-btn-border-color: var(--rojo);
    --bs-btn-hover-bg: var(--rojo-oscuro);
    --bs-btn-hover-border-color: var(--rojo-oscuro);
    --bs-btn-active-bg: var(--rojo-oscuro);
    --bs-btn-active-border-color: var(--rojo-oscuro);
    --bs-btn-disabled-bg: #b8848a;
    --bs-btn-disabled-border-color: #b8848a;
    --bs-btn-focus-shadow-rgb: 168, 15, 29;
    font-weight: 600;
}
.form-page .btn-outline-primary {
    --bs-btn-color: var(--rojo);
    --bs-btn-border-color: var(--rojo);
    --bs-btn-hover-bg: var(--rojo);
    --bs-btn-hover-border-color: var(--rojo);
    --bs-btn-active-bg: var(--rojo-oscuro);
    --bs-btn-active-border-color: var(--rojo-oscuro);
    --bs-btn-focus-shadow-rgb: 168, 15, 29;
    font-weight: 600;
}
.form-page .btn-secondary {
    --bs-btn-bg: #5a6473;
    --bs-btn-border-color: #5a6473;
}

/* Barra de envío. En pantallas pequeñas queda fija abajo (ver más abajo) para no tener
   que recorrer todo el formulario buscando el botón. */
.barra-envio {
    margin-top: 24px;
    padding: 0 0 28px;
    text-align: center;
}
.btn-enviar {
    min-width: 260px;
    min-height: 54px;
    padding: 12px 40px;
    font-size: 1.1rem !important;   /* pisa la regla genérica de botones de Bootstrap */
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(168, 15, 29, .28);
}

/* ---------- Documentos que se llenan y firman en línea ---------- */
.fmt-bloque {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    background: var(--rojo-suave);
    border: 1.5px dashed var(--rojo);
    border-radius: 10px;
}
.fmt-bloque.completo { background: var(--ok-suave); border: 1.5px solid #86c79a; }
.fmt-estado { padding: 3px 10px; border-radius: 999px; font-size: .85rem; font-weight: 700; }
.fmt-pendiente { color: var(--aviso); background: var(--aviso-suave); }
.fmt-listo     { color: var(--ok);    background: #d3ecdb; }
.fmt-descarga  { color: var(--rojo); font-weight: 600; }

/* ---------- Modal de firma ---------- */
#fmtModal .modal-content { border: 0; border-radius: var(--radio); }
#fmtModal .modal-header  { background: var(--rojo); color: #fff; border: 0; }
#fmtModal .btn-close     { filter: invert(1) grayscale(1) brightness(2); }
#fmtModal .nav-pills .nav-link { color: var(--rojo); font-weight: 600; }
#fmtModal .nav-pills .nav-link.active { background: var(--rojo); color: #fff; }
.fmt-canvas-wrap {
    border: 2px dashed var(--rojo);
    border-radius: 10px;
    background: #fff;
}
#fmtCanvas {
    width: 100%;
    height: 180px;
    display: block;
    touch-action: none;           /* con el dedo, firmar no debe desplazar la página */
    cursor: crosshair;
}
.fmt-hueco-firma { border: 1px dashed #bbb; border-radius: 6px; padding: 14px; text-align: center; }

/* ---------- Espera al enviar ---------- */
.overlay {
    position: fixed; inset: 0;
    display: none;
    justify-content: center; align-items: center;
    background: rgba(28, 36, 48, .55);
    z-index: 2000;
}
/* El aviso debe quedar sobre el indicador de carga en pantallas táctiles. */
.swal2-container { z-index: 2100 !important; }
.loader {
    width: 60px; height: 60px;
    border: 10px solid #f3f3f3;
    border-top-color: var(--rojo);
    border-radius: 50%;
    animation: girar 1s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Inscripciones cerradas ---------- */
.cierre {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 24px 16px;
    background: linear-gradient(135deg, var(--rojo) 0%, var(--rojo-oscuro) 100%);
}
.sin-vacantes {
    max-width: 560px;
    padding: 34px 30px;
    background: #fff;
    border-top: 6px solid var(--amarillo);
    border-radius: var(--radio);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
    text-align: center;
}
.sin-vacantes h1 { margin: 0 0 10px; font-size: clamp(1.3rem, 4.5vw, 1.8rem); color: var(--rojo); }
.sin-vacantes p  { margin: 0; color: var(--tinta-suave); font-size: 1.05rem; }

/* ==========================================================================
   Pantallas pequeñas
   ========================================================================== */
@media (max-width: 767.98px) {
    .hero-in { padding: 14px 14px; gap: 12px; }
    .hero-logo { width: 62px; height: 62px; padding: 4px; }
    .hero-sup { font-size: .75rem; }

    .contenedor { padding: 14px 10px 0; }
    /* La fila de Bootstrap se sale con un margen negativo igual a la mitad del espacio entre
       columnas; con 10 px de relleno ese espacio debe ser menor que 20 px o aparece scroll lateral. */
    .contenedor .row { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
    .intro { padding: 16px; margin-bottom: 14px; }
    .seccion { padding: 16px 14px 6px; }

    .barra-envio {
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin: 18px -10px 0;
        padding: 12px 14px 14px;
        background: linear-gradient(to top, var(--fondo) 72%, rgba(244, 241, 234, 0));
    }
    .btn-enviar { width: 100%; min-width: 0; }

    .fmt-bloque { flex-direction: column; align-items: stretch; }
    .fmt-bloque .btn { width: 100%; }
    .fmt-bloque .fmt-estado { align-self: flex-start; }

    #fmtCanvas { height: 220px; }
}

/* Modal a pantalla completa en el celular (lo activa la clase modal-fullscreen-sm-down) */
@media (max-width: 575.98px) {
    #fmtModal .modal-body { padding: 14px; }
    #fmtModal .modal-header, #fmtModal .modal-footer { padding: 10px 14px; }
}

/* Quien prefiere menos movimiento no ve la animación de carga girando sin parar */
@media (prefers-reduced-motion: reduce) {
    .loader { animation-duration: 3s; }
}

/* ---------- Colores de Bootstrap que quedaban azules ---------- */
.form-page .text-primary { color: var(--rojo) !important; }
.form-page .form-check-input:checked {
    background-color: var(--rojo);
    border-color: var(--rojo);
}
.form-page .form-check-input:focus {
    border-color: var(--rojo);
    box-shadow: 0 0 0 4px rgba(168, 15, 29, .16);
}
.form-page .form-check-label { cursor: pointer; }
#fmtModal .modal-title { font-size: 1.1rem; line-height: 1.25; }
@media (max-width: 575.98px) { #fmtModal .modal-title { font-size: 1rem; } }