/* Easy Med — simulador de prova prática e a ferramenta do pino do painel.
   Cores dos tokens de styles.css; o pino é azul nos dois temas porque é o pino
   da prova de verdade, e a cor dele é parte do conteúdo, não do tema. */

:root {
  --pino: #2563EB;
  --pino-escuro: #1E3A8A;
  --pino-brilho: #BFDBFE;
  /* a peça fica sobre fundo claro também no tema escuro: ilustração e foto
     anatômica são feitas para papel, e no petróleo perdiam contraste */
  --prat-palco: #F1F5F4;
  --prat-palco-2: #FFFFFF;
  --prat-aco-1: #E4EBE9;
  --prat-aco-2: #CFD9D6;
  --prat-pano-1: #E3EFEA;
  --prat-pano-2: #C6DCD4;
}
:root[data-tema="escuro"] {
  --prat-aco-1: #26514A;
  --prat-aco-2: #1C4039;
  --prat-pano-1: #2F5E56;
  --prat-pano-2: #1F4740;
}

.prat-fatos { display: flex; flex-wrap: wrap; gap: 8px; }
.prat-fatos .pill { background: var(--k5-t); color: var(--k5); font-size: 12px; }
.prat-passo { margin: 0 0 12px; font-size: 17px; }
.prat-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }

/* ----------------------------------------------------------- início */

