:root{
  --bg:#f4f6fb; --card:#fff; --ink:#1e2433; --muted:#6b7385;
  --line:#e3e7f0; --brand:#3b5bdb; --brand-d:#2f49b0;
  --ok:#2f9e44; --off:#e8590c; --danger:#e03131;
  --radius:12px; --shadow:0 1px 3px rgba(20,30,60,.08),0 6px 20px rgba(20,30,60,.05);
}
*{box-sizing:border-box}
body{
  margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.5;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* Topbar */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--card);border-bottom:2px solid var(--line);
  padding:14px 28px;position:sticky;top:0;z-index:10;
}
.brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;
  font-weight:700;font-size:19px;color:#134071;line-height:1.05}
.brand .dot{color:#24b8cb}
.brand-name{white-space:nowrap}
.brand-tgp{height:42px;width:auto;display:block;padding-left: 8px;}
.topbar nav a{margin-left:20px;font-weight:500;font-size:14px;color:var(--ink)}
.topbar nav a.muted{color:var(--muted)}

.wrap{max-width:1100px;margin:28px auto;padding:0 20px}
.wrap.sm{max-width:640px}
.wrap.ancho{max-width:1100px}

/* Cards */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px;margin-bottom:18px;
}
h1{font-size:24px;margin:0 0 6px}
h3{margin:0 0 14px;font-size:16px}
.head-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}

/* Form fields */
label{display:block;font-weight:600;font-size:14px;margin-bottom:14px}
label.inline{display:flex;align-items:center;gap:8px;font-weight:500}
label.inline input{width:auto;margin:0}
input[type=text],input[type=email],input[type=number],input[type=date],
input[type=password],select,textarea{
  width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line);
  border-radius:8px;font-size:15px;font-family:inherit;background:#fff;color:var(--ink);
}
input:focus,select,textarea:focus{outline:2px solid var(--brand);border-color:var(--brand)}
textarea{resize:vertical}
.sm-label{font-size:13px;margin:0}
.sm-label select,.sm-label input{margin-top:4px}

