:root{
  --bg:#f4f3ef;
  --surface:#ffffff;
  --surface-2:#f6f6f4;
  --border:#e3e1d9;
  --border-strong:#cfccc0;
  --text:#1c1b18;
  --text-secondary:#5f5e58;
  --text-muted:#8c897f;
  --accent:#185fa5;
  --accent-bg:#e6f1fb;
  --accent-text:#0c447c;
  --success:#3b6d11;
  --success-bg:#eaf3de;
  --warning:#854f0b;
  --warning-bg:#faeeda;
  --danger:#a32d2d;
  --danger-bg:#fcebeb;
  --radius:10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  display:flex;
  justify-content:center;
  padding:32px 16px;
}
.phone{
  width:390px;
  max-width:100%;
  background:var(--surface);
  border-radius:28px;
  border:1px solid var(--border);
  overflow:hidden;
  min-height:760px;
  display:flex;
  flex-direction:column;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.topbar{
  padding:16px 18px 12px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:10px;
}
.logo-dot{
  width:26px;height:26px;border-radius:7px;
  background:var(--accent-bg);
  color:var(--accent-text);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;
}
.topbar-title{font-size:15px;font-weight:600;}
.topbar-sub{margin-left:auto;font-size:11px;color:var(--text-muted);}

.screen{display:none; flex:1; flex-direction:column; overflow-y:auto;}
.screen.active{display:flex;}

.form-body{padding:18px; display:flex; flex-direction:column; gap:18px;}
.field-label{font-size:12px; color:var(--text-muted); margin:0 0 8px; font-weight:500;}
.chips{display:flex; gap:8px; flex-wrap:wrap;}
.chip{
  font-size:12.5px; padding:8px 14px; border-radius:999px;
  border:1px solid var(--border-strong); color:var(--text-secondary);
  background:var(--surface); cursor:pointer; transition:all .15s;
}
.chip.selected{ background:var(--accent-bg); color:var(--accent-text); border-color:var(--accent); }

textarea{
  width:100%; border:1px solid var(--border-strong); border-radius:var(--radius);
  padding:10px 12px; font-size:13px; font-family:inherit; resize:none;
  min-height:64px; color:var(--text);
}
textarea:focus{outline:2px solid var(--accent); outline-offset:1px;}

.assist-bubble{
  display:none; margin-top:10px;
  border:1px solid var(--accent); border-radius:12px; padding:12px;
  background:var(--accent-bg); gap:10px; align-items:flex-start; cursor:pointer;
}
.assist-bubble.show{display:flex;}
.assist-bubble p{margin:0; font-size:12.5px; color:var(--accent-text); line-height:1.5;}

.cta-row{padding:14px 18px; border-top:1px solid var(--border); margin-top:auto;}
button.primary{
  width:100%; padding:12px; border-radius:var(--radius); border:none;
  background:var(--text); color:#fff; font-size:14px; font-weight:600; cursor:pointer;
}
button.primary:disabled{background:var(--border-strong); color:var(--text-muted); cursor:not-allowed;}
button.ghost{
  width:100%; padding:11px; border-radius:var(--radius); border:1px solid var(--border-strong);
  background:var(--surface); color:var(--text); font-size:13px; font-weight:500; cursor:pointer;
}

.chat-wrap{ display:flex; flex-direction:column; flex:1; }
.chat-messages{ flex:1; padding:16px 18px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; }
.msg{ max-width:82%; padding:9px 12px; border-radius:14px; font-size:13px; line-height:1.45; }
.msg.bot{ align-self:flex-start; background:var(--surface-2); border-bottom-left-radius:4px; }
.msg.user{ align-self:flex-end; background:var(--accent-bg); color:var(--accent-text); border-bottom-right-radius:4px; }
.typing{ align-self:flex-start; display:flex; gap:4px; padding:10px 12px; }
.typing span{ width:6px; height:6px; border-radius:50%; background:var(--text-muted); animation:blink 1.2s infinite; }
.typing span:nth-child(2){animation-delay:.2s;}
.typing span:nth-child(3){animation-delay:.4s;}
@keyframes blink{ 0%,80%,100%{opacity:.25;} 40%{opacity:1;} }

.chat-input-row{ display:flex; gap:8px; align-items:center; padding:12px 14px; border-top:1px solid var(--border); }
.chat-input{
  flex:1; border:1px solid var(--border-strong); border-radius:999px;
  padding:10px 14px; font-size:13px; font-family:inherit;
}
.chat-input:focus{outline:2px solid var(--accent); outline-offset:1px;}
.send-btn{
  width:36px; height:36px; border-radius:50%; border:none;
  background:var(--text); color:#fff; cursor:pointer; font-size:14px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.result-body{padding:18px; display:flex; flex-direction:column; gap:16px;}
.card{ background:var(--surface-2); border-radius:var(--radius); padding:12px; }
.card-label{font-size:11px; color:var(--text-muted); margin:0 0 4px; font-weight:500;}
.card-value{font-size:16px; font-weight:600; margin:0;}
.badges{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap;}
.badge{font-size:11px; padding:3px 9px; border-radius:6px; font-weight:500;}
.badge.success{background:var(--success-bg); color:var(--success);}
.badge.warning{background:var(--warning-bg); color:var(--warning);}
.badge.danger{background:var(--danger-bg); color:var(--danger);}
.badge.accent{background:var(--accent-bg); color:var(--accent-text);}

.section-title{display:flex; justify-content:space-between; align-items:baseline; margin:0 0 8px;}
.section-title p{font-size:12.5px; color:var(--text-secondary); margin:0; font-weight:500;}
.section-title span{font-size:11px; color:var(--text-muted);}

.score-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.score-card{background:var(--surface-2); border-radius:var(--radius); padding:10px; text-align:center;}
.score-card p.label{font-size:10.5px; color:var(--text-muted); margin:0 0 4px;}
.score-card p.value{font-size:20px; font-weight:700; margin:0;}
.score-note{font-size:11.5px; color:var(--text-secondary); margin:8px 0 0; line-height:1.5;}

.channel-row{
  display:flex; justify-content:space-between; align-items:center; font-size:12.5px;
  border:1px solid var(--border); border-radius:var(--radius); padding:9px 12px; margin-bottom:6px;
}
.priority{font-size:11px; font-weight:500;}
.priority.high{color:var(--success);}
.priority.mid{color:var(--text-secondary);}
.priority.low{color:var(--text-muted);}

.opp-card{ border:1px solid var(--border); border-radius:12px; padding:10px; margin-bottom:8px; }
.opp-head{display:flex; justify-content:space-between; align-items:flex-start; margin:0 0 4px; gap:8px;}
.opp-head p{font-size:12.5px; font-weight:600; margin:0;}
.opp-tag{font-size:10px; padding:2px 7px; border-radius:6px; font-weight:500; white-space:nowrap;}
.opp-desc{font-size:11.5px; color:var(--text-secondary); margin:0; line-height:1.5;}

.action-row{display:flex; gap:8px; margin-top:4px;}
.action-row button{flex:1; font-size:12.5px; padding:10px;}
.action-row .accent-btn{background:var(--accent); color:#fff; border:none; border-radius:var(--radius); font-weight:600;}
.action-row .outline-btn{background:var(--surface); color:var(--text); border:1px solid var(--border-strong); border-radius:var(--radius);}

.confianza-baja{ font-size:11px; color:var(--warning); margin-top:4px; }

/* Panel admin (generar_token / listar_tokens) */
.admin-wrap{ max-width:720px; margin:32px auto; padding:0 16px; font-family: -apple-system, sans-serif; }
.admin-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; margin-bottom:16px; }
.admin-table{ width:100%; border-collapse:collapse; font-size:13px; }
.admin-table th, .admin-table td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); }
.admin-form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.admin-form-row label{ font-size:12px; color:var(--text-muted); }
.admin-form-row input, .admin-form-row select{
  padding:8px 10px; border:1px solid var(--border-strong); border-radius:8px; font-size:13px;
}