*,*::before,*::after{box-sizing:border-box}
:root{
  --tinta:#1a2332; --texto:#3d4a5c; --suave:#6b7889;
  --linea:#dfe4ea; --fondo:#fff; --panel:#f6f8fa; --fondo2:#eef1f4;
  --acento:#1f5f8b; --ok:#1c7a4f; --pend:#8a6d1f; --alerta:#8a3d1f;
  --radio:6px;
}
html,body{height:100%}
body{
  margin:0; background:var(--fondo2); color:var(--texto);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; font-size:15px;
}
a{color:var(--acento)}
.oculto{display:none !important}

/* ---------- login ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}
.login{
  width:100%; max-width:420px; background:var(--fondo); border-radius:var(--radio);
  padding:40px 36px; box-shadow:0 2px 18px rgba(26,35,50,.10);
}
.marca{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--acento); font-weight:700; margin:0 0 8px}
.login h1{font-size:22px; color:var(--tinta); margin:0 0 6px; font-weight:600}
.login p.sub{margin:0 0 26px; font-size:14px; color:var(--suave)}

label{display:block; font-size:13px; font-weight:600; color:var(--tinta); margin:0 0 6px}
input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--linea); border-radius:5px;
  font:inherit; color:var(--texto); background:var(--fondo);
}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(31,95,139,.35); outline-offset:1px; border-color:var(--acento)}
textarea{min-height:96px; resize:vertical}
.campo{margin:0 0 18px}

.btn{
  display:inline-block; padding:10px 20px; border:0; border-radius:5px; cursor:pointer;
  font:inherit; font-weight:600; background:var(--acento); color:#fff;
}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.sec{background:var(--panel); color:var(--tinta); border:1px solid var(--linea)}
.btn.peligro{background:var(--alerta)}
.btn.full{width:100%}
.btn.chico{padding:6px 12px; font-size:13px}

.error{background:#fdf2ef; border-left:3px solid var(--alerta); color:var(--alerta);
  padding:10px 14px; font-size:14px; border-radius:3px; margin:0 0 16px}

/* ---------- layout cuestionario ---------- */
.topbar{
  position:sticky; top:0; z-index:20; background:var(--fondo); border-bottom:1px solid var(--linea);
}
.topbar-in{max-width:1080px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.topbar .quien{font-size:13px; color:var(--suave); flex:1; min-width:180px}
.topbar .quien strong{color:var(--tinta); display:block; font-size:15px}
.estado-guardado{font-size:12.5px; color:var(--suave); white-space:nowrap}
.estado-guardado.ok{color:var(--ok)}
.estado-guardado.err{color:var(--alerta)}

.progreso{height:4px; background:var(--linea)}
.progreso i{display:block; height:100%; background:var(--acento); width:0; transition:width .3s}

.main{max-width:1080px; margin:0 auto; padding:26px 20px 80px; display:grid; grid-template-columns:250px 1fr; gap:28px; align-items:start}
nav.secciones{position:sticky; top:74px; background:var(--fondo); border-radius:var(--radio); padding:10px; box-shadow:0 1px 8px rgba(26,35,50,.07)}
nav.secciones button{
  display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font:inherit; font-size:13.5px; color:var(--texto); padding:8px 10px; border-radius:4px; line-height:1.35;
}
nav.secciones button:hover{background:var(--panel)}
nav.secciones button.activa{background:var(--acento); color:#fff; font-weight:600}
nav.secciones button .n{font-size:11px; opacity:.7; display:block}

.hoja{background:var(--fondo); border-radius:var(--radio); padding:34px 38px; box-shadow:0 2px 14px rgba(26,35,50,.08)}
.hoja h2{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--acento); margin:0 0 6px; font-weight:700}
.hoja h3{font-size:22px; color:var(--tinta); margin:0 0 10px; font-weight:600}
.hoja .intro{font-size:14px; color:var(--suave); margin:0 0 26px; padding-bottom:18px; border-bottom:1px solid var(--linea)}

.pregunta{margin:0 0 26px}
.pregunta > label{font-size:15px; font-weight:600; color:var(--tinta); margin-bottom:4px}
.pregunta .ayuda{font-size:13px; color:var(--suave); margin:0 0 10px}
.req{color:var(--alerta); font-weight:700}

.opciones{display:grid; gap:7px}
.opciones.cols{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.opcion{display:flex; gap:9px; align-items:flex-start; font-size:14px; cursor:pointer; padding:6px 8px; border-radius:4px}
.opcion:hover{background:var(--panel)}
.opcion input{margin:3px 0 0; flex:none}

/* repetidor */
.rep table{width:100%; border-collapse:collapse; font-size:13.5px}
.rep th{text-align:left; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--suave);
  padding:0 8px 7px 0; font-weight:600}
.rep td{padding:4px 8px 4px 0; vertical-align:top}
.rep input{padding:7px 9px; font-size:13.5px}
.rep .quitar{background:none; border:0; color:var(--alerta); cursor:pointer; font-size:18px; line-height:1; padding:4px 6px}
.rep-scroll{overflow-x:auto}

.pie{display:flex; justify-content:space-between; gap:12px; margin-top:30px; padding-top:22px; border-top:1px solid var(--linea)}

.aviso{background:var(--panel); border-left:3px solid var(--acento); padding:14px 18px; font-size:14px; margin:0 0 22px; border-radius:3px}
.aviso.ok{border-left-color:var(--ok)}

/* ---------- admin ---------- */
.admin-main{max-width:1180px; margin:0 auto; padding:26px 20px 80px}
.card{background:var(--fondo); border-radius:var(--radio); padding:26px 28px; box-shadow:0 2px 14px rgba(26,35,50,.08); margin:0 0 22px}
.card h3{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--acento); margin:0 0 16px; font-weight:700}
table.datos{width:100%; border-collapse:collapse; font-size:14px}
table.datos th{text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--suave);
  border-bottom:1px solid var(--linea); padding:0 10px 8px 0; font-weight:600}
table.datos td{padding:11px 10px 11px 0; border-bottom:1px solid var(--linea); vertical-align:middle}
table.datos tr:last-child td{border-bottom:0}
.pill{font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:20px}
.pill.abierto{background:#eaf2f8; color:var(--acento)}
.pill.enviado{background:#e8f5ee; color:var(--ok)}
.pill.cerrado{background:var(--panel); color:var(--suave)}
.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px}

.respuesta{margin:0 0 16px; padding:0 0 14px; border-bottom:1px solid var(--linea)}
.respuesta:last-child{border-bottom:0}
.respuesta .p{font-size:13.5px; color:var(--suave); margin:0 0 4px}
.respuesta .r{font-size:15px; color:var(--tinta); white-space:pre-wrap}
.respuesta .r.vacia{color:#b4bcc6; font-style:italic}

@media (max-width:860px){
  .main{grid-template-columns:1fr}
  nav.secciones{position:static}
  .hoja{padding:24px 20px}
}
@media print{
  body{background:#fff}
  .topbar,nav.secciones,.pie,.no-print{display:none !important}
  .card,.hoja{box-shadow:none; padding:0}
}