@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2'); }

:root {
  --bg: #020617;
  --surface: #0F172A;
  --border: #1E293B;
  --text: #F8FAFC;
  --muted: #94A3B8;
  --brand: #1AABE2;
  --glass: rgba(15, 23, 42, 0.72);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 400 13px/1.45 Inter, system-ui, sans-serif; overflow: hidden; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
[hidden] { display: none !important; }

#stage { position: fixed; inset: 0; overflow: hidden; user-select: none; -webkit-user-select: none; }
#gl, #overlay { position: absolute; inset: 0; transition: opacity 125ms ease; }
#gl canvas { display: block; touch-action: pan-y; cursor: grab; }
#gl canvas:active { cursor: grabbing; }
#gl.pointer canvas { cursor: pointer; }
#overlay { pointer-events: none; }
#stage.is-fading #gl, #stage.is-fading #overlay { opacity: 0; }

.glass { background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--border); }

.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; transition: background 150ms ease, border-color 150ms ease; }
.icon-btn:hover { background: rgba(26, 171, 226, 0.14); }
.icon-btn:focus-visible, .chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.icon-btn.glass { border-color: var(--border); }

#legend { position: absolute; top: calc(48px + var(--safe-top, 0px)); left: 12px; display: flex; flex-direction: column; gap: 6px; max-width: calc(100% - 24px); }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; transition: opacity 150ms ease; }
.chip.off { opacity: 0.45; }
.chip .count { color: var(--muted); font-size: 11px; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

#hint { position: absolute; left: 50%; top: calc(14px + var(--safe-top, 0px)); transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--border); font-size: 12px; opacity: 0; pointer-events: none; transition: opacity 250ms ease; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
#hint.show { opacity: 1; }

/* Botón "Explorar" (en todos los dispositivos). Táctil: libera el dedo en cualquier dirección. Ratón: la rueda hace zoom sin Ctrl. En
   ambos casos la página no hace scroll hasta pulsar "Salir". Abajo y CENTRADO a propósito: a la izquierda la máscara del contenedor
   de Framer lo desvanecería, a la derecha lo taparía el chat, y arriba va la ficha. Sube si hay barra de escenarios. */
#explore { position: absolute; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 3;
           display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; border-radius: 999px;
           color: var(--text); font: 600 14px/1 Inter, system-ui, sans-serif; cursor: pointer; }
#stage:not(.sin-selector) #explore { bottom: 76px; }
#explore[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #020617; }
#explore:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#stage.exploring #gl canvas { touch-action: none; } /* en modo Explorar el visor recoge el dedo en cualquier dirección */

#selector { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(680px, calc(100% - 24px)); min-height: 56px; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; }
.sel-text { flex: 1; min-width: 0; padding: 0 4px; }
.sel-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-desc { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-counter { color: var(--muted); font-size: 12px; padding: 0 4px; }

#ficha { position: absolute; left: 12px; top: calc(12px + var(--safe-top, 0px)); width: 300px; max-height: calc(100% - 96px - var(--safe-top, 0px)); overflow: auto; padding: 14px; border-radius: 12px; background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--border); }
.ficha-head { display: flex; align-items: center; gap: 8px; }
.ficha-class { flex: 1; font-weight: 600; font-size: 14px; }
.ficha-id { color: var(--muted); font-size: 12px; margin: 2px 0 10px 16px; }
#ficha dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; }
#ficha dt { color: var(--muted); font-size: 12px; }
#ficha dd { margin: 0; text-align: right; font-size: 14px; display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.badge { padding: 2px 10px; border: 1px solid; border-radius: 999px; font-weight: 600; font-size: 12px; }
.sev { display: inline-flex; gap: 3px; }
.sev i { width: 14px; height: 6px; border-radius: 2px; background: var(--border); display: block; }

#message { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; color: var(--muted); background: var(--bg); font-size: 14px; }

/* Modo anotación (solo local) */
#annotate-panel { position: absolute; top: calc(12px + var(--safe-top, 0px)); right: 12px; width: 250px; padding: 12px; border-radius: 12px; font-size: 12px; z-index: 5; }
#annotate-panel h2 { margin: 0 0 6px; font-size: 13px; }
#annotate-panel p { margin: 4px 0; color: var(--muted); }
#annotate-panel .row { display: flex; justify-content: space-between; gap: 8px; }
#annotate-status.err { color: #F87171; }
#rubber { position: absolute; border: 1.5px dashed var(--brand); background: rgba(26, 171, 226, 0.12); pointer-events: none; z-index: 4; }
#annotate-dialog { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); padding: 16px; width: min(340px, calc(100% - 32px)); }
#annotate-dialog::backdrop { background: rgba(2, 6, 23, 0.6); }
#annotate-dialog label { display: block; margin: 8px 0 3px; color: var(--muted); font-size: 12px; }
#annotate-dialog select, #annotate-dialog input { width: 100%; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; }
#annotate-dialog .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
#annotate-dialog button { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; cursor: pointer; }
#annotate-dialog button.primary { background: var(--brand); border-color: var(--brand); color: #020617; font-weight: 600; }
#annotate-dialog button.danger { margin-right: auto; color: #F87171; }
#annotate-errors { color: #F87171; font-size: 12px; margin-top: 8px; white-space: pre-line; }

@media (max-width: 640px) {
  /* Ficha compacta arriba a la derecha (2026-10-05). Embebido en Framer, el contenedor del Embed lleva una máscara
     linear-gradient(90deg, transparente 0%, opaco 60%) que apaga el lado izquierdo y dejaba la ficha inferior casi invisible; abajo
     además chocaban el banner de cookies y el botón del chat. Arriba, a la derecha, la máscara casi no la afecta y queda libre de
     ambos. Reserva por sí misma el hueco de la cabecera fija (mín. 84 px) aunque la URL no lleve ?safeTop. */
  #ficha { top: calc(max(var(--safe-top, 0px), 84px) + 8px) !important; left: auto !important; right: 8px; bottom: auto; width: 58%; min-width: 210px;
           max-height: 40%; padding: 10px; background: rgba(2, 6, 23, 0.94); }
  #ficha dl { gap: 5px 10px; }
  #ficha dd { font-size: 13px; }
  .ficha-id { margin-bottom: 6px; }
  #legend { flex-direction: row; flex-wrap: wrap; }
  #selector { bottom: 8px; width: calc(100% - 16px); }
  .sel-desc { display: none; }
  #annotate-panel { right: 12px; top: auto; bottom: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; }
}