:root{
  --bg:#0b141a;
  --wa-green:#075e54;
  --wa-accent:#25d366;
  --me:#dcf8c6;
  --them:#ffffff;
  --bubble-shadow:0 1px 1px rgba(0,0,0,.08);

  /* colores por bot */
  --c-juanito:#3aa6ff;
  --c-maripuri:#ff7aa2;
  --c-uxia:#8ad96e;
  --c-encarna:#c39af7;
  --c-fairy:#ffd166;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji";
  background:
    radial-gradient(ellipse at top, #1f2c34 0%, #0b141a 60%),
    var(--bg);
  color:#eaeff3;
}

/* App bar */
.app-bar{
  position:sticky; top:0; z-index:5;
  background:linear-gradient(90deg,var(--wa-green),#0a6157);
  color:#eaf8f5; padding:.75rem 1rem; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.app-title{display:flex; gap:.75rem; align-items:center}
.app-title h1{margin:0; font-size:1.1rem}
.app-title p{margin:0; opacity:.8; font-size:.85rem}
.avatar{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; font-weight:700;
  background:#2a3b42; color:#eaf8f5;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.08);
}
.avatar.user{background:#274248}

/* Bot filter chips */
.bot-filter{padding:1rem}
.filter-buttons{
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.chip{
  --bg:#2b3a3f;
  display:inline-flex; align-items:center; gap:.4rem;
  color:#eaf8f5; background:var(--bg);
  border:1px solid rgba(255,255,255,.12);
  padding:.45rem .7rem; border-radius:999px;
  cursor:pointer; user-select:none; transition:transform .12s ease, box-shadow .12s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.2);
  font-weight:600; font-size:.92rem;
}
.chip:hover{transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.25)}
.chip.all{--bg:#344a50}
.chip.juanito{--bg:color-mix(in srgb, var(--c-juanito) 25%, #22363c)}
.chip.maripuri{--bg:color-mix(in srgb, var(--c-maripuri) 25%, #22363c)}
.chip.uxia{--bg:color-mix(in srgb, var(--c-uxia) 25%, #22363c)}
.chip.encarna{--bg:color-mix(in srgb, var(--c-encarna) 25%, #22363c)}
.chip.fairy{--bg:color-mix(in srgb, var(--c-fairy) 25%, #22363c)}
.filter-hint{margin:.5rem 0 0; opacity:.7; font-size:.85rem}

/* Ocultar radios */
.bot-filter input[type=radio]{position:absolute; inline-size:1px; block-size:1px; opacity:0}

/* Contenedor chat */
.chat-wrap{
  max-width:900px; margin:0 auto; padding:0 1rem 4rem;
}

/* QA blocks */
.qa{margin:1rem 0}
.qa details{
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  border-radius:16px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.qa summary{list-style:none; cursor:pointer}
.qa summary::-webkit-details-marker{display:none}

/* Bubbles */
.bubble{
  position:relative;
  display:flex; gap:.6rem; align-items:flex-start;
  margin: .6rem 1rem;
  filter: drop-shadow(var(--bubble-shadow));
}
.bubble .msg{
  background:var(--them); color:#0b141a;
  padding:.55rem .7rem; border-radius:14px;
  max-width: 70ch;
}
.bubble .msg-head{
  display:flex; justify-content:space-between; gap:1rem;
  font-size:.78rem; opacity:.7; margin-bottom:.15rem;
}
.bubble.me{justify-content:flex-end}
.bubble.me .msg{
  background:var(--me); color:#0b141a; border-top-right-radius:6px;
}
.bubble.bot .msg{border-top-left-radius:6px}
.bubble.bot .name{font-weight:700}

.question{padding:.8rem 0; background:rgba(255,255,255,.02)}
.answers{padding:.3rem 0 .8rem}

/* Avatares por bot + bordes */
.avatar.juanito{background:var(--c-juanito); color:#001222}
.avatar.maripuri{background:var(--c-maripuri); color:#250010}
.avatar.uxia{background:var(--c-uxia); color:#061a00}
.avatar.encarna{background:var(--c-encarna); color:#18002d}
.avatar.fairy{background:var(--c-fairy); color:#211900}

.bubble.bot.juanito .msg{outline:2px solid color-mix(in srgb, var(--c-juanito) 65%, white 35%)}
.bubble.bot.maripuri .msg{outline:2px solid color-mix(in srgb, var(--c-maripuri) 65%, white 35%)}
.bubble.bot.uxia .msg{outline:2px solid color-mix(in srgb, var(--c-uxia) 65%, white 35%)}
.bubble.bot.encarna .msg{outline:2px solid color-mix(in srgb, var(--c-encarna) 65%, white 35%)}
.bubble.bot.fairy .msg{outline:2px solid color-mix(in srgb, var(--c-fairy) 65%, white 35%)}

/* Bot “resaltado” (solo CSS, según radio seleccionado) */
:root{
  --scale-dim:.98;
  --opacity-dim:.45;
  --scale-hot:1.05;
}
#f-juanito:checked ~ .filter-buttons .juanito,
#f-maripuri:checked ~ .filter-buttons .maripuri,
#f-uxia:checked ~ .filter-buttons .uxia,
#f-encarna:checked ~ .filter-buttons .encarna,
#f-fairy:checked ~ .filter-buttons .fairy{box-shadow:0 0 0 2px #fff8}

#f-juanito:checked ~ .chat-wrap .bubble.bot:not(.juanito),
#f-maripuri:checked ~ .chat-wrap .bubble.bot:not(.maripuri),
#f-uxia:checked ~ .chat-wrap .bubble.bot:not(.uxia),
#f-encarna:checked ~ .chat-wrap .bubble.bot:not(.encarna),
#f-fairy:checked ~ .chat-wrap .bubble.bot:not(.fairy){
  opacity:var(--opacity-dim); transform:scale(var(--scale-dim));
  transform-origin:left top;
}
#f-juanito:checked ~ .chat-wrap .bubble.bot.juanito,
#f-maripuri:checked ~ .chat-wrap .bubble.bot.maripuri,
#f-uxia:checked ~ .chat-wrap .bubble.bot.uxia,
#f-encarna:checked ~ .chat-wrap .bubble.bot.encarna,
#f-fairy:checked ~ .chat-wrap .bubble.bot.fairy{
  transform:scale(var(--scale-hot));
}

/* Botón siguiente pregunta */
.next{display:flex; justify-content:flex-end; padding:0 .9rem 1rem}
.next-btn{
  background:var(--wa-accent); color:#052b1b; text-decoration:none;
  font-weight:800; padding:.5rem .8rem; border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  transition:transform .12s ease, box-shadow .12s ease;
}
.next-btn:hover{transform:translateY(-1px); box-shadow:0 10px 28px rgba(0,0,0,.35)}

/* Footer */
.app-footer{
  color:#bcd; opacity:.8;
  text-align:center; padding:1rem; font-size:.9rem;
}

/* Responsivo */
@media (max-width:700px){
  .filter-buttons{gap:.4rem}
  .chip{font-size:.86rem; padding:.4rem .6rem}
  .bubble .msg{max-width:calc(100vw - 6rem)}
}