/* ── Ziyego Encuesta – Frontend Styles ── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&family=Plus+Jakarta+Sans:wght@300;400;500&display=swap');

.ziyego-survey-wrap {
  --zs-blue:       #2A6FA8;
  --zs-blue-mid:   #6A9CBD;
  --zs-blue-dark:  #1A4470;
  --zs-blue-theme: #D5E0EB;
  --zs-bg:         #F4F8FB;
  --zs-surface:    #FFFFFF;
  --zs-surface2:   #EEF4F9;
  --zs-border:     #D5E0EB;
  --zs-text:       #0F2D4A;
  --zs-muted:      #6A87A3;
  --zs-danger:     #D04040;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  color: var(--zs-text);
  max-width: 520px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* Header */
.zs-header { text-align: center; margin-bottom: 1.8rem; }
.zs-logo-wrap {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: .7rem;
}
.zs-logo-icon {
  width: 36px; height: 36px; background: var(--zs-blue);
  border-radius: 9px; display: flex; align-items: center; justify-content: center;
}
.zs-logo-name {
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem; font-weight: 600;
  color: var(--zs-blue-dark); letter-spacing: -.01em;
}
.zs-logo-name small { font-weight: 300; color: var(--zs-blue-mid); font-size: 1rem; }
.zs-badge {
  display: inline-block; font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--zs-blue);
  background: var(--zs-blue-theme); border: 1px solid #B8CFDF;
  padding: 4px 14px; border-radius: 100px;
  font-family: 'Outfit', sans-serif; font-weight: 500;
}

/* Progress */
.zs-progress-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 1.4rem; }
.zs-progress-step {
  flex: 1; height: 3px; background: var(--zs-border); border-radius: 3px; overflow: hidden; position: relative;
}
.zs-progress-step::after {
  content: ''; position: absolute; inset: 0;
  background: var(--zs-blue); transform: scaleX(0);
  transform-origin: left; transition: transform .5s cubic-bezier(.4,0,.2,1); border-radius: 3px;
}
.zs-progress-step.zs-done::after  { transform: scaleX(1); }
.zs-progress-step.zs-active::after { transform: scaleX(.5); animation: zs-bar .8s ease infinite; }
@keyframes zs-bar { 0%,100%{opacity:1}50%{opacity:.6} }
.zs-progress-label { font-size: .72rem; color: var(--zs-muted); white-space: nowrap; font-family:'Outfit',sans-serif; }

/* Card */
.zs-card {
  background: var(--zs-surface); border: 1px solid var(--zs-border);
  border-radius: 20px; padding: 2.2rem 2.2rem;
  box-shadow: 0 4px 24px rgba(42,111,168,.08);
  position: relative; overflow: hidden;
}
.zs-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--zs-blue), var(--zs-blue-mid));
  border-radius: 20px 20px 0 0;
}

/* Steps */
.zs-step { display: none; }
.zs-step-active { display: block; animation: zs-in .36s cubic-bezier(.4,0,.2,1) both; }
@keyframes zs-in { from{opacity:0;transform:translateX(18px)} to{opacity:1;transform:translateX(0)} }

.zs-step-num {
  font-family:'Outfit',sans-serif; font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--zs-blue); margin-bottom:.45rem;
}
.zs-step-title {
  font-family:'Outfit',sans-serif; font-size:1.35rem; font-weight:600;
  color:var(--zs-blue-dark); margin-bottom:.3rem; line-height:1.25;
}
.zs-step-sub { font-size:.84rem; color:var(--zs-muted); margin-bottom:1.6rem; line-height:1.5; }

