@charset "utf-8";
/* ==========================================================================
   Portal da Equipe — so o que a Central ganha quando tem login.
   Usa os tokens do hub.css (cores, espacos, raios). Nao escreva HEX aqui.
   Regua da visao humana: texto >= 16px no celular, nada < 12px, toque >= 44px.
   ========================================================================== */

/* ---------------------------------------------------------------- porta
   Entrar / criar senha / ler o aviso: so o cabecalho e um cartao no meio. */
.portal-porta .busca,
.portal-porta .btn-menu,
.portal-porta .topo-usuario { display: none !important; }
.portal-porta .topo-fim { margin-left: auto; }
.conteudo.porta { display: block; width: 100%; padding: var(--e6) var(--e4) var(--e8); }
.porta-caixa { max-width: 460px; margin: 0 auto; }
.portal-cartao { padding: var(--e6) var(--e5); }
@media (max-width: 460px) { .portal-cartao { padding: var(--e5) var(--e4); } }
.portal-cartao h1 { font-size: 1.5rem; margin-bottom: var(--e2); }
.portal-sub { font-size: 1rem; color: var(--ink-600); margin-bottom: var(--e5); }
.portal-passo {
  font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue-800); margin-bottom: var(--e2);
}
.portal-regra {
  font-size: 1rem; color: var(--blue-800); background: var(--blue-100);
  border-radius: var(--r-p); padding: var(--e3) var(--e4); margin-bottom: var(--e5);
}

/* ---------------------------------------------------------------- formulario */
.portal-form { display: grid; gap: var(--e4); }
.portal-campo { display: grid; gap: var(--e2); }
.portal-campo label { font-size: 1rem; font-weight: 600; color: var(--ink-800); }
.portal-campo input,
.portal-campo textarea {
  width: 100%; min-width: 0; min-height: 48px; padding: var(--e3) var(--e4);
  font: inherit; font-size: 1rem; color: var(--ink-900);      /* 16px: o iPhone nao da zoom */
  background: var(--canvas); border: 1px solid var(--ink-300); border-radius: var(--r-p);
}
.portal-campo textarea { resize: vertical; min-height: 76px; line-height: 1.45; }
.portal-campo input:focus,
.portal-campo textarea:focus {
  background: var(--branco); border-color: var(--blue-600);
  outline: 2px solid var(--blue-600); outline-offset: -1px;
}
.portal-senha { position: relative; display: flex; }
.portal-senha input { padding-right: 104px; }
.portal-mostrar {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  min-width: 92px; min-height: 44px; padding: 0 var(--e3);
  font: inherit; font-size: .95rem; font-weight: 600; color: var(--blue-800);
  background: transparent; border: 0; border-radius: var(--r-p); cursor: pointer;
}
.portal-mostrar:hover { background: var(--blue-100); }
.portal-erro {
  margin: 0; padding: var(--e2) var(--e3);
  font-size: 1rem; color: var(--red-700); background: var(--red-100); border-radius: var(--r-p);
}
.portal-erro:empty { display: none; }
.portal-largo { width: 100%; }
.btn.portal-largo { min-height: 48px; font-size: 1rem; }
.btn[disabled] { opacity: .65; cursor: progress; }
.portal-miudo { font-size: .95rem; color: var(--ink-600); margin: 0; text-align: center; }

/* ---------------------------------------------------------------- aviso de acompanhamento */
.portal-aviso-texto {
  max-height: 46vh; overflow-y: auto; white-space: pre-line;
  font-size: 1rem; line-height: 1.6; color: var(--ink-800);
  background: var(--canvas); border: 1px solid var(--ink-200); border-radius: var(--r-m);
  padding: var(--e4); margin-bottom: var(--e4);
}

