/* ══════════════════════════════════════════════════
   AR Viewer — Copper Giant / The Giant Forge
   negro #000 · rojo #f91117 · cobre #d4772c · Inter + JetBrains Mono
══════════════════════════════════════════════════ */
:root {
  --bg:         #000000;
  --bg-card:    #0a0a0a;
  --bg-surface: #141414;
  --bg-hover:   #1a1a1a;

  --red:        #f91117;
  --red-dim:    rgba(249,17,23,.12);
  --red-glow:   rgba(249,17,23,.28);

  --copper:     #d4772c;
  --copper-lt:  #e8945a;
  --copper-dk:  #b87333;
  --copper-dim: rgba(212,119,44,.12);

  --border:     #27272a;
  --border-hov: #3f3f46;
  --text-1:     #ffffff;
  --text-2:     #a1a1aa;
  --text-3:     #52525b;
  --text-4:     #3f3f46;
  --green:      #10b981;
  --green-dim:  rgba(16,185,129,.12);

  --r:     8px;
  --font:  'Inter', system-ui, sans-serif;
  --mono:  'JetBrains Mono','Fira Code',monospace;

  --hh:  52px;
  --fh:  36px;
  --sw:  268px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;font-size:14px}
body{
  font-family:var(--font);background:var(--bg);color:var(--text-1);
  height:100dvh;display:flex;flex-direction:column;overflow:hidden;
}
::-webkit-scrollbar       {width:4px}
::-webkit-scrollbar-track {background:var(--bg)}
::-webkit-scrollbar-thumb {background:var(--border-hov);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--copper-dk)}

/* ══ HEADER ═══════════════════════════════════════ */
.hub-header{
  height:var(--hh);min-height:var(--hh);
  background:rgba(0,0,0,.92);border-bottom:1px solid rgba(39,39,42,.6);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;gap:16px;z-index:50;flex-shrink:0;
}
.header-left{display:flex;align-items:center;gap:12px}
.logo-link{display:flex;align-items:center;text-decoration:none}
.cg-logo{height:28px;width:auto;object-fit:contain}
.logo-fallback{display:flex;align-items:center;gap:6px}
.logo-mark   {font-size:1.1rem;color:var(--red)}
.logo-text-fb{font-size:.65rem;font-weight:900;letter-spacing:.22em;text-transform:uppercase}
.header-divider{width:1px;height:24px;background:var(--border);flex-shrink:0}
.header-tool-id{display:flex;flex-direction:column}
.tool-name{font:.68rem/1.2 var(--font);font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.tool-sub {font:.56rem/1.2 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}

.header-center{display:flex;align-items:center}
.mode-tabs{
  display:flex;align-items:center;gap:2px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:99px;padding:4px;
}
.tab{
  padding:5px 16px;border-radius:99px;
  font:.62rem/1 var(--font);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:none;border:none;color:var(--text-3);cursor:pointer;
  transition:all .18s ease;white-space:nowrap;
}
.tab:hover{color:var(--text-1);background:var(--bg-hover)}
.tab.active{background:var(--red);color:#fff;box-shadow:0 0 14px var(--red-glow)}

.header-right{display:flex;align-items:center;gap:10px}
.live-pill{
  display:flex;align-items:center;gap:5px;
  background:var(--green-dim);border:1px solid rgba(16,185,129,.2);
  border-radius:99px;padding:4px 10px;
}
.live-dot{
  width:5px;height:5px;background:var(--green);border-radius:50%;
  animation:pulse-dot 2s infinite;
}
@keyframes pulse-dot{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(16,185,129,.4)}
  50%{opacity:.7;box-shadow:0 0 0 4px rgba(16,185,129,0)}
}
.live-label{font:.58rem/1 var(--mono);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.hdr-btn{
  display:flex;align-items:center;gap:5px;
  padding:5px 12px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r);font:.62rem/1 var(--font);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);
  cursor:pointer;transition:all .18s ease;
}
.hdr-btn:hover{border-color:var(--border-hov);color:var(--text-1)}

/* ══ SHELL & CANVAS ════════════════════════════════ */
.viewer-shell{flex:1;display:flex;min-height:0;overflow:hidden}
.canvas-wrap{flex:1;position:relative;overflow:hidden;background:#000}
.view-layer{position:absolute;inset:0}
.view-layer.hidden{display:none}

/* model-viewer sin chrome */
#primary-viewer,
#compare-viewer{
  width:100%;height:100%;background:#000!important;
  --progress-bar-color:transparent;
}

