/* Iberdrola Energy Simulator – WordPress plugin styles
 * Scoped under .ies-app
 */
/* Fuente IberPangea cargada por el tema principal */

/* ── Custom properties ─────────────────────────────────────────────── */
.ies-app {
  --ies-green:        #00a443;
  --ies-green-dark:   #005a3a;
  --ies-green-deeper: #003d26;
  --ies-green-tab:    #044936;
  --ies-green-active: #0a6344;
  --ies-surface:      #ffffff;
  --ies-bg:           #e7efea;
  --ies-border:       #c9d9cf;
  --ies-text:         #174133;
  --ies-muted:        #5f7b6f;
  --ies-shadow:       rgba(20,64,46,.14);
  --ies-r-lg:         28px;
  --ies-r-md:         18px;
  --ies-stage-width:  2560;
  --ies-stage-height: 1600;
  --ies-font-display: IberPangea, Arial, sans-serif;
  --ies-font-body:    IberPangea, Arial, sans-serif;
}

/* ── Reset ──────────────────────────────────────────────────────── */
.ies-app, .ies-app * { box-sizing: border-box; }
.ies-app {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  font-family: var(--ies-font-body);
  color: var(--ies-text);
  z-index: 0;
}

.site-footer { z-index: 0; position: relative; }

.ies-app::before {
  content: "";
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #F1F7F3;
}

/* ── Topbar ───────────────────────────────────────────────────── */
.ies-app .ies-brand__eyebrow { display: none; }
.ies-app .ies-brand__title   { display: none; }

/* ── Buttons ──────────────────────────────────────────────────── */
.ies-app .ies-button {
  border: 1px solid #bcd0c4; border-radius: 999px;
  background: #f6fbf8; color: var(--ies-text);
  font: inherit; font-weight: 700; padding: .55rem .9rem;
  cursor: pointer; transition: opacity 150ms ease;
}
.ies-app .ies-button:hover { opacity: .85; }
.ies-app .ies-button--primary {
  background: linear-gradient(135deg, #009744 0%, #19b95a 100%);
  border-color: transparent; color: #fff;
}

/* ── Focus visible (keyboard) ───────────────────────────────────── */
.ies-app button:focus-visible,
.ies-app input:focus-visible,
.ies-app [role="button"]:focus-visible {
  outline: 3px solid #0a5f42;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 6px rgba(10,95,66,.35);
}

/* ── Canvas wrapper ─────────────────────────────────────────────── */
.ies-app .ies-canvas {
  position: relative;
  margin-top: 30px;
}
.ies-app .ies-stage-viewport {
  position: relative;
  padding: .75rem;
  /* bottom padding = dock height + gap */
  padding-bottom: 5.5rem;
}

/* ── Loading overlay ─────────────────────────────────────────────── */
.ies-app .ies-loading-overlay {
  position: fixed; inset: 0; z-index: 2147483647;
  background: linear-gradient(135deg, var(--ies-green-deeper) 0%, var(--ies-green-dark) 60%, #006845 100%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.55s ease;
}
.ies-app .ies-loading-overlay.is-dismissed { opacity: 0; pointer-events: none; }
.ies-app .ies-loading-inner { text-align: center; color: #fff; }
.ies-app .ies-loading-battery {
  display: flex;
  align-items: center;
  isolation: isolate;
}
.ies-app .ies-loading-battery__body {
  position: relative;
  width: 263px;
  height: 91px;
  box-sizing: border-box;
  background: #fff;
  border: 3px solid #003020;
  border-radius: 23px;
  padding: 4px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  z-index: 2;
}
.ies-app .ies-loading-battery__fill {
  width: 0%;
  background: #5bd38c;
  border-radius: 20px;
  transition: width 240ms ease;
}
.ies-app .ies-loading-battery__text {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #003020;
  font-family: IberPangea, Arial, sans-serif;
}
.ies-app .ies-loading-battery__label {
  font-size: 16px;
  font-weight: 600;
}
.ies-app .ies-loading-battery__value {
  font-size: 32px;
  font-weight: 600;
  margin-top: 4px;
}
.ies-app .ies-loading-battery__nub {
  width: 16px;
  height: 28px;
  margin-left: -6px;
  flex-shrink: 0;
  background: #003020;
  border-radius: 9px;
  z-index: 1;
}
.ies-app .ies-loading-text {
  margin: .9rem 0 0; font-size: .92rem; font-weight: 600;
  letter-spacing: .05em; color: rgba(255,255,255,.85);
}

/* ── Stage ─────────────────────────────────────────────────────── */
.ies-app .ies-stage {
  position: relative;
  width: min(100%, 1080px);
  margin: 0 auto;
  aspect-ratio: var(--ies-stage-width) / var(--ies-stage-height);
  overflow: hidden;
}
.ies-app .ies-stage__flash {
  position: absolute; inset: 0; z-index: 14; pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(24,185,90,.28) 0%, rgba(24,185,90,.12) 18%, rgba(24,185,90,0) 58%),
    linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 44%);
  mix-blend-mode: screen;
}
.ies-app .ies-stage.is-updating .ies-stage__flash {
  animation: ies-stage-flash 240ms cubic-bezier(.22,1,.36,1);
}
@keyframes ies-stage-flash {
  0%   { opacity: 0; transform: scale(.995); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.01); }
}

/* ── Layers ─────────────────────────────────────────────────────── */
.ies-app .ies-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  opacity: 0; visibility: hidden;
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
  transform: scale(1.002); pointer-events: none;
}
.ies-app .ies-layer.is-visible    { opacity: 1; transform: scale(1); }
.ies-app .ies-layer--animated.is-visible { display: block; }
.ies-app .ies-layer.ies-layer--frozen {
  opacity: 0 !important;
  visibility: hidden !important;
}
.ies-app .ies-stage-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 12; pointer-events: none;
}

