/* Formulario público de postulación
   Pensado para llenarse desde el celular: una columna, campos altos y texto
   grande. En pantallas anchas los campos se reparten en la grilla de 12.

   Los tres colores de marca los sobreescribe app.js con los de la empresa a la
   que ingresa la persona (San Andrés, San Antonio, Alianza o Expreso Norte).
   Los valores de acá son solo el punto de partida mientras carga. */

:root {
  --marca: #004693;
  --marca-claro: #2f5596;
  --marca-tenue: #eaf0f8;
  --marca-borde: rgba(0, 70, 147, .28);
  --marca-halo: rgba(0, 70, 147, .15);
  --texto: #1b2733;
  --texto-suave: #5b6b7c;
  --borde: #d7dde3;
  --fondo: #f4f6f9;
  --blanco: #fff;
  --rojo: #c0392b;
  --rojo-tenue: #fdecea;
  --verde: #1e8449;
  --radio: 10px;
  --sombra: 0 1px 3px rgba(27, 39, 51, .08), 0 8px 24px rgba(27, 39, 51, .06);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.oculto { display: none !important; }

/* ── Marca ───────────────────────────────────────────────────────────────── */

/* Fondo blanco y no del color de la marca: los cuatro logos son de colores
   distintos y varios llevan naranja, que sobre un fondo intenso se ensucia. La
   franja inferior es la que pone el color de la empresa. */
.marca {
  background: var(--blanco);
  border-bottom: 3px solid var(--marca);
  padding: 12px 20px;
}

.marca-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.marca-logo {
  height: 30px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
  display: block;
}

/* Respaldo por si el PNG no carga: el nombre escrito. */
.marca-nombre {
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--marca);
}

.marca-sub {
  font-size: 13px;
  color: var(--texto-suave);
  border-left: 1px solid var(--borde);
  padding-left: 12px;
}

/* ── Estados (carga, aviso, listo) ───────────────────────────────────────── */

.estado {
  max-width: 520px;
  margin: 0 auto;
  padding: 64px 24px;
  text-align: center;
}

.estado h1 { font-size: 22px; margin: 0 0 10px; }
.estado p { color: var(--texto-suave); margin: 0 0 8px; }

.icono {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--rojo-tenue);
  color: var(--rojo);
  font-size: 28px;
  font-weight: 700;
  line-height: 56px;
  margin: 0 auto 18px;
}

.icono.ok { background: #e8f6ee; color: var(--verde); }

.spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto 16px;
  border: 3px solid var(--borde);
  border-top-color: var(--marca);
  border-radius: 50%;
  animation: giro .8s linear infinite;
}

@keyframes giro { to { transform: rotate(360deg); } }

.ayuda-pie { font-size: 14px; margin-top: 18px; }
.ayuda-pie a { color: var(--marca-claro); }

/* ── Formulario ──────────────────────────────────────────────────────────── */

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 16px 60px;
}

.portada { margin-bottom: 18px; }
.portada h1 { font-size: 24px; margin: 0 0 6px; color: var(--marca); }
.portada p { margin: 0 0 6px; color: var(--texto-suave); font-size: 15px; }
.portada-nota { font-size: 14px; }

.vence {
  font-size: 13px;
  color: var(--texto-suave);
  background: var(--marca-tenue);
  border-radius: 6px;
  padding: 7px 11px;
  display: inline-block;
  margin-top: 4px;
}

/* Progreso */

.progreso { margin-bottom: 20px; }

.progreso-texto {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto-suave);
  margin-bottom: 6px;
}

.progreso-pista {
  height: 7px;
  background: #e3e8ee;
  border-radius: 999px;
  overflow: hidden;
}

.progreso-relleno {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--marca), var(--marca-claro));
  border-radius: 999px;
  transition: width .3s ease;
}

/* Secciones */

.seccion {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 18px 18px 6px;
  margin-bottom: 18px;
}

.seccion > h2 {
  font-size: 16px;
  color: var(--marca);
  margin: 0 0 3px;
}

.seccion > .seccion-desc {
  font-size: 13.5px;
  color: var(--texto-suave);
  margin: 0 0 16px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.campo { grid-column: span 12; margin-bottom: 6px; }

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
}

.requerido { color: var(--rojo); }

.ayuda {
  font-size: 12.5px;
  color: var(--texto-suave);
  margin: 4px 0 0;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--blanco);
  color: var(--texto);
  font: inherit;
  font-size: 16px; /* menor a 16px hace que iOS acerque el zoom al enfocar */
}

textarea { min-height: 88px; resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--marca-claro);
  box-shadow: 0 0 0 3px var(--marca-halo);
}

.campo.malo input,
.campo.malo select,
.campo.malo textarea,
.campo.malo .subida {
  border-color: var(--rojo);
  background: var(--rojo-tenue);
}

.mensaje-campo { font-size: 12.5px; color: var(--rojo); margin: 5px 0 0; }

/* Casilla */

.casilla { display: flex; align-items: flex-start; gap: 10px; }
.casilla input { width: 19px; height: 19px; margin-top: 2px; flex: none; }
.casilla label { font-weight: 500; margin: 0; font-size: 14.5px; }

/* Subida de archivos */

.subida {
  border: 1px dashed var(--borde);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  background: #fbfcfd;
}

.subida input[type="file"] { display: none; }

.subida-boton {
  display: inline-block;
  background: var(--marca-tenue);
  color: var(--marca);
  border: 1px solid var(--marca-borde);
  border-radius: 7px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.subida-boton:active { transform: translateY(1px); }
.subida-pista { font-size: 12px; color: var(--texto-suave); margin: 8px 0 0; }

.archivo-cargado {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #e8f6ee;
  border: 1px solid #bfe3cd;
  border-radius: 8px;
  padding: 10px 12px;
  text-align: left;
}

.archivo-nombre {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archivo-peso { font-size: 12px; color: var(--texto-suave); }

.quitar {
  border: none;
  background: none;
  color: var(--rojo);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
}

.subiendo { font-size: 13px; color: var(--texto-suave); }

/* ── Envío ───────────────────────────────────────────────────────────────── */

.errores {
  background: var(--rojo-tenue);
  border: 1px solid #f3c3bd;
  border-radius: var(--radio);
  padding: 14px 18px;
  margin-bottom: 16px;
  font-size: 14px;
}

.errores ul { margin: 8px 0 0; padding-left: 20px; }
.errores li { margin-bottom: 3px; }

.acciones { text-align: center; margin-top: 6px; }

.boton-primario {
  width: 100%;
  max-width: 340px;
  background: var(--marca);
  color: var(--blanco);
  border: none;
  border-radius: 9px;
  padding: 15px 24px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.boton-primario:hover { background: var(--marca-claro); }
.boton-primario:disabled { background: #9aa7b5; cursor: default; }

.guardado { font-size: 12.5px; color: var(--texto-suave); min-height: 18px; margin: 10px 0 0; }

.legal {
  font-size: 12px;
  color: var(--texto-suave);
  text-align: center;
  margin-top: 26px;
}

/* ── Escritorio ──────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  main { padding: 30px 20px 70px; }
  .campo.medio { grid-column: span 6; }
  .campo.tercio { grid-column: span 4; }
  .campo.completo { grid-column: span 12; }
}