.prat-inicio { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.prat-config .prat-passo + .prat-modos, .prat-config .prat-passo:not(:first-child) { margin-top: 0; }
.prat-config .prat-passo:not(:first-child) { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-3); }
.prat-modos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.prat-modo {
  display: grid; gap: 4px; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 14px;
}
.prat-modo b { font-family: var(--font-display); font-size: 16px; }
.prat-modo span { font-size: 12.5px; color: var(--muted); }
.prat-modo.on { border-color: var(--k1); background: var(--k1-t); }
.prat-unidade { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--muted-2); }
.prat-grupo + .prat-grupo { margin-top: 12px; }
.prat-assunto {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 6px;
}
.prat-assunto input { width: 18px; height: 18px; accent-color: var(--k1); margin: 0; }
.prat-assunto span { font-weight: 600; }
.prat-assunto small { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.prat-assunto:has(input:checked) { border-color: var(--k1); background: var(--k1-t); }
.prat-regras ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: r; }
.prat-regras li { display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; counter-increment: r; font-size: 13px; }
.prat-regras li::before {
  content: counter(r); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%;
  background: var(--wash); display: grid; place-items: center; font-weight: 700; font-size: 12px;
}
.prat-regras li span { color: var(--muted); }
.prat-historico { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.prat-hist { display: flex; align-items: center; gap: 14px; padding: 14px; }
.prat-hist > span:last-child { display: grid; min-width: 0; }
.prat-hist small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prat-hist-nota { font-family: var(--font-display); font-weight: 700; font-size: 22px; min-width: 64px; color: var(--k5); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- sala */

.prat-sala-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; align-items: start; }
.prat-sala {
  position: relative; border: 1px solid var(--line); border-radius: 16px; padding: 26px 20px 44px;
  background-color: var(--surface);
  background-image: linear-gradient(var(--line-3) 1px, transparent 1px), linear-gradient(90deg, var(--line-3) 1px, transparent 1px);
  background-size: 34px 34px;
}
.prat-sala-mesas { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 14px; }
.prat-mesa {
  flex: 0 0 calc(33.333% - 10px); display: grid; gap: 8px; justify-items: center; cursor: pointer; font: inherit; color: var(--ink);
  background: transparent; border: 2px solid transparent; border-radius: 14px; padding: 8px;
}
.prat-mesa:hover { background: var(--wash); }
.prat-mesa.on { border-color: var(--k1); background: var(--k1-t); }
.prat-bancada {
  width: 100%; display: flex; gap: 8px; padding: 8px; border-radius: 10px;
  background: linear-gradient(180deg, var(--prat-aco-1), var(--prat-aco-2));
}
.prat-bandeja {
  flex: 1; position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 7px;
}
.prat-pano { position: absolute; inset: 18% 14% 20%; border-radius: 40% 45% 38% 42%; background: radial-gradient(circle at 35% 30%, var(--prat-pano-1), var(--prat-pano-2)); }
.prat-n { position: relative; font-family: var(--font-display); font-weight: 700; font-size: 12px; background: var(--surface); border-radius: 999px; padding: 0 7px; font-variant-numeric: tabular-nums; }
.prat-mesa-nome { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.prat-porta {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--muted);
  border-bottom: 6px solid var(--faint); padding: 0 34px 4px;
}
.prat-percurso ol { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.prat-percurso li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 11px; border-radius: var(--radius-sm); background: var(--wash); font-size: 13px; }
.prat-percurso li span { color: var(--muted); font-size: 12px; }
.prat-percurso li.on { background: var(--k1-t); outline: 1.5px solid var(--k1); }
.prat-percurso .hint { margin: 10px 0 0; }

/* ----------------------------------------------------------- estação */

.prat-estacao { gap: 14px; }
.prat-barra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.prat-onde { display: grid; line-height: 1.15; }
.prat-onde strong { font-family: var(--font-display); font-size: 25px; font-weight: 700; font-variant-numeric: tabular-nums; }
.prat-barra > .hint { margin: 0; font-size: 12.5px; }
.prat-progresso { display: flex; gap: 6px; margin-left: auto; }
.prat-progresso span { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.prat-progresso span.feito { background: var(--k1-t); outline: 1px solid var(--k1); }
.prat-progresso span.agora { background: var(--k1); box-shadow: 0 0 0 4px var(--k1-t); }
.prat-relogio { position: relative; width: 58px; height: 58px; flex: none; }
.prat-relogio svg { width: 58px; height: 58px; transform: rotate(-90deg); }
.prat-relogio .trilho { fill: none; stroke: var(--line); stroke-width: 6; }
.prat-relogio .arco { fill: none; stroke: var(--k1); stroke-width: 6; stroke-linecap: round; transition: stroke .3s; }
.prat-relogio span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 19px; font-variant-numeric: tabular-nums; }
.prat-relogio.pouco .arco { stroke: var(--warn); } .prat-relogio.pouco span { color: var(--warn); }
.prat-relogio.critico .arco { stroke: var(--err); } .prat-relogio.critico span { color: var(--err); }
.prat-sair { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.prat-sair > span { flex: 1 1 260px; }
.prat-estacao-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.prat-visor { padding: 14px; }
.prat-visor-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.prat-visor-topo h2 { margin: 0; font-size: 16px; }
.prat-visor-acoes { display: flex; gap: 8px; margin-top: 10px; }

/* A caixa da imagem tem a proporção da imagem (--prop, posta quando ela carrega):
   o pino é posto em % dela, e com sobra em volta apontaria para o lugar errado. */
.prat-palco {
  position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 40%, var(--prat-palco-2), var(--prat-palco) 75%);
}
.prat-peca {
  --prop: 1.3333; position: relative; margin: 0 auto; aspect-ratio: var(--prop);
  width: min(100%, calc(62vh * var(--prop))); transition: transform .45s cubic-bezier(.3, .7, .2, 1);
}
.prat-peca img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.prat-palco.zoom .prat-peca { transform: scale(1.9); }
/* o pino tem tamanho fixo na tela: no zoom ele encolhe o que a peça cresceu */
.prat-pino { position: absolute; width: 0; height: 0; z-index: 2; pointer-events: none; }
.prat-pino svg { position: absolute; left: -2px; top: -38px; overflow: visible; transform-origin: 2px 38px; transition: transform .45s; }
.prat-palco.zoom .prat-pino svg { transform: scale(.53); }
.prat-pino::before {
  content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--pino); opacity: 0; animation: prat-ping 2s ease-out infinite;
}
@keyframes prat-ping { 0% { transform: scale(.4); opacity: .9; } 80%, 100% { transform: scale(1.8); opacity: 0; } }

