:root{
  --fondo:#f3f5f8;
  --tinta:#15202b;
  --primario:#0b2239;
  --acento:#0e6ba8;
  --agente:#ffffff;
  --usuario:#dcebf7;
  --borde:#d4dbe3;
  --rojo:#9b1c1c;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--fondo);color:var(--tinta);
  display:flex;flex-direction:column;min-height:100vh;
}
.aviso-prototipo{
  background:#fff7e0;color:#6b4e00;border-bottom:1px solid #eadfb4;
  text-align:center;font-size:.8rem;padding:.4rem .75rem;
}
#app{
  width:100%;max-width:860px;margin:0 auto;padding:1rem;
  display:flex;flex-direction:column;flex:1;gap:.75rem;
}
.cabecera{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  border-bottom:2px solid var(--primario);padding-bottom:.6rem;
}
.cabecera h1{margin:0;font-size:1.35rem;color:var(--primario)}
.subtitulo{margin:.15rem 0 0;font-size:.85rem;color:#51606f}
.btn-secundario{
  background:#fff;border:1px solid var(--borde);border-radius:8px;
  padding:.45rem .8rem;font-size:.82rem;cursor:pointer;color:var(--primario);
  white-space:nowrap;
}
.btn-secundario:hover{border-color:var(--acento);color:var(--acento)}
.chat{
  flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.7rem;
  padding:.25rem .1rem;min-height:300px;
}
.mensaje{display:flex}
.mensaje.usuario{justify-content:flex-end}
.burbuja{
  max-width:85%;padding:.65rem .85rem;border-radius:12px;
  background:var(--agente);border:1px solid var(--borde);
  font-size:.92rem;line-height:1.45;white-space:pre-wrap;word-wrap:break-word;
}
.mensaje.usuario .burbuja{background:var(--usuario);border-color:#bcd7ec}
.burbuja p{margin:.25rem 0}
.burbuja ul{margin:.3rem 0;padding-left:1.2rem}
.burbuja .nota{font-size:.8rem;color:#6b7785}
.burbuja.error{border-color:var(--rojo);color:var(--rojo);background:#fdf2f2}
.burbuja.pensando{color:#6b7785;font-style:italic}
.sugerencias{display:flex;flex-wrap:wrap;gap:.45rem}
.sugerencias button{
  background:#fff;border:1px solid var(--borde);border-radius:999px;
  font-size:.78rem;padding:.35rem .75rem;cursor:pointer;color:var(--primario);
}
.sugerencias button:hover{border-color:var(--acento);color:var(--acento)}
.entrada{display:flex;gap:.5rem;align-items:flex-end}
.entrada textarea{
  flex:1;resize:vertical;min-height:52px;max-height:200px;
  border:1px solid var(--borde);border-radius:10px;padding:.6rem .75rem;
  font:inherit;font-size:.92rem;background:#fff;
}
.entrada textarea:focus{outline:2px solid var(--acento);border-color:transparent}
.entrada button{
  background:var(--acento);color:#fff;border:0;border-radius:10px;
  padding:.7rem 1.2rem;font-size:.95rem;font-weight:600;cursor:pointer;
}
.entrada button:disabled{opacity:.55;cursor:wait}
.pie{font-size:.72rem;color:#7b8794;text-align:center;margin:.1rem 0 .4rem}
.cargando{text-align:center;color:#6b7785;margin-top:3rem}
@media (max-width:600px){
  .cabecera{flex-direction:column}
  .burbuja{max-width:95%}
}