/* QForge — estética de herramienta técnica oscura (ref: TrenchBroom, Blender). */
/* claros */
body[data-theme="sand"] {
  --bg-0: #efe8da; --bg-1: #f7f2e7; --bg-2: #fffdf6; --bg-3: #e4dbc8;
  --line: #cfc4ab; --text: #33291a; --text-dim: #7a6d54;
  --accent: #a8721c; --accent-2: #4d7c3a; --danger: #b0442c;
}
body[data-theme="mist"] {
  --bg-0: #dfe6ee; --bg-1: #ecf1f7; --bg-2: #f9fbfe; --bg-3: #d2dbe6;
  --line: #b7c3d2; --text: #24303f; --text-dim: #5d6b7d;
  --accent: #2f6db3; --accent-2: #2c8a6e; --danger: #b8422f;
}
body[data-theme="sage"] {
  --bg-0: #e2e9df; --bg-1: #eef3ec; --bg-2: #fafcf9; --bg-3: #d4dfd0;
  --line: #b9c8b4; --text: #26301f; --text-dim: #62705a;
  --accent: #4c7a2f; --accent-2: #2c8a55; --danger: #a84a2f;
}
/* oscuros */
body[data-theme="abyss"] {
  --bg-0: #0a0e1a; --bg-1: #101627; --bg-2: #161e33; --bg-3: #0d1120;
  --line: #253052; --text: #d5dcf0; --text-dim: #8391b8;
  --accent: #4f8dff; --accent-2: #37b884; --danger: #e05a4a;
}
body[data-theme="forest"] {
  --bg-0: #0d1410; --bg-1: #131c16; --bg-2: #1a251d; --bg-3: #101812;
  --line: #2a3a2e; --text: #d8e6d8; --text-dim: #8aa38c;
  --accent: #7cc244; --accent-2: #3fae76; --danger: #d8563c;
}
body[data-theme="plum"] {
  --bg-0: #140f1a; --bg-1: #1c1524; --bg-2: #251c31; --bg-3: #170f20;
  --line: #3a2c4e; --text: #e4daf0; --text-dim: #a291bd;
  --accent: #c087f0; --accent-2: #43b58b; --danger: #e05a63;
}

body[data-theme="light"] {
  --bg-0: #e9ebee;
  --bg-1: #f5f6f8;
  --bg-2: #ffffff;
  --bg-3: #dfe3e9;
  --line: #c4cad4;
  --text: #23282f;
  --text-dim: #5c6673;
  --accent: #b07a14;
  --accent-2: #2c8a55;
  --danger: #b8422f;
}
body[data-theme="light"] #settings-menu, body[data-theme="sand"] #settings-menu,
body[data-theme="mist"] #settings-menu, body[data-theme="sage"] #settings-menu { box-shadow: 0 6px 20px rgba(0,0,0,.15); }
body[data-theme="light"] .mode-group, body[data-theme="sand"] .mode-group,
body[data-theme="mist"] .mode-group, body[data-theme="sage"] .mode-group { background: color-mix(in srgb, var(--bg-1) 92%, transparent); }
body[data-theme="light"] .swatch, body[data-theme="sand"] .swatch,
body[data-theme="mist"] .swatch, body[data-theme="sage"] .swatch { text-shadow: 0 0 3px #fff; color: #000; }

:root {
  --bg-0: #0c0e11;      /* fondo más profundo */
  --bg-1: #14171c;      /* paneles */
  --bg-2: #1c2027;      /* controles */
  --bg-3: #262b34;      /* hover */
  --line: #2c323d;
  --text: #c9d1dc;
  --text-dim: #7d8794;
  --accent: #d8a03c;    /* ámbar Quake: lava y latón */
  --accent-2: #8fd3a6;  /* verde wireframe */
  --danger: #d96a5a;
  --mono: "SF Mono", "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  --ui: "Segoe UI", "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex; flex-direction: column;
  background: var(--bg-0); color: var(--text);
  font: 13px/1.45 var(--ui);
  overflow: hidden;
}

/* ---- barra superior ---- */
#topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; background: var(--bg-1);
  border-bottom: 1px solid var(--line);
}
.brand { font: 700 15px var(--mono); color: var(--accent); letter-spacing: 1px; }
.brand-sub { color: var(--text-dim); font-weight: 400; font-size: 10px; margin-left: 6px; letter-spacing: 2px; }
.model-title { font-family: var(--mono); color: var(--text-dim); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.spacer { flex: 1; }
.hint { color: var(--text-dim); font-size: 11px; }

/* ---- menú de ajustes ---- */
#settings-wrap { position: relative; }
#settings-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 4px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.45); min-width: 190px;
}
#settings-menu label { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--text-dim); font-size: 12px; }
#settings-menu select { min-width: 96px; }

