/* ARGOS — agente personal. Herramienta propia (no es un módulo de Axial): paleta fija oscura con acento cian y violeta. */
:root { --bg: #060a14; --sf: rgba(18, 26, 46, .72); --sf2: rgba(28, 40, 70, .6); --bd: rgba(120, 170, 255, .18); --tx: #e8efff; --mu: #8ea2c8; --c: #22d3ee; --v: #8b5cf6; --ok: #34d399; --er: #fb7185; --ad: #fbbf24; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--tx); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { overflow: hidden; }
.malla { position: fixed; inset: 0; background: radial-gradient(60% 40% at 15% 0%, rgba(34, 211, 238, .16), transparent 70%), radial-gradient(55% 40% at 100% 20%, rgba(139, 92, 246, .18), transparent 70%), radial-gradient(60% 50% at 50% 110%, rgba(34, 211, 238, .1), transparent 70%); pointer-events: none; }
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--bd); background: var(--sf2); border-radius: 14px; padding: 0 16px; min-height: 44px; }
button:active { transform: scale(.98); }
button:focus-visible, input:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }
.primario { background: linear-gradient(135deg, var(--c), var(--v)); color: #04101c; font-weight: 700; border: 0; }
.peligro { background: rgba(251, 113, 133, .16); border-color: rgba(251, 113, 133, .5); color: #ffd5db; font-weight: 600; }
.fantasma { background: transparent; color: var(--mu); }
input { width: 100%; min-height: 48px; border-radius: 14px; border: 1px solid var(--bd); background: rgba(6, 10, 20, .7); padding: 0 14px; }
code { background: rgba(255, 255, 255, .08); padding: 2px 6px; border-radius: 6px; font-size: .85em; word-break: break-all; }
pre { margin: 8px 0 0; white-space: pre-wrap; word-break: break-word; font: 13px/1.5 ui-monospace, "Cascadia Code", Consolas, monospace; color: #cfe3ff; }
h1, h2 { margin: 0; }
h2 { font-size: 1.05rem; }

/* ojo de ARGOS */
.ojo { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--c); display: grid; place-items: center; box-shadow: 0 0 14px rgba(34, 211, 238, .55); }
.ojo i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); animation: late 3.2s ease-in-out infinite; }
.ojo.grande { width: 84px; height: 84px; margin: 0 auto 12px; border-width: 3px; box-shadow: 0 0 34px rgba(34, 211, 238, .6); }
.ojo.grande i { width: 30px; height: 30px; }
@keyframes late { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.35); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ojo i { animation: none; } }

.pantalla { position: relative; z-index: 2; max-width: 420px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 48px) 20px 24px; text-align: center; height: 100%; overflow: auto; }
.pantalla h1 { letter-spacing: .3em; font-size: 2rem; }
.sub, .ayuda, .nota { color: var(--mu); font-size: .9rem; }
.pantalla form { text-align: left; display: grid; gap: 10px; margin-top: 22px; }
.pantalla label { color: var(--mu); font-size: .85rem; }
.pantalla button { width: 100%; margin-top: 6px; }
.error { color: var(--er); min-height: 1.4em; margin: 0; }

