/* ==========================================================================
   SIDÓN EXPERIENCE UI · Sistema visual compartido v1
   La lógica de cada experiencia permanece intacta; este bloque normaliza
   marca, paleta, header, controles, foco, superficies y comportamiento móvil.
   ========================================================================== */
:root {
  color-scheme: light;
  --suite-primary: #00A887;
  --suite-primary-deep: #0D553F;
  --suite-accent: #2ECC71;
  --suite-primary-soft: #D6F2EB;
  --suite-accent-soft: #E5FFF5;
  --suite-ink: #0F1A16;
  --suite-muted: #52665D;
  --suite-line: #DCE7E2;
  --suite-surface: #FFFFFF;
  --suite-surface-alt: #F5F8F7;
  --suite-bg: #F2F6F4;
  --suite-warning: #C98A00;
  --suite-critical: #C84444;
  --suite-info: #1670A5;
  --suite-radius-sm: 10px;
  --suite-radius-md: 12px;
  --suite-radius-lg: 16px;
  --suite-shadow-sm: 0 3px 8px rgba(15, 26, 22, .08);
  --suite-shadow-md: 0 6px 12px rgba(15, 26, 22, .11);
  --suite-header-h: 64px;
  --suite-font-ui: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --suite-font-brand: Montserrat, Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --suite-font-mono: "DM Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;

  /* Compatibilidad con los tokens originales de los cuatro juegos. */
  --sidon: var(--suite-primary);
  --sidon-green: var(--suite-primary);
  --sidon-deep: var(--suite-primary-deep);
  --sidon-soft: var(--suite-primary-soft);
  --sidon-green-100: var(--suite-primary-soft);
  --sidon-green-300: #5FC9B2;
  --mint: var(--suite-primary-soft);
  --purple: var(--suite-primary-deep);
  --purple-soft: var(--suite-primary-soft);
  --duma: var(--suite-accent);
  --duma-mid: var(--suite-accent);
  --duma-deep: #0D5C3A;
  --duma-soft: #B8F0D8;
  --duma-light: #B8F0D8;
  --duma-wash: var(--suite-accent-soft);
  --duma-glow: var(--suite-accent-soft);
  --ink: var(--suite-ink);
  --ink-soft: var(--suite-muted);
  --muted: var(--suite-muted);
  --line: var(--suite-line);
  --surface: var(--suite-surface);
  --surface-alt: var(--suite-surface-alt);
  --warn: var(--suite-warning);
  --warning: var(--suite-warning);
  --crit: var(--suite-critical);
  --danger: var(--suite-critical);
  --info: var(--suite-info);
  --font-brand: var(--suite-font-brand);
  --font-ui: var(--suite-font-ui);
  --font-data: var(--suite-font-ui);
  --font-mono: var(--suite-font-mono);
  --shadow: var(--suite-shadow-md);
  --shadow-sm: var(--suite-shadow-sm);
  --shadow-md: var(--suite-shadow-md);
  --sh-card: var(--suite-shadow-sm);
  --sh-pop: 0 6px 12px rgba(13, 85, 63, .20);
}

html { background: var(--suite-bg); }
body { color: var(--suite-ink); font-family: var(--suite-font-ui); }

