/* ════════════════════════════════════════════════════════
   simulador.css — Estils del simulador (editor + resultat)
   Totes les classes comencen per «sim-». Depèn de tokens.css
   i de highlight.css.

   Editor: el <textarea> (transparent) i el <pre> (amb colors)
   han de tenir EXACTAMENT la mateixa lletra, mida, interlineat
   i marges; si no, el cursor no coincideix amb el text.
   ════════════════════════════════════════════════════════ */

/* Abans de muntar-se (es munta quan s'acosta a la pantalla): l'espai que ocuparà */
.simulador:not(.sim) {
  height: var(--sim-height, 26rem);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
}

.sim {
  --sim-line: 1.5rem;          /* interlineat de l'editor (24 px) */
  --sim-pad: 0.75rem;          /* marge interior de l'editor */

  display: flex;
  flex-direction: column;
  height: var(--sim-height, 26rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  overflow: hidden;
}

/* ── Barra superior: pestanyes de fitxers i botons ── */

.sim-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.sim-tabs,
.sim-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.sim-tab,
.sim-button {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.sim-tab {
  font-family: var(--font-code);
}

.sim-tab[aria-selected="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-text);
}

.sim-button:hover,
.sim-tab:hover {
  border-color: var(--color-accent);
}

.sim-button--check {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-weight: 700;
}

.sim-button:disabled {
  cursor: progress;
  opacity: 0.7;
}

/* ── Zona principal: codi i resultat ── */

.sim-main {
  display: grid;
  grid-template-rows: 1fr 1fr;
  flex: 1;
  min-height: 0;
}

.sim-code {
  display: flex;
  min-height: 0;
  border-bottom: 1px solid var(--color-border);
}

.sim-code__panel {
  flex: 1;
  min-width: 0;
}

.sim-code__panel[hidden] {
  display: none;
}

.sim-result {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.sim-result__header {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.875rem;
}

.sim-result__body {
  flex: 1;
  min-height: 0;
}

.sim-preview__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #ffffff;   /* com una pàgina nova al navegador, també en tema fosc */
}

@media (min-width: 48rem) {
  .sim-main {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
  }

  .sim-code {
    border-right: 1px solid var(--color-border);
    border-bottom: 0;
  }
}

/* ── Panells: ⚠ Problemes i ✓ Comprovacions ── */

.sim-panels {
  flex: none;
  max-height: min(12rem, 40%);
  overflow-y: auto;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.875rem;
}

.sim-panels__tabs {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.sim-panel-tab {
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.sim-panel-tab[aria-selected="true"] {
  border-color: var(--color-border);
  background: var(--color-bg);
}

.sim-panels__panel[hidden] {
  display: none;
}

.sim-problems__header {
  position: sticky;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface);
}

.sim-problems__title {
  font-weight: 600;
}

.sim-problems__status {
  color: var(--color-muted);
}

.sim-problems__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sim-problem {
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  border-top: 1px solid var(--color-border);
  border-left: 4px solid var(--color-info);
}

.sim-problem--error {
  border-left-color: var(--color-error);
}

.sim-problem--warning {
  border-left-color: var(--color-warning);
}

.sim-problem__goto {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sim-problem__goto:hover .sim-problem__text {
  text-decoration: underline;
}

.sim-problem__goto:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.sim-problem__where {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
}

.sim-problem--error .sim-problem__where {
  color: var(--color-error);
}

.sim-problem--warning .sim-problem__where {
  color: var(--color-warning);
}

.sim-problem--info .sim-problem__where {
  color: var(--color-info);
}

.sim-problem__text {
  display: block;
  overflow-wrap: anywhere;
}

.sim-problem__hint {
  margin: 0.125rem 0 0;
  overflow-wrap: anywhere;
}

.sim-problem__details,
.sim-problems__hidden {
  color: var(--color-muted);
  font-size: 0.75rem;
}


.sim-problems__hidden {
  padding: var(--space-1) var(--space-2);
  border-top: 1px solid var(--color-border);
}

.sim-checks__status,
.sim-checks__note {
  margin: 0;
  padding: var(--space-1) var(--space-2);
}

.sim-checks__status--pass {
  color: var(--color-ok);
  font-weight: 700;
}

.sim-checks__status--fail {
  font-weight: 700;
}

.sim-checks__note {
  color: var(--color-warning);
}

.sim-checks__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sim-check {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-top: 1px solid var(--color-border);
}

.sim-check__icon {
  flex: none;
  width: 1.25em;
  font-weight: 700;
  text-align: center;
}

.sim-check--pass .sim-check__icon {
  color: var(--color-ok);
}

.sim-check--fail .sim-check__icon {
  color: var(--color-error);
}

.sim-check__text {
  overflow-wrap: anywhere;
}

.sim-check__detail {
  color: var(--color-muted);
}

/* Iframe ocult on s'avaluen les comprovacions (mida fixa: el resultat no
   depèn de la finestra de l'alumne) */
.sim-check-frame {
  position: fixed;
  top: 0;
  left: -10000px;
  width: 800px;
  height: 600px;
  border: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Missatges breus (enllaços, formularis…) ── */

.sim-message {
  display: none;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.sim-message--visible {
  display: block;
}

/* ── Editor ── */

.sim-editor {
  display: flex;
  height: 100%;
  background: var(--color-surface);
  font-family: var(--font-code);
  font-size: 1rem;              /* 16 px: Safari de l'iPhone no fa zoom */
  line-height: var(--sim-line);
}

.sim-editor__gutter {
  flex: none;
  min-width: 2.75rem;
  padding: var(--sim-pad) var(--space-2) var(--sim-pad) 0;
  overflow: hidden;
  border-right: 1px solid var(--color-border);
  color: var(--color-muted);
  text-align: right;
  user-select: none;
}

.sim-editor__line-number {
  height: var(--sim-line);
}

.sim-editor__body {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.sim-editor__highlight,
.sim-editor__input {
  margin: 0;
  padding: var(--sim-pad);
  border: 0;
  font: inherit;
  letter-spacing: normal;
  font-variant-ligatures: none;
  tab-size: 2;
  white-space: pre;
  overflow-wrap: normal;
}

.sim-editor__highlight {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  color: var(--color-text);
  pointer-events: none;
}

.sim-editor__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  resize: none;
  overflow: auto;
  background: transparent;
  color: transparent;
  caret-color: var(--color-text);
  outline: none;
}

.sim-editor__input::selection {
  background: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.sim-editor:focus-within {
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

.sim-editor__marks {
  position: absolute;
  top: var(--sim-pad);
  right: 0;
  left: 0;
  pointer-events: none;
}

.sim-editor__mark {
  position: absolute;
  top: calc(var(--line) * var(--sim-line));
  right: 0;
  left: 0;
  height: var(--sim-line);
}

.sim-editor__mark--error {
  background: color-mix(in srgb, var(--color-error) 18%, transparent);
}

.sim-editor__mark--warning {
  background: color-mix(in srgb, var(--color-warning) 18%, transparent);
}

.sim-editor__toast {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-text);
  font-size: 0.8125rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.sim-editor__toast--visible {
  opacity: 1;
}

/* ── Editor lliure: ocupa tota la pantalla ── */

.sim--pantalla {
  --sim-height: 100%;
  flex: 1;
  border-width: 1px 0 0;
  border-radius: 0;
}