/* Emoji grid */
.zs-emoji-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; margin-bottom:1.5rem; }
.zs-emoji-btn {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:13px 5px 11px; border:1.5px solid var(--zs-border); border-radius:13px;
  background:var(--zs-surface); cursor:pointer; transition:all .2s ease;
  color:var(--zs-muted); font-size:.63rem; font-family:'Outfit',sans-serif;
  font-weight:500; letter-spacing:.01em;
}
.zs-emoji-btn:hover { border-color:var(--zs-blue-mid); background:var(--zs-surface2); color:var(--zs-blue-dark); transform:translateY(-2px); }
.zs-emoji-btn.zs-sel { border-color:var(--zs-blue); background:var(--zs-blue-theme); color:var(--zs-blue-dark); }
.zs-emoji { font-size:1.65rem; line-height:1; transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.zs-emoji-btn:hover .zs-emoji, .zs-emoji-btn.zs-sel .zs-emoji { transform:scale(1.18); }

/* Options */
.zs-options-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:1.5rem; }
.zs-option-pill {
  display:flex; align-items:center; gap:10px; padding:12px 13px;
  border:1.5px solid var(--zs-border); border-radius:11px; cursor:pointer;
  transition:all .18s; font-size:.81rem; color:var(--zs-muted);
  font-family:'Plus Jakarta Sans',sans-serif; user-select:none; background:var(--zs-surface);
}
.zs-option-pill:hover { border-color:var(--zs-blue-mid); background:var(--zs-surface2); color:var(--zs-blue-dark); }
.zs-option-pill.zs-sel { border-color:var(--zs-blue); background:var(--zs-blue-theme); color:var(--zs-blue-dark); }
.zs-check {
  width:17px; height:17px; border:1.5px solid var(--zs-border); border-radius:5px;
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:10px; transition:all .18s; background:var(--zs-surface); color:transparent;
}
.zs-option-pill.zs-sel .zs-check { background:var(--zs-blue); border-color:var(--zs-blue); color:#fff; }

/* NPS */
.zs-nps-grid { display:grid; grid-template-columns:repeat(11,1fr); gap:5px; margin-bottom:.65rem; }
.zs-nps-btn {
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--zs-border); border-radius:9px; background:var(--zs-surface);
  cursor:pointer; font-size:.78rem; font-weight:500; font-family:'Outfit',sans-serif;
  color:var(--zs-muted); transition:all .18s; padding:0;
}
.zs-nps-btn:hover { border-color:var(--zs-blue-mid); background:var(--zs-surface2); color:var(--zs-blue-dark); transform:translateY(-2px); }
.zs-nps-btn.zs-sel { background:var(--zs-blue); border-color:var(--zs-blue); color:#fff; transform:translateY(-3px); box-shadow:0 5px 16px rgba(42,111,168,.28); font-weight:600; }
.zs-nps-labels { display:flex; justify-content:space-between; font-size:.69rem; color:var(--zs-muted); margin-bottom:1.5rem; padding:0 2px; font-family:'Outfit',sans-serif; }

/* Buttons */
.zs-btn-row { display:flex; gap:10px; align-items:center; }
.zs-btn-primary {
  flex:1; padding:12px 20px; background:var(--zs-blue); color:#fff; border:none;
  border-radius:11px; font-family:'Outfit',sans-serif; font-size:.88rem; font-weight:500;
  cursor:pointer; transition:all .2s; letter-spacing:.01em;
}
.zs-btn-primary:hover { background:var(--zs-blue-dark); transform:translateY(-1px); box-shadow:0 5px 18px rgba(42,111,168,.28); }
.zs-btn-primary:active { transform:scale(.98); }
.zs-btn-primary:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; background:var(--zs-blue-mid); }
.zs-btn-skip {
  padding:12px 16px; background:transparent; color:var(--zs-muted);
  border:1.5px solid var(--zs-border); border-radius:11px;
  font-family:'Outfit',sans-serif; font-size:.83rem; cursor:pointer; transition:all .18s; white-space:nowrap;
}
.zs-btn-skip:hover { border-color:var(--zs-blue-mid); color:var(--zs-blue-dark); background:var(--zs-surface2); }
.zs-val-msg { font-size:.75rem; color:var(--zs-danger); margin-top:.55rem; font-family:'Outfit',sans-serif; }

/* State icons */
.zs-state-icon {
  width:66px; height:66px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; margin:0 auto 1.4rem; font-size:1.7rem;
  animation:zs-pop .55s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes zs-pop { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
.zs-icon-ok { background:#E6F5EE; border:1.5px solid #A0DCBC; }
.zs-icon-err{ background:#FDEAEA; border:1.5px solid #F0AAAA; }

/* Spinner */
.zs-spinner {
  width:38px; height:38px; border:2.5px solid var(--zs-border); border-top-color:var(--zs-blue);
  border-radius:50%; animation:zs-spin .75s linear infinite; margin:0 auto;
}
@keyframes zs-spin { to{transform:rotate(360deg)} }

/* WA button */
.zs-wa-btn {
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px;
  background:#25D366; color:#fff; border:none; border-radius:11px;
  font-family:'Outfit',sans-serif; font-size:.86rem; font-weight:500;
  cursor:pointer; text-decoration:none; transition:all .2s;
}
.zs-wa-btn:hover { background:#1ebe5d; transform:translateY(-1px); color:#fff; }

.zs-btn-retry {
  background:transparent; border:1.5px solid var(--zs-border); color:var(--zs-muted);
  padding:8px 16px; border-radius:9px; font-family:'Outfit',sans-serif;
  font-size:.82rem; cursor:pointer; transition:all .18s;
}
.zs-btn-retry:hover { border-color:var(--zs-blue-mid); color:var(--zs-blue-dark); }

/* Footer */
.zs-footer { text-align:center; margin-top:1.2rem; font-size:.7rem; color:var(--zs-muted); letter-spacing:.03em; }

/* Responsive */
@media (max-width:480px) {
  .zs-card { padding:1.7rem 1.2rem; }
  .zs-emoji-grid { gap:5px; }
  .zs-emoji-btn { padding:10px 3px; font-size:.58rem; }
  .zs-emoji { font-size:1.4rem; }
  .zs-options-grid { grid-template-columns:1fr; }
  .zs-nps-grid { gap:3px; }
  .zs-nps-btn { font-size:.7rem; border-radius:7px; }
}