:root {
  --fondo: #060b14;
  --fondo2: #0b1322;
  --panel: rgba(18, 32, 54, .72);
  --borde: rgba(110, 200, 255, .18);
  --texto: #e6f1ff;
  --tenue: #8aa3c2;
  --cian: #4fd8ff;
  --ok: #4fd8ff;
  --aviso: #ffc24a;
  --critico: #ff5b6b;
  --verde: #46e3a0;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 70% at 50% 0%, #0f2240 0%, var(--fondo) 60%) fixed, var(--fondo);
  color: var(--texto);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.pantalla { min-height: 100dvh; }

/* ---------- reactor ---------- */
.reactor {
  position: relative; width: 168px; height: 168px; margin: 8px auto 0; display: block;
  border: 0; background: none; padding: 0; border-radius: 50%;
  --c: var(--ok);
}
.reactor-grande { width: 190px; height: 190px; }
.reactor .anillo {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--c) 70%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 24px color-mix(in srgb, var(--c) 25%, transparent);
  background:
    repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 55%, transparent) 0 6deg, transparent 6deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 70%, transparent 71%);
          mask: radial-gradient(circle, transparent 60%, #000 61%, #000 70%, transparent 71%);
  animation: girar 24s linear infinite;
}
.reactor .anillo.a2 {
  inset: 22px; animation-direction: reverse; animation-duration: 16s;
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%, #000 74%, transparent 75%);
          mask: radial-gradient(circle, transparent 66%, #000 67%, #000 74%, transparent 75%);
}
.reactor .nucleo {
  position: absolute; inset: 54px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--c) 35%, color-mix(in srgb, var(--c) 30%, transparent) 62%, transparent 72%);
  filter: drop-shadow(0 0 18px var(--c));
  animation: latir 3.2s ease-in-out infinite;
}
.reactor.estado-aviso { --c: var(--aviso); }
.reactor.estado-critico { --c: var(--critico); }
.reactor.pensando .anillo { animation-duration: 3s; }
.reactor.pensando .nucleo { animation-duration: .9s; }
.reactor.escuchando { --c: var(--verde); }
.reactor.escuchando .nucleo { animation: latir .55s ease-in-out infinite; }
.reactor.hablando .nucleo { animation: latir .35s ease-in-out infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes latir { 0%, 100% { transform: scale(.9); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .reactor * { animation: none !important; } }

/* ---------- login ---------- */
.login { max-width: 360px; margin: 0 auto; padding: max(48px, env(safe-area-inset-top)) 20px 24px; text-align: center; }
.marca { letter-spacing: .35em; font-weight: 300; font-size: 26px; margin: 26px 0 2px; }
.sub { color: var(--tenue); margin: 0 0 28px; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.login input, .entrada input {
  width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--borde);
  background: rgba(8, 18, 34, .8); color: var(--texto); font-size: 16px; outline: none;
}
.login input:focus, .entrada input:focus { border-color: var(--cian); box-shadow: 0 0 0 3px rgba(79, 216, 255, .15); }
.boton-primario {
  width: 100%; margin-top: 12px; padding: 14px; border-radius: 14px; border: 0;
  background: linear-gradient(180deg, #5fe0ff, #22a9d6); color: #03121d; font-weight: 600;
}
.error { color: var(--critico); min-height: 1.4em; font-size: 14px; }

/* ---------- app ---------- */
.barra {
  position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background: linear-gradient(var(--fondo) 70%, transparent);
}
.marca-chica { letter-spacing: .3em; font-size: 13px; font-weight: 600; color: var(--cian); }
.cerebro { font-size: 12px; color: var(--tenue); }
.barra-botones { display: flex; gap: 6px; }
.icono { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; width: 40px; height: 40px; }

#contenido { padding: 0 16px 170px; max-width: 640px; margin: 0 auto; }
.resumen { text-align: center; font-size: 17px; margin: 14px 4px 2px; }
.hora { text-align: center; color: var(--tenue); font-size: 12px; margin: 0 0 14px; }

.caja { background: var(--panel); border: 1px solid var(--borde); border-radius: 16px; padding: 4px 14px; margin: 10px 0; }
.caja summary { padding: 10px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.caja summary::-webkit-details-marker { display: none; }
.pildora { background: rgba(79, 216, 255, .15); color: var(--cian); border-radius: 99px; padding: 0 10px; font-size: 13px; }
#hallazgos { list-style: none; margin: 0; padding: 0 0 8px; }
#hallazgos li { padding: 10px 0 10px 14px; border-top: 1px solid var(--borde); position: relative; }
#hallazgos li::before { content: ""; position: absolute; left: 0; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--ok)); }
#hallazgos li.critico { --c: var(--critico); }
#hallazgos li.aviso { --c: var(--aviso); }
#hallazgos .det { color: var(--tenue); font-size: 14px; }
#hallazgos .mini { margin-top: 6px; font-size: 13px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--borde); background: rgba(79, 216, 255, .08); }

.propuesta {
  border: 1px solid color-mix(in srgb, var(--aviso) 55%, transparent); background: rgba(255, 194, 74, .08);
  border-radius: 16px; padding: 12px 14px; margin: 10px 0;
}
.propuesta .et { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--aviso); }
.propuesta .ti { font-weight: 600; margin: 2px 0; word-break: break-word; }
.propuesta .mo { color: var(--tenue); font-size: 14px; }
.propuesta .acciones { display: flex; gap: 8px; margin-top: 10px; }
.propuesta button { flex: 1; padding: 11px; border-radius: 12px; border: 1px solid var(--borde); background: var(--panel); }
.propuesta .si { background: linear-gradient(180deg, #5fe0ff, #22a9d6); color: #03121d; border: 0; font-weight: 600; }

.atajos { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0 4px; scrollbar-width: none; }
.atajos::-webkit-scrollbar { display: none; }
.atajo { white-space: nowrap; padding: 9px 13px; border-radius: 99px; border: 1px solid var(--borde); background: var(--panel); font-size: 14px; }

#chat { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.msg { max-width: 88%; padding: 10px 13px; border-radius: 16px; white-space: pre-wrap; word-break: break-word; font-size: 15px; }
.msg.usuario { align-self: flex-end; background: rgba(79, 216, 255, .16); border-bottom-right-radius: 5px; }
.msg.jarvis { align-self: flex-start; background: var(--panel); border: 1px solid var(--borde); border-bottom-left-radius: 5px; }
.msg .meta { display: block; font-size: 11px; color: var(--tenue); margin-top: 4px; }
.msg.pensando { color: var(--tenue); font-style: italic; }

.entrada {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; gap: 10px; align-items: center;
  padding: 12px 14px calc(env(safe-area-inset-bottom) + 12px);
  background: linear-gradient(transparent, var(--fondo) 30%);
}
#form-chat { flex: 1; display: flex; gap: 8px; }
.enviar { flex: 0 0 48px; height: 48px; border-radius: 14px; }
.mic {
  flex: 0 0 64px; height: 64px; border-radius: 50%; border: 0;
  background: radial-gradient(circle at 50% 35%, #7ae6ff, #138ab6); box-shadow: 0 0 22px rgba(79, 216, 255, .5);
  display: grid; place-items: center;
}
.mic svg { width: 28px; height: 28px; fill: #03121d; }
.mic.grabando { background: radial-gradient(circle at 50% 35%, #8ff5c8, #1ba56b); box-shadow: 0 0 30px rgba(70, 227, 160, .7); animation: latir .8s ease-in-out infinite; }

.panel-voz { padding: 14px; display: grid; gap: 8px; }
.panel-voz label { font-size: 13px; color: var(--tenue); }
.panel-voz select { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--borde); background: rgba(8, 18, 34, .9); color: var(--texto); font-size: 16px; }
.panel-voz input[type=range] { width: 100%; accent-color: var(--cian); }
.panel-voz .det { color: var(--tenue); font-size: 13px; margin: 4px 0 0; }
.acciones-voz { display: flex; gap: 8px; }
.acciones-voz button { flex: 1; padding: 11px; border-radius: 12px; border: 1px solid var(--borde); background: var(--panel); }
.acciones-voz .si { background: linear-gradient(180deg, #5fe0ff, #22a9d6); color: #03121d; border: 0; font-weight: 600; }
.panel-voz .interruptor { display: flex; align-items: center; gap: 10px; color: var(--texto); font-size: 15px; padding: 4px 0; }
.panel-voz .interruptor input { width: 20px; height: 20px; accent-color: var(--cian); }