/* Acesso da equipe: barra do topo, tela de entrar e tela de criar senha. */

/* Nas telas da equipe: quem está usando o aparelho e as telas que a chave
   abre. Fica logo abaixo da faixa institucional. */
.barra-equipe {
  background: var(--escola-tenue);
  border-bottom: 1px solid var(--linha);
  padding: .6rem max(1.25rem, calc((100% - var(--largura)) / 2 + 1.25rem));
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .4rem 1rem;
  font-size: .95rem;
}
.barra-equipe p { margin: 0; }
.barra-equipe__telas { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; }
.barra-equipe__telas a { color: var(--escola); font-weight: 700; }
.barra-equipe__telas a[aria-current="page"] { color: var(--tinta); text-decoration: none; }
.barra-equipe__sair {
  background: none; border: 0; padding: .2rem 0;
  color: var(--tinta-media); text-decoration: underline; cursor: pointer; font: inherit;
}
.sem-acesso__telas { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-weight: 700; }

/* ------------------------------------------------------------- entrar */

.entrada { max-width: 28rem; }
.entrada h2 { margin-top: 0; }
.entrada__explica { color: var(--tinta-media); }
.entrada__links, .entrada__alternar { margin: 1.1rem 0 0; }
.entrada__alternar { padding-top: 1rem; border-top: 1px solid var(--linha); }

/* Botão com cara de link: ações secundárias, sem competir com "Entrar". */
.botao-link {
  background: none; border: 0; padding: .35rem 0;
  color: var(--escola); font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.botao-link:hover { color: var(--tinta); }

.mostrar-senha {
  display: flex; align-items: center; gap: .55rem;
  margin: -.4rem 0 1.4rem; font-size: .95rem; cursor: pointer;
}
.mostrar-senha input { width: 1.2rem; height: 1.2rem; }
.campo__ajuda { font-size: .9rem; color: var(--tinta-media); margin: .4rem 0 0; }

/* --------------------------------------------------------- criar senha */

.regras { list-style: none; padding: 0; margin: -.4rem 0 1.4rem; font-size: .95rem; }
.regras li { color: var(--tinta-media); padding-left: 1.6rem; position: relative; margin: .25rem 0; }
.regras li::before { content: "○"; position: absolute; left: 0; }
.regras li.regra--ok { color: var(--saude); font-weight: 700; }
.regras li.regra--ok::before { content: "✓"; }
.acoes-pronto { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ------------------------------------------------------- área da equipe */

.ferramentas { display: grid; gap: .8rem; margin: 1rem 0 2rem; }
@media (min-width: 40rem) { .ferramentas { grid-template-columns: 1fr 1fr; } }
.ferramenta {
  display: block; text-decoration: none; color: var(--tinta);
  border: 2px solid var(--linha); border-left: 8px solid var(--escola-vivo);
  border-radius: 6px; padding: 1rem 1.1rem; background: var(--papel);
}
.ferramenta:hover, .ferramenta:focus-visible { border-color: var(--escola); background: var(--escola-tenue); }
.ferramenta strong { display: block; font-size: 1.1rem; margin-bottom: .25rem; }
.ferramenta span { color: var(--tinta-media); }
[data-area="admin"] .ferramenta { border-left-color: var(--acao); }
.minha-conta { border-top: 1px solid var(--linha); padding-top: 1rem; }
.minha-conta__acoes { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ------------------------------------------------------------ horários */

.horarios__periodo {
  border: 2px solid var(--linha); border-radius: 6px;
  padding: .8rem 1rem .2rem; margin: 0 0 1.2rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem;
}
.horarios__periodo legend { font-weight: 700; padding: 0 .4rem; }
.horarios__previa {
  background: var(--escola-tenue); border-radius: 6px; padding: .8rem 1rem;
  margin: 0 0 1.4rem; color: var(--tinta-media);
}
.horarios__previa q { color: var(--tinta); font-weight: 700; }
.horarios__nota { font-size: .95rem; color: var(--tinta-media); max-width: 34rem; }
.horarios__atalhos { display: flex; gap: .5rem; margin: .5rem 0 0; }
.horarios__atalhos .botao { padding: .6rem 1rem; font-size: .95rem; }