/* ── Float cards (indicators + score) ──────────────────────────── */
.ies-app .ies-float-card {
  position: absolute; z-index: 20;
  border-radius: 18px; 
  /*border: 1px solid #d1ddd3;
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 24px rgba(26,72,50,.12);
  backdrop-filter: blur(4px);*/
}
.ies-app .ies-float-card--indicators {
  top: 0; left: 0;
  width: min(42%, 560px);
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 64, 42, 0.14);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ies-app .ies-float-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ies-app .ies-float-card__title {
  margin: 0;
  font-family: IberPangea, Arial, sans-serif;
  font-size: .875rem;
  font-weight: 600;
  color: #00402a;
  letter-spacing: -0.01em;
  line-height: 1.15;
  padding: 4px 0;
}
.ies-app .ies-indicators {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.ies-app .ies-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
.ies-app .ies-indicator__value {
  font-family: IberPangea, Arial, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  color: #00402a;
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
}
.ies-app .ies-indicator__label {
  font-family: IberPangea, Arial, sans-serif;
  font-size: .875rem;
  font-weight: 400;
  color: #00402a;
  line-height: 1.2;
  text-align: center;
  margin: 0;
  max-width: 90%;
}
.ies-app .ies-gauge {
  width: 62px; height: 34px; margin: 0 auto;
  display: block; overflow: visible;
}
/* SVG gauge paths — colores gestionados por el JS vía atributos */
.ies-app .ies-float-card--score {
  top: 0; right: 0;
  width: min(38%, 300px);
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
.ies-app .ies-indicator-alert-btn {
  width: 24px;
  height: 24px;
  border-radius: 40px;
  border: 1px solid #00402a;
  background: #ff9c1a;
  color: #00402a;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background-color 160ms ease;
  display: none !important;
}
.ies-app .ies-indicator-alert-btn__icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ies-app .ies-indicator-alert-btn__icon svg {
  width: 16px;
  height: 16px;
  display: block;
}
.ies-app .ies-indicator-alert-btn:hover {
  background: #ffcd52;
}
.ies-app .ies-indicator-alert-btn:focus-visible {
  outline: none;
  box-shadow: none;
}
.ies-app .ies-indicator-alert-btn:focus-visible::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid #00402a;
  border-radius: 50px;
  pointer-events: none;
}
.ies-app .ies-indicator-alert-btn:disabled {
  background: #ffffff;
  border-color: #699282;
  color: #699282;
  cursor: not-allowed;
}
.ies-app.ies-alert-open .ies-indicator-alert-btn {
  display: inline-flex;
  background: #ffb536;
}

.ies-app .ies-info-trigger {
  position: relative;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 40px;
  background: #007f33;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 160ms ease;
}
.ies-app .ies-info-trigger:hover {
  background: #00402a;
}
.ies-app .ies-info-trigger:focus-visible {
  outline: none;
  box-shadow: none;
}
.ies-app .ies-info-trigger:focus-visible::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid #00402a;
  border-radius: 50px;
  pointer-events: none;
}
.ies-app .ies-info-trigger svg {
  pointer-events: none;
}
.ies-app .ies-info-trigger span {
  color: #fff;
  text-align: center;
  font-family: IberPangea, Arial, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

/* ── Score card actions: reset + toggle animations, next to the info trigger ── */
.ies-app .ies-score-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.ies-app .ies-score-actions__group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ies-app .ies-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #007f33;
  border-radius: 32px;
  background: #F1F7F3;
  color: #007f33;
  font-family: IberPangea, Arial, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 18px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}
.ies-app .ies-pill-btn:hover {
  border-color: #00402a;
  color: #00402a;
}
.ies-app .ies-pill-btn:focus-visible {
  outline: 2px solid #00402a;
  outline-offset: 2px;
  border-color: #007f33;
  box-shadow: none;
}
.ies-app .ies-mini-grid {
  display: flex;
  width: 100%;
  border: 1px solid #2f6852;
  border-radius: 24px;
  padding: 1px;
  overflow: hidden;
}
.ies-app .ies-mini-grid > div {
  flex: 1 0 0;
  min-width: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  background: #fff;
  border-radius: 16px 0 0 16px;
}
.ies-app .ies-mini-grid > div + div {
  background: #dcebe1;
  border-radius: 0 16px 16px 0;
  border-left: 0;
}
.ies-app .ies-mini-grid p,
.ies-app .ies-mini-grid__label {
  margin: 0;
  font-family: IberPangea, Arial, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: #00402a;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}
.ies-app .ies-mini-grid strong {
  display: block;
  font-family: IberPangea, Arial, sans-serif;
  font-weight: 600;
  font-size: 1.625rem;
  line-height: 1;
  color: #00402a;
  text-align: center;
  letter-spacing: 0.0703px;
}
.ies-app .ies-learn-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #fff;
  border: 1px solid #2f6852;
  border-radius: 24px;
  padding: 17px;
}

.ies-app .ies-learn-card__title {
  margin: 0 0 -10px;
  font-family: IberPangea, Arial, sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  color: #003020;
  line-height: 1.15;
  letter-spacing: -0.1504px;
}

.ies-app .ies-learn-card__teaser {
  margin: 0;
  font-family: IberPangea, Arial, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: #003020;
  line-height: 1.15;
  letter-spacing: -0.1504px;
  padding-right: 24px;
}

.ies-app .ies-learn-card__teaser > :first-child { margin-top: 0; }
.ies-app .ies-learn-card__teaser > :last-child { margin-bottom: 0; }

.ies-app .ies-learn-card__button {
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #007f33;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: IberPangea, Arial, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #fff;
  line-height: 1.5;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}
.ies-app .ies-learn-card__button svg { pointer-events: none; flex-shrink: 0; }
.ies-app .ies-score-status, .ies-app .ies-score-summary { display: none; }

