/* ===========================================================================
   CardioSim · Editor de Ritmos — página dedicada (layout sem scroll)
   =========================================================================== */
.re-layout {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--bg);
}

.re-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px; border-bottom: 1px solid var(--line);
  gap: 18px; background: var(--surface-1);
}
.re-brand { display: flex; align-items: center; gap: 12px; }
.re-topbar-acoes { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: flex-end; }
.re-nome-input { max-width: 360px; flex: 1; }

.re-corpo {
  display: grid;
  grid-template-columns: 230px minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 18px; padding: 18px 22px;
  min-height: 0; overflow: hidden;
}

.re-col-titulo {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-lo);
  margin-bottom: 10px;
}

/* Coluna 1: lista */
.re-lista-wrap { display: flex; flex-direction: column; min-height: 0; }
.re-lista {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 8px;
}
.re-cartao {
  padding: 10px 13px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); cursor: pointer; transition: all var(--t) var(--ease);
}
.re-cartao:hover { border-color: var(--accent-line); background: var(--surface-3); }
.re-cartao.ativo { border-color: var(--accent); background: var(--accent-soft); }
.re-cartao .nome { font-size: 13px; font-weight: 500; color: var(--text-hi); }
.re-cartao .meta { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--text-lo); margin-top: 2px; }

/* Coluna 2: centro */
.re-centro { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; }
.re-preview {
  position: relative; height: 260px; flex-shrink: 0;
  background: var(--bg-sunken); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
#re-canvas { width: 100%; height: 100%; display: block; }
.re-preview-badge {
  position: absolute; top: 12px; right: 14px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-lo);
}
.re-preview-badge span { color: var(--ecg); font-size: 13px; font-weight: 600; }
.re-presets-base { display: flex; flex-direction: column; gap: 8px; }
.re-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.re-chip {
  padding: 7px 13px; background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); color: var(--text-mid); font-size: 12px; cursor: pointer;
  transition: all var(--t) var(--ease); font-family: inherit;
}
.re-chip:hover { border-color: var(--accent-line); color: var(--accent); }

/* Coluna 3: controlos (sem scroll, grelha compacta) */
.re-controlos {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 0; overflow-y: auto;
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px;
}
.re-grupo { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.re-grupo:last-child { border-bottom: none; }
.re-grupo h4 {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-lo);
  margin-bottom: 8px;
}
.re-sl {
  display: grid; grid-template-columns: 92px 1fr 54px; gap: 10px; align-items: center;
  margin-bottom: 6px;
}
.re-sl label { font-size: 12px; color: var(--text-mid); }
.re-sl input[type=range] { width: 100%; }
.re-sl .rc-val {
  font-family: var(--font-mono); font-size: 11px; text-align: right;
  color: var(--accent); font-variant-numeric: tabular-nums;
}

@media (max-width: 1080px) {
  .re-corpo { grid-template-columns: 1fr; grid-auto-rows: min-content; overflow-y: auto; }
  .re-layout { height: auto; min-height: 100vh; }
}