/* ---------------------------------------------------------------- Minha conta (cabecalho) */
.topo-usuario { position: relative; display: flex; }
.portal-avatar {
  width: 44px; height: 44px; flex: none; border-radius: var(--r-tudo);
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: .9rem; font-weight: 700; letter-spacing: .02em;
  color: var(--branco); background: var(--ink-900); border: 2px solid var(--branco);
  box-shadow: 0 0 0 1px var(--ink-200); cursor: pointer;
}
.portal-avatar:hover,
.portal-avatar[aria-expanded="true"] { background: var(--blue-800); }
.portal-conta {
  position: absolute; right: 0; top: calc(100% + var(--e2)); z-index: 50;
  width: min(260px, calc(100vw - 2 * var(--e4)));
  display: grid; gap: var(--e2); padding: var(--e4);
  background: var(--branco); border: 1px solid var(--ink-200);
  border-radius: var(--r-m); box-shadow: var(--sombra-3);
}
.portal-conta-nome { margin: 0 0 var(--e1); font-size: 1rem; font-weight: 600; color: var(--ink-900);
  overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- janela (trocar senha) */
.portal-modal-fundo {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: var(--e4); background: rgb(23 25 48 / .55);
}
.portal-modal { width: 100%; max-width: 440px; max-height: 92dvh; overflow-y: auto; }
.portal-modal h2 { margin-bottom: var(--e3); }

/* ---------------------------------------------------------------- faixa ("liberou", "senha salva") */
.portal-faixa {
  position: fixed; left: var(--e4); right: var(--e4); bottom: var(--e4); z-index: 70;
  max-width: 600px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e3) var(--e3) var(--e4);
  font-size: 1rem; color: var(--branco); background: var(--ink-900);
  border-radius: var(--r-m); box-shadow: var(--sombra-3);
}
.portal-faixa span { flex: 1 1 220px; }
.portal-faixa-x {
  width: 44px; height: 44px; flex: none;
  font-size: 1.5rem; line-height: 1; color: var(--branco);
  background: transparent; border: 0; border-radius: var(--r-p); cursor: pointer;
}
.portal-faixa-x:hover { background: var(--ink-700); }

/* ---------------------------------------------------------------- cadeado ("Pedir acesso") */
.portal-cadeado p { font-size: 1rem; color: var(--ink-600); }
.portal-pedido { display: grid; gap: var(--e3); margin-top: var(--e5); text-align: left; }
.portal-pedido .btn { width: 100%; min-height: 48px; font-size: 1rem; }
.portal-estado { margin: 0; font-size: 1rem; color: var(--ink-700); }
.portal-pendente { color: var(--warn-700); background: var(--warn-100); border-radius: var(--r-p); padding: var(--e3) var(--e4); }
.portal-recusado { color: var(--red-700); background: var(--red-100); border-radius: var(--r-p); padding: var(--e3) var(--e4); }
.portal-voltar { margin: var(--e5) 0 0; }

/* ---------------------------------------------------------------- menu: ferramenta fechada e selo do dono */
.menu a.travada strong { color: var(--ink-200); }
.menu-txt .selo-fechada {
  justify-self: start; margin: 2px 0;
  font-size: .75rem; font-weight: 600; line-height: 1.5;
  color: var(--ink-100); border: 1px solid var(--ink-500); border-radius: var(--r-tudo); padding: 0 var(--e2);
}
.portal-selo {
  display: inline-block; min-width: 22px; margin-left: var(--e2); padding: 0 6px;
  font-size: .75rem; font-weight: 700; line-height: 22px; text-align: center;
  color: var(--branco); background: var(--red-600); border-radius: var(--r-tudo);
}

/* ---------------------------------------------------------------- Minha atividade */
.portal-modal-largo { max-width: 560px; }
.portal-atividade { list-style: none; margin: 0 0 var(--e4); padding: 0; display: grid; }
.portal-atividade li {
  display: grid; grid-template-columns: 7.5em 1fr; gap: var(--e3); align-items: baseline;
  padding: var(--e3) 0; border-bottom: 1px solid var(--ink-100); font-size: 1rem; color: var(--ink-800);
}
.portal-atividade time { font-size: .875rem; color: var(--ink-600); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 420px) { .portal-atividade li { grid-template-columns: 1fr; gap: 2px; } }
.portal-modal .btn + .btn { margin-top: var(--e2); }

/* a marca do cabecalho e' um link (volta ao Inicio): no celular so o coracao de 26px aparece,
   e o toque precisa de 44px */
.marca { min-height: 44px; min-width: 44px; justify-content: center; }
/* com o avatar no cabecalho a busca espreme o resto: o botao do menu nao encolhe (44px de toque) */
.btn-menu { flex: none; }

