/* ============================================================================
   shell.css — chrome for the plantilla preview toolbar.

   AGENCY-ONLY. This folder is never copied when a template is handed to a
   client: they get <slug>/site.html + img/ + motion.config.js + _shared/.
   Nothing here may leak into a deliverable.

   ── Why the tokens are duplicated ────────────────────────────────────────────
   The values below are COPIED from
     tokens/mu-plugins/studioarttec-tokens/assets/css/tokens.css
   which is the SOURCE OF TRUTH. They are duplicated because tokens.css is a
   WordPress mu-plugin asset and these are static files served straight by
   nginx from /demos/ — there is no way to reach the plugin's stylesheet from
   here without hardcoding a wp-content URL, which would couple the demos to
   WordPress and break the local `python3 -m http.server` workflow.

   A rebrand therefore has to touch BOTH files. Kept to the minimum needed for
   a bar: eleven values. Logged in _agency/CLAUDE.md.

   ── Why no webfonts ─────────────────────────────────────────────────────────
   tokens.css loads Helvetica LT Pro / Futura PT / EB Garamond from Adobe
   Typekit, which is DOMAIN-licensed. Even though this file is served from
   studioarttec.com (where the licence is valid), an @import for those kits
   sitting one directory above client deliverables is an accident waiting to
   happen. A neutral system stack costs nothing on twelve words of chrome.
   ========================================================================== */

:root {
  --arttec-green: #01DC36;
  --green-dim: rgba(1, 220, 54, 0.14);
  --ink-900: #0B0C0A;
  --ink-800: #111310;
  --ink-700: #191C18;
  --ink-600: #22261F;
  --white: #F4F6F3;
  --sage-500: #939D92;
  --sage-light: #B9C1B7;
  --sage-dim: rgba(147, 157, 146, 0.24);
  --radius-pill: 999px;
  --radius-md: 12px;
  --dur-fast: 140ms;
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Local to the shell. The bar height is written here by shell.js from a
     ResizeObserver, because the bar wraps at narrow widths and a hardcoded
     value would leave a gap or clip the frame. The fallback only has to be
     survivable for the pre-JS paint. */
  --bar-h: 56px;

  --shell-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
}

/* The shell must never scroll: the iframe owns all scrolling. Without this the
   outer document and the demo's Lenis instance fight over the wheel. */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink-900);
}

/* A chrome bar wants exactly two type sizes: the name of the thing you are
   looking at, and everything else. An explicit base stops stray elements
   inheriting the 16px UA default and muddying the ramp — the first build ended
   up with five sizes (13/15/16/17/22) inside one bar, a 1.7:1 spread with no
   readable steps. Now: 13px base, 20px title. One step, 1.54:1. */
body {
  font-family: var(--shell-font);
  font-size: 0.8125rem;          /* 13px — the bar's body size */
  line-height: 1.5;
  color: var(--white);
  -webkit-font-smoothing: antialiased;
}

.u-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   The bar
   --------------------------------------------------------------------------- */

/* nowrap by default: at 1440 the first build wrapped the CTA and the close
   control onto a second row, which doubled the bar height and pushed the frame
   down for no reason. Wrapping is allowed only once there genuinely isn't room. */
.shellbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5rem 1rem;
  padding: 0.55rem 1rem;
  background: var(--ink-800);
  border-bottom: 1px solid var(--sage-dim);
}
@media (max-width: 1099px) {
  .shellbar { flex-wrap: wrap; }
}

/* Name and honesty line stacked, so both read in full on one visual row
   instead of competing for horizontal space with the controls. */