/* ---- botones ---- */
.btn {
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 3px;
  padding: 4px 10px; font: inherit; cursor: pointer;
}
.btn:hover:not(:disabled) { background: var(--bg-3); border-color: var(--accent); }
.btn:disabled { opacity: .4; cursor: default; }
.btn:focus-visible, .mode-btn:focus-visible, .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.icon-btn { width: 32px; text-align: center; padding: 4px 0; font-family: var(--mono); }

/* ---- layout central ---- */
#layout { flex: 1; display: flex; min-height: 0; }
#viewport-wrap { display: flex; flex: 1; min-width: 200px; min-height: 0; }
#view-main { position: relative; flex: 1; min-width: 120px; }
#fixed-views {
  position: relative; flex: none; width: 190px; min-width: 120px;
  border-right: 1px solid var(--line); background: var(--bg-0);
}
#fixed-views.hidden { display: none; }
#fv-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fv-label {
  position: absolute; left: 8px; z-index: 2;
  background: rgba(0,0,0,.55); color: #e8eaef; border-radius: 4px;
  font: 600 10px var(--mono); letter-spacing: .08em; padding: 3px 7px; pointer-events: none;
}
body[data-theme] .fv-label { background: rgba(0,0,0,.55); }
.fv-label:nth-of-type(1) { top: calc(0% + 8px); }
.fv-label:nth-of-type(2) { top: calc(25% + 8px); }
.fv-label:nth-of-type(3) { top: calc(50% + 8px); }
.fv-label:nth-of-type(4) { top: calc(75% + 8px); }
#viewport, #viewport canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

#viewport-hud {
  position: absolute; top: 8px; left: 8px; display: flex; gap: 8px; flex-wrap: wrap;
}
.mode-group { display: flex; background: rgba(20,23,28,.85); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.mode-btn {
  background: none; border: none; border-right: 1px solid var(--line);
  color: var(--text-dim); font: 11px var(--mono); padding: 5px 9px; cursor: pointer;
}
.mode-btn:last-child { border-right: none; }
.mode-btn:hover { color: var(--text); background: var(--bg-3); }
.mode-btn.active { color: var(--bg-0); background: var(--accent); }

/* ---- dropzone / estado vacío ---- */
#dropzone, #empty-state {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 4px;
  pointer-events: none;
}
#dropzone { background: rgba(216,160,60,.08); border: 2px dashed var(--accent); z-index: 5; }
.dz-magic { font: 700 28px var(--mono); color: var(--accent); letter-spacing: 4px; opacity: .9; }
#empty-state p { color: var(--text-dim); margin: 4px 0; }
.fineprint { font-size: 11px; color: var(--text-dim); }
.hidden { display: none !important; }

/* ---- splitter ---- */
#splitter { width: 5px; cursor: col-resize; background: var(--bg-1); border-left: 1px solid var(--line); }
#splitter:hover { background: var(--accent); }

/* ---- panel lateral ---- */
#sidebar {
  width: 320px; min-width: 220px; max-width: 60vw;
  background: var(--bg-1); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
}
#tabs { display: flex; border-bottom: 1px solid var(--line); }
.tab {
  flex: 1; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-dim); font: 12px var(--ui); padding: 8px 4px; cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-page { display: none; padding: 10px; overflow-y: auto; flex: 1; min-height: 0; }
.tab-page.active { display: block; }
.tab-page h3 { font-size: 12px; margin: 14px 0 6px; color: var(--text); }