#app { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; max-width: 720px; margin: 0 auto; }
header { display: flex; justify-content: space-between; align-items: center; padding: calc(env(safe-area-inset-top) + 10px) 16px 8px; }
.marca { display: flex; align-items: center; gap: 10px; letter-spacing: .25em; }
main { flex: 1; min-height: 0; position: relative; }
.vista { display: none; height: 100%; overflow: auto; padding: 8px 14px 14px; -webkit-overflow-scrolling: touch; }
.vista.activa { display: flex; flex-direction: column; }
#v-chat { padding-bottom: 8px; }
#mensajes { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px 2px; }
.burbuja { max-width: 88%; padding: 10px 14px; border-radius: 18px; white-space: pre-wrap; word-break: break-word; border: 1px solid var(--bd); background: var(--sf); backdrop-filter: blur(10px); animation: entra .25s ease both; }
.burbuja.yo { align-self: flex-end; background: linear-gradient(135deg, rgba(34, 211, 238, .28), rgba(139, 92, 246, .32)); border-color: rgba(34, 211, 238, .4); }
.burbuja.argos { align-self: flex-start; }
.burbuja.pensando { color: var(--mu); }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0; }
.chips button { white-space: nowrap; min-height: 40px; border-radius: 999px; }
.entrada { display: flex; gap: 8px; }
.entrada .primario { width: 56px; padding: 0; }
.tarjeta { background: var(--sf); border: 1px solid var(--bd); border-radius: 18px; padding: 14px; margin-bottom: 12px; backdrop-filter: blur(12px); }
.fila { display: flex; justify-content: space-between; align-items: center; }
.tarjeta .entrada { margin-top: 10px; }
.tarjeta > button { margin-top: 10px; }
.dec .ruta { font: 600 .92rem ui-monospace, Consolas, monospace; word-break: break-all; color: var(--c); }
.dec .botones, .modal .botones { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.dec .botones button { flex: 1; }
.vacio { text-align: center; color: var(--mu); padding: 40px 10px; }

nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 10px calc(env(safe-area-inset-bottom) + 8px); background: rgba(6, 10, 20, .85); border-top: 1px solid var(--bd); backdrop-filter: blur(14px); }
nav button { border: 0; background: transparent; color: var(--mu); min-height: 46px; padding: 0 4px; font-size: .9rem; }
nav button.activa { color: var(--c); background: rgba(34, 211, 238, .1); font-weight: 700; }
nav b { background: var(--ad); color: #1a1200; border-radius: 999px; padding: 0 7px; font-size: .75rem; margin-left: 4px; }

.modal { position: fixed; inset: 0; z-index: 10; background: rgba(2, 4, 10, .7); display: grid; place-items: center; padding: 20px; }
.modal .caja { background: #0d1426; border: 1px solid var(--bd); border-radius: 20px; padding: 20px; max-width: 380px; width: 100%; }
.modal .botones button { flex: 1; }
@media (min-width: 760px) { body { font-size: 17px; } }

/* modos de conversación */
.modo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; margin: 2px 0 6px; background: var(--sf); border: 1px solid var(--bd); border-radius: 16px; }
.modo button { border: 0; background: transparent; color: var(--mu); min-height: 40px; border-radius: 12px; }
.modo button.activa { background: linear-gradient(135deg, rgba(34, 211, 238, .25), rgba(139, 92, 246, .3)); color: var(--tx); font-weight: 700; }
.burbuja.argos.escribiendo::after { content: "▍"; color: var(--c); animation: late 1s steps(2) infinite; }

/* panel de botones y monitoreo */
h3 { margin: 14px 4px 6px; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mu); }
.rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rejilla button { text-align: left; padding: 10px 14px; line-height: 1.25; }
.rejilla button b { background: var(--ad); color: #1a1200; border-radius: 999px; padding: 0 7px; font-size: .75rem; margin-left: 4px; }
.pulso { min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: .82rem; font-weight: 600; margin-left: auto; margin-right: 6px; border: 1px solid var(--bd); color: var(--mu); }
.pulso::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--mu); margin-right: 7px; }
.pulso.ok { color: var(--ok); border-color: rgba(52, 211, 153, .4); } .pulso.ok::before { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.pulso.aviso { color: var(--ad); border-color: rgba(251, 191, 36, .45); } .pulso.aviso::before { background: var(--ad); box-shadow: 0 0 8px var(--ad); }
.pulso.critico { color: var(--er); border-color: rgba(251, 113, 133, .55); } .pulso.critico::before { background: var(--er); box-shadow: 0 0 8px var(--er); }
.alerta { margin: 0 14px 6px; padding: 8px 12px; border-radius: 12px; font-size: .88rem; border: 1px solid var(--bd); }
.alerta.aviso { background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .4); }
.alerta.critico { background: rgba(251, 113, 133, .14); border-color: rgba(251, 113, 133, .5); }
#preguntaOpciones { flex-wrap: wrap; }