/* ══ HUD ═══════════════════════════════════════════ */
.hud{
  position:absolute;inset:0;pointer-events:none;
  display:flex;flex-direction:column;justify-content:space-between;padding:14px 16px;
}
.hud-tl{display:flex;flex-direction:column;gap:3px}
.hud-tag{font:.56rem/1 var(--mono);font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--copper)}
.hud-sub{font:.58rem/1.4 var(--mono);color:var(--text-3);letter-spacing:.04em;margin-top:2px}
.hud-tr{display:flex;justify-content:flex-end;align-items:flex-start}
.hud-badge{
  font:.52rem/1 var(--mono);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);border:1px solid rgba(249,17,23,.3);background:var(--red-dim);
  padding:3px 8px;border-radius:4px;
}
.hud-bot{display:flex;justify-content:center}
.hud-hint{
  font:.56rem/1 var(--mono);color:var(--text-4);letter-spacing:.06em;
  background:rgba(0,0,0,.7);padding:4px 12px;border-radius:99px;border:1px solid var(--border);
}

/* Scale bar HUD (compare) */
.scale-bar-hud{
  display:flex;align-items:center;gap:12px;
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  background:rgba(10,10,10,.9);backdrop-filter:blur(12px);
  border:1px solid var(--border);border-radius:var(--r);
  padding:7px 18px;pointer-events:none;
}
.sblabel{display:flex;flex-direction:column;gap:2px;align-items:center}
.sbt{font:.52rem/1 var(--mono);font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.sblabel.mine   .sbt{color:var(--copper)}
.sblabel.struct .sbt{color:#6090B0}
.sbv {font:.68rem/1 var(--mono);font-weight:700;color:var(--text-1)}
.sbvs{font:.52rem/1 var(--mono);font-weight:800;letter-spacing:.2em;color:var(--text-4)}

/* Compare loading overlay */
.cmp-loading{
  position:absolute;inset:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);
  color:var(--text-2);font:.68rem/1 var(--font);
  transition:opacity .3s ease;
}
.cmp-loading.hidden{display:none}
.cmp-spinner{
  width:32px;height:32px;
  border:2px solid var(--border);border-top-color:var(--copper);
  border-radius:50%;animation:spin .7s linear infinite;
}

/* ══ model-viewer AR BUTTON ════════════════════════ */
.mv-ar-btn{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;
  padding:12px 28px;background:var(--red);border:none;border-radius:99px;
  font:.72rem/1 var(--font);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;cursor:pointer;
  box-shadow:0 0 24px var(--red-glow),0 4px 16px rgba(0,0,0,.6);
  animation:float-btn 3s ease-in-out infinite;
}
.mv-ar-btn:hover{background:#ff2228;box-shadow:0 0 36px var(--red-glow),0 6px 24px rgba(0,0,0,.7)}
@keyframes float-btn{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%     {transform:translateX(-50%) translateY(-4px)}
}

/* ══ SIDEBAR ═══════════════════════════════════════ */
.sidebar{
  width:var(--sw);min-width:var(--sw);
  background:var(--bg-card);border-left:1px solid var(--border);
  display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;
}
.panel{padding:14px 13px;display:flex;flex-direction:column;gap:9px}
.panel.hidden{display:none}
.panel-hdr{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.panel-icon {font-size:.9rem;width:22px;text-align:center}
.panel-title{font:.63rem/1 var(--font);font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.panel-sub  {font:.67rem/1.55 var(--font);color:var(--text-3)}
.panel-sep  {height:1px;background:var(--border);margin:1px 0}
.panel-note {font:.6rem/1.55 var(--font);color:var(--text-3)}
.panel-note strong{color:var(--text-2)}

/* Stat list */
.stat-list{display:flex;flex-direction:column;gap:1px}
.srow{display:flex;align-items:center;justify-content:space-between;padding:5px 7px;border-radius:6px;transition:background .12s}
.srow:hover{background:var(--bg-hover)}
.sk{font:.62rem/1 var(--font);font-weight:500;color:var(--text-3)}
.sv{font:.64rem/1 var(--mono);font-weight:700;color:var(--text-2)}
.sv.red   {color:var(--red)}
.sv.copper{color:var(--copper)}
.sv.green {color:var(--green)}

.model-note{
  display:flex;align-items:flex-start;gap:6px;
  background:var(--copper-dim);border:1px solid rgba(212,119,44,.2);
  border-radius:6px;padding:8px 10px;
  font:.59rem/1.55 var(--font);color:var(--copper-lt);
}
.note-icon{flex-shrink:0;font-size:.8rem}
.model-note code{font-family:var(--mono);font-size:.57rem;opacity:.85}

/* Buttons */
.action-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 12px;border-radius:var(--r);
  font:.62rem/1 var(--font);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border:none;cursor:pointer;width:100%;transition:all .2s ease;
}
.action-btn.primary{background:var(--red);color:#fff}
.action-btn.primary:hover{background:#ff2228;box-shadow:0 0 18px var(--red-glow)}
.action-btn.secondary{background:var(--bg-hover);color:var(--text-2);border:1px solid var(--border)}
.action-btn.secondary:hover{border-color:var(--border-hov);color:var(--text-1)}
.mt8{margin-top:8px}

/* AR main button */
.ar-main-btn{
  background:var(--red);color:#fff;
  position:relative;overflow:hidden;
  padding:13px 16px;font-size:.7rem;
  box-shadow:0 0 20px var(--red-glow);
  flex-direction:column;gap:4px;
}
.ar-main-btn:hover{background:#ff2228;box-shadow:0 0 32px var(--red-glow);transform:translateY(-1px)}
.ar-pulse{
  position:absolute;inset:0;border-radius:var(--r);
  box-shadow:inset 0 0 0 2px var(--red);
  animation:pulse-ring 2.5s ease-out infinite;pointer-events:none;
}
@keyframes pulse-ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}

/* AR steps */
.ar-steps-row{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap}
.ar-step{display:flex;flex-direction:column;align-items:center;gap:3px}
.ar-step-n{
  width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  background:var(--red);border-radius:50%;font:.6rem/1 var(--mono);font-weight:700;color:#fff;
}
.ar-step span:last-child{font:.54rem/1 var(--font);color:var(--text-3);text-align:center}
.ar-arrow{font:.8rem/1;color:var(--text-4)}

/* ── AR COMPARE SECTION (chips) ──────────────────── */
.ar-compare-section{display:flex;flex-direction:column;gap:7px}
.ar-compare-label{
  font:.56rem/1 var(--mono);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-3);
}
.ar-struct-chips{
  display:flex;flex-wrap:wrap;gap:5px;
}
.ar-struct-chip{
  padding:5px 10px;border-radius:99px;
  font:.6rem/1 var(--font);font-weight:600;letter-spacing:.06em;
  background:var(--bg-hover);border:1px solid var(--border);
  color:var(--text-3);cursor:pointer;
  transition:all .15s ease;white-space:nowrap;
}
.ar-struct-chip:hover{border-color:var(--border-hov);color:var(--text-1)}
.ar-struct-chip.active{
  background:var(--red-dim);border-color:var(--red);
  color:var(--text-1);box-shadow:0 0 8px var(--red-glow);
}
/* Loading de los chips */
.ar-chip-loading{
  display:flex;align-items:center;gap:7px;
  font:.6rem/1 var(--font);color:var(--copper);padding:4px 0;
}
.ar-chip-loading.hidden{display:none}
.ar-chip-spinner{
  width:14px;height:14px;
  border:2px solid var(--border);border-top-color:var(--copper);
  border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0;
}

/* AR device check */
.ar-device-check{display:flex;flex-direction:column;gap:4px}
.ar-check-row{
  display:flex;align-items:center;gap:8px;
  padding:5px 8px;border-radius:6px;background:var(--bg-hover);border:1px solid var(--border);
}
.check-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--text-4)}
.ar-check-row.supported  .check-dot{background:var(--green);box-shadow:0 0 6px rgba(16,185,129,.5)}
.ar-check-row.available  .check-dot{background:var(--copper)}
.ar-check-row.unavailable.check-dot{background:var(--text-4)}
.check-label{font:.59rem/1.4 var(--font);color:var(--text-3)}
.ar-check-row.supported .check-label{color:var(--text-1)}
.ar-check-row.available .check-label{color:var(--text-2)}

/* Struct list (compare panel) */
.struct-list{display:flex;flex-direction:column;gap:3px;max-height:280px;overflow-y:auto}
.struct-row{
  display:flex;align-items:center;gap:9px;
  padding:6px 8px;border-radius:6px;
  border:1px solid transparent;cursor:pointer;
  transition:all .15s ease;background:none;
  text-align:left;color:var(--text-1);font-family:var(--font);width:100%;
}
.struct-row:hover{background:var(--bg-hover);border-color:var(--border)}
.struct-row.active{background:var(--red-dim);border-color:var(--red);box-shadow:0 0 10px var(--red-glow)}
.struct-emoji{font-size:.88rem;width:20px;text-align:center;flex-shrink:0}
.struct-info {flex:1;min-width:0}
.struct-name {font:.65rem/1.2 var(--font);font-weight:700}
.struct-h    {font:.57rem/1 var(--mono);color:var(--text-3);margin-top:1px}
.struct-bars {width:26px;display:flex;gap:3px;align-items:flex-end;height:26px;flex-shrink:0}
.mini-bar    {width:8px;border-radius:2px 2px 0 0;min-height:2px}
.bar-mine    {background:var(--copper)}
.bar-struct  {background:#4080A0}

/* Fact box */
.fact-box{background:var(--bg-hover);border:1px solid var(--border);border-radius:var(--r);padding:9px;display:flex;flex-direction:column;gap:5px}
.fact-head{display:flex;align-items:center;gap:6px}
.fact-emoji{font-size:1rem}
.fact-name {font:.63rem/1.3 var(--font);font-weight:700}
.fact-desc {font:.6rem/1.55 var(--font);color:var(--text-3)}
.fact-chip{
  font:.57rem/1 var(--mono);font-weight:700;color:var(--copper);
  background:var(--copper-dim);border:1px solid rgba(212,119,44,.2);
  padding:3px 8px;border-radius:4px;align-self:flex-start;
}
.fact-chip:empty{display:none}

/* ══ FOOTER ════════════════════════════════════════ */
.hub-footer{
  height:var(--fh);min-height:var(--fh);
  border-top:1px solid rgba(39,39,42,.3);
  padding:0 20px;display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.hub-footer span{font:.56rem/1 var(--mono);color:var(--text-4);text-transform:uppercase;letter-spacing:.14em}

/* ══ MODALS ════════════════════════════════════════ */
.fullscreen-modal{position:fixed;inset:0;z-index:9000;background:#000;display:flex;align-items:center;justify-content:center}
.fullscreen-modal.hidden{display:none}
.modal-close{
  position:absolute;top:16px;right:16px;
  padding:6px 14px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r);color:var(--text-2);
  font:.62rem/1 var(--font);font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
}
.ar-launching{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--text-2)}
.ar-spinner{width:36px;height:36px;border:2px solid var(--border);border-top-color:var(--red);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ar-launching p{font:.75rem/1 var(--font);font-weight:500}
.ar-hint{color:var(--text-3)!important;font-size:.62rem!important}

.qr-overlay{position:fixed;inset:0;z-index:8000;background:rgba(0,0,0,.85);backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center}
.qr-overlay.hidden{display:none}
.qr-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:24px;width:300px;display:flex;flex-direction:column;gap:12px}
.qr-card-hdr{display:flex;align-items:center;justify-content:space-between}
.qr-title    {font:.68rem/1 var(--font);font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.qr-close-btn{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:.8rem;padding:2px 6px}
.qr-close-btn:hover{color:var(--text-1)}
.qr-sub      {font:.62rem/1.5 var(--font);color:var(--text-3)}
.qr-canvas-wrap{display:flex;justify-content:center}
.qr-canvas-wrap canvas,
.qr-canvas-wrap img{border-radius:8px;border:3px solid var(--bg-card);box-shadow:0 0 24px var(--copper-dim)}
.qr-url{font:.56rem/1 var(--mono);color:var(--text-4);text-align:center;word-break:break-all}

/* ── MODO CARD (MindAR) ──────────────────────────── */
.card-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.scan-frame {
  width: 200px;
  height: 200px;
  border: 2px solid rgba(212,119,44,0.5);
  border-radius: 20px;
  position: relative;
  box-shadow: 0 0 0 4000px rgba(0,0,0,0.4);
  margin-bottom: 20px;
}
.scan-frame::before, .scan-frame::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 3px solid var(--copper);
}
.scan-frame::before { top: -3px; left: -3px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.scan-frame::after { bottom: -3px; right: -3px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }

.card-overlay p {
  color: #fff;
  font: .65rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.6);
  padding: 8px 16px;
  border-radius: 4px;
}

.card-status-box {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px;
}
.status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font: .6rem/1 var(--mono);
  text-transform: uppercase;
}
.status-indicator.detected {
  color: var(--green);
}
.status-indicator.detected .status-dot {
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}

/* ══ RESPONSIVE ════════════════════════════════════ */
@media(max-width:768px){
  :root{--sw:0}
  .sidebar{display:none}
  .hub-header{height:auto; flex-wrap:wrap; padding:10px; gap:10px}
  .header-center{order:3; width:100%; display:flex; justify-content:center}
  .header-right{order:2}
  .header-left{order:1}
  .mode-tabs{width:100%; justify-content:center}
  .tab{padding:6px 10px; font-size:.55rem}
  
  body{overflow:auto}
  .viewer-shell{flex-direction:column;height:auto}
  .canvas-wrap{height:calc(100dvh - 120px)}
  .mv-ar-btn{bottom:16px;padding:11px 22px;font-size:.7rem}
}