/* ════════════════════════════════════════
   AXON — MTX-UI v2  |  style.css
   Clon exacto de la imagen de referencia
   ════════════════════════════════════════ */

:root {
  --bg:         #06071a;
  --bg2:        #0a0b24;
  --purple:     #7B4FE0;
  --purple2:    #a87fff;
  --cyan:       #00d4ff;
  --cyan2:      rgba(0,212,255,0.5);
  --cyan3:      rgba(0,212,255,0.1);
  --pink:       #ff5ce8;
  --pink2:      rgba(255,92,232,0.6);
  --text:       #dde8ff;
  --text-dim:   rgba(180,200,255,0.45);
  --card-bg:    rgba(10,12,40,0.82);
  --card-border:rgba(90,60,200,0.35);
  --glow-c:     0 0 14px rgba(0,212,255,0.7);
  --glow-p:     0 0 14px rgba(123,79,224,0.7);
  --font-main:  'Orbitron', monospace;
  --font-mono:  'Share Tech Mono', monospace;
  --r:          12px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body {
  width:100%; height:100%;
  overflow:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-mono);
}

/* ─── FONDO ──────────────────────────────── */
body::before {
  content:'';
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse 90% 55% at 50% 38%, rgba(60,30,160,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 35% at 15% 85%, rgba(0,180,255,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 25% at 85% 15%, rgba(255,60,220,0.07) 0%, transparent 55%);
  pointer-events:none; z-index:0;
}

/* ─── CANVAS ORB ─────────────────────────── */
#orb-canvas {
  position:fixed; inset:0;
  z-index:1;
  pointer-events:none;
}

/* ─── BOOT SCREEN ────────────────────────── */
#boot-screen {
  position:fixed; inset:0;
  background:var(--bg);
  z-index:999;
  display:flex; align-items:center; justify-content:center;
  transition:opacity 0.7s ease;
}
#boot-screen.fade-out { opacity:0; pointer-events:none; }

#boot-scan {
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,rgba(123,79,224,0.7) 40%,var(--cyan) 50%,rgba(123,79,224,0.7) 60%,transparent);
  box-shadow:0 0 20px rgba(123,79,224,0.5);
  animation:scan-down 3.8s ease-in-out forwards; z-index:2;
}
@keyframes scan-down { 0%{top:0%;opacity:1;} 85%{top:100%;opacity:1;} 100%{top:100%;opacity:0;} }

#boot-content { width:min(520px,90vw); display:flex; flex-direction:column; gap:14px; z-index:3; }

#boot-logo {
  font-family:var(--font-main); font-weight:900;
  font-size:clamp(48px,12vw,80px); letter-spacing:18px;
  color:var(--cyan);
  text-shadow:0 0 40px rgba(0,212,255,0.9), 0 0 80px rgba(123,79,224,0.5);
  text-align:center;
  animation:logo-flicker 0.4s steps(1) 3;
}
@keyframes logo-flicker { 0%,100%{opacity:1;} 25%{opacity:0.3;} 50%{opacity:1;} 75%{opacity:0.6;} }

#boot-subtitle { font-size:10px; letter-spacing:6px; color:var(--purple2); text-align:center; margin-top:-12px; }
#boot-version  { font-size:9px; letter-spacing:4px; color:var(--text-dim); text-align:center; }

#boot-lines {
  font-size:11px; line-height:1.9; color:rgba(0,212,255,0.6);
  min-height:180px; max-height:180px; overflow:hidden;
  border-left:1px solid rgba(123,79,224,0.3); padding-left:12px;
}
.boot-line { opacity:0; transform:translateX(-6px); transition:opacity 0.25s,transform 0.25s; white-space:nowrap; }
.boot-line.visible { opacity:1; transform:translateX(0); }

#boot-bar-wrap { display:flex; align-items:center; gap:10px; }
#boot-bar-track { flex:1; height:3px; background:rgba(123,79,224,0.15); position:relative; }
#boot-bar-fill {
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg, var(--purple), var(--cyan));
  box-shadow:0 0 10px rgba(0,212,255,0.7);
}
#boot-bar-pct { font-size:10px; color:var(--cyan); width:34px; text-align:right; flex-shrink:0; }
#boot-ready { font-family:var(--font-main); font-size:12px; letter-spacing:6px; color:var(--cyan); text-align:center; text-shadow:var(--glow-c); opacity:0; transition:opacity 0.5s; }
#boot-ready.visible { opacity:1; }

