:root{
  --cft-azul: #0f3a5f;
  --cft-azul-claro: #1e5f8f;
  --cft-acento: #c98a2c;
  --cft-fondo: #f5f6f8;
  --cft-texto: #1c2530;
  --cft-texto-suave: #5a6572;
  --cft-borde: #d8dce1;
  --cft-blanco: #ffffff;
  --cft-error: #b3261e;
  --cft-ok: #2e7d32;
}

*{box-sizing:border-box;}

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

.encuesta-shell{
  max-width:640px;
  margin:0 auto;
  min-height:100vh;
  background:var(--cft-blanco);
  box-shadow:0 0 24px rgba(15,58,95,0.08);
}

.encuesta-header{
  background:var(--cft-azul);
  color:#fff;
  padding:20px 20px 16px;
}

.encuesta-header h1{
  font-size:1.15rem;
  margin:0 0 4px;
  font-weight:600;
}

.encuesta-header p{
  margin:0;
  font-size:0.85rem;
  color:#cfe0ee;
}

.encuesta-progress{
  height:6px;
  background:rgba(255,255,255,0.25);
  border-radius:4px;
  overflow:hidden;
  margin-top:14px;
}

.encuesta-progress-bar{
  height:100%;
  background:var(--cft-acento);
  border-radius:4px;
  transition:width .3s ease;
  width:0%;
}

.encuesta-body{
  padding:24px 20px 40px;
}

.encuesta-seccion{display:none;}
.encuesta-seccion.activa{display:block; animation:fadeIn .2s ease;}

@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

.encuesta-seccion h2{
  font-size:1.05rem;
  color:var(--cft-azul);
  margin:0 0 6px;
}

.encuesta-seccion .subtitulo{
  font-size:0.88rem;
  color:var(--cft-texto-suave);
  margin:0 0 20px;
}

.campo{
  margin-bottom:22px;
}

.campo label.etiqueta{
  display:block;
  font-weight:600;
  font-size:0.95rem;
  margin-bottom:8px;
}

.campo .ayuda{
  font-size:0.8rem;
  color:var(--cft-texto-suave);
  margin:-4px 0 8px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--cft-borde);
  border-radius:8px;
  font-size:1rem;
  font-family:inherit;
  color:var(--cft-texto);
  background:#fff;
}

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

input:focus, textarea:focus, select:focus{
  outline:2px solid var(--cft-azul-claro);
  outline-offset:1px;
  border-color:var(--cft-azul-claro);
}

.opciones{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.opcion{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--cft-borde);
  border-radius:8px;
  cursor:pointer;
}

.opcion:has(input:checked){
  border-color:var(--cft-azul-claro);
  background:#eef5fb;
}

.opcion input{ width:18px; height:18px; flex-shrink:0; }

.opcion .texto-opcion{ font-size:0.95rem; }

.opcion input:focus-visible{ outline:2px solid var(--cft-azul-claro); }

.escala-lineal{
  display:flex;
  justify-content:space-between;
  gap:6px;
}

.escala-lineal .punto{
  flex:1;
  text-align:center;
}

.escala-lineal label{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:8px 2px;
  border:1px solid var(--cft-borde);
  border-radius:8px;
  cursor:pointer;
  font-size:0.85rem;
}

.escala-lineal label:has(input:checked){
  border-color:var(--cft-azul-claro);
  background:#eef5fb;
}

.escala-lineal small{
  color:var(--cft-texto-suave);
  font-size:0.7rem;
}

.acciones{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:28px;
}

button{
  font-family:inherit;
  font-size:0.95rem;
  font-weight:600;
  padding:12px 20px;
  border-radius:8px;
  border:none;
  cursor:pointer;
}

.btn-primario{
  background:var(--cft-azul);
  color:#fff;
  flex:1;
}

.btn-primario:hover{ background:var(--cft-azul-claro); }

.btn-secundario{
  background:transparent;
  color:var(--cft-azul);
  border:1px solid var(--cft-borde);
}

.error-campo{
  color:var(--cft-error);
  font-size:0.82rem;
  margin-top:6px;
  display:none;
}

.campo.con-error .error-campo{ display:block; }
.campo.con-error input, .campo.con-error textarea, .campo.con-error select{
  border-color:var(--cft-error);
}

.pantalla-final{
  text-align:center;
  padding:40px 10px;
}

.pantalla-final .icono{
  font-size:2.6rem;
  margin-bottom:12px;
}

.pantalla-final h2{ color:var(--cft-azul); }

.pantalla-final p{ color:var(--cft-texto-suave); }

.campo-condicional{
  margin-top:12px;
  padding-left:2px;
}

.checkbox-grupo{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.checkbox-grupo .opcion input{ border-radius:4px; }

@media (max-width:400px){
  .encuesta-header, .encuesta-body{ padding-left:16px; padding-right:16px; }
}