.prat-painel { padding: 0; overflow: hidden; }
.prat-painel-topo { padding: 16px 18px 12px; border-bottom: 1px solid var(--line-3); }
.prat-painel-topo h2 { margin: 0; font-size: 17px; }
.prat-painel-topo .hint { margin: 3px 0 0; font-size: 12.5px; }
.prat-folha { position: relative; max-height: calc(100vh - 250px); overflow: auto; overscroll-behavior: contain; }
.prat-folha-item { display: grid; grid-template-columns: 58px minmax(0, 1fr); border-bottom: 1px solid var(--line-3); }
.prat-folha-num { display: grid; align-content: center; justify-items: center; gap: 2px; padding: 8px 4px; border-right: 1px solid var(--line-3); }
.prat-folha-num span { font-family: var(--font-display); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.prat-folha-num small { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.prat-folha-num em { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--k1); color: var(--bg); border-radius: 999px; padding: 1px 7px; }
.prat-folha-item.agora { background: var(--k1-t); }
.prat-folha-item.agora .prat-folha-num span { color: var(--k1); }
.prat-folha-item.travado { background: repeating-linear-gradient(135deg, transparent 0 10px, var(--line-3) 10px 20px); }
.prat-folha-item.travado .prat-folha-num span { color: var(--faint); }
.prat-campos { display: grid; }
.prat-linha { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; }
.prat-linha + .prat-linha { border-top: 1px dashed var(--line); }
.prat-linha label { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--muted); text-align: center; padding-top: 9px; }
.prat-linha input, .prat-linha textarea {
  width: 100%; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink);
  padding: 8px 10px 8px 4px; resize: none; line-height: 1.4;
}
.prat-linha input:focus, .prat-linha textarea:focus { outline: none; background: var(--surface); box-shadow: inset 0 0 0 2px var(--k1); }
.prat-linha input::placeholder, .prat-linha textarea::placeholder { color: var(--faint); }
.prat-linha input:disabled, .prat-linha textarea:disabled { cursor: not-allowed; color: var(--ink); opacity: 1; }
.prat-estudo { padding: 16px 18px 18px; display: grid; gap: 12px; }
.prat-estudo .prat-campos { border: 1px solid var(--line); border-radius: var(--radius-sm); }

.prat-correcao { display: grid; gap: 7px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line-3); padding: 13px; }
.prat-correcao p { margin: 0; font-size: 13.5px; }
.prat-correcao .hint { font-size: 12.5px; }
.prat-correcao hr { border: 0; border-top: 1px solid var(--line-3); margin: 3px 0; width: 100%; }
.prat-correcao-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.prat-correcao-linha b { font-family: var(--font-display); }
.prat-explicacao { color: var(--muted-2); border-left: 3px solid var(--k1-t); padding-left: 10px; }
.pill.erro { background: var(--err-bg); color: var(--err); }
.prat-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; gap: 2px; background: var(--surface); }
.prat-seg button { border: 0; background: transparent; border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
.prat-seg button.on.certo { background: var(--ok-bg); color: var(--ok); }
.prat-seg button.on.parcial { background: var(--warn-bg); color: var(--warn); }
.prat-seg button.on.errado { background: var(--err-bg); color: var(--err); }

/* ----------------------------------------------------------- resultado */

.prat-nota { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center; }
.prat-nota-grande { font-family: var(--font-display); font-weight: 800; font-size: clamp(52px, 9vw, 84px); line-height: .9; font-variant-numeric: tabular-nums; }
.prat-nota-grande small { font-size: .28em; font-weight: 600; color: var(--muted); margin-left: 6px; }
.prat-nota .prat-fatos { margin-top: 12px; }
.prat-cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.prat-cartao { display: grid; gap: 12px; align-content: start; }
.prat-cartao-topo { display: flex; align-items: center; gap: 12px; }
.prat-cartao-topo > div { display: grid; line-height: 1.25; }
.prat-num { width: 40px; height: 40px; border-radius: 10px; background: var(--petroleo); color: var(--off-white); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.prat-ver-peca summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--k1); }
.prat-ver-peca .prat-palco { margin-top: 10px; }

