/* ════════════════════════════════════════════════════
   01-base.css — Reset, variables, canvas, ctrl-btn
   ════════════════════════════════════════════════════ */

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

:root {
  --bg:     #070707;
  --bg2:    #0e0e0e;
  --bg3:    #161616;
  --bg4:    #1e1e1e;
  --border: #222;
  --text:   #c8c0b8;
  --muted:  #555;
  --accent: #ff3333;
  --green:  #00FF9A;
  --mono:   'Courier New', Courier, monospace;
  --panel-w: 720px;
  --nav-w:   172px;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  /* v19.1: cursor amarillo estilizado · SVG inline 24×24 punta en 4,2 */
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M4 2 L20 12 L13 13 L10 21 L8 13 L4 2 Z' fill='%23FFE500' stroke='%23000' stroke-width='1' stroke-linejoin='round'/></svg>") 4 2, default;
}

/* v19.1: variante "pointer" sobre elementos clicables */
button, a, [role="button"], input[type="checkbox"], input[type="range"],
.iso-mode-btn, [data-tab] {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'><path d='M9 2 L9 14 L6 11 L5 13 L11 21 L13 21 L17 17 L17 11 L16 10 L14 11 L14 8 L13 7 L11 8 L11 5 L10 4 L9 2 Z' fill='%23FFE500' stroke='%23000' stroke-width='1' stroke-linejoin='round'/></svg>") 10 4, pointer;
}

/* v18 A1: ocultar cursor en modo galería tras inactividad */
body.cursor-hidden,
body.cursor-hidden *,
body.cursor-hidden *::before,
body.cursor-hidden *::after { cursor: none !important; }

canvas { display: block; position: fixed; inset: 0; }

/* v18 C10: indicador LIVE + última actualización (esquina inf. izq.) */
#live-indicator {
  position: fixed;
  bottom: 16px; left: 18px;
  display: flex; align-items: center; gap: 8px;
  font: 10px/1 var(--mono); letter-spacing: .14em;
  color: rgba(180,160,140,0.40);
  user-select: none; pointer-events: none;
  z-index: 10;
  transition: opacity .4s ease;
}
#live-indicator.cursor-hidden-mode { opacity: 0.18; }
#live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50%      { opacity: 1.0; transform: scale(1.05); }
}
#live-indicator.offline #live-dot {
  background: #666; box-shadow: none; animation: none;
}
#live-indicator.offline { color: rgba(255,80,80,0.55); }

/* v18 C9: heartbeat sutil del canvas al recibir datos frescos */
@keyframes canvas-heartbeat {
  0%   { filter: brightness(1.0); }
  35%  { filter: brightness(1.18); }
  100% { filter: brightness(1.0); }
}
canvas.heartbeat { animation: canvas-heartbeat .9s ease-out; }

#info {
  position: fixed;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  color: rgba(180,160,140,0.30);
  font: 11px/1 var(--mono);
  letter-spacing: .12em;
  pointer-events: none;
  user-select: none;
  z-index: 10;
}

/* v19.1: botón EYE PILLS — visible en modo ventana, discreto en modo expo */
#ctrl-btn {
  position: fixed;
  top: 18px; right: 18px;
  background: none;
  border: 1px solid #555;
  color: #999;
  font: 10px/1 var(--mono);
  letter-spacing: .18em;
  padding: 8px 20px;
  cursor: pointer;
  border-radius: 2px;
  transition: color .2s, border-color .2s, background .2s, padding .2s, font-size .2s;
  z-index: 60;
}
#ctrl-btn:hover { color: #fff; border-color: #999; }
#ctrl-btn.open  { color: var(--green); border-color: var(--green); }

/* v19.1: en modo expo el botón se reduce a una × discreta pero
   SIEMPRE visible (galerista la encuentra; visitantes apenas la notan) */
body.expo-on #ctrl-btn {
  border-color: transparent;
  background: transparent;
  color: rgba(200,200,200,0.55);     /* gris claro 55% — visible a distancia */
  font-size: 20px;
  letter-spacing: 0;
  padding: 6px 11px;
  font-weight: 300;
  opacity: 1 !important;             /* nunca desaparece por cursor-hidden */
}
body.expo-on #ctrl-btn:hover {
  color: #fff;
  background: rgba(0,0,0,0.4);
}

/* ── Toolbar modos de visualización (v14, v18 movido al panel) ── */
/*    Ahora vive dentro del nav lateral del panel EYE PILLS,        */
/*    no sobre el canvas. Fila horizontal compacta de 4 botones.     */
#iso-mode-toolbar {
  display: flex; gap: 4px;
  padding: 4px 10px 6px;
}
.iso-mode-btn {
  background: none;
  border: 1px solid #333;
  color: #555;
  font: 10px/1 var(--mono);
  letter-spacing: .12em;
  padding: 6px 0;
  cursor: pointer;
  border-radius: 2px;
  transition: color .2s, border-color .2s, background .2s;
  flex: 1;
  min-width: 0;
}
.iso-mode-btn:hover  { color: #ccc; border-color: #555; }
.iso-mode-btn.active { color: #fff; border-color: var(--green); background: rgba(0,255,154,0.08); }