/* Asistente virtual IES Clara Campoamor – estilos del widget
 * Identidad: logo de ocho triángulos (rojo, naranja, amarillo, granate, magenta, azul, verde agua, verde),
 * azul acero del rótulo "IES CLARA CAMPOAMOR", fondo blanco, DM Sans para títulos e Inter para texto. */
.iesa {
  --iesa-azul: #5fa0b3; --iesa-azul-oscuro: #3f7d90; --iesa-azul-tinta: #2b5260; --iesa-azul-suave: #eaf3f6;
  --iesa-ink: #1d2b33; --iesa-muted: #6a7b84; --iesa-bg: #ffffff; --iesa-bot: #f3f7f9; --iesa-line: #dfe8ec;
  --iesa-rojo: #d02030; --iesa-naranja: #f09020; --iesa-amarillo: #f0d040; --iesa-granate: #a02020;
  --iesa-magenta: #903060; --iesa-cian: #10a0d0; --iesa-verdeagua: #30b090; --iesa-verde: #60b030;
  --iesa-arco: linear-gradient(90deg, var(--iesa-rojo) 0 12.5%, var(--iesa-naranja) 0 25%, var(--iesa-amarillo) 0 37.5%, var(--iesa-verde) 0 50%, var(--iesa-verdeagua) 0 62.5%, var(--iesa-cian) 0 75%, var(--iesa-magenta) 0 87.5%, var(--iesa-granate) 0);
  --iesa-titulo: "DM Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --iesa-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  position: fixed; right: 20px; bottom: 20px; z-index: 99999; font-family: var(--iesa-texto); font-size: 15px; line-height: 1.5; color: var(--iesa-ink); }
.iesa *, .iesa *::before, .iesa *::after { box-sizing: border-box; }
.iesa a { color: var(--iesa-azul-oscuro); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; word-break: break-word; }
.iesa a:hover { color: var(--iesa-azul-tinta); }
.iesa b { font-weight: 600; }
.iesa small { color: var(--iesa-muted); font-size: 12px; }
.iesa svg, .iesa img { display: block; }
.iesa-launcher-icon img, .iesa-avatar img { width: 100%; height: 100%; object-fit: contain; }

/* Botón flotante: pastilla blanca con la marca y el rótulo en azul */
.iesa-launcher { display: flex; align-items: center; gap: 10px; border: 0; cursor: pointer; background: #fff; color: var(--iesa-azul-oscuro); padding: 9px 18px 9px 10px; border-radius: 999px; box-shadow: 0 8px 28px rgba(43,82,96,.22), 0 0 0 1px var(--iesa-line); font-family: var(--iesa-titulo); font-size: 16px; font-weight: 700; letter-spacing: .01em; transition: transform .15s, box-shadow .15s; }
.iesa-launcher:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(43,82,96,.28), 0 0 0 1px var(--iesa-azul); }
.iesa-launcher:focus-visible { outline: 3px solid var(--iesa-amarillo); outline-offset: 2px; }
.iesa-launcher-icon { width: 34px; height: 34px; display: grid; place-items: center; }
.iesa-open .iesa-launcher { display: none; }

/* Panel */
.iesa-panel { position: absolute; right: 0; bottom: 0; width: 390px; max-width: calc(100vw - 32px); height: 620px; max-height: calc(100vh - 40px); background: var(--iesa-bg); border-radius: 20px; box-shadow: 0 24px 60px rgba(43,82,96,.28), 0 0 0 1px var(--iesa-line); display: flex; flex-direction: column; overflow: hidden; animation: iesa-in .22s ease-out; }
.iesa-panel[hidden] { display: none; }
@keyframes iesa-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* Cabecera blanca con la marca y el arco de ocho colores del logo */
.iesa-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px 16px; background: #fff; position: relative; }
.iesa-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--iesa-arco); }
.iesa-avatar { width: 42px; height: 42px; flex: none; display: grid; place-items: center; }
.iesa-title { flex: 1; display: flex; flex-direction: column; min-width: 0; font-family: var(--iesa-titulo); }
.iesa-title strong { font-size: 15.5px; font-weight: 700; color: var(--iesa-azul-oscuro); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.iesa-title span { font-size: 12.5px; color: var(--iesa-muted); font-family: var(--iesa-texto); }
.iesa-close { border: 0; background: transparent; color: var(--iesa-muted); font-size: 18px; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; }
.iesa-close:hover { background: var(--iesa-azul-suave); color: var(--iesa-azul-tinta); }

/* Conversación */
.iesa-log { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; background: #fff; scroll-behavior: smooth; }
.iesa-msg { max-width: 86%; padding: 11px 14px; border-radius: 16px; word-wrap: break-word; font-size: 14.5px; }
.iesa-bot { background: var(--iesa-bot); color: var(--iesa-ink); align-self: flex-start; border-bottom-left-radius: 5px; }
.iesa-user { background: var(--iesa-azul); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }
.iesa-typing { display: flex; gap: 5px; padding: 13px 15px; }
.iesa-typing span { width: 7px; height: 7px; border-radius: 50%; animation: iesa-dot 1s infinite; }
.iesa-typing span:nth-child(1) { background: var(--iesa-naranja); }
.iesa-typing span:nth-child(2) { background: var(--iesa-cian); animation-delay: .15s; }
.iesa-typing span:nth-child(3) { background: var(--iesa-verde); animation-delay: .3s; }
@keyframes iesa-dot { 0%,80%,100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Chips: los temas llevan el color de cada triángulo del logo */
.iesa-chips { display: flex; flex-wrap: wrap; gap: 7px; align-self: flex-start; max-width: 100%; }
.iesa-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--iesa-line); background: #fff; color: var(--iesa-azul-tinta); border-radius: 999px; padding: 7px 13px; font-family: var(--iesa-texto); font-size: 13.5px; font-weight: 500; cursor: pointer; text-align: left; line-height: 1.3; transition: border-color .12s, background .12s; }
.iesa-chip:hover { border-color: var(--iesa-azul); background: var(--iesa-azul-suave); }
.iesa-chip:focus-visible { outline: 2px solid var(--iesa-amarillo); }
.iesa-chip i { width: 9px; height: 9px; border-radius: 2px; background: var(--c, var(--iesa-azul)); transform: rotate(45deg); flex: none; }
.iesa-topics .iesa-chip { padding-left: 11px; }
.iesa-follow .iesa-chip { color: var(--iesa-muted); font-size: 12.5px; }
.iesa-follow .iesa-chip:hover { color: var(--iesa-azul-tinta); }

/* Entrada */
.iesa-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--iesa-line); background: #fff; }
.iesa-input { flex: 1; border: 1px solid var(--iesa-line); border-radius: 999px; padding: 10px 16px; font-size: 15px; font-family: var(--iesa-texto); color: var(--iesa-ink); outline: none; min-width: 0; background: #fff; }
.iesa-input::placeholder { color: #98a7ae; }
.iesa-input:focus { border-color: var(--iesa-azul); box-shadow: 0 0 0 3px rgba(95,160,179,.2); }
.iesa-input:disabled { background: var(--iesa-bot); }
.iesa-send { border: 0; background: var(--iesa-azul); color: #fff; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; font-size: 15px; flex: none; transition: background .12s; }
.iesa-send:hover { background: var(--iesa-azul-oscuro); }
.iesa-send:disabled { background: #c2d1d7; cursor: not-allowed; }
.iesa-foot { font-size: 11.5px; color: var(--iesa-muted); text-align: center; padding: 6px 14px 10px; background: #fff; }

@media (max-width: 480px) {
  .iesa { right: 0; bottom: 0; }
  .iesa-launcher { margin: 0 14px 14px 0; }
  .iesa-panel { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .iesa-head { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  .iesa-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .iesa-panel, .iesa-typing span, .iesa-launcher { animation: none; transition: none; } }