/* ─── HUD WRAPPER ────────────────────────── */
#hud-wrapper { position:fixed; inset:0; z-index:2; display:flex; flex-direction:column; }
.hud-hidden { opacity:0; pointer-events:none; }
.hud-reveal { animation:hud-in 0.8s ease forwards; }
@keyframes hud-in { from{opacity:0;transform:scale(0.97);} to{opacity:1;transform:scale(1);} }

/* ─── HEADER ─────────────────────────────── */
#top-bar {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 16px;
  background:rgba(6,7,26,0.75);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--card-border);
  flex-shrink:0;
  z-index:20; pointer-events:auto;
}
#top-bar-left { font-size:9px; letter-spacing:2px; color:var(--text-dim); }
#top-bar-right { display:flex; gap:12px; align-items:center; }
#clock-full { font-size:10px; color:var(--cyan); letter-spacing:1px; }
#date-full  { font-size:9px; color:var(--text-dim); letter-spacing:1px; }
.hud-btn {
  background:none; border:1px solid var(--card-border);
  color:var(--purple2); font-family:var(--font-mono);
  font-size:8px; letter-spacing:1px; padding:4px 9px;
  border-radius:5px; cursor:pointer; transition:all 0.2s;
}
.hud-btn:hover { border-color:var(--purple2); color:var(--cyan); }

/* ─── MAIN AREA ──────────────────────────── */
#main-area {
  flex:1; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}

/* ─── AXON TITLE ─────────────────────────── */
#axon-header {
  text-align:center; padding:14px 0 6px;
  flex-shrink:0; position:relative; z-index:10;
  pointer-events:none;
}
#axon-name {
  font-family:var(--font-main); font-weight:900;
  font-size:clamp(28px,7vw,42px); letter-spacing:12px;
  color:var(--cyan);
  text-shadow:0 0 30px rgba(0,212,255,1), 0 0 60px rgba(123,79,224,0.6);
}
#axon-sub {
  font-size:9px; letter-spacing:6px;
  color:var(--purple2); margin-top:2px;
}

/* ─── STATUS BADGE ───────────────────────── */
#status-badge {
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin:6px auto 0;
  width:fit-content;
  background:rgba(10,12,40,0.7);
  border:1px solid var(--card-border);
  border-radius:20px; padding:4px 14px;
  pointer-events:none; z-index:10; position:relative;
  flex-shrink:0;
}
.status-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--cyan); box-shadow:var(--glow-c);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1;} 50%{opacity:0.35;} }
#status-sub-badge { font-size:10px; color:var(--cyan); letter-spacing:1px; }
#status-main-badge { font-size:10px; color:var(--text-dim); }
/* compat con app.js */
#status-sub, #status-main { display:none; }

/* ─── CONTENT GRID ───────────────────────── */
#content-grid {
  flex:1; position:relative;
  display:grid;
  grid-template-columns:min(160px,26vw) 1fr min(160px,26vw);
  grid-template-rows:1fr auto;
  gap:8px;
  padding:8px;
  overflow:hidden;
  min-height:0;
}

/* ─── COLUMNA IZQUIERDA ──────────────────── */
#col-left {
  display:flex; flex-direction:column; gap:8px;
  z-index:10; pointer-events:auto;
}

/* ─── COLUMNA CENTRO ─────────────────────── */
#col-center {
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  gap:8px; position:relative;
}

/* Saludo debajo del orbe */
#orb-greeting {
  font-size:clamp(11px,3vw,14px);
  color:var(--text); text-align:center;
  letter-spacing:1px;
  text-shadow:0 0 12px rgba(0,212,255,0.3);
  flex-shrink:0;
  pointer-events:none;
}

/* ─── COLUMNA DERECHA ────────────────────── */
#col-right {
  display:flex; flex-direction:column; gap:8px;
  z-index:10; pointer-events:auto;
}

/* ─── WIDGETS ────────────────────────────── */
.widget {
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--r);
  padding:12px;
  backdrop-filter:blur(14px);
  flex:1;
}

.widget-header {
  display:flex; align-items:center; gap:6px;
  margin-bottom:10px;
}
.widget-icon { font-size:12px; }
.widget-title {
  font-family:var(--font-main); font-size:9px; letter-spacing:2px;
  color:var(--cyan); text-shadow:var(--glow-c);
  flex:1;
}
.widget-dots { color:var(--text-dim); font-size:12px; cursor:pointer; }

