/* SENTINELA: asistente virtual (robot de la pantalla de ingreso) en la esquina inferior derecha. */
#sentinela { --ib-acento: #ff6600; --ib-panel: #222d32; font-family: 'Segoe UI Variable Text', 'Segoe UI', system-ui, Arial, sans-serif; }
#sentinela * { box-sizing: border-box; }
#sentinela [hidden] { display: none !important; }

/* ---- Personaje ---- */
.ib-lanzador { position: fixed; right: 14px; bottom: 0; z-index: 1030; width: 92px; height: 138px; border: 0; padding: 0; background: none; cursor: pointer; }
.ib-lanzador img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); animation: ib-flotar 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
.ib-lanzador:focus-visible { outline: 2px solid #8b949e; outline-offset: 2px; border-radius: 12px; }
@keyframes ib-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .ib-lanzador img { animation: none; } }

.ib-globo { position: fixed; right: 108px; bottom: 92px; z-index: 1030; max-width: 210px; padding: 10px 30px 10px 14px; border-radius: 14px 14px 4px 14px; background: #fff; color: #263342; font-size: 13px; line-height: 1.35; box-shadow: 0 8px 24px rgba(0,0,0,.18); border: 1px solid #e6e9ee; cursor: pointer; animation: ib-aparecer .3s ease-out; }
.ib-globo strong { color: var(--ib-acento); }
.ib-globo-cerrar { position: absolute; top: 4px; right: 6px; border: 0; background: none; color: #8b949e; font-size: 16px; line-height: 1; padding: 2px 4px; cursor: pointer; }
.ib-ocultar { position: fixed; right: 8px; bottom: 124px; z-index: 1031; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(34,45,50,.85); color: #fff; font-size: 12px; line-height: 20px; padding: 0; opacity: 0; transition: opacity .15s; cursor: pointer; }
#sentinela:hover .ib-ocultar, .ib-ocultar:focus { opacity: 1; }
@keyframes ib-aparecer { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }

/* Pestaña para volver a mostrar el robot oculto */
.ib-mostrar { position: fixed; right: 0; bottom: 90px; z-index: 1030; width: 34px; height: 44px; border: 0; border-radius: 10px 0 0 10px; background: var(--ib-panel); box-shadow: -2px 4px 12px rgba(0,0,0,.25); padding: 4px; cursor: pointer; }
.ib-mostrar img { width: 26px; height: 26px; border-radius: 50%; background: #fff; }

/* ---- Panel del chat ---- */
.ib-panel { position: fixed; right: 18px; bottom: 18px; z-index: 1040; width: 370px; height: min(580px, calc(100vh - 90px)); display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #f4f6f8; box-shadow: 0 18px 48px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.06); animation: ib-aparecer .25s ease-out; }
.ib-panel.ib-amplio { width: min(720px, calc(100vw - 36px)); height: calc(100vh - 90px); }

.ib-cabecera { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; color: #fff;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(120,170,200,.22), transparent 60%),
    radial-gradient(80% 80% at 100% 100%, rgba(255,102,0,.18), transparent 70%),
    linear-gradient(160deg, #2c3a42, var(--ib-panel));
  border-bottom: 2px solid var(--ib-acento); }
.ib-avatar { position: relative; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 0 16px rgba(255,102,0,.35); overflow: hidden; }
.ib-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ib-titulo { flex: 1; min-width: 0; }
.ib-titulo strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: .6px; }
.ib-titulo strong span { color: var(--ib-acento); }
.ib-titulo small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; opacity: .85; }
.ib-en-linea { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 8px #2ecc71; }
.ib-acciones { display: flex; gap: 6px; }
.ib-acciones button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; font-size: 13px; padding: 0; cursor: pointer; transition: background-color .15s; }
.ib-acciones button:hover, .ib-acciones button:focus-visible { background: rgba(255,255,255,.22); outline: none; }

.ib-mensajes { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.ib-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; animation: ib-aparecer .2s ease-out; }
.ib-msg-bot { align-self: flex-start; }
.ib-msg-usuario { align-self: flex-end; flex-direction: row-reverse; }
.ib-msg-cara { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1px solid #e3e7eb; }
.ib-burbuja { padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; color: #263342; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); border: 1px solid #e6e9ee; overflow-wrap: anywhere; }
.ib-msg-bot .ib-burbuja { border-bottom-left-radius: 4px; }
.ib-msg-usuario .ib-burbuja { background: linear-gradient(135deg, #ff7a1f, var(--ib-acento)); color: #fff; border-color: transparent; border-bottom-right-radius: 4px; }
.ib-burbuja kbd { background: #eef1f3; color: #263342; border: 1px solid #d5dbe1; box-shadow: none; padding: 1px 5px; border-radius: 4px; font-size: 11px; }
.ib-burbuja p { margin: 0 0 6px; } .ib-burbuja p:last-child { margin-bottom: 0; }
.ib-enlaces { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ib-enlace { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #f4f6f8; border: 1px solid #e3e7eb; color: #1f2d3d !important; font-size: 13px; font-weight: 600; text-decoration: none !important; transition: border-color .15s, background-color .15s; }
.ib-enlace:hover, .ib-enlace:focus-visible { border-color: var(--ib-acento); background: #fff6ef; outline: none; }
.ib-enlace small { display: block; font-weight: 400; color: #6b7580; font-size: 11px; }
.ib-enlace .fa { color: var(--ib-acento); margin-left: auto; }
.ib-escribiendo { display: inline-flex; gap: 4px; padding: 4px 2px; }
.ib-escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: #9aa4ae; animation: ib-punto 1s infinite ease-in-out; }
.ib-escribiendo i:nth-child(2) { animation-delay: .15s; } .ib-escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes ib-punto { 0%, 80%, 100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }

.ib-rapidas { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 14px 8px; }
.ib-rapidas button { border: 1px solid #d5dbe1; background: #fff; color: #37404a; border-radius: 16px; padding: 5px 11px; font-size: 12px; cursor: pointer; transition: border-color .15s, color .15s; }
.ib-rapidas button:hover, .ib-rapidas button:focus-visible { border-color: var(--ib-acento); color: #a34306; outline: none; }

.ib-form { display: flex; gap: 8px; padding: 10px 12px 12px; background: #fff; border-top: 1px solid #e6e9ee; }
.ib-form textarea { flex: 1; resize: none; height: 42px; max-height: 96px; padding: 10px 12px; border-radius: 12px; border: 1px solid #d5dbe1; background: #f7f8fa; font: inherit; font-size: 13.5px; color: #263342; outline: none; }
.ib-form textarea:focus { border-color: var(--ib-acento); background: #fff; box-shadow: 0 0 0 3px rgba(255,102,0,.12); }
.ib-form button { flex: 0 0 42px; height: 42px; border-radius: 50%; border: 0; background: linear-gradient(135deg, #ff7a1f, var(--ib-acento)); color: #fff; font-size: 16px; cursor: pointer; box-shadow: 0 4px 10px rgba(255,102,0,.35); }
.ib-form button:disabled { opacity: .5; cursor: default; box-shadow: none; }
.ib-pie { padding: 0 12px 8px; background: #fff; font-size: 10.5px; color: #8b949e; text-align: center; }

@media (max-width: 575px) {
  .ib-panel, .ib-panel.ib-amplio { right: 0; bottom: 0; width: 100vw; height: 88vh; border-radius: 18px 18px 0 0; }
  .ib-lanzador { width: 70px; height: 105px; right: 8px; }
  .ib-globo { right: 82px; bottom: 70px; }
  .ib-acciones .ib-ampliar { display: none; }
}

/* ---- SENTINELA abriendo un formulario: robot + barra de progreso ---- */
.sn-carga { position: fixed; inset: 0; z-index: 2050; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(15, 20, 25, .55); backdrop-filter: blur(3px); font-family: 'Segoe UI', system-ui, Arial, sans-serif; }
@keyframes sn-entrar { from { transform: translateY(10px) scale(.96); } }
.sn-carga-caja { animation: sn-entrar .25s ease-out; width: min(360px, 100%); padding: 22px 24px 18px; border-radius: 18px; text-align: center; color: #fff;
  background: radial-gradient(120% 80% at 0% 0%, rgba(120, 170, 200, .22), transparent 60%), linear-gradient(160deg, #2c3a42, #222d32);
  border-bottom: 3px solid #ff6600; box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08); }
.sn-carga-robot { width: 96px; height: 144px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); animation: ib-flotar 1.8s ease-in-out infinite; }
.sn-carga-nombre { display: block; margin-top: 4px; font-size: 18px; font-weight: 800; letter-spacing: .8px; }
.sn-carga p { margin: 4px 0 14px; font-size: 14px; color: #d7e0e5; }
.sn-carga p b { color: #ffb27a; }
.sn-carga-barra { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.sn-carga-barra span { display: block; width: 0; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #ff8a3d, #ff6600);
  box-shadow: 0 0 12px rgba(255, 102, 0, .7); transition: width .45s ease; }
.sn-carga-paso { display: block; margin-top: 10px; font-size: 12px; color: #b8c7ce; min-height: 16px; }
.sn-carga-cancelar { margin-top: 12px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; border-radius: 16px; padding: 4px 12px; font-size: 12px; cursor: pointer; }
.sn-carga-cancelar:hover, .sn-carga-cancelar:focus-visible { background: rgba(255, 255, 255, .2); outline: none; }
.sn-carga-cancelar kbd { background: rgba(0, 0, 0, .3); color: #fff; border: 0; box-shadow: none; font-size: 10px; padding: 1px 4px; }
@media (prefers-reduced-motion: reduce) { .sn-carga-robot, .sn-carga-caja { animation: none; } .sn-carga-barra span { transition: none; } }