/* ── Control dock ───────────────────────────────────────────────── */
.ies-app .ies-control-dock {
  position: absolute;
  left: 0; right: 0; bottom: 1.5rem;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ies-app .ies-dock-inner {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

/* ── Panel sections ("Generación" / "Consumo de electricidad") ────────── */
.ies-app .ies-panel-section {
  background: #fff;
  border-radius: 32px;
  box-shadow: 0 4px 18px rgba(0,64,42,.14);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ies-app .ies-panel-section--generation {
  flex: 0 0 auto;
  width: 365px;
}
.ies-app .ies-panel-section--consumption {
  flex: 1 1 0;
  min-width: 0;
}
.ies-app .ies-panel-section__header {
  text-align: left;
  width: 100%;
}
.ies-app .ies-panel-section__title {
  margin: 0;
  font-family: IberPangea, Arial, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: #00402a;
  letter-spacing: -0.1504px;
  line-height: 1.15;
}
.ies-app .ies-panel-section__tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* Dock navigation arrows (visible only on mobile) */
.ies-app .ies-dock-nav { display: none; }
.ies-app .ies-dock-nav__btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: #00402a;
  transition: opacity 0.15s;
}
.ies-app .ies-dock-nav__btn:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

/* ── Control card (tab + expandable body) ──────────────────────── */
.ies-app .ies-control-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: visible;
}

.ies-app .ies-control-card__body {
  display: none;
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0; right: 0;
  max-height: min(42vh, 400px);
  overflow: auto;
  background: #fff;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 0 77px rgba(47,104,82,0.10);
  padding: 16px 16px 40px 16px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
}
.ies-app .ies-control-card.is-active .ies-control-card__body,
.ies-app .ies-control-card.is-open .ies-control-card__body,
.ies-app .ies-control-card__body.is-mobile-floating {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ies-app .ies-control-card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(137,131,126,0.20);
}

.ies-app .ies-control-card__title {
  margin: 0;
  flex: 1;
  font-family: IberPangea, Arial, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #615d5a;
  line-height: 1.5;
}

.ies-app .ies-control-card__info-btn {
  display: none;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 40px;
  background: #00402a;
  color: #fff;
  cursor: pointer;
}
.ies-app .ies-control-card__info-btn svg { pointer-events: none; }

.ies-app .ies-control-card__tab {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 48px;
  background: #00402a;
  color: #fff;
  font-family: IberPangea, Arial, sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.5;
  padding: 8px 8px 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  cursor: pointer;
  transition: border-radius 140ms ease;
  position: relative;
  z-index: 10;
  white-space: nowrap;
  overflow: hidden;
}
.ies-app .ies-control-card.is-active .ies-control-card__tab {
  border-radius: 0 0 24px 24px;
}
.ies-app .ies-control-card__tab-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ies-app .ies-control-card__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.ies-app .ies-control-card__tab-label {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ies-app .ies-control-card__tab-arrow {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0; /* oculta el caracter de texto del JS */
}
.ies-app .ies-control-card__tab-arrow::after {
  content: '';
  display: block;
  width: 15px;
  height: 9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.1728 8.58635' fill='none'%3E%3Cpath d='M1 1L7.58641 7.58635L14.1728 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(180deg);
  transition: transform 200ms ease;
}
.ies-app .ies-control-card.is-active .ies-control-card__tab-arrow::after {
  transform: rotate(0deg);
}

/* ── Control (slider + step) ──────────────────────────────────── */
.ies-app .ies-controls-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 24px;
}

.ies-app .ies-readonly-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ies-app .ies-control {
  transition: opacity 180ms ease;
}
.ies-app .ies-control.is-updating { opacity: .7; }
.ies-app .ies-control.is-blocked .ies-slider { accent-color: #b45142; }

.ies-app .ies-control__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ies-app .ies-control__title {
  margin: 0;
  font-family: IberPangea, Arial, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #00402a;
  line-height: 1.25;
}
.ies-app .ies-control__step { display: inline-flex; align-items: center; gap: 8px; }
.ies-app .ies-step-btn {
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: #00402a; color: #fff;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; flex-shrink: 0; cursor: pointer;
  position: relative;
  transition: background-color 160ms ease;
}
.ies-app .ies-step-btn svg { display: block; pointer-events: none; }
.ies-app .ies-step-btn:disabled {
  background: #b7c4bd;
  cursor: not-allowed;
}
.ies-app .ies-step-btn:hover {
  background: #007f33;
}
.ies-app .ies-step-btn:disabled:hover {
  background: #b7c4bd;
}
.ies-app .ies-step-btn:focus-visible {
  outline: none;
  box-shadow: none;
}
.ies-app .ies-step-btn:focus-visible::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid #00402a;
  border-radius: 50px;
  pointer-events: none;
}
.ies-app .ies-control__value {
  font-family: IberPangea, Arial, sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  color: #00402a;
  letter-spacing: -0.4395px;
  min-width: 50px;
  text-align: center;
}

/* Range input — barra de progreso al estilo Figma */
.ies-app .ies-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 8px;
  margin: 12px 0 0;
  border-radius: 999px;
  background: #e5e7eb;
  outline: none;
  cursor: pointer;
}
.ies-app .ies-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #00402a var(--slider-pct, 0%),
    #e5e7eb var(--slider-pct, 0%)
  );
}
.ies-app .ies-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0; height: 0;
  margin-top: 0;
}
.ies-app .ies-slider::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: #e5e7eb;
}
.ies-app .ies-slider::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: #00402a;
}
.ies-app .ies-slider::-moz-range-thumb {
  width: 0; height: 0; border: 0;
  background: transparent;
}

.ies-app .ies-slider { pointer-events: none; cursor: default; }

