/* =========================================================
   VARIABLES DE COLOR
   Permiten cambiar la paleta desde un solo lugar.
   ========================================================= */
:root {
  --azul-fondo: #06184a;
  --azul-claro: #0a286c;
  --azul-campo: #051b50;
  --dorado: #f2c318;
  --dorado-claro: #ffd93d;
  --blanco: #ffffff;
  --texto-secundario: #c7d7f4;
  --verde-whatsapp: #1fa64a;
  --rojo-error: #ff7272;
  --borde: rgba(255, 220, 70, 0.22);
}

/* Incluye padding y borde dentro del tamaño total */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--blanco);
  font-family: "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at 15% 8%, rgba(255, 217, 61, 0.16), transparent 30%),
    linear-gradient(145deg, #031135, var(--azul-fondo), #0b2a71);
}

/* Contenedor que limita el ancho de toda la página */
.contenedor-pagina {
  width: min(100%, 820px);
  margin: 0px auto;
  padding: 24px 16px 50px;
}

/* Encabezado y logo */
.encabezado-principal {
  padding: 25px;
  margin-bottom: 22px;
  border: 1px solid var(--borde);
  border-radius: 24px;
  text-align: center;
  background: linear-gradient(135deg, #04184c, #0b3589);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.logo-empresa {
  display: block;
  width: min(100%, 1000px);
  
  margin: -70px auto 20px;
}

.texto-superior {
  margin: -100px 0 7px;
  color: var(--dorado-claro);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
}

.titulo-principal { margin: 0; }

.descripcion-principal {
  color: var(--texto-secundario);
  line-height: 1.6;
}

/* Tarjeta que contiene el formulario */
.tarjeta-formulario {
  padding: 24px;
  border: 1px solid var(--borde);
  border-radius: 24px;
  background: rgba(4, 22, 65, 0.92);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.aviso-obligatorios { color: var(--texto-secundario); }
.campo-obligatorio { color: var(--dorado-claro); }

/* Secciones internas */
.seccion-formulario {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(8, 33, 91, .96), rgba(7, 27, 73, .96));
}

.titulo-seccion {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 17px;
}

.numero-paso {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: #08215d;
  background: var(--dorado);
  font-size: 13px;
}

/* Distribuye los campos en dos columnas */
.cuadricula-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.grupo-campo { min-width: 0; }
.campo-completo { grid-column: 1 / -1; }

label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 700;
}

input, select, textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 14px;
  border: 1px solid rgba(166, 187, 218, .25);
  border-radius: 11px;
  outline: none;
  color: var(--blanco);
  background: var(--azul-campo);
  font: inherit;
}

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

input:focus, select:focus, textarea:focus {
  border-color: var(--dorado);
  box-shadow: 0 0 0 4px rgba(242, 195, 24, .18);
}

/* Paradas dinámicas */
.bloque-paradas {
  grid-column: 1 / -1;
  padding: 15px;
  border: 1px dashed rgba(255, 217, 61, .35);
  border-radius: 14px;
}

.encabezado-paradas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.titulo-paradas { margin: 0; }
.texto-ayuda, .mensaje-sin-paradas { color: #8fa2c0; font-size: 12px; }
.lista-paradas { display: grid; gap: 12px; margin-top: 12px; }

.boton-agregar {
  padding: 10px 14px;
  border: 0;
  border-radius: 11px;
  color: #08215d;
  background: linear-gradient(135deg, #ffe467, var(--dorado));
  cursor: pointer;
  font-weight: 800;
}

.tarjeta-parada {
  padding: 14px;
  border: 1px solid rgba(177, 201, 239, .2);
  border-radius: 13px;
  background: rgba(4, 22, 65, .76);
}

.encabezado-tarjeta-parada {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.numero-parada { color: var(--dorado-claro); font-weight: 800; }

.boton-eliminar-parada {
  padding: 7px 10px;
  border: 1px solid rgba(255, 114, 114, .34);
  border-radius: 9px;
  color: #ffd7d7;
  background: rgba(255, 114, 114, .1);
  cursor: pointer;
}

.cuadricula-parada {
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: 10px;
}

/* Resumen */
.contenedor-resumen {
  display: none;
  margin-top: 20px;
  padding: 18px;
  border: 1px dashed rgba(255, 217, 61, .45);
  border-radius: 16px;
}

.contenedor-resumen.visible { display: block; }
.cuadricula-resumen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.elemento-resumen strong { display: block; color: #94a6c1; font-size: 10px; text-transform: uppercase; }

.mensaje-error {
  display: none;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid rgba(255, 114, 114, .35);
  border-radius: 12px;
  color: #ffd1d1;
  background: rgba(255, 114, 114, .09);
}

.mensaje-error.visible { display: block; }

/* Botones finales */
.contenedor-botones {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 12px;
  margin-top: 22px;
}

.boton-secundario, .boton-whatsapp {
  min-height: 54px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  color: white;
  font: inherit;
  font-weight: 800;
}

.boton-secundario { background: #0a2b72; }
.boton-whatsapp { background: linear-gradient(135deg, #39d36c, #168b3b); }

.aviso-final, .pie-pagina {
  color: #93a5bf;
  font-size: 11px;
  text-align: center;
}

.pie-pagina { padding-top: 22px; }

/* Adaptación para pantallas pequeñas */
@media (max-width: 650px) {
  .contenedor-pagina { padding: 12px 10px 32px; }
  .encabezado-principal, .tarjeta-formulario, .seccion-formulario { padding: 16px 14px; }
  .cuadricula-campos, .cuadricula-parada, .cuadricula-resumen, .contenedor-botones { grid-template-columns: 1fr; }
  .campo-completo { grid-column: auto; }
  .encabezado-paradas { align-items: stretch; flex-direction: column; }
}