.widget-item {
  display:flex; align-items:center; gap:7px;
  margin-bottom:7px;
}
.wi-icon {
  width:22px; height:22px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; flex-shrink:0;
  background:rgba(123,79,224,0.18);
  border:1px solid rgba(123,79,224,0.3);
}
.wi-icon.c { background:rgba(0,212,255,0.1); border-color:rgba(0,212,255,0.25); }
.wi-icon.p { background:rgba(255,92,232,0.12); border-color:rgba(255,92,232,0.3); }
.wi-text { flex:1; min-width:0; }
.wi-label { font-size:7px; letter-spacing:1px; color:var(--text-dim); display:block; }
.wi-val   { font-size:10px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Toggle */
.s-toggle {
  width:26px; height:15px; border-radius:8px;
  border:none; cursor:pointer; flex-shrink:0;
  background:var(--purple); position:relative; transition:background 0.2s;
}
.s-toggle.on { background:var(--cyan); }
.s-toggle::after {
  content:''; position:absolute;
  width:11px; height:11px; border-radius:50%;
  background:white; top:2px; left:2px;
  transition:transform 0.2s;
}
.s-toggle.on::after { transform:translateX(11px); }

/* Gráfica */
#stat-chart {
  display:flex; align-items:flex-end; gap:3px;
  height:44px; margin-top:4px;
}
.chart-bar {
  flex:1; border-radius:2px 2px 0 0;
  background:linear-gradient(to top, var(--purple), var(--cyan));
  opacity:0.75;
}

/* Weather temp grande */
#weather-temp {
  font-size:clamp(18px,5vw,26px);
  color:var(--cyan); text-shadow:var(--glow-c);
  margin-top:4px; display:block;
}

/* ─── FILA INFERIOR CENTRO ───────────────── */
#bottom-center {
  grid-column:2; grid-row:2;
  display:flex; flex-direction:column; gap:6px;
  padding:0 4px 4px;
}

/* ─── CHAT MESSAGES ──────────────────────── */
#messages-wrap {
  max-height:80px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--card-border) transparent;
}
.messages { display:flex; flex-direction:column; gap:4px; }
.msg { display:flex; gap:7px; align-items:flex-start; animation:msg-in 0.3s ease-out; }
@keyframes msg-in { from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:none;} }
.tag {
  font-size:7px; letter-spacing:1px; padding:2px 5px;
  border:1px solid; white-space:nowrap; flex-shrink:0;
  margin-top:2px; border-radius:4px;
}
.msg.user .tag { color:var(--text-dim); border-color:rgba(180,200,255,0.15); }
.msg.axon .tag { color:var(--cyan); border-color:var(--cyan2); }
.text { font-size:11px; line-height:1.5; color:rgba(200,215,255,0.8); }
.msg.axon .text { color:var(--text); }

.typing-row { display:none; gap:7px; align-items:center; margin-bottom:3px; }
.typing-row.active { display:flex; }
.dot { width:4px; height:4px; background:var(--cyan); border-radius:50%; animation:dot-up 1s ease-in-out infinite; }
.dot:nth-child(3){animation-delay:0.15s;} .dot:nth-child(4){animation-delay:0.3s;}
@keyframes dot-up { 0%,100%{opacity:0.25;transform:translateY(0);} 50%{opacity:1;transform:translateY(-4px);} }

/* ─── INPUT ──────────────────────────────── */
.input-row {
  display:flex; gap:8px; align-items:center;
  background:rgba(10,12,40,0.85);
  border:1px solid rgba(123,79,224,0.45);
  border-radius:28px; padding:9px 14px;
  backdrop-filter:blur(16px);
}
.prompt { display:none; }
#chat-input {
  flex:1; background:none; border:none; outline:none;
  color:var(--text); font-family:var(--font-mono);
  font-size:11px; caret-color:var(--cyan); min-width:0;
}
#chat-input::placeholder { color:var(--text-dim); }

#voice-btn {
  background:none; border:1px solid var(--card-border);
  color:var(--purple2); width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; transition:all 0.2s;
}
#voice-btn:hover, #voice-btn.listening {
  border-color:var(--cyan); color:var(--cyan); box-shadow:var(--glow-c);
}
#voice-btn.listening { animation:mic-pulse 1s ease-in-out infinite; }
@keyframes mic-pulse { 0%,100%{box-shadow:0 0 8px rgba(0,212,255,0.4);} 50%{box-shadow:0 0 22px rgba(0,212,255,0.9);} }
#mic-svg { width:15px; height:15px; }

