/* ============================================================
   PureAnalyt · Simulator extras
   Loaded after styles.css. Contains:
     - Cookie gate modal (blocks until user decides)
     - UI-5 · Help tooltips ("?" pills near technical terms)
     - UI-7 · Microinteractions (ripple, loading, fade-in)
   ============================================================ */

/* ============================================================
   COOKIE GATE — centered modal, blocks simulator until decision
   ============================================================ */
.pa-gate{
  position:fixed;inset:0;z-index:200;
  background:
    radial-gradient(800px 500px at 50% 30%, rgba(84,121,255,.06), transparent 70%),
    radial-gradient(600px 400px at 50% 80%, rgba(155,115,255,.05), transparent 70%),
    rgba(11,14,21,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}
.pa-gate.open{opacity:1;pointer-events:auto}

.pa-gate-modal{
  position:relative;
  width:min(560px, 100%);
  background:linear-gradient(180deg, var(--panel-2, #181d28), var(--panel-3, #1f2533));
  border:1px solid var(--line-2, #2a3041);border-radius:14px;
  padding:36px 36px 28px;
  box-shadow:
    0 24px 60px -20px rgba(0,0,0,.75),
    0 0 0 1px rgba(84,121,255,.08) inset,
    0 1px 0 rgba(255,255,255,.04) inset;
  transform:translateY(14px) scale(.985);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
}
.pa-gate.open .pa-gate-modal{transform:translateY(0) scale(1)}

.pa-gate-icon{
  display:flex;justify-content:center;margin-bottom:18px;
  filter:drop-shadow(0 0 16px rgba(84,121,255,.25));
}
.pa-gate-title{
  font-family:'Schibsted Grotesk',system-ui,sans-serif;font-weight:700;
  font-size:24px;line-height:1.2;letter-spacing:-.5px;
  text-align:center;color:var(--ink, #e9edf7);
  margin:0 0 12px;
}
.pa-gate-lead{
  font-size:13px;color:var(--ink-2, #c0c8da);line-height:1.65;
  text-align:center;margin:0 0 22px;
}
.pa-gate-lead b{color:var(--accent, #5479ff);font-weight:500}

.pa-gate-prefs{
  display:flex;flex-direction:column;gap:10px;margin-bottom:24px;
}
.pa-gate-pref{
  display:flex;gap:14px;align-items:flex-start;
  padding:12px 14px;border-radius:8px;
  background:rgba(255,255,255,.018);
  border:1px solid rgba(255,255,255,.04);
}
.pa-gate-pref-check{
  flex:none;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg, var(--accent, #5479ff), #9b73ff);
  color:#0b0e15;font-family:'Schibsted Grotesk',system-ui,sans-serif;font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(84,121,255,.3);
}
.pa-gate-pref-check-mute{
  background:#2a3041;color:var(--muted, #8590a6);
  box-shadow:none;
}
.pa-gate-pref-title{
  font-family:'Schibsted Grotesk',system-ui,sans-serif;font-weight:600;font-size:14px;
  color:var(--ink, #e9edf7);margin-bottom:3px;
}
.pa-gate-pref-desc{
  font-size:11.5px;color:var(--muted, #8590a6);line-height:1.55;
}

.pa-gate-actions{
  display:flex;gap:10px;
}
.pa-gate-btn{
  flex:1;padding:13px 18px;border-radius:7px;
  font-family:'Hanken Grotesk',system-ui,sans-serif;font-weight:600;
  font-size:13px;letter-spacing:0.3px;
  cursor:pointer;border:none;transition:all .18s;
  position:relative;overflow:hidden;
}
.pa-gate-btn-accept{
  background:linear-gradient(135deg, var(--accent, #5479ff), #9b73ff);
  color:#0b0e15;
  box-shadow:0 4px 14px -4px rgba(84,121,255,.4);
}
.pa-gate-btn-accept:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 20px -4px rgba(84,121,255,.55);
}
.pa-gate-btn-reject{
  background:rgba(255,255,255,.04);
  color:var(--ink-2, #c0c8da);
  border:1px solid var(--line-2, #2a3041);
}
.pa-gate-btn-reject:hover{
  background:rgba(255,255,255,.07);
  color:var(--ink, #e9edf7);
}
.pa-gate-foot{
  margin-top:18px;text-align:center;font-size:10px;
  color:var(--muted-2, #5c6678);letter-spacing:1.4px;text-transform:uppercase;
}
.pa-gate-foot a{
  color:var(--muted, #8590a6);text-decoration:none;
  transition:color .15s;margin:0 4px;
}
.pa-gate-foot a:hover{color:var(--accent, #5479ff)}

@media (max-width:560px){
  .pa-gate-modal{padding:26px 22px 22px}
  .pa-gate-title{font-size:20px}
  .pa-gate-actions{flex-direction:column-reverse}
  .pa-gate-btn{padding:14px 16px}
}

/* ============================================================
   UI-5 · HELP TOOLTIPS — small "?" pill that explains a term
   Use: <span class="help" data-help="Definition...">?</span>
   ============================================================ */
.help{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;
  background:rgba(155,115,255,.08);
  border:1px solid rgba(155,115,255,.25);
  color:var(--accent-2, #9b73ff);
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;
  margin-left:5px;cursor:help;
  transition:all .15s;
  position:relative;
  vertical-align:middle;
  flex:none;
}
.help:hover{
  background:rgba(155,115,255,.15);
  border-color:rgba(155,115,255,.45);
  color:#c8b8ff;
  transform:scale(1.08);
}
.help::after{
  content:attr(data-help);
  position:absolute;
  bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  white-space:normal;width:max-content;max-width:280px;
  padding:10px 14px;
  background:linear-gradient(180deg, #181d28, #12161f);
  border:1px solid var(--line-2, #2a3041);border-radius:6px;
  color:var(--ink, #e9edf7);
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:400;
  letter-spacing:.2px;line-height:1.5;text-align:left;text-transform:none;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .2s ease .05s, visibility 0s .25s;
  z-index:50;
}
.help::before{
  content:'';position:absolute;
  bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:#181d28;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease .05s;
  z-index:51;
}
.help:hover::after,.help:focus::after,
.help:hover::before,.help:focus::before{
  opacity:1;visibility:visible;transition-delay:0s;
}
/* When tooltip would clip the left edge, anchor right */
.help.help-right::after{left:auto;right:0;transform:none}
.help.help-right::before{left:auto;right:6px;transform:none}

/* ============================================================
   UI-7 · MICROINTERACTIONS
   ============================================================ */

/* Ripple effect for buttons — set position:relative on .btn already.
   The ripple is a centered radial expand on click. */
.btn{position:relative;overflow:hidden}
.btn::before{
  content:'';position:absolute;
  top:50%;left:50%;
  width:0;height:0;border-radius:50%;
  background:rgba(255,255,255,.18);
  transform:translate(-50%,-50%);
  transition:width .45s ease, height .45s ease, opacity .45s ease;
  opacity:0;pointer-events:none;
}
.btn:active::before{
  width:260px;height:260px;opacity:1;
  transition:width 0s, height 0s, opacity 0s;
}

/* Loading state for the inject button while a run is in progress */
.btn.loading{
  cursor:wait;
  background:linear-gradient(135deg, #5479ff, #3a5cf0);
}
.btn.loading::after{
  content:'';
  display:inline-block;
  width:11px;height:11px;
  margin-left:8px;vertical-align:-1px;
  border:2px solid rgba(0,0,0,.25);
  border-top-color:#0b0e15;
  border-radius:50%;
  animation:spin 0.7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Fade-in for content blocks that appear after an event (results, etc.) */
@keyframes pa-fade-in{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}
.pa-fade-in{animation:pa-fade-in .35s ease-out both}

/* Results-table row staggered fade-in (applied dynamically) */
.results-table tbody tr.pa-fade-in:nth-child(1){animation-delay:0.00s}
.results-table tbody tr.pa-fade-in:nth-child(2){animation-delay:0.05s}
.results-table tbody tr.pa-fade-in:nth-child(3){animation-delay:0.10s}
.results-table tbody tr.pa-fade-in:nth-child(4){animation-delay:0.15s}
.results-table tbody tr.pa-fade-in:nth-child(5){animation-delay:0.20s}
.results-table tbody tr.pa-fade-in:nth-child(6){animation-delay:0.25s}
.results-table tbody tr.pa-fade-in:nth-child(7){animation-delay:0.30s}
.results-table tbody tr.pa-fade-in:nth-child(8){animation-delay:0.35s}
.results-table tbody tr.pa-fade-in:nth-child(n+9){animation-delay:0.40s}

/* Skeleton "shimmer" for chromatogram during compute (placeholder for
   the brief moment between Inject click and first paint) */
.chromo-skeleton{
  background:linear-gradient(90deg,
    rgba(255,255,255,.02) 0%,
    rgba(255,255,255,.04) 50%,
    rgba(255,255,255,.02) 100%);
  background-size:200% 100%;
  animation:shimmer 1.6s ease-in-out infinite;
  border-radius:4px;
}
@keyframes shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* Disabled state on the inject button when system is off — subtle pulse
   to invite the user to power on the system instead of clicking dead. */
.btn:disabled{position:relative}
.btn:disabled.shake{animation:shake .3s}

/* ============================================================
   3D equipment viewer (Configuración del sistema)
   Blueprint "instrument mode": always dark, independent of the
   app theme. Palette + dimensions per DOCEQUIPO3D.md §3/§10.
   ============================================================ */
/* Stage = left DOCK (sample picker + compact rail + pinned-module controls +
   diagnostics) and a BIG 3D viewer that fills the height on the right. The
   viewer is the hero (near full-screen); the dock scrolls internally. */
.sys3d-stage{
  display:grid; grid-template-columns:minmax(300px,380px) 1fr; gap:20px;
  height:calc(100vh - 172px); min-height:520px;
  max-width:1720px; margin:0 auto 18px;
}
.eq3d-dock{
  display:flex; flex-direction:column; gap:14px;
  min-height:0; overflow-y:auto; padding-right:4px;
}
/* Sample type is not equipment — system-3d.js lifts #mod-sample here, at the
   top of the dock, always visible. */
.eq3d-dock .module.eq3d-sample{ flex:0 0 auto; }
.eq3d-diag{ flex:0 0 auto; }
.eq3d-diag h3{ font-family:'Schibsted Grotesk', system-ui, sans-serif; font-size:15px; margin:0 0 8px; }

/* Compact module rail — mirrors the prototype .mod-item cards. */
.eq3d-rail{ display:flex; flex-direction:column; gap:8px; min-height:0; flex:0 0 auto; }
.eq3d-rail-head{
  font-family:'JetBrains Mono', ui-monospace, monospace; font-size:0.6875rem;
  color:var(--muted); letter-spacing:0.08em; text-transform:uppercase;
  padding:2px 4px 6px;
}
.eq3d-mod{
  display:grid; grid-template-columns:auto 1fr; gap:3px 14px; align-items:baseline;
  text-align:left; width:100%; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:12px 15px; transition:border-color .18s, background .18s;
}
.eq3d-mod:hover{ border-color:var(--accent) }
.eq3d-mod:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(84,121,255,.18) }
.eq3d-mod.is-active{ border-color:var(--accent); background:rgba(84,121,255,.08) }
.eq3d-mod .n{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:0.6875rem; color:var(--muted); grid-row:span 2; align-self:center }
.eq3d-mod.is-active .n{ color:var(--accent) }
.eq3d-mod .t{ font-family:'Schibsted Grotesk', system-ui, sans-serif; font-weight:600; font-size:0.9375rem; color:var(--ink) }
.eq3d-mod .s{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:0.6875rem; color:var(--muted); letter-spacing:0.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.eq3d-viewer{
  position:relative; min-height:0; height:100%;
  border:1px solid rgba(226,231,247,0.17); border-radius:16px; overflow:hidden;
  background:radial-gradient(110% 130% at 50% -10%, #141a2b 0%, #0b0e15 60%);
}
.eq3d-viewer::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    repeating-linear-gradient(0deg, rgba(132,150,205,0.05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(132,150,205,0.05) 0 1px, transparent 1px 56px);
}
.eq3d-stage-canvas{ position:absolute; inset:0; z-index:2; }
.eq3d-stage-canvas canvas{ display:block; }

/* Master-detail rack: in detail mode only the active module (and the always-on
   sample module, which has no data-eq3d-module) is shown. */
.rack--detail .module[data-eq3d-module]{ display:none; }
.rack--detail .module[data-eq3d-module].eq3d-detail-on{ display:flex; }

@media (max-width:980px){
  .sys3d-stage{ grid-template-columns:1fr; height:auto; min-height:0; }
  .eq3d-dock{ overflow:visible; }
  .eq3d-rail{ flex-direction:row; overflow-x:auto; padding-bottom:6px; }
  .eq3d-mod{ min-width:220px; flex:0 0 auto; }
  .eq3d-viewer{ height:64vh; min-height:420px; order:-1; }
}
.eq3d-labels{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:3; }
.eq3d-head{
  position:absolute; top:0; left:0; right:0; z-index:4;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; pointer-events:none;
}
.eq3d-title{
  font-family:'JetBrains Mono', ui-monospace, monospace; font-size:0.6875rem;
  letter-spacing:0.1em; text-transform:uppercase; color:#8590a6;
  display:flex; align-items:center; gap:9px;
}
.eq3d-title::before{ content:""; width:20px; height:1px; background:#5479ff; }
.eq3d-hint{
  font-family:'JetBrains Mono', ui-monospace, monospace; font-size:0.625rem; color:#5c6678;
}
.eq3d-foot{
  position:absolute; bottom:0; left:0; right:0; z-index:4;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:11px 14px; pointer-events:none;
  font-family:'JetBrains Mono', ui-monospace, monospace; font-size:0.625rem;
}
.eq3d-cap{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.eq3d-cap-name{ color:#aeb9d8; letter-spacing:0.04em; }
.eq3d-cap-spec{ color:#5c6678; letter-spacing:0.05em; }
.eq3d-cap-hint{ color:#5c6678; }
.eq3d-zones{ display:flex; gap:5px; align-items:center; flex-shrink:0; }
.eq3d-zones i{ display:block; height:3px; border-radius:2px; background:#5479ff; }
.eq3d-zones i:nth-child(1){ width:24px; }
.eq3d-zones i:nth-child(2){ width:14px; opacity:.6; }
.eq3d-zones i:nth-child(3){ width:8px; opacity:.35; }

/* HTML labels projected over the canvas (DOCEQUIPO3D.md §10) */
.h3d-label{
  position:absolute; top:0; left:0; opacity:0;
  display:inline-flex; align-items:center; gap:9px;
  font-family:'JetBrains Mono', ui-monospace, monospace; font-size:0.6875rem;
  letter-spacing:0.05em; color:#aeb9d8; white-space:nowrap;
  transition:opacity 0.25s ease; will-change:transform;
}
.h3d-label::after{ content:""; width:26px; height:1px; background:currentColor; opacity:0.5; }
.h3d-label-num{ color:#5c6678; }
.h3d-label.is-active{ color:#91a7ff; }
.h3d-label.is-active .h3d-label-num{ color:#5479ff; }

/* Rack card highlighted when its 3D module is active (hover/focus sync) */
.module.eq3d-active{ border-color:#5479ff; box-shadow:0 0 0 1px rgba(84,121,255,0.35); }

@media (prefers-reduced-motion: reduce){
  .h3d-label{ transition:none; }
}