/* Buttons */
.btn{
  display:inline-block;border:1px solid #d3d8e6;background:#eef1f8;color:var(--ink);
  padding:9px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;
}
.btn:hover{background:#e3e8f3;border-color:var(--brand)}
.btn.ghost{background:transparent;border-color:var(--line)}

.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-d)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 11px;font-size:13px}
.btn.danger{color:var(--danger)}
.btn.danger:hover{border-color:var(--danger);background:#fff5f5}
.btn.grande{padding:13px 26px;font-size:16px;margin-top:6px}
button{font-family:inherit}

/* Tabla */
.tabla{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tabla th,.tabla td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:14px}
.tabla th{background:#fafbfe;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.tabla tr:last-child td{border-bottom:none}
.acciones{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pill{padding:2px 10px;border-radius:20px;font-size:12px;font-weight:600}
.pill.on{background:#e7f5ea;color:var(--ok)}
.pill.off{background:#fff0e6;color:var(--off)}

/* Login */
.login{max-width:360px;margin:80px auto}
.login h1{text-align:center;margin-bottom:20px}
.alert{background:#ffe3e3;color:var(--danger);padding:10px;border-radius:8px;font-size:14px}

/* Builder */
.pregunta-card{border-left:3px solid var(--brand)}
.q-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.q-num{background:var(--brand);color:#fff;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:0 0 auto}
.q-texto{flex:1;margin:0!important;font-weight:600}
.q-move{display:flex;gap:4px}
.q-move button{border:1px solid var(--line);background:#fff;border-radius:6px;width:28px;height:28px;cursor:pointer;color:var(--muted)}
.q-move button:hover{border-color:var(--brand);color:var(--brand)}
.q-move .del:hover{border-color:var(--danger);color:var(--danger)}
.q-config{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;margin-bottom:8px}
.q-opciones{background:#fafbfe;border:1px solid var(--line);border-radius:8px;padding:12px;margin-top:8px}
.opcion-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.opcion-row input{margin:0}
.del{background:#fff;border:1px solid var(--line);border-radius:6px;cursor:pointer;color:var(--muted);padding:6px 9px}
.del:hover{border-color:var(--danger);color:var(--danger)}
.builder-actions{display:flex;gap:10px;justify-content:space-between;margin:20px 0}
.link-box{border:1px solid var(--ok);background:#f3fbf4}
.link-row{display:flex;gap:8px}
.link-row input{margin:0}

/* Público */
body.publico{background:linear-gradient(180deg,#eef1fb 0,#f4f6fb 220px)}
.encabezado-enc{margin-bottom:20px}
.encabezado-enc .desc{color:var(--muted)}
.form-encuesta .pregunta{border-left:3px solid var(--brand)}
.q-label{font-size:16px;font-weight:600;margin-bottom:10px}
.req{color:var(--danger)}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;align-items:center;gap:9px;font-weight:400;margin:0;padding:8px 12px;
  border:1px solid var(--line);border-radius:8px;cursor:pointer}
.opt:hover{border-color:var(--brand);background:#f7f9ff}
.opt input{width:auto;margin:0}
.escala{display:flex;gap:8px;flex-wrap:wrap}
.esc-item{margin:0;cursor:pointer}
.esc-item input{display:none}
.esc-item span{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--line);border-radius:8px;font-weight:600}
.esc-item input:checked+span{background:var(--brand);color:#fff;border-color:var(--brand)}
.gracias{text-align:center;padding:44px}

/* Stats */
.stat-top{display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.metric .big{font-size:34px;font-weight:800;color:var(--brand);margin-right:6px}
.stat-q h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tipo-tag{font-size:11px;font-weight:600;color:var(--muted);background:#f0f2f8;
  padding:2px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.03em}
.bar-row{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.bar-label{flex:0 0 160px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{flex:1;background:#eef1f8;border-radius:6px;height:22px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--brand),#5c7cfa);border-radius:6px;min-width:2px;transition:width .3s}
.bar-val{flex:0 0 auto;font-size:13px;color:var(--muted);min-width:64px;text-align:right}
.promedio{color:var(--muted);margin:0 0 12px}
.respuestas-texto{margin:0;padding-left:18px;max-height:280px;overflow:auto}
.respuestas-texto li{padding:4px 0;border-bottom:1px solid var(--line);font-size:14px}
.empty{text-align:center;color:var(--muted);padding:34px}

@media(max-width:560px){
  .topbar{padding:12px 16px}
  .bar-label{flex-basis:100px}
  .acciones{flex-direction:column}
}

/* v2 — multi-cliente / plataforma */
.topbar nav .quien{margin-left:20px;font-size:13px;color:var(--muted);font-weight:600;
  background:#f0f2f8;padding:4px 10px;border-radius:20px}
.topbar.plataforma{border-bottom:2px solid var(--brand)}
.pill.sso{background:#e7f0ff;color:var(--brand);margin-left:4px}
.nota{color:var(--muted);font-size:13px;margin-top:14px}
.ok-msg{background:#e7f5ea;color:var(--ok);padding:10px;border-radius:8px;font-size:14px}
code{background:#f0f2f8;padding:1px 6px;border-radius:5px;font-size:13px}

/* ===== v3 · branding público ===== */
.enc-hero{background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);overflow:hidden;margin-bottom:18px}
/* Banda superior con el color de marca */
.hero-band{background:var(--brand);color:var(--on-brand,#fff);
  display:flex;align-items:center;gap:12px;padding:14px 20px;min-height:34px}
.hero-logo-chip{display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:10px;padding:6px 9px;box-shadow:0 2px 8px rgba(20,30,60,.14);flex:0 0 auto}
.hero-logo-chip img{display:block;max-height:34px;max-width:130px;object-fit:contain}
.hero-taller{font-size:14px;font-weight:600;letter-spacing:.01em;opacity:.95}
.hero-cover{height:150px;padding:20px 30px;background-origin:content-box;background-size:contain;background-repeat:no-repeat;
  background-position:center;background-color:var(--card);border-bottom:1px solid var(--line)}
.hero-body{padding:24px 26px 26px;text-align:center}
.hero-body h1{font-size:27px;margin:0 0 8px;line-height:1.22;letter-spacing:-.01em}
.hero-body .desc{color:var(--muted);margin:0 auto;max-width:480px;font-size:15px}

/* Preguntas */
.form-encuesta .card.pregunta{border-left:none;border-top:none;position:relative}
.q-head-pub{display:flex;align-items:flex-start;gap:11px;margin-bottom:14px}
.q-badge{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--brand);
  color:var(--on-brand,#fff);display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;margin-top:1px}
.q-title{font-size:16px;font-weight:600;line-height:1.4;padding-top:3px}
.q-label{font-size:16px;font-weight:600;margin-bottom:12px;display:block}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;align-items:center;gap:10px;font-weight:400;margin:0;padding:11px 14px;
  border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:.15s}
.opt:hover{border-color:var(--brand);background:var(--card)}
.opt input{width:auto;margin:0;accent-color:var(--brand)}
.opt:has(input:checked){border-color:var(--brand);background:rgba(0,0,0,.015);box-shadow:0 0 0 2px var(--brand) inset}
.escala{display:flex;gap:8px;flex-wrap:wrap}
.esc-item{flex:1 1 44px;margin:0;cursor:pointer}
.esc-item input{display:none}
.esc-item span{display:flex;align-items:center;justify-content:center;width:100%;height:52px;
  border:1.5px solid var(--line);border-radius:12px;font-weight:700;font-size:16px;
  background:#fff;color:var(--ink);transition:transform .12s, box-shadow .12s, border-color .12s, background .12s}
.esc-item:hover span{border-color:var(--brand);color:var(--brand)}
.esc-item input:checked+span{background:var(--brand);color:var(--on-brand,#fff);border-color:var(--brand);
  transform:translateY(-2px);box-shadow:0 6px 16px rgba(20,30,60,.20)}
/* Escala con estrellas (rating CSS puro, sin JS) */
.stars{display:inline-flex;flex-direction:row-reverse;--star:#f5b301}
.stars input{position:absolute;width:1px;height:1px;opacity:0}
.stars label{font-size:34px;line-height:1;color:#d6dae3;cursor:pointer;padding:0 4px;transition:color .12s, transform .12s}
.stars label:hover{transform:scale(1.12)}
.stars label:hover,.stars label:hover ~ label,.stars input:checked ~ label{color:var(--star)}
.stars input:focus-visible+label{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
.grande{width:100%;background:var(--brand);border-color:var(--brand);color:var(--on-brand,#fff)}
.grande:hover{background:var(--brand-d);border-color:var(--brand-d)}
.pie-marca{text-align:center;color:var(--muted);font-size:12px;margin-top:16px}
.pie-marca strong{color:var(--brand)}

/* gracias */
.gracias{text-align:center;padding:46px 30px}
.grx-logo{max-height:56px;max-width:170px;object-fit:contain;margin-bottom:6px}
.grx-taller{color:var(--muted);font-size:14px;font-weight:600;margin:0 0 12px}
.check{width:76px;height:76px;border-radius:50%;background:var(--brand);color:var(--on-brand,#fff);
  font-size:40px;display:flex;align-items:center;justify-content:center;margin:6px auto 16px;
  box-shadow:0 8px 22px rgba(20,30,60,.2)}

/* ===== v3 · controles de marca en el panel ===== */
.marca-grid{display:grid;grid-template-columns:1fr 220px;gap:24px;align-items:start}
.color-input{width:64px;height:40px;padding:2px;border-radius:8px;cursor:pointer}
.logo-preview,.portada-prev{margin-top:10px;background:#fafbfe;border:1px solid var(--line);
  border-radius:10px;padding:12px;display:flex;align-items:center;gap:12px}
.logo-preview img{max-height:60px;max-width:200px;object-fit:contain}
.portada-prev img{max-height:80px;max-width:220px;object-fit:contain;border-radius:8px}
@media(max-width:560px){.marca-grid{grid-template-columns:1fr}}

/* v4 · invitaciones */
.enlace-cell code{font-size:12px;color:var(--muted);display:inline-block;max-width:280px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.inline-form{margin:0}
.muted{color:var(--muted)}

/* v5 · vista de respuesta individual */
.resp-meta{margin:0;color:var(--muted)}
.resp-meta strong{color:var(--ink)}
.resp-item{border-left:3px solid var(--brand)}
.resp-preg{font-weight:600;margin-bottom:8px}
.resp-val{background:#fafbfe;border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.resp-val.vacio{color:var(--muted);font-style:italic}
.resp-lista{margin:0;padding-left:20px}
.resp-lista li{padding:3px 0}

.pregunta-card .q-ayuda{width:100%;margin:8px 0 0;padding:6px 9px;border:1px solid var(--line);
  border-radius:8px;font-size:13px;color:var(--muted);background:#fafbfe}

.form-encuesta .pregunta .q-ayuda{margin:-8px 0 16px 39px;font-size:13.5px;color:var(--muted);line-height:1.45}
/* Nota media bajo el estado "Respondida" en invitaciones */
.nota-media{margin-top:5px;font-size:15px;font-weight:700;line-height:1}
.nota-media .nota-sobre{font-size:11px;font-weight:600;color:var(--muted);margin-left:1px}

/* Valor de escala en la vista de una respuesta: "5 / 10" + barra */
.resp-escala{display:flex;align-items:center;gap:14px}
.esc-num{font-size:20px;font-weight:700;line-height:1;white-space:nowrap;flex:0 0 auto;min-width:62px}
.esc-num .esc-max{font-size:12px;font-weight:600;color:var(--muted);margin-left:4px}
.esc-bar{height:10px}