/* ---- info clave-valor ---- */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
.kv dt { color: var(--text-dim); }
.kv dd { margin: 0; font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.kv .warn { color: var(--danger); }

/* ---- listas ---- */
.scroll-list { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 12px; }
.scroll-list li {
  padding: 3px 8px; border-radius: 3px; cursor: pointer;
  display: flex; justify-content: space-between; gap: 8px; white-space: nowrap;
}
.scroll-list li:hover { background: var(--bg-3); }
.scroll-list li.active { background: var(--bg-2); color: var(--accent); }
.scroll-list .idx { color: var(--text-dim); }

/* ---- skins ---- */
.row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
select, input[type=number] {
  background: var(--bg-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 3px; font: 12px var(--mono); padding: 3px 6px;
}
#skin-canvas-wrap { background: var(--bg-0); border: 1px solid var(--line); overflow: auto; max-height: 40vh; }
#skin-canvas-wrap .stack { position: relative; font-size: 0; }
#skin-canvas { display: block; image-rendering: pixelated; width: 100%; }
#palette-canvas { width: 100%; image-rendering: pixelated; border: 1px solid var(--line); }

/* ---- editor de skins ---- */
.toolbar { display: flex; gap: 4px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.tb-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }
#uv-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; image-rendering: auto;
}
.swatch {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 24px; border: 1px solid var(--line); border-radius: 3px;
  font: 10px var(--mono); color: #fff; text-shadow: 0 0 3px #000;
}
.swatch.fb { outline: 2px solid var(--accent); }
input[type=range] { accent-color: var(--accent); }
.btn.active { background: var(--accent); color: var(--bg-0); border-color: var(--accent); }
#skin-canvas-wrap { cursor: crosshair; }

/* ---- línea de tiempo ---- */
#timeline {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; background: var(--bg-1); border-top: 1px solid var(--line);
}
#scrub { flex: 1; accent-color: var(--accent); }
#frame-label { color: var(--text-dim); font-family: var(--mono); font-size: 12px; min-width: 11ch; text-align: center; }
.tl-opt { display: flex; align-items: center; gap: 4px; color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.tl-opt input[type=number] { width: 48px; }
input[type=checkbox] { accent-color: var(--accent); }

/* ---- toast de error ---- */
#toast {
  position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%);
  background: var(--bg-2); border: 1px solid var(--danger); color: var(--text);
  padding: 10px 16px; border-radius: 4px; max-width: 70ch; z-index: 20;
  font-family: var(--mono); font-size: 12px;
}
#toast.ok { border-color: var(--accent-2); }
#toast { white-space: pre-line; text-align: left; }

@media (prefers-reduced-motion: no-preference) {
  #toast { animation: toast-in .15s ease-out; }
  @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 6px); } }
}

/* input oculto pero clicable programáticamente (selector de color de paleta) */
.ghost { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; border: 0; padding: 0; }

/* ---- edición (fase 3) ---- */
.num3 { width: 58px; }
.flag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; margin-top: 8px; }
.flag-grid label { display: flex; gap: 5px; align-items: center; color: var(--text-dim); font-size: 11px; }
.anim-edit li { display: grid; grid-template-columns: 1fr 48px 48px 22px; gap: 4px; align-items: center; }
.anim-edit input { background: var(--bg-2); color: var(--text); border: 1px solid var(--line); border-radius: 3px; font: 11px var(--mono); padding: 2px 4px; width: 100%; box-sizing: border-box; }
.anim-edit input.an-name { color: inherit; }
.anim-edit .an-x { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; }
.anim-edit .an-x:hover { color: var(--danger); }
.scroll-list input.fr-rename { font: inherit; width: 100%; background: var(--bg-0); color: var(--accent); border: 1px solid var(--accent); border-radius: 2px; }

/* herramientas de pintado */
.tool-row { align-items: center; }
.tool-btn { line-height: 0; padding: 5px 9px; }
.tool-btn svg { display: block; }
.lt-swatch { border: 1px solid var(--line); }
.tool-btn.active { background: var(--accent); color: #17130a; border-color: var(--accent); }

/* editor ampliado */
#zoom-overlay {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--bg-0) 94%, black);
}
#zoom-overlay.hidden { display: none; }
.zoom-topbar {
  display: flex; align-items: center; gap: 14px; padding: 8px 12px;
  background: var(--bg-1); border-bottom: 1px solid var(--line);
}
.zoom-body { flex: 1; display: flex; min-height: 0; }
#zoom-side {
  flex: none; width: 224px; overflow-y: auto; padding: 10px 12px;
  background: var(--bg-1); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
#zoom-side h3 { margin: 2px 0; }
#z-palette { width: 100%; image-rendering: pixelated; border: 1px solid var(--line); cursor: pointer; }
#zoom-canvas { flex: 1; min-width: 0; min-height: 0; display: block; cursor: crosshair; touch-action: none; }

/* checkboxes del HUD del viewport */
.hud-checks { padding: 3px 8px; gap: 10px; align-items: center; }
.hud-checks label { display: flex; gap: 4px; align-items: center; color: var(--text-dim); font: 11px var(--mono); cursor: pointer; }
.hud-checks label:hover { color: var(--text); }