/* Agente universal de los sistemas WianStark: mismo estilo en todos (sacado del asistente del primer sistema de caja).
   Toma los colores del sistema que lo usa: acepta los tokens del primer sistema de caja (--tarjeta, --texto, --borde, --grafito)
   y los de la brostería (--capa, --tinta, --linea, --marco). */
:root {
  --ag-capa: var(--capa, var(--tarjeta, #fff)); --ag-sutil: var(--capa-2, var(--sutil, #f5f5f5)); --ag-borde: var(--linea, var(--borde, #e5e5e5));
  --ag-borde-2: var(--linea-2, var(--borde-2, #d1d1d1)); --ag-texto: var(--tinta, var(--texto, #1b1b1b)); --ag-texto-2: var(--tinta-2, var(--texto-2, #5d5d5d));
  --ag-acento: var(--acento, #c8102e); --ag-sobre-acento: var(--sobre-acento, #fff);
  --ag-oscuro: var(--marco, var(--grafito, #0e0e10)); --ag-oscuro-2: var(--marco-2, var(--grafito-2, #1c1c20)); --ag-oscuro-borde: var(--marco-linea, #2a2d35);
  --ag-oscuro-texto: var(--marco-tinta, var(--grafito-txt, #e9eaee));
}
/* Cara: imagen redonda o rostro animado; si falta la imagen queda la inicial */
.ag-avatar, .ag-mini, .ag-img { position: relative; display: grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; background: var(--ag-acento); color: var(--ag-sobre-acento); font-weight: 800; }
.ag-avatar img, .ag-mini img, .ag-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ag-rostro { overflow: visible; background: none; }
.ag-rostro svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- Presencia flotante ---------- */
/* Siempre en la esquina de abajo a la derecha de la pantalla, al costado de todo (Willian, 26-10-2026: «el agente no debe
   estar ahí, tapa todo; siempre al costado de todo, a la esquina»). Igual en todos los sistemas: la barra de abajo, la fila
   de secciones y las ventanas le dejan esa esquina libre (--ag-esquina), así nunca tapa un botón */
:root { --ag-esquina: 96px; --ag-pie: 64px; }
body:has(.ag-presencia.visible) :is(.estado, .abajo) { padding-right: var(--ag-esquina) !important; }
body:has(.ag-presencia.visible) .modal { padding-right: calc(var(--ag-esquina) + 16px); }
/* La columna de venta llega a la esquina: su pie (Cobrar) sube lo que mide el agente. Un sistema con barra alta abajo
   (Mi Puesto, Mi Abarrotes) pone --ag-pie: 0px */
body:has(.ag-presencia.visible) .columna-pedido .pie-pedido { padding-bottom: var(--ag-pie); }
.ag-presencia { position: fixed; right: 12px; bottom: 8px; z-index: 90; display: flex; align-items: flex-end; gap: 12px; max-width: min(440px, calc(100vw - 32px)); opacity: 0; transform: translateY(24px) scale(.96);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .9, .25, 1.15); pointer-events: none; }
.ag-presencia.visible { opacity: 1; transform: none; pointer-events: auto; }
.ag-presencia.fuera { opacity: 0; transform: translateY(16px) scale(.97); transition-duration: .3s; }
.ag-cara { position: relative; flex: none; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.ag-img { z-index: 2; width: 76px; height: 76px; font-size: 32px; box-shadow: 0 10px 30px rgb(0 0 0 / .35); transition: transform .3s; }
.ag-cara::before, .ag-cara::after, .ag-cab .ag-avatar::before, .ag-cab .ag-avatar::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 50%; border: 2px solid var(--ag-acento); opacity: 0; pointer-events: none; }
.ag-presencia.hablando .ag-cara::before, .ag-dlg.hablando .ag-cab .ag-avatar::before { animation: ag-anillo 1.6s ease-out infinite; }
.ag-presencia.hablando .ag-cara::after, .ag-dlg.hablando .ag-cab .ag-avatar::after { animation: ag-anillo 1.6s ease-out .8s infinite; }
.ag-presencia.hablando .ag-img { animation: ag-latir 1.6s ease-in-out infinite; }
@keyframes ag-anillo { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes ag-latir { 50% { transform: scale(1.04); } }
.ag-ondas { position: absolute; z-index: 4; left: 50%; bottom: -6px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 3px; height: 16px; padding: 3px 7px; border-radius: 999px; background: var(--ag-acento); opacity: 0; transition: opacity .2s; }
.ag-presencia.hablando .ag-ondas { opacity: 1; }
.ag-ondas i { width: 3px; height: 4px; border-radius: 2px; background: #fff; }
.ag-presencia.hablando .ag-ondas i { animation: ag-onda .9s ease-in-out infinite; }
.ag-ondas i:nth-child(2) { animation-delay: .15s; } .ag-ondas i:nth-child(3) { animation-delay: .3s; } .ag-ondas i:nth-child(4) { animation-delay: .45s; }
@keyframes ag-onda { 50% { height: 10px; } }
.ag-x { position: absolute; top: -4px; right: -4px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 1px solid var(--ag-oscuro-borde); border-radius: 50%; background: var(--ag-oscuro-2); color: var(--ag-oscuro-texto); cursor: pointer; }
.ag-x svg, .ag-x i { width: 14px; height: 14px; font-size: 14px; fill: currentColor; }

/* ---------- Ventana ---------- */
.ag-dlg { width: min(560px, 94vw); margin: auto; padding: 0; border: 1px solid var(--ag-borde); border-radius: 8px; background: var(--ag-capa); color: var(--ag-texto); box-shadow: 0 32px 64px rgb(0 0 0 / .19), 0 2px 21px rgb(0 0 0 / .15); }
.ag-dlg::backdrop { background: rgb(0 0 0 / .3); }
.ag-dlg svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.ag-cuerpo { display: flex; flex-direction: column; padding: 24px; max-height: calc(100vh - 140px); overflow: auto; }
.ag-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ag-cab h2 { margin: 0; font-size: 20px; line-height: 1.1; }
.ag-cab span { font-size: 12px; color: var(--ag-texto-2); }
.ag-cab .ag-avatar { width: 60px; height: 60px; font-size: 26px; overflow: visible; box-shadow: 0 4px 14px rgb(0 0 0 / .18); }
.ag-cab .ag-avatar img { border-radius: 50%; }
.ag-mini { width: 28px; height: 28px; font-size: 13px; margin-top: 2px; }
.ag-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--ag-borde); border-bottom-color: var(--ag-borde-2); border-radius: 4px; background: var(--ag-capa); color: var(--ag-texto); font: inherit; font-size: 14px; cursor: pointer; }
.ag-btn:hover { background: var(--ag-sutil); }
.ag-btn.prin { background: var(--ag-acento); border-color: var(--ag-acento); color: var(--ag-sobre-acento); }
.ag-btn:disabled { opacity: .5; }
.ag-rapidas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.ag-rapidas .ag-btn { justify-content: flex-start; height: auto; min-height: 42px; padding: 8px 12px; text-align: left; }
.ag-rapidas svg, .ag-rapidas i { color: var(--ag-acento); }
.ag-campo { display: flex; align-items: center; gap: 8px; height: 46px; margin-top: 4px; padding: 0 12px; border: 1px solid var(--ag-borde); border-bottom-color: var(--ag-borde-2); border-radius: 4px; background: var(--ag-capa); color: var(--ag-texto-2); }
.ag-campo:focus-within { border-bottom: 2px solid var(--ag-acento); }
.ag-campo input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; font-size: 15px; color: var(--ag-texto); }
.ag-acciones-pie { display: flex; justify-content: flex-end; margin-top: 10px; }
.ag-yo { align-self: flex-end; margin: 4px 0 10px auto; width: fit-content; max-width: 85%; padding: 8px 12px; border-radius: 12px 12px 2px 12px; background: var(--ag-oscuro); color: #fff; }
.ag-dice { display: flex; gap: 10px; align-items: flex-start; }
.ag-resp { margin: 0 0 12px; font-size: 16px; line-height: 24px; }
.ag-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px 38px; }
.ag-tarjetas { display: grid; gap: 6px; margin-bottom: 12px; }
.ag-tarjeta { display: grid; grid-template-columns: 52px 1fr auto auto; gap: 10px; align-items: center; padding: 6px; border: 1px solid var(--ag-borde); border-radius: 6px; }
.ag-tarjeta img { width: 52px; height: 40px; object-fit: cover; border-radius: 4px; }
.ag-tarjeta b { display: block; font-size: 14px; } .ag-tarjeta span { font-size: 12px; color: var(--ag-texto-2); }
.ag-tarjeta .ag-btn { width: 34px; padding: 0; justify-content: center; }
.ag-otra { padding-top: 10px; border-top: 1px solid var(--ag-borde); }
.ag-cargando { display: flex; align-items: center; gap: 4px; color: var(--ag-texto-2); }
.ag-cargando span { width: 6px; height: 6px; border-radius: 50%; background: var(--ag-acento); animation: ag-salto 1s ease-in-out infinite; }
.ag-cargando span:nth-child(2) { animation-delay: .15s; } .ag-cargando span:nth-child(3) { animation-delay: .3s; }
@keyframes ag-salto { 50% { transform: translateY(-5px); opacity: .5; } }
.ag-error { color: var(--alerta, var(--ag-acento)); }
.ag-pie { display: flex; gap: 8px; justify-content: flex-end; padding: 16px 24px; background: var(--ag-sutil); border-top: 1px solid var(--ag-borde); border-radius: 0 0 8px 8px; }
.ag-pie .ag-silencio { margin-right: auto; }
@media (prefers-reduced-motion: reduce) {
  .ag-presencia, .ag-presencia.fuera { transition: opacity .2s; }
  .ag-presencia.hablando .ag-cara::before, .ag-presencia.hablando .ag-cara::after, .ag-presencia.hablando .ag-img, .ag-presencia.hablando .ag-ondas i,
  .ag-dlg.hablando .ag-cab .ag-avatar::before, .ag-dlg.hablando .ag-cab .ag-avatar::after, .ag-cargando span { animation: none; }
}
/* Ajustes del agente en Configuración (ajustes.js) */
.ag-ajustes { display: grid; gap: 14px; max-width: 560px; }
.ag-ajustes-botones { display: flex; gap: 8px; }