.ies-app .ies-control__meta { display: none; }
.ies-app .ies-control__warning { margin: 8px 0 0; color: #b45142; font-size: .8rem; }

/* ── Read-only rows (complement values) ─────────────────────────── */
.ies-app .ies-readonly-row__head {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
.ies-app .ies-readonly-row__label {
  font-family: IberPangea, Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #567e6e;
  line-height: 1.25;
}
.ies-app .ies-readonly-row__value {
  font-family: IberPangea, Arial, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: #567e6e;
  letter-spacing: -0.1504px;
  white-space: nowrap;
}
.ies-app .ies-readonly-row__bar-track {
  height: 8px; border-radius: 999px;
  background: #e5e7eb; overflow: hidden;
}
.ies-app .ies-readonly-row__bar-fill {
  height: 100%; border-radius: 999px;
  background: #567e6e;
  transition: width 300ms ease;
}

/* ── Visually hidden (screen reader only) ───────────────────────── */
.ies-app .ies-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Live region ─────────────────────────────────────────────────── */
.ies-app .ies-live {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Footer meta ────────────────────────────────────────────────── */
.ies-app .ies-footer-meta { display: none; }

/* ── Modal ─────────────────────────────────────────────────────── */
.ies-app .ies-modal[hidden] { display: none; }
.ies-app .ies-modal {
  position: absolute; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  padding: 1rem;
}

.ies-app .ies-modal[data-role="alert-modal"] {
  place-items: start center;
  padding: clamp(1rem, 2.2vw, 1.8rem);
}

.ies-app .ies-modal__backdrop {
  position: fixed;
  inset: 0; z-index: 0;
  background: rgba(0, 64, 42, 0.80);
  background-blend-mode: multiply;
  backdrop-filter: blur(6px);
}
.ies-app .ies-modal__dialog {
  position: relative; z-index: 1;
  width: min(92vw, 480px);
  border-radius: 24px;
  border: 1px solid #2f6852;
  background: #ffffff;
  box-shadow: 0 14px 40px rgba(0,64,42,.22);
  padding: 1.25rem 1.25rem;
  max-height: calc(100% - 1rem);
  overflow: auto;
}
.ies-app .ies-modal__dialog--compact { width: min(92vw, 420px); }
.ies-app .ies-modal__dialog--learn {
  width: min(96vw, 900px);
  padding: 0;
  overflow: auto;
  border-radius: 32px;
  border: 0;
  box-shadow: 0 20px 60px rgba(0, 64, 42, .30);
}
.ies-app .ies-modal__dialog--tutorial {
  width: min(96vw, 1060px);
  padding: 0;
  overflow: hidden;
}

.ies-app .ies-modal--tutorial-wizard .ies-modal__dialog--tutorial {
  width: min(96vw, 930px);
  border: 0;
  border-radius: 32px;
  box-shadow: 0 20px 60px rgba(0, 64, 42, 0.30);
}

.ies-app .ies-modal--tutorial-intro .ies-modal__dialog--tutorial {
  width: min(96vw, 802px);
  border: 0;
  border-radius: 32px;
  box-shadow: 0 20px 60px rgba(0, 64, 42, 0.30);
}
.ies-app .ies-modal__eyebrow {
  margin: 0; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: #25624b; font-weight: 700;
}
#ies-reset-modal-title { margin: 0; }
#ies-reset-modal-title > * {
  margin: .4rem 0 0;
  font-family: var(--ies-font-display);
  font-size: 1.45rem;
  line-height: 1.2;
  color: #00402a;
  margin: 0;
}
.ies-app .ies-modal__score    { margin: .7rem 0 0; font-size: .95rem; color: #2e5143; }
.ies-app .ies-modal__score strong { color: #0a5f42; font-size: 1.25rem; }
.ies-app .ies-modal__summary  { margin: .6rem 0 0; font-size: .95rem; color: #355a4c; line-height: 1.45; }
.ies-app .ies-modal__actions  { margin-top: 1rem; display: flex; justify-content: flex-end; gap: .45rem; }
.ies-app .ies-modal__actions .ies-button--primary {
  background: #008c39;
}

/* ── Result modal — Figma 6926:7602 ────────────────────────────────── */
.ies-app .ies-modal__dialog--result {
  width: min(92vw, 600px);
  border-radius: 32px;
  border: 0;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 64, 42, .30);
  padding: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  overflow: auto;
}

.ies-app .ies-result-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.ies-app .ies-result-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.ies-app .ies-result-final-score {
  position: relative;
  width: 176px;
  height: 177px;
  margin: 0 auto;
  display: none;
}

.ies-app .ies-result-final-score__ring {
  position: absolute;
  inset: 4px;
  width: 168px;
  height: 168px;
}

.ies-app .ies-result-final-score__ring svg {
  width: 168px;
  height: 168px;
  display: block;
}

.ies-app .ies-result-final-score__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 141px;
  height: 141px;
  transform: translate(-50%, -50%);
  border-radius: 95px;
  background: #5bd38c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 40px;
  box-sizing: border-box;
}

.ies-app .ies-result-final-score__value {
  margin: 0;
  font-family: IberPangea, Arial, sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 0.9;
  letter-spacing: 0.0703px;
  color: #00402a;
  text-align: center;
}

.ies-app .ies-result-final-score__label {
  margin: 0;
  font-family: IberPangea, Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.15;
  color: #00402a;
  text-align: center;
}

.ies-app .ies-modal__dialog--result h2 {
  margin: 0;
  color: #00402a;
  font-family: IberPangea, Arial, sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
  text-align: center;
}

.ies-app .ies-result-indicators {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100%;
  height: 104px;
}

.ies-app .ies-result-indicator {
  background: #fff5ec;
  border-radius: 16px;
  border: 0;
  flex: 1 1 0;
  min-width: 0;
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  height: 100%;
  text-align: center;
}

.ies-app .ies-result-indicator__label {
  font-family: IberPangea, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: normal;
  color: #00402a;
  margin: 0;
  width: 100%;
}

.ies-app .ies-result-indicator__value {
  font-family: IberPangea, Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 14px;
  color: #00402a;
  letter-spacing: -0.1504px;
  margin: 0;
  width: 100%;
}

.ies-app .ies-modal__summary--result {
  margin: 0;
  font-family: IberPangea, Arial, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  color: #00402a;
  text-align: center;
  max-width: 375px;
}

.ies-app .ies-modal__tip {
  font-family: IberPangea, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.3125px;
  color: #555;
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.ies-app .ies-modal__tip strong,
.ies-app .ies-modal__tip b {
  font-weight: 600;
  color: #555;
}

.ies-app .ies-modal__tip[hidden] {
  display: none;
}

.ies-app .ies-modal__actions--result {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
}

/* ── Result modal: estados finales — unificado (Figma 6926:7602) ─────── */
.ies-app .ies-modal[data-role="result-modal"].is-victory,
.ies-app .ies-modal[data-role="result-modal"].is-defeat {
  place-items: center;
}

.ies-app .ies-modal[data-role="result-modal"].is-victory .ies-modal__backdrop,
.ies-app .ies-modal[data-role="result-modal"].is-defeat .ies-modal__backdrop {
  background: rgba(0, 64, 42, .58);
  backdrop-filter: blur(4px);
}

.ies-app .ies-modal[data-role="result-modal"].is-victory .ies-modal__eyebrow,
.ies-app .ies-modal[data-role="result-modal"].is-victory .ies-modal__score,
.ies-app .ies-modal[data-role="result-modal"].is-victory [data-role="result-close-button"],
.ies-app .ies-modal[data-role="result-modal"].is-defeat .ies-modal__eyebrow,
.ies-app .ies-modal[data-role="result-modal"].is-defeat .ies-modal__score,
.ies-app .ies-modal[data-role="result-modal"].is-defeat [data-role="result-close-button"] {
  display: none !important;
}

.ies-app .ies-modal[data-role="result-modal"].is-victory .ies-result-final-score {
  display: block;
}

.ies-app .ies-modal[data-role="result-modal"].is-victory [data-role="result-restart-button"],
.ies-app .ies-modal[data-role="result-modal"].is-defeat [data-role="result-restart-button"] {
  padding: 8px 16px;
  border-radius: 999px;
  border: 0;
  background: #007f33;
  color: #fff;
  font-family: IberPangea, Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}

.ies-app .ies-modal[data-role="result-modal"].is-victory [data-role="result-restart-button"]::after,
.ies-app .ies-modal[data-role="result-modal"].is-defeat [data-role="result-restart-button"]::after {
  content: '';
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M14.6667 2.66675V6.66675H10.6667' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13 9.33341C12.5666 10.5596 11.6994 11.5852 10.5606 12.2154C9.4218 12.8456 8.09046 13.037 6.819 12.7535C5.54755 12.4701 4.42281 11.7313 3.65816 10.6778C2.89352 9.62434 2.54162 8.32681 2.66904 7.03156C2.79645 5.73631 3.39445 4.53208 4.3494 3.64741C5.30435 2.76273 6.55087 2.2581 7.85236 2.2295C9.15386 2.20089 10.4212 2.65019 11.414 3.49201C12.4068 4.33383 13.0573 5.51072 13.2454 6.79808' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}



.ies-app .ies-modal__dialog--alert {
  width: min(92vw, 560px);
  border: 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0,64,42,.30);
  color: #002015;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: -30px;
  margin-left: 110px;
}

.ies-app .ies-modal[data-role="alert-modal"] .ies-modal__backdrop {
  background: rgba(0,0,0,0);
  backdrop-filter: none;
}

.ies-app .ies-alert-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ies-app .ies-alert-icon {
  width: 50px;
  height: 44px;
}
.ies-app .ies-alert-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ies-app .ies-modal__dialog--alert .ies-modal__eyebrow {
  display: none;
}

.ies-app .ies-modal__dialog--alert h2 {
  margin: 0;
  font-family: IberPangea, Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
  color: #00402a;
}

.ies-app .ies-modal__dialog--alert .ies-modal__summary {
  margin: 0;
  font-family: IberPangea, Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  color: #002015;
}
.ies-app .ies-modal__dialog--alert .ies-modal__summary p { margin: 0 0 12px; }
.ies-app .ies-modal__dialog--alert .ies-modal__summary p:last-child { margin-bottom: 0; }

.ies-app .ies-modal__dialog--alert .ies-modal__actions {
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.ies-app .ies-alert-btn {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 32px;
  background: #007f33;
  padding: 12px 16px;
  font-family: IberPangea, Arial, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 18px;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.ies-app .ies-alert-btn:hover {
  background: #00402a;
}
.ies-app .ies-alert-btn:focus-visible {
  outline: 2px solid #00402a;
  outline-offset: 2px;
}

.ies-app .ies-alert-close {
  position: static;
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ies-app.ies-alert-open .ies-stage,
.ies-app.ies-alert-open .ies-control-dock,
.ies-app.ies-alert-open .ies-float-card--score {
  filter: blur(3px) !important;
  transition: filter 160ms ease;
}

/* ── Reset turns modal — Figma 7698:18279 ─────────────────────────── */
.ies-app .ies-modal__dialog--reset {
  width: min(92vw, 658px);
  border: 0;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 64, 42, .30);
  padding: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}

.ies-app .ies-reset-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.ies-app .ies-modal__dialog--reset > * {
  margin: 0;
  font-family: IberPangea, Arial, sans-serif;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.3;
  color: #00402a;
}

.ies-app .ies-modal__dialog--reset .ies-modal__summary {
  margin: 0;
  font-family: IberPangea, Arial, sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.45;
  color: #555;
}
.ies-app .ies-modal__dialog--reset .ies-modal__summary p { margin: 0 0 8px; }
.ies-app .ies-modal__dialog--reset .ies-modal__summary p:last-child { margin-bottom: 0; }
.ies-app .ies-modal__dialog--reset .ies-modal__summary strong,
.ies-app .ies-modal__dialog--reset .ies-modal__summary b {
  font-weight: 700;
  color: #002015;
}

.ies-app .ies-modal__dialog--reset .ies-modal__actions {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ies-app .ies-modal__dialog--reset .ies-button {
  border-radius: 999px;
  padding: 10px 20px;
  font-family: IberPangea, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

.ies-app .ies-modal__dialog--reset .ies-button--ghost {
  border: 1px solid #007f33;
  background: transparent;
  color: #007f33;
  transition: border-color 150ms ease, color 150ms ease;
}
.ies-app .ies-modal__dialog--reset .ies-button--ghost:hover {
  border-color: #00402a;
  color: #00402a;
}

.ies-app .ies-modal__dialog--reset .ies-button--primary {
  border: 0;
  background: #007f33;
  color: #fff;
}
.ies-app .ies-modal__dialog--reset .ies-button--primary:hover {
  background: #00402a;
}

/* ── Learn more modal — Figma 7145:21827 ────────────────────────── */
.ies-app .ies-learn-more-header {
  background: #ecf7ef;
  border-bottom: 1px solid rgba(162, 188, 177, 0.4);
  padding: 16px 24px 17px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-shrink: 0;
}

.ies-app .ies-learn-more-close {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ies-app .ies-learn-more-close::after {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 6L6 18M6 6L18 18' stroke='%2300402A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ies-app .ies-learn-more-layout {
  display: flex;
  flex-direction: row-reverse;
}

.ies-app .ies-learn-more-content {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
}

.ies-app .ies-learn-more-content h2 {
  margin: 0 0 14px;
  color: #00402a;
  font-family: IberPangea, Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

.ies-app .ies-learn-more-body {
  margin-top: 0;
  color: #555;
  font-family: IberPangea, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.3;
}

.ies-app .ies-learn-more-body > *:not(:first-child) { margin-top: 1rem; }

.ies-app .ies-learn-more-body > :first-child { margin-top: 0; }
.ies-app .ies-learn-more-body > :last-child { margin-bottom: 0; }

.ies-app .ies-learn-more-body p { margin: 0; }
.ies-app .ies-learn-more-body br { display: none; }
.ies-app .ies-learn-more-body ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.ies-app .ies-learn-more-body li { margin: 0; }
.ies-app .ies-learn-more-body strong,
.ies-app .ies-learn-more-body b { font-weight: 700; color: #555; }

.ies-app .ies-learn-more-media {
  position: relative;
  overflow: hidden;
  order: -1;
  aspect-ratio: 3 / 2;
  width: 450px;
  height: 500px;
  min-width: 450px;
}

.ies-app .ies-learn-more-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ies-app .ies-tutorial-list {
  margin: .75rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .48rem;
  color: #355a4c;
  font-size: .95rem;
  line-height: 1.4;
}

.ies-app .ies-modal-check {
  margin-top: .8rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .85rem;
  color: #2e5143;
}

.ies-app .ies-modal-check input {
  width: 16px;
  height: 16px;
}

.ies-app .ies-tutorial-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: .95rem 1.45rem;
  border-bottom: 1px solid rgba(162, 188, 177, 0.4);
  background: #ecf7ef;
}

.ies-app .ies-tutorial-head .ies-modal__eyebrow {
  display: none;
}

.ies-app .ies-tutorial-skip,
.ies-app .ies-tutorial-link {
  border: 0;
  background: transparent;
  color: #007f33;
  font-family: IberPangea, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  line-height: 1;
  border-radius: 99px;
}

.ies-app .ies-tutorial-skip::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M1 5.66667H10.3333M5.66667 10.3333L10.3333 5.66667L5.66667 1' stroke='%23007F33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ies-app .ies-tutorial-link {
  text-decoration: underline;
}

.ies-app .ies-tutorial-intro {
  padding: 2rem 2.5rem 1.5rem;
  text-align: center;
}

.ies-app .ies-tutorial-intro__eyebrow {
  margin: 0;
  color: #00402a;
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.ies-app .ies-tutorial-intro h2 {
  margin: .75rem auto 0;
  max-width: 820px;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1.15;
  color: #00402a;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.ies-app .ies-tutorial-intro__description {
  margin: 1.15rem auto 0;
  max-width: 500px;
  color: #555;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: -0.02em;
}

.ies-app .ies-tutorial-intro__description > :first-child { margin-top: 0; }
.ies-app .ies-tutorial-intro__description > :last-child { margin-bottom: 0; }

.ies-app .ies-tutorial-intro__chips {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;
}

.ies-app .ies-tutorial-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d8cfc7;
  border-radius: 12px;
  padding: .3rem .875rem;
  font-size: 1rem;
  color: #4a5565;
  background: #fff;
  font-weight: 500;
}

.ies-app .ies-tutorial-intro__actions {
  margin-top: 2.25rem;
  display: grid;
  justify-content: center;
  gap: 1rem;
}

.ies-app .ies-tutorial-intro__actions [data-role="tutorial-intro-start-button"] {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: #007f33;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-family: IberPangea, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  width: fit-content;
  margin: auto;
  gap: 16px;
}

.ies-app .ies-tutorial-intro__actions [data-role="tutorial-intro-start-button"]::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.33 8H12.67' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M8 3.33L12.67 8L8 12.67' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ies-app .ies-tutorial-intro__media {
  margin-top: 1.1rem;
}

.ies-app .ies-tutorial-intro__media img {
  display: block;
  width: min(100%, 760px);
  margin: 0 auto;
  border-radius: 14px;
}

.ies-app .ies-tutorial-wizard__layout {
  display: grid;
  grid-template-columns: 50% 50%;
  height: 380px;
}

.ies-app .ies-tutorial-wizard__image-wrap {
  order: 2;
  border-left: 0;
  background: transparent;
  overflow: hidden;
  position: relative;
}

.ies-app .ies-tutorial-wizard__image {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  display: block;
}

.ies-app .ies-tutorial-wizard__content {
  order: 1;
  padding: 3rem 2.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.ies-app .ies-tutorial-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.05rem;
  margin-bottom: 1.5rem;
  position: absolute;
  top: 1.5rem;
  left: 2.5rem;
}

.ies-app .ies-tutorial-tab {
  border: 0;
  background: transparent;
  color: #00402A;
  font: inherit;
  font-weight: 400;
  padding: 0 0 .2rem;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  font-size: 0.875rem; /* 14px */
}

.ies-app .ies-tutorial-tab.is-active {
  font-weight: 600;
  border-bottom-color: #00402A;
}

.ies-app .ies-tutorial-wizard__content h2 {
  margin: 0 0 .875rem;
  font-family: IberPangea, Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: #00402a;
}

.ies-app .ies-tutorial-step-body {
  margin: 0;
  font-family: IberPangea, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #555;
  max-width: 100%;
}

.ies-app .ies-tutorial-step-body > :first-child { margin-top: 0; }
.ies-app .ies-tutorial-step-body > :last-child { margin-bottom: 0; }

.ies-app .ies-tutorial-wizard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  min-height: 72px;
  padding: 17px 16px 16px 24px;
  border-top: 1px solid rgba(162, 188, 177, 0.4);
  background: #fff;
}

/* ── Footer: Anterior button ───────────────────────────── */
.ies-app .ies-tutorial-wizard__footer [data-role="tutorial-prev-button"] {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  border: 1px solid #00402a;
  border-radius: 999px;
  background: transparent;
  color: #00402a;
  font-family: IberPangea, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
}

.ies-app .ies-tutorial-wizard__footer [data-role="tutorial-prev-button"]::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.67 8H3.33' stroke='%2300402a' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M8 3.33L3.33 8L8 12.67' stroke='%2300402a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Footer: Siguiente button ───────────────────────────── */
.ies-app .ies-tutorial-wizard__footer [data-role="tutorial-next-button"] {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: #007f33;
  color: #fff;
  font-family: IberPangea, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
}

.ies-app .ies-tutorial-wizard__footer [data-role="tutorial-next-button"]::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.33 8H12.67' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M8 3.33L12.67 8L8 12.67' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── ÚLTIMO PASO (4/4): icono play en botón “Jugar” ──────────────────── */
.ies-app .ies-tutorial-wizard__footer [data-role="tutorial-next-button"].is-last-step::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 2L13.33 8L4 14V2Z' fill='white' stroke='white' stroke-width='1.333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ies-app .ies-tutorial-bottom {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .9rem 1.25rem 1.1rem;
  border-top: 1px solid #eff5f1;
}

.ies-app .ies-tutorial-progress {
  font-family: IberPangea, Arial, sans-serif;
  font-size: .875rem;
  font-weight: 400;
  color: #00402a;
  text-align: center;
  white-space: nowrap;
  margin: 0;
  line-height: 1;
}

.ies-app .ies-modal__actions--tutorial {
  justify-content: space-between;
  align-items: center;
}

.ies-app .ies-modal__actions--tutorial [data-role="tutorial-close-button"] {
  margin-right: auto;
}

.ies-app .ies-tutorial-wizard__footer [data-role="tutorial-prev-button"][disabled],
.ies-app .ies-modal__actions--tutorial [data-role="tutorial-prev-button"][disabled] {
  opacity: 0.30;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Game-over lock ─────────────────────────────────────────────── */
.ies-app .ies-control-dock.is-locked { opacity: .75; pointer-events: none; }

/* ── Error fallback ─────────────────────────────────────────────── */
.ies-app .ies-error {
  padding: 1.5rem; border-radius: var(--ies-r-md);
  background: #fff5f5; border: 1px solid #f5c0c0; color: #7a2020;
}

/* ── Responsive ≥ 1267px – compact viewport height ─────────────────── */
@media (max-height: 700px) and (min-width: 900px) {
  .ies-app { padding: .5rem; }
  .ies-app .ies-topbar { margin-bottom: .35rem; }
  .ies-app .ies-stage-viewport { padding: .5rem; padding-bottom: 4.8rem; }
  .ies-app .ies-float-card--indicators { padding: 16px; gap: 16px; }
  .ies-app .ies-mini-grid > div { padding: 14px 16px; }
  .ies-app .ies-mini-grid strong { font-size: 1.25rem; }
  .ies-app .ies-indicator__value { font-size: 1rem; }
  .ies-app .ies-control-card__body { max-height: min(36vh, 280px); padding: .6rem; }
  .ies-app .ies-control-dock { bottom: .45rem; }
}

@media (min-width: 2000px) and (min-height: 1000px) {
  .ies-app .ies-stage { width: 100%; }
}

/* ── Desktop corto (ej. 1267x653): encajar el simulador completo en pantalla ── */
@media (max-width: 1320px) and (min-width: 1100px) and (max-height: 700px) {
  .ies-app {
    max-width: 100%;
    padding: .35rem;
  }

  .ies-app .ies-topbar {
    margin-bottom: .2rem;
    gap: .45rem;
  }

  .ies-app .ies-button {
    padding: .4rem .7rem;
    font-size: .88rem;
  }

  .ies-app .ies-canvas {
    margin-top: 0;
  }

  .ies-app .ies-modal__dialog {
    height: 100%;
    max-height: 100%;
    overflow: auto;
  }

  .ies-app .ies-stage-viewport {
    padding: .35rem;
    padding-bottom: 5.35rem;
  }

  .ies-app .ies-stage {
    width: min(100%, 700px);
  }

  .ies-app .ies-float-card--indicators {
    top: 0;
    left: 0;
    width: min(44%, 380px);
    padding: 14px;
    gap: 14px;
    border-radius: 16px;
  }

  .ies-app .ies-float-card__title {
    font-size: .75rem;
  }

  .ies-app .ies-indicators {
    gap: 12px;
  }

  .ies-app .ies-gauge {
    width: 34px;
    height: 18px;
    border-width: 3px;
  }

  .ies-app .ies-gauge__needle {
    height: 13px;
    width: 2px;
  }

  .ies-app .ies-indicator__value {
    font-size: .9rem;
  }

  .ies-app .ies-indicator__label {
    font-size: .7rem;
  }

  .ies-app .ies-learn-card {
    padding: 12px;
    gap: 12px;
    border-radius: 16px;
  }

  .ies-app .ies-learn-card__teaser {
    font-size: .75rem;
    padding-right: 12px;
  }

  .ies-app .ies-learn-card__button {
    font-size: .875rem;
    padding: 6px 12px;
    gap: 10px;
  }

  .ies-app .ies-control-dock {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px;
    border-radius: 24px;
    gap: 10px;
  }

  .ies-app .ies-dock-inner {
    gap: 10px;
  }

  .ies-app .ies-panel-section {
    padding: 16px;
    border-radius: 24px;
    gap: 8px;
  }
  .ies-app .ies-panel-section--generation {
    width: 340px;
  }
  .ies-app .ies-panel-section__tabs {
    gap: 8px;
  }
  .ies-app .ies-control-card__icon {
    width: 24px;
    height: 24px;
  }

  .ies-app .ies-control-card__tab {
    height: 40px;
    padding: 6px 6px 6px 12px;
    font-size: 1rem;
    gap: 16px;
  }

  .ies-app .ies-control-card__tab-arrow {
    width: 28px;
    height: 28px;
  }

  .ies-app .ies-control-card__body {
    max-height: 300px;
    padding: 12px 12px 24px 12px;
  }

  .ies-app .ies-modal__dialog--alert {
    margin-top: 10px;
    margin-left: 140px;
  }
}

@media (max-width: 1100px) {
  .ies-app .ies-step-btn {
    width: 22px;
    height: 22px;
    font-size: .75rem;
  }
  .ies-app .ies-control__step { gap: 0; } 
}

/* ── Responsive ≤ 900px ─────────────────────────────────────────────── */
@media (max-width: 1000px) {
  /* ── App shell ── */
  .ies-app { padding: 0; }

  /* ── Topbar ── */
  .ies-app .ies-topbar { flex-direction: column; align-items: flex-start; }
  .ies-app .ies-topbar__actions { width: 100%; }
  .ies-app .ies-button { flex: 1; text-align: center; font-size: .85rem; padding: .4rem .6rem; }

  /* ── Stage: vertical stack ── */
  .ies-app .ies-canvas { overflow: visible; margin-top: 15px; }

  .ies-app .ies-gauge { width: 39px; height: 21px; }
  .ies-app .ies-indicator__value { font-size: 0.875rem; }
  .ies-app .ies-indicator__label { font-size: 0.75rem; }
  .ies-app .ies-control-card.is-active .ies-control-card__body { border-radius: 24px; }

  .ies-app .ies-stage-viewport {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 12px;
    overflow: hidden;
  }

  .ies-app .ies-modal__backdrop { width: 100vw; }
  .ies-app .ies-tutorial-tabs { position: static; justify-content: space-between; }
  .ies-app .ies-tutorial-intro__eyebrow { font-size: 0.875rem; }
  .ies-app .ies-tutorial-intro h2 { font-size: 1.625rem; }
  .ies-app .ies-tutorial-chip { font-size: .875rem; }

  .ies-app .ies-float-card--indicators {
    position: static;
    order: 1;
    width: 100%;
    padding: 12px;
  }

  .ies-app .ies-mini-grid > div { padding: 4px 8px; flex-direction: row; justify-content: center; border-radius: 6px 0 0 6px; gap: 5px !important; min-width: fit-content; }
  .ies-app .ies-mini-grid > div + div { border-radius: 0 6px 6px 0; } 

  .ies-app .ies-float-card--score {
    position: static;
    order: 2;
    width: 100%;
    align-items: center;
    flex-direction: column-reverse;
    justify-content: space-between;
  }

  .ies-app .ies-stage {
    order: 3;
    width: 100%;
    margin: 0;
    transform: scale(1.5);
    margin-top: 50px;
  }

  .ies-app::before { width: 100vw; }

  /* ── Indicators ── */
  .ies-app .ies-indicators { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0; }
  .ies-app .ies-mini-grid strong { font-size: 0.875rem; }
  .ies-app .ies-info-trigger { margin-right: 0; margin-left: 10px; }
  .ies-app .ies-mini-grid { border-radius: 6px; max-width: 100%; }
  .ies-app .ies-mini-grid__label::after { content: ':'; }
  .ies-app .ies-score-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
  }
  .ies-app .ies-score-actions__group {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* ── Control dock ── */
  .ies-app .ies-control-dock {
    position: relative; /* flex-item flow inside .ies-stage-viewport (order: 4) instead of desktop's absolute */
    order: 4;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 0;
  }

  .ies-app .ies-learn-more-layout { flex-direction: column; }
  .ies-app .ies-learn-more-media { min-width: unset;
    height: unset;
    aspect-ratio: 3 / 2;
    max-width: 100%; }

  /* Arrows live outside/above the dock (Figma 7761-5040) and page between the two panels.
     order:4 groups it with .ies-control-dock (also order:4) among the .ies-stage-viewport
     flex items — without it, it defaults to order:0 and jumps above the indicators/score. */
  .ies-app .ies-dock-nav {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    align-items: center;
    order: 4;
    margin-top: 30px;
    margin-bottom: -10px;
  }

  .ies-app .ies-dock-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 8px 5px;
  }
  .ies-app .ies-dock-inner::-webkit-scrollbar { display: none; }

  /* Each panel-section is its own page (arrows/swipe move between them), keeping its own
     title and card look — no more flattening the two panels together. No scroll-snap: with
     mandatory snap and only one snap point per panel (its own start), ending a scroll gesture
     partway through the wide "Consumo" panel (its 3 inline cards) force-snapped back to that
     single point — exactly the jump/bounce reported. Plain free scroll stays fluid instead. */
  .ies-app {
    --ies-mobile-card-w: 310px;
  }
  .ies-app .ies-panel-section--generation {
    flex: 0 0 88%;
    width: auto;
  }
  /* No fixed width: it grows to fit its 3 inline cards, so the *outer* .ies-dock-inner scroll
     (not a nested one) is what reveals all of them — exactly the "global dock" scroll asked for. */
  .ies-app .ies-panel-section--consumption {
    flex: 0 0 auto;
    width: auto;
  }

  .ies-app .ies-control-card {
    flex: none;
    width: var(--ies-mobile-card-w);
  }

  .ies-app .ies-control-card__tab {
    height: 40px;
    padding: 6px 6px 6px 12px;
    border-radius: 24px;
    font-size: 1rem;
    gap: 16px;
  }

  .ies-app .ies-control-card__tab-arrow {
    width: 28px;
    height: 28px;
  }

  .ies-app .ies-control-card.is-active .ies-control-card__tab {
    border-radius: 0 0 24px 24px;
  }

  /* Open dropdown: relocated to .ies-control-dock (see openMobileDropdown in simulator.js) and
     absolutely positioned there — that ancestor doesn't horizontally scroll (only its child
     .ies-dock-inner does, for panel paging), so this scrolls natively with the page, same as
     desktop's mechanism, with zero JS-driven repositioning needed for the common case. */
  .ies-app .ies-control-card__body.is-mobile-floating {
    right: auto;
    max-height: 60vh;
    padding: 12px 16px;
    z-index: 300;
    margin-bottom: -7px;
  }

  /* ── Learn card: oculto en mobile ── */
  .ies-app .ies-learn-card { display: none; }

  /* ── Control card body: spacing + font-size (Figma mobile) ── */
  .ies-app .ies-control-card__title-row { padding-bottom: 5px; }
  .ies-app .ies-control-card__title { font-size: 0.875rem; line-height: 1.71; }
  .ies-app .ies-control-card__info-btn { display: inline-flex; }
  .ies-app .ies-controls-section { padding-top: 16px; gap: 8px; }
  .ies-app .ies-readonly-rows { gap: 8px; }
  .ies-app .ies-readonly-row__head { margin-bottom: 0; }
  .ies-app .ies-control__title { font-size: 0.875rem; }
  .ies-app .ies-control__value { font-size: 1rem; }
  .ies-app .ies-readonly-row__label { font-size: 0.875rem; }
  .ies-app .ies-readonly-row__value { font-size: 0.875rem; }

  /* ── Tutorial modal ── */
  .ies-app .ies-modal__dialog--tutorial,
  .ies-app .ies-modal--tutorial-intro .ies-modal__dialog--tutorial,
  .ies-app .ies-modal--tutorial-wizard .ies-modal__dialog--tutorial { width: 100%; max-width: 100%; max-height: 98%; overflow: auto; }
  .ies-app .ies-modal__dialog--learn { width: min(96vw, 820px); }
  .ies-app .ies-modal { padding: 0; }

  .ies-app .ies-tutorial-wizard__layout { display: flex; flex-direction: column; min-height: auto; height: auto; }
  .ies-app .ies-tutorial-wizard__image-wrap { order: 3; border: 0; padding: 0 16px; }
  .ies-app .ies-tutorial-wizard__image { min-height: 220px; border-radius: 16px; height: 271px; }
  /* display:contents expone los hijos (tabs, h2, body) al flex padre para poder ordenarlos */
  .ies-app .ies-tutorial-wizard__content { display: contents; padding: 0; }

  .ies-app .ies-tutorial-tabs { order: 1; padding: 0 24px; margin-bottom: 0; margin-top: 24px; gap: 0; }
  .ies-app .ies-tutorial-wizard__content h2 {
    order: 2;
    padding: 24px;
    font-size: 1.375rem;
    text-align: center;
    margin: 0;
    line-height: 1.14;
    margin-top: 24px;
  }
  .ies-app .ies-tutorial-step-body {
    order: 4;
    padding: 0 24px 24px;
    font-size: 0.875rem;
    text-align: center;
    line-height: 1.43;
    margin-top: 24px;
  }

  /* Footer: botones circulares solo icono (Figma mobile) */
  .ies-app .ies-tutorial-wizard__footer { padding: 17px 16px 16px; }
  .ies-app .ies-tutorial-progress { order: 0; }

  .ies-app .ies-tutorial-wizard__footer [data-role="tutorial-prev-button"],
  .ies-app .ies-tutorial-wizard__footer [data-role="tutorial-next-button"] {
    flex: none;
    width: 40px;
    height: 40px;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
    font-size: 0;
  }

  .ies-app .ies-tutorial-wizard__footer [data-role="tutorial-prev-button"]::before,
  .ies-app .ies-tutorial-wizard__footer [data-role="tutorial-next-button"]::after {
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    background-size: 11px 11px;
  }

  /* ── Alert modal ── */
  .ies-app .ies-modal[data-role="alert-modal"] {
    padding: 0;
  }

  .ies-app .ies-modal__dialog--alert {
    width: 100%;
    border-radius: 20px;
    padding: 24px;
    gap: 24px;
    margin: 0;
    margin-top: 170px;
  }

  .ies-app .ies-alert-btn {
    font-size: .875rem;
    padding: 10px 14px;
    gap: 12px;
  }

  /* ── Reset turns modal ── */
  .ies-app .ies-modal__dialog--reset {
    width: 100%;
    border-radius: 20px;
    padding: 32px 24px;
    gap: 24px;
  }
  .ies-app .ies-reset-content { gap: 24px; }
  .ies-app .ies-modal__dialog--reset h2 { font-size: 1.25rem; }
  .ies-app .ies-modal__dialog--reset .ies-modal__actions { width: 100%; }
  .ies-app .ies-modal__dialog--reset .ies-button { flex: 1 1 auto; }

  /* ── Result modal ── */
  .ies-app .ies-modal[data-role="result-modal"].is-victory .ies-modal__dialog--result,
  .ies-app .ies-modal[data-role="result-modal"].is-defeat .ies-modal__dialog--result {
    width: min(94vw, 560px);
    padding: 32px 20px;
    gap: 24px;
    border-radius: 20px;
  }

  .ies-app .ies-modal__dialog--result h2 { font-size: 28px; }
  .ies-app .ies-modal__summary--result { font-size: 18px; max-width: 100%; }

  .ies-app .ies-result-indicators {
    flex-wrap: wrap;
    height: auto;
  }

  .ies-app .ies-result-indicator {
    flex: 1 1 calc(50% - 4px);
    min-width: calc(50% - 4px);
    height: 88px;
  }

  .ies-app .ies-modal[data-role="result-modal"].is-victory [data-role="result-restart-button"],
  .ies-app .ies-modal[data-role="result-modal"].is-defeat [data-role="result-restart-button"] {
    width: 100%;
    justify-content: center;
  }

  .ies-app .ies-readonly-row__bar-track, .ies-app .ies-slider { display: none; }

  /* ── Learn more modal ── */
  .ies-app .ies-learn-more-content { padding: 24px; }

  /* ── Touch targets ≥ 44×44 (WCAG 2.5.5) ── */
  /* Pseudo-elemento invisible centrado; no altera visual ni layout */
  .ies-app .ies-info-trigger,
  .ies-app .ies-control-card__info-btn,
  .ies-app .ies-alert-close,
  .ies-app .ies-learn-more-close,
  .ies-app .ies-dock-nav__btn,
  .ies-app .ies-step-btn {
    position: relative;
  }
  .ies-app .ies-info-trigger::before,
  .ies-app .ies-control-card__info-btn::before,
  .ies-app .ies-alert-close::before,
  .ies-app .ies-learn-more-close::before,
  .ies-app .ies-dock-nav__btn::before,
  .ies-app .ies-step-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ies-app .ies-layer, .ies-app .ies-control, .ies-app .ies-stage__flash,
  .ies-app .ies-loading-overlay, .ies-app .ies-readonly-row__bar-fill {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
  .ies-app .ies-stage.is-updating .ies-stage__flash { animation: none; }
  .ies-app .ies-loading-ring div { animation: none; border-color: #fff !important; }
}

/* ── Manual reduced motion toggle (same behavior as media query) ── */
.ies-app.ies-reduced-motion .ies-layer,
.ies-app.ies-reduced-motion .ies-control,
.ies-app.ies-reduced-motion .ies-stage__flash,
.ies-app.ies-reduced-motion .ies-loading-overlay,
.ies-app.ies-reduced-motion .ies-readonly-row__bar-fill {
  transition-duration: 1ms !important;
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
}

.ies-app.ies-reduced-motion .ies-stage.is-updating .ies-stage__flash,
.ies-app.ies-reduced-motion .ies-loading-ring div {
  animation: none !important;
}