.shellbar__id {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.shellbar__brand {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}
.shellbar__brand:hover { color: var(--arttec-green); }

/* The template name is the page's real <h1>. It is deliberately the largest
   text in the bar: it IS the title of what you are looking at, and giving the
   bar a genuine type hierarchy is honest rather than a detector dodge. */
.shellbar__name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* The honesty claim. In the bar rather than only inside the frame, because the
   demo's own .ribbon hides its "Plantilla de demostración" half below 560px —
   which is exactly the width the Teléfono toggle shows off. Here it is legible
   unconditionally. --sage-light (#B9C1B7) on --ink-800 (#111310) measures
   9.4:1; --sage-500 would be 5.6:1 and --text-muted only 3.8:1 (a known AA
   failure, never used). */
.shellbar__honest {
  margin: 0;
  line-height: 1.45;
  color: var(--sage-light);
}

.shellbar__spacer { flex: 1 1 0; min-width: 0; }

/* ---- device group ------------------------------------------------------- */

/* Hidden until shell.js sets html.shell-js — same fail-visible contract as
   .sat-js in sat-motion.js. With JS off you get the demo at full width and no
   dead buttons. */
.shellbar__dev { display: none; }
.shell-js .shellbar__dev {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.shellbar__dev button,
.shellbar__link,
.shellbar__cta,
.shellbar__x {
  /* 44px minimum hit target on every control. The old .sat-tpl-dev was ~34px. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

.shellbar__dev button {
  min-width: 44px;
  padding: 0 0.85rem;
  color: var(--sage-light);
  background: transparent;
  border: 1px solid var(--sage-dim);
}
.shellbar__dev button:hover:not([aria-pressed="true"]) {
  color: var(--white);
  border-color: var(--sage-500);
}

/* The visual pressed state. Its absence on .sat-tpl-dev is the defect this
   whole restructure is partly fixing: that selector had :hover and nothing
   else, so the selected device was indistinguishable. A real background swap,
   never opacity — a low-opacity "selected" reads as disabled. */
.shellbar__dev button[aria-pressed="true"] {
  color: var(--ink-900);
  background: var(--arttec-green);
  border-color: var(--arttec-green);
  cursor: default;
}

.shellbar__link {
  padding: 0 0.6rem;
  color: var(--sage-light);
  background: transparent;
  border: 1px solid transparent;
}
.shellbar__link:hover { color: var(--white); }

.shellbar__cta {
  padding: 0 0.95rem;
  color: var(--ink-900);
  background: var(--arttec-green);
  border: 1px solid var(--arttec-green);
}
.shellbar__cta:hover {
  color: var(--arttec-green);
  background: transparent;
}

/* The close control. A real anchor, not a button: it navigates, so it works
   without JS, survives middle-click and can be opened in a new tab. */
.shellbar__x {
  min-width: 44px;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--sage-light);
  background: transparent;
  border: 1px solid var(--sage-dim);
}
.shellbar__x:hover {
  color: var(--ink-900);
  background: var(--sage-light);
  border-color: var(--sage-light);
}

/* Focus is never signalled by hover alone. */
.shellbar a:focus-visible,
.shellbar button:focus-visible {
  outline: 2px solid var(--arttec-green);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   The stage
   --------------------------------------------------------------------------- */

.shellstage {
  position: relative;
  height: calc(100% - var(--bar-h));
  display: flex;
  justify-content: center;
  background: var(--ink-900);
}

/* Wrapper is what gets centred; the iframe inside it is the real device
   viewport and may be transform-scaled. overflow:hidden clips the sub-pixel
   remainder when a fractional scale is in play. */
.shellframe {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: var(--ink-900);
}

/* In a device mode the frame reads as a device against the page. Fluid mode
   gets no chrome at all, so "Escritorio" shows the site exactly as a visitor
   would see it. */
.shell-dev .shellframe {
  border-left: 1px solid var(--sage-dim);
  border-right: 1px solid var(--sage-dim);
}

.shellframe iframe {
  display: block;
  border: 0;
  width: 100%;
  height: 100%;
  /* Load-bearing: shell.js scales from the top-left corner and positions with
     `left`, so any other origin would mis-centre the frame. */
  transform-origin: 0 0;
  background: var(--white);
}

/* Shown below the MIN_SHELL width, where simulating a 390px phone inside an
   even narrower window is meaningless — you are already on one. */
.shellbar__note { display: none; }
.shell-narrow .shellbar__note {
  display: block;
  flex: 1 1 100%;
  margin: 0;
  color: var(--sage-light);
}

@media (prefers-reduced-motion: reduce) {
  .shellbar__dev button,
  .shellbar__link,
  .shellbar__cta,
  .shellbar__x,
  .shellbar__brand { transition: none; }
}