#send-btn {
  background:linear-gradient(135deg, var(--purple), var(--cyan));
  border:none; color:white; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; font-size:13px;
  box-shadow:0 0 12px rgba(123,79,224,0.5); transition:all 0.2s;
}
#send-btn:hover { transform:scale(1.07); box-shadow:0 0 18px rgba(0,212,255,0.6); }

/* ─── NAVBAR ─────────────────────────────── */
#bottom-nav {
  display:flex; align-items:center; justify-content:space-around;
  padding:8px 0 10px;
  background:rgba(6,7,26,0.88);
  backdrop-filter:blur(20px);
  border-top:1px solid var(--card-border);
  flex-shrink:0; z-index:20; pointer-events:auto;
}
.nav-btn {
  background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 10px; border-radius:10px; transition:all 0.2s;
  color:var(--text-dim); font-size:19px;
}
.nav-btn.active { color:var(--cyan); }
.nav-btn:hover  { color:var(--purple2); }
.nav-label { font-size:7px; letter-spacing:1px; font-family:var(--font-mono); }

/* ─── PANEL TAREAS ───────────────────────── */
#tasks-panel {
  position:fixed; top:42px; right:0;
  width:min(280px,88vw);
  background:rgba(6,7,26,0.97);
  border:1px solid var(--card-border); border-top:none;
  border-radius:0 0 0 var(--r);
  z-index:60; backdrop-filter:blur(16px);
  transition:opacity 0.25s, transform 0.25s;
}
.tasks-hidden { opacity:0; pointer-events:none; transform:translateY(-8px); }
.tasks-visible { opacity:1; pointer-events:auto; transform:translateY(0); }
.tasks-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; border-bottom:1px solid rgba(123,79,224,0.12);
}
.tasks-title { font-size:10px; letter-spacing:3px; color:var(--cyan); }
#tasks-close { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:13px; transition:color 0.2s; }
#tasks-close:hover { color:var(--cyan); }
#tasks-list { max-height:200px; overflow-y:auto; padding:4px 0; scrollbar-width:thin; }
.tasks-empty { font-size:11px; color:var(--text-dim); text-align:center; padding:18px; }
.task-item {
  display:flex; align-items:center; gap:9px;
  padding:8px 14px; border-bottom:1px solid rgba(123,79,224,0.05);
  transition:background 0.15s;
}
.task-item:hover { background:rgba(123,79,224,0.06); }
.task-item.done .task-text { text-decoration:line-through; color:var(--text-dim); }
.task-check {
  background:none; border:1px solid rgba(123,79,224,0.4);
  color:var(--cyan); width:20px; height:20px; font-size:10px;
  cursor:pointer; flex-shrink:0; border-radius:4px;
  display:flex; align-items:center; justify-content:center; transition:all 0.15s;
}
.task-check:hover { background:rgba(123,79,224,0.15); }
.task-text { flex:1; font-size:11px; color:var(--text); }
.task-del { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:11px; padding:2px 4px; transition:color 0.15s; }
.task-del:hover { color:rgba(255,80,80,0.8); }
.tasks-input-row { display:flex; align-items:center; gap:7px; padding:9px 14px; border-top:1px solid rgba(123,79,224,0.08); }
.tasks-input-row .prompt { display:flex; color:var(--purple2); font-size:14px; flex-shrink:0; }
#task-input { flex:1; background:none; border:none; outline:none; color:var(--text); font-family:var(--font-mono); font-size:11px; caret-color:var(--cyan); }
#task-input::placeholder { color:var(--text-dim); }
#task-add-btn { background:none; border:1px solid var(--card-border); color:var(--purple2); font-family:var(--font-mono); font-size:8px; letter-spacing:1px; padding:4px 9px; cursor:pointer; border-radius:5px; transition:all 0.2s; }
#task-add-btn:hover { border-color:var(--purple2); }

/* ─── TOAST ──────────────────────────────── */
#axon-toast {
  position:fixed; bottom:76px; left:50%; transform:translateX(-50%);
  background:rgba(10,12,40,0.95); border:1px solid var(--card-border);
  color:var(--cyan); font-family:var(--font-mono); font-size:11px;
  letter-spacing:1px; padding:7px 16px; z-index:999;
  pointer-events:none; text-align:center; max-width:88vw;
  border-radius:18px; transition:opacity 0.3s;
}

/* ─── VOICE BAR ──────────────────────────── */
#voice-bar { display:none; }
#tasks-count { display:none; }
#tasks-bar   { display:none; }
#voice-status-panel { display:none; }