/* Modo Manual / IA */
.re-modo { display: flex; gap: 8px; }
.re-modo-btn {
  flex: 1; padding: 9px 12px; border-radius: var(--r-md); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  color: var(--text-mid); font-size: 13px; font-weight: 500; font-family: inherit;
  transition: all var(--t) var(--ease);
}
.re-modo-btn:hover { border-color: var(--accent-line); }
.re-modo-btn.ativo { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.re-ia-bloco { display: flex; flex-direction: column; gap: 8px; }
.re-ia-estado { font-size: 12px; color: var(--text-lo); margin: 0; min-height: 16px; }
.re-ia-estado.ok { color: var(--accent); }
.re-ia-estado.erro { color: var(--crit, #FF5C66); }

/* ===========================================================================
   AVISO DE SMARTPHONE — o editor é melhor no computador
   =========================================================================== */
.re-aviso-movel { display: none; }
@media (max-width: 860px) {
  .re-aviso-movel {
    display: flex; position: fixed; inset: 0; z-index: 200;
    align-items: center; justify-content: center; padding: 24px;
    background: rgba(8,11,16,0.93); backdrop-filter: blur(10px);
  }
  .re-aviso-movel.dispensado { display: none; }
}
.re-aviso-cartao {
  max-width: 380px; width: 100%; text-align: center;
  background: var(--surface-1, #0E131B); border: 1px solid var(--line-strong, #232c38);
  border-radius: 20px; padding: 30px 26px; box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.re-aviso-ic {
  width: 62px; height: 62px; margin: 0 auto 16px; display: grid; place-items: center;
  font-size: 30px; border-radius: 50%;
  background: var(--accent-soft, rgba(0,230,160,0.12)); border: 1px solid var(--accent-line, rgba(0,230,160,0.3));
}
.re-aviso-cartao h2 { margin: 0 0 10px; font-size: 21px; color: var(--text-hi, #ECF1F8); }
.re-aviso-cartao p { margin: 0 0 20px; font-size: 14.5px; line-height: 1.55; color: var(--text-mid, #aeb9c8); }
.re-aviso-cartao .btn { width: 100%; height: 48px; }
.re-aviso-voltar { display: inline-block; margin-top: 14px; font-size: 13.5px; color: var(--text-lo, #7d8896); text-decoration: none; }
.re-aviso-voltar:hover { color: var(--accent, #00E6A0); }

/* ===========================================================================
   REFINAMENTO ESTÉTICO — mais elegante e legível (desktop-first)
   =========================================================================== */
/* Cabeçalhos de grupo com barra de cor à esquerda */
.re-grupo h4 {
  position: relative; padding-left: 12px;
  text-transform: uppercase; letter-spacing: 0.07em; font-size: 11.5px; color: var(--text-mid, #aeb9c8);
}
.re-grupo h4::before {
  content: ''; position: absolute; left: 0; top: 1px; bottom: 1px; width: 3px; border-radius: 2px;
  background: var(--accent, #00E6A0);
}
/* Linha de slider mais clara: rótulo em cima, valor à direita destacado */
.re-sl { gap: 10px; align-items: center; }
.re-sl .rc-val {
  min-width: 56px; text-align: right; font-family: var(--font-mono, monospace);
  font-size: 12px; color: var(--accent, #00E6A0); background: var(--accent-soft, rgba(0,230,160,0.10));
  border-radius: 6px; padding: 2px 7px;
}
.re-sl input[type=range] { accent-color: var(--accent, #00E6A0); height: 22px; }
/* Pré-visualização com moldura de monitor */
.re-preview {
  border: 1px solid var(--line-strong, #232c38); border-radius: 14px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 6px 20px rgba(0,0,0,0.3);
}
.re-preview-badge { backdrop-filter: blur(4px); }
/* Chips de "começar a partir de" mais tácteis */
.re-chip { transition: transform .12s, border-color .12s, color .12s; }
.re-chip:active { transform: scale(0.96); }
.re-chip.ativo { background: var(--accent-soft, rgba(0,230,160,0.12)); border-color: var(--accent, #00E6A0); color: var(--accent, #00E6A0); }
/* Selo "ritmo global" mais visível */
.re-global-tag {
  display: inline-flex; align-items: center; gap: 6px; margin-right: auto;
  background: rgba(245,211,61,0.12); border: 1px solid rgba(245,211,61,0.34); color: #F5D33D;
  border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600;
}
/* Bloco de publicação global (idioma + grupo) */
.re-global-meta {
  border-top: 1px dashed var(--line-strong, #232c38); margin-top: 4px; padding-top: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.re-global-meta h4 {
  margin: 0; text-transform: uppercase; letter-spacing: 0.07em; font-size: 11.5px; color: #F5D33D;
}
.re-gm-linha { display: flex; gap: 12px; flex-wrap: wrap; }
.re-gm-linha .campo { flex: 1 1 160px; min-width: 0; }

/* ===========================================================================
   FASE 3 — Quadro de desenho livre do PQRST
   =========================================================================== */
.btn-mini {
  font-size: 12px; padding: 4px 12px; height: auto; border-radius: 8px;
  background: var(--surface-2, #161c26); border: 1px solid var(--line-strong, #232c38); color: var(--text-mid, #aeb9c8);
}
.btn-mini:hover { border-color: var(--accent, #00E6A0); color: var(--accent, #00E6A0); }
.re-desenho-bloco { margin-bottom: 12px; }
.re-desenho-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.re-desenho-titulo { font-size: 13.5px; color: var(--text-mid, #aeb9c8); }
.re-desenho-titulo strong { color: var(--accent, #00E6A0); }
.re-desenho-area {
  position: relative; height: 200px; border-radius: 12px; overflow: hidden;
  background: #0a0e14; border: 1px solid var(--line-strong, #232c38); cursor: crosshair;
}
#re-desenho-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.re-desenho-guia {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 0 30px; font-size: 13px; color: var(--text-lo, #7d8896); pointer-events: none;
}
/* terceiro botão de modo cabe na barra */
.re-modo { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

.re-desenho-acoes { display: flex; gap: 6px; }
.re-desenho-area { cursor: default; }
#re-desenho-canvas { cursor: grab; }
#re-desenho-canvas:active { cursor: grabbing; }

/* Toggle "Disponível no simulador" (modo global do superadmin) */
.re-chk-simulador { display:flex; align-items:center; gap:9px; margin:10px 0 4px;
  font-size:13px; color:var(--text-mid); cursor:pointer; }
.re-chk-simulador input { accent-color: var(--accent); width:16px; height:16px; }
.re-chk-simulador strong { color: var(--text-hi); font-weight:600; }

/* Quota de IA: quantas gerações restam no mês (o número vem do servidor) */
.re-ia-quota {
  font-size: 12px; margin: 0; color: var(--text-mid, #9AA7B8);
  padding: 7px 10px; border-radius: 8px;
  background: var(--accent-soft, rgba(0,230,160,0.08));
  border: 1px solid var(--accent-line, rgba(0,230,160,0.3));
}
.re-ia-quota.esgotada {
  color: var(--crit, #FF5C66);
  background: rgba(255,92,102,0.08);
  border-color: rgba(255,92,102,0.35);
}