/* ---------------------------------------------------------------- conteudo da Central dentro do portal
   Os dois limites duros da visao humana que o conteudo antigo nao cumpria (medido em 05/10):
   rotulo "Aula 00" e a dica "/" da busca em 11,2px, e o link "Ver todas as perguntas" com 16px de altura. */
.aula-num { font-size: .75rem; }
.atalho-tecla { font-size: .75rem; }
.secao-link { min-height: 44px; }

/* ================================================================ painel Equipe (so o dono) */
.equipe .eq-sub { display: block; font-size: 1rem; color: var(--ink-600); margin: 0; }
.eq-estado { margin: var(--e4) 0; }
.eq-abas, .eq-chips { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0 0 var(--e5); }
.eq-aba, .eq-chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e4);
  font: inherit; font-size: 1rem; font-weight: 600; color: var(--ink-700); text-decoration: none;
  background: var(--branco); border: 1px solid var(--ink-200); border-radius: var(--r-tudo); cursor: pointer;
}
.eq-aba:hover, .eq-chip:hover { border-color: var(--ink-400); color: var(--ink-900); }
.eq-aba[aria-current="page"], .eq-chip[aria-current="page"], .eq-chip[aria-pressed="true"] {
  background: var(--blue-800); border-color: var(--blue-800); color: var(--branco);
}
.eq-cartoes { display: grid; gap: var(--e4); margin-bottom: var(--e5); }
@media (min-width: 700px) { .eq-cartoes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .eq-cartoes:not(.eq-pessoas) { grid-template-columns: repeat(4, 1fr); } .eq-pessoas { grid-template-columns: repeat(3, 1fr); } }
.eq-cartao { display: grid; gap: var(--e2); align-content: start; }
.eq-cartao-link { color: inherit; text-decoration: none; transition: border-color var(--transicao), box-shadow var(--transicao); }
.eq-cartao-link:hover { border-color: var(--blue-600); box-shadow: var(--sombra-2); color: inherit; }
.eq-cartao-t { font-size: 1rem; font-weight: 600; color: var(--ink-700); margin: 0; }
.eq-num { font-size: 2rem; font-weight: 700; color: var(--ink-900); line-height: 1.1; }
.eq-destaque { border-color: var(--red-600); }
.eq-destaque .eq-num { color: var(--red-700); }
.eq-linha-at { margin: 0; font-size: 1rem; color: var(--ink-800); }
.eq-prontidao h2, .eq-bloco h2 { margin-bottom: var(--e2); }
.eq-resumo { font-size: 1rem; font-weight: 600; color: var(--ink-800); margin: var(--e3) 0; }
.eq-pr-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.eq-pr-item { display: grid; gap: var(--e1); padding: var(--e3) 0; border-top: 1px solid var(--ink-100); }
@media (min-width: 900px) { .eq-pr-item { grid-template-columns: 1.4fr 1fr 1fr 1fr; align-items: center; } }
.eq-pr-nome { font-weight: 600; color: var(--ink-900); min-height: 44px; display: inline-flex; align-items: center; }
.eq-pr-passo { font-size: 1rem; }
.eq-ok { color: var(--ok-700); }
.eq-falta { color: var(--warn-700); }
.eq-lista { display: grid; gap: var(--e3); list-style: none; margin: 0; padding: 0; }
.eq-pedido { display: grid; gap: var(--e3); }
.eq-pedido-t { font-size: 1.1rem; margin: 0; }
.eq-decidido { background: var(--canvas); box-shadow: none; }
.eq-msg { margin: 0; padding: var(--e3) var(--e4); font-size: 1rem; color: var(--ink-800); background: var(--canvas); border-left: 3px solid var(--blue-600); border-radius: var(--r-p); }
.eq-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e3) 0; }
.eq-acoes .btn { min-height: 48px; font-size: 1rem; }
.eq-perigo { color: var(--red-700); border-color: var(--red-600); }
.eq-perigo:hover { background: var(--red-100); color: var(--red-700); }
.eq-armado { background: var(--warn-100); border-color: var(--warn-700); color: var(--warn-700); }
.eq-pessoa-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); padding: var(--e3) 0; border-bottom: 1px solid var(--ink-100); }
.eq-pessoa-nome { font-size: 1rem; font-weight: 600; color: var(--ink-900); min-height: 44px; display: inline-flex; align-items: center; }
.eq-pessoa-topo { display: flex; align-items: center; gap: var(--e2); }
.eq-ponto { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--ink-300); }
.eq-online { background: var(--ok-700); }
.eq-ausente { background: var(--warn-700); }
.eq-selos { display: flex; flex-wrap: wrap; gap: var(--e1); }
.eq-selo { font-size: .8rem; font-weight: 600; padding: 2px var(--e2); border-radius: var(--r-tudo); color: var(--warn-700); background: var(--warn-100); }
.eq-selo-desat { color: var(--red-700); background: var(--red-100); }
.eq-nota { font-size: 1rem; color: var(--ink-700); }
.eq-bloco { margin-bottom: var(--e5); }
.eq-switches { list-style: none; margin: var(--e3) 0; padding: 0; }
.eq-switch-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); min-height: 56px; padding: var(--e2) 0; border-bottom: 1px solid var(--ink-100); }
.eq-switch-txt { display: grid; gap: 2px; }
.eq-switch-txt strong { font-size: 1rem; }
.eq-switch {
  position: relative; flex: none; width: 60px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
}
.eq-switch::before {
  content: ''; position: absolute; left: 4px; right: 4px; top: 9px; height: 26px; border-radius: 13px;
  background: var(--ink-300); transition: background var(--transicao);
}
.eq-switch-bola {
  position: absolute; top: 12px; left: 7px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--branco); box-shadow: var(--sombra-1); transition: transform var(--transicao);
}
.eq-switch[aria-checked="true"]::before { background: var(--ok-700); }
.eq-switch[aria-checked="true"] .eq-switch-bola { transform: translateX(26px); }
.eq-switch:disabled { opacity: .5; cursor: not-allowed; }
.eq-switch:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; border-radius: var(--r-p); }
.equipe select {
  width: 100%; min-height: 48px; padding: 0 var(--e3); font: inherit; font-size: 1rem; color: var(--ink-900);
  background: var(--canvas); border: 1px solid var(--ink-300); border-radius: var(--r-p);
}
.eq-senha { display: grid; gap: var(--e2); justify-items: start; margin: var(--e3) 0; padding: var(--e4); background: var(--warn-100); border-radius: var(--r-m); }
.eq-senha p { margin: 0; font-size: 1rem; color: var(--warn-700); }
.eq-senha-valor { font-family: var(--mono); font-size: 1.25rem; letter-spacing: .06em; color: var(--ink-900); user-select: all; word-break: break-all; }
.eq-checks { border: 0; padding: 0; margin: 0; display: grid; gap: var(--e1); }
@media (min-width: 700px) { .eq-checks { grid-template-columns: repeat(2, 1fr); } }
.eq-checks legend { font-size: 1rem; font-weight: 600; color: var(--ink-800); margin-bottom: var(--e2); padding: 0; }
.eq-check { position: relative; display: flex; align-items: center; gap: var(--e3); min-height: 44px; font-size: 1rem; cursor: pointer; }
.eq-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.eq-caixa { flex: none; width: 24px; height: 24px; border: 2px solid var(--ink-500); border-radius: 6px; background: var(--branco); position: relative; }
.eq-check input:checked + .eq-caixa { background: var(--blue-800); border-color: var(--blue-800); }
.eq-check input:checked + .eq-caixa::after {
  content: ''; position: absolute; left: 6px; top: 1px; width: 7px; height: 13px;
  border: solid var(--branco); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.eq-check input:focus-visible + .eq-caixa { outline: 3px solid var(--blue-600); outline-offset: 2px; }
.eq-dia { font-size: 1rem; text-transform: capitalize; color: var(--ink-700); margin: var(--e5) 0 0; }
.eq-tempo li { grid-template-columns: 4.5em 1fr; }
.eq-alerta { color: var(--warn-700); }
.eq-alerta time { color: var(--warn-700); }
.equipe .voltar { margin-bottom: var(--e4); }