/* ----------------------------------------------------------- transição */

.prat-transicao {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px;
  background: rgba(11, 37, 34, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.prat-transicao[hidden] { display: none; }
.prat-transicao-cartao { width: min(430px, 100%); background: var(--surface); border-radius: 20px; padding: 24px 22px 20px; display: grid; gap: 10px; justify-items: center; text-align: center; }
.prat-transicao-cartao .hint { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.prat-carimbo {
  font-family: var(--font-display); font-weight: 800; font-size: 44px; letter-spacing: .02em; color: var(--err);
  border: 5px solid var(--err); border-radius: 14px; padding: 0 18px; transform: rotate(-6deg);
  animation: prat-carimbo .5s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes prat-carimbo { 0% { transform: rotate(-6deg) scale(2.4); opacity: 0; } 100% { transform: rotate(-6deg) scale(1); opacity: 1; } }
.prat-transicao-titulo { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.prat-mapa { width: 100%; max-width: 330px; height: auto; }
.prat-mapa .chao { fill: var(--bg); stroke: var(--line); }
.prat-mapa .mesa > rect:first-child { fill: var(--prat-aco-2); }
.prat-mapa .bandeja { fill: var(--surface); }
.prat-mapa text { font: 700 10px var(--font-display); fill: var(--muted); text-anchor: middle; }
.prat-mapa .mesa.destino > rect:first-child { fill: var(--k1); }
.prat-mapa .porta { fill: var(--faint); }
.prat-mapa .aluno { fill: var(--pino); stroke: var(--surface); stroke-width: 3; }

/* ----------------------------------------------------------- painel: ferramenta do pino */

.pino-ferramenta { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.pino-ferramenta .prat-peca { cursor: crosshair; }
.pino-ferramenta dl { margin: 0; display: grid; gap: 8px; font-size: 13px; }
.pino-ferramenta dt { font-weight: 700; color: var(--muted-2); font-size: 12px; }
.pino-ferramenta dd { margin: 0; }
.pecas-lista { display: grid; gap: 6px; }
.peca-linha { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.peca-linha .prat-palco { border-radius: 6px; }
.peca-linha .prat-pino svg { transform: scale(.45); }
.peca-linha-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.importar-relatorio ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }

/* Tempo por peça: o seletor e, em "Outro valor", o campo de segundos ao lado */
.prat-tempo { margin: 14px 0 0; }
.prat-tempo select, .prat-tempo input { max-width: 260px; }
.prat-tempo input { margin-top: 6px; }

/* Toque duplo não amplia a estação: no celular, digitar e tocar na peça davam zoom sem
   querer (correção de 01/11). O zoom de pinça continua, que é acessibilidade. */
.prat-estacao, .prat-inicio { touch-action: manipulation; }

@media (max-width: 980px) {
  /* abaixo de 16 px o iPhone amplia a página ao focar o campo e não desfaz */
  .prat-linha input, .prat-linha textarea, .prat-tempo select, .prat-tempo input { font-size: 16px; }
  .prat-inicio, .prat-sala-grid, .prat-estacao-grid, .pino-ferramenta { grid-template-columns: minmax(0, 1fr); }
  .prat-folha { max-height: none; }
  .prat-cartoes { grid-template-columns: minmax(0, 1fr); }
  .prat-progresso { order: 5; margin-left: 0; width: 100%; }
}
@media (max-width: 600px) {
  .prat-modos { grid-template-columns: 1fr; }
  .prat-sala { padding: 16px 8px 40px; }
  .prat-mesa { padding: 4px; flex-basis: calc(33.333% - 10px); }
  .prat-bancada { padding: 4px; gap: 4px; }
  .prat-n { font-size: 10.5px; padding: 0 4px; }
  .prat-nota { grid-template-columns: 1fr; gap: 8px; }
  .peca-linha { grid-template-columns: 48px minmax(0, 1fr); }
  .peca-linha-acoes { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .prat-peca, .prat-pino svg, .prat-relogio .arco { transition: none; }
  .prat-pino::before, .prat-carimbo { animation: none; }
}