/* Header idéntico en todas las experiencias. */
.suite-header {
  position: relative;
  z-index: 1000;
  width: 100%;
  height: var(--suite-header-h);
  min-height: var(--suite-header-h);
  flex: 0 0 var(--suite-header-h);
  padding: 8px clamp(14px, 2.3vw, 28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 0;
  border-bottom: 1px solid rgba(220, 231, 226, .96);
  background: var(--suite-surface);
}
.suite-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}
.suite-mark {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: var(--suite-primary-deep);
  font: 850 17px/1 var(--suite-font-brand);
  letter-spacing: -.04em;
}
.suite-brand-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
  line-height: 1.05;
}
.suite-brand-name {
  color: var(--suite-muted);
  font: 750 9px/1.1 var(--suite-font-ui);
  letter-spacing: .145em;
  text-transform: uppercase;
  white-space: nowrap;
}
.suite-module-line {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.suite-module-name {
  color: var(--suite-primary-deep);
  font: 850 14px/1.1 var(--suite-font-brand);
  letter-spacing: .025em;
  white-space: nowrap;
}
.suite-module-desc {
  min-width: 0;
  overflow: hidden;
  color: var(--suite-muted);
  font: 600 12px/1.2 var(--suite-font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suite-header-tools {
  min-width: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.suite-reset {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--suite-line);
  border-radius: 999px;
  color: var(--suite-primary-deep);
  background: var(--suite-surface);
  font: 750 11px/1 var(--suite-font-ui);
  cursor: pointer;
}
.suite-reset:hover { background: var(--suite-surface-alt); }
.suite-reset:focus-visible { outline: 2px solid var(--suite-primary); outline-offset: 2px; }
.suite-state {
  min-height: 32px;
  max-width: min(44vw, 330px);
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--suite-line);
  border-radius: 999px;
  color: var(--suite-primary-deep);
  background: var(--suite-surface);
  font: 750 11px/1 var(--suite-font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suite-state::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--suite-primary);
  box-shadow: 0 0 0 4px rgba(0, 168, 135, .11);
}
.suite-progress .progress-track {
  width: 116px;
  height: 7px;
  border-radius: 999px;
  background: #E8EFEC;
  overflow: hidden;
}
.suite-progress .progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--suite-primary);
}

/* Controles: misma jerarquía visual, conservando tamaño y posición originales. */
body .primary,
body .primary-button,
body .btn-primary {
  border-color: var(--suite-primary);
  color: #fff;
  background: var(--suite-primary);
}
body .primary:hover,
body .primary-button:hover,
body .btn-primary:hover {
  border-color: var(--suite-primary-deep);
  background: var(--suite-primary-deep);
  filter: none;
}
body .secondary,
body .secondary-button,
body .btn-secondary {
  border-color: var(--suite-line);
  color: var(--suite-primary-deep);
  background: var(--suite-surface);
}
body .secondary:hover,
body .secondary-button:hover,
body .btn-secondary:hover {
  border-color: rgba(13, 85, 63, .30);
  color: var(--suite-primary-deep);
  background: var(--suite-accent-soft);
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(0, 168, 135, .34);
  outline-offset: 3px;
}

/* Ajustes de integración que no alteran la composición propia de cada juego. */
.nodia-suite .app-shell { border-color: var(--suite-line); box-shadow: var(--suite-shadow-md); }
.nodia-suite .stage { min-height: calc(100vh - var(--suite-header-h) - 28px); }
.nodia-suite .suite-header #stepLabel { color: var(--suite-primary-deep); font-size: 11px; }
.nodia-suite .stage,
.sense-suite .app,
.argos-suite .shell { background-color: var(--suite-surface-alt); }

/* Argos conserva su lenguaje de swipe, pero usa la paleta compartida. */
.argos-suite .intro-visual {
  background: var(--suite-primary-soft);
}
.argos-suite .module,
.argos-suite .eyebrow { color: var(--suite-primary-deep); }

/* Smart Audits no tenía header: se reserva el alto sin afectar sus escenas. */
.smart-suite { padding-top: var(--suite-header-h); }
.smart-suite > .smart-suite-header {
  position: fixed;
  inset: 0 0 auto 0;
}
.smart-suite > .scene {
  min-height: calc(100vh - var(--suite-header-h));
  min-height: calc(100dvh - var(--suite-header-h));
}

/* Byblos es un selector que alterna dos superficies embebidas. */
.byblos-suite #boot,
.byblos-suite #stage {
  top: var(--suite-header-h);
}

@media (max-width: 640px) {
  :root { --suite-header-h: 58px; }
  .suite-header { gap: 10px; padding-inline: 12px; }
  .suite-mark { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; font-size: 15px; }
  .suite-brand { gap: 9px; }
  .suite-brand-name { display: none; }
  .suite-module-name { font-size: 12px; }
  .suite-module-desc { display: none; }
  .suite-state { min-height: 30px; max-width: 48vw; padding-inline: 9px; font-size: 10px; }
  .suite-progress .progress-track { width: 72px; }
  .nodia-suite .stage { min-height: calc(100vh - var(--suite-header-h)); }
}

@media (max-width: 430px) {
  .suite-progress .progress-track { display: none; }
  .suite-state { max-width: 52vw; }
}