/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 40px; padding: 0 var(--e-4);
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 600; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background var(--transicao), border-color var(--transicao);
}
.botao:disabled, .botao[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.botao--primario { background: var(--marca); color: var(--sobre-marca); }
.botao--primario:hover:not(:disabled) { background: var(--marca-forte); }
.botao--secundario { background: var(--papel); color: var(--tinta); border-color: var(--linha-forte); }
.botao--secundario:hover:not(:disabled) { border-color: var(--grafite); }
.botao--fantasma { background: transparent; color: var(--grafite); }
.botao--fantasma:hover:not(:disabled) { background: color-mix(in srgb, var(--tinta) 6%, transparent); color: var(--tinta); }
.botao--perigo { background: var(--erro); color: #fff; }
.botao--icone { width: 40px; padding: 0; }
.botao[aria-busy="true"]::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Campos ---------- */
.campo { display: grid; gap: 6px; align-content: start; }
.campo__rotulo { font-size: var(--t-sm); font-weight: 600; color: var(--tinta); }
.campo__opcional { font-weight: 400; color: var(--cinza); }
.campo__entrada {
  width: 100%; min-height: 40px; padding: var(--e-2) var(--e-3);
  background: var(--papel); border: 1px solid var(--linha-forte); border-radius: var(--r-sm);
  transition: border-color var(--transicao);
}
.campo__entrada:hover { border-color: var(--grafite); }
.campo__entrada:focus-visible { border-color: var(--marca); }
.campo__ajuda { font-size: var(--t-xs); color: var(--cinza); }
.campo__erro { font-size: var(--t-xs); color: var(--erro); font-weight: 600; }
.campo[data-invalido] .campo__entrada { border-color: var(--erro); }

/* ---------- Painel (superfície) ---------- */
.painel {
  min-width: 0; /* deixa a tabela rolar dentro do painel em vez de esticar a página */
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-md);
}
.painel__cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--linha);
}
.painel__cabeca h2 { font-size: var(--t-md); }
.painel__corpo { padding: var(--e-5); }

/* ---------- Selo de estado ---------- */
.selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: var(--r-cheio);
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
  background: var(--nevoa); color: var(--grafite);
}
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo--sucesso { background: var(--sucesso-suave); color: var(--sucesso); }
.selo--alerta { background: var(--alerta-suave); color: var(--alerta); }
.selo--erro { background: var(--erro-suave); color: var(--erro); }
.selo--info { background: var(--info-suave); color: var(--info); }
.selo--marca { background: var(--marca-suave); color: var(--marca-forte); }

/* ---------- Tabela ---------- */
.tabela-ferramentas {
  display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center;
  padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--linha);
}
.tabela-ferramentas .campo__entrada { max-width: 320px; }
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabela th {
  text-align: left; font-weight: 600; color: var(--grafite); font-size: var(--t-xs);
  padding: var(--e-3) var(--e-5); border-bottom: 1px solid var(--linha); white-space: nowrap;
}
.tabela td { padding: var(--e-3) var(--e-5); border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: color-mix(in srgb, var(--nevoa) 60%, transparent); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-3) var(--e-5); border-top: 1px solid var(--linha);
  font-size: var(--t-sm); color: var(--grafite);
}

/* ---------- Estado vazio ---------- */
.vazio {
  display: grid; justify-items: center; text-align: center; gap: var(--e-3);
  padding: var(--e-7) var(--e-5);
}
.vazio__icone {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--marca-suave); color: var(--marca);
}
.vazio__icone .icone { width: 26px; height: 26px; }
.vazio h2 { font-size: var(--t-lg); }
.vazio p { color: var(--grafite); max-width: 46ch; }

/* ---------- Carregamento ---------- */
.esqueleto {
  display: block; height: 14px; border-radius: 4px;
  background: linear-gradient(90deg, var(--linha) 0%, var(--nevoa) 50%, var(--linha) 100%);
  background-size: 200% 100%; animation: brilho 1.2s ease-in-out infinite;
}
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } }

/* ---------- Avisos (toast) ---------- */
.avisos {
  position: fixed; z-index: 60; right: var(--e-5); bottom: var(--e-5);
  display: grid; gap: var(--e-2); width: min(380px, calc(100vw - 32px));
}
@media (max-width: 1023px) {
  .avisos { right: 16px; bottom: calc(var(--barra-movel) + 16px + env(safe-area-inset-bottom)); }
}
.aviso {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  background: var(--tinta); color: var(--papel);
  border-radius: var(--r-md); box-shadow: var(--sombra-flutuante);
  font-size: var(--t-sm);
  animation: entrar 180ms ease-out;
}
.aviso .icone { margin-top: 1px; }
.aviso--sucesso .icone { color: #7fd8a9; }
.aviso--erro .icone { color: #f4a49b; }
.aviso__texto { flex: 1; }
.aviso__fechar { background: none; border: 0; color: inherit; opacity: .7; cursor: pointer; padding: 0; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .aviso { animation: none; } }

/* ---------- Modal e painel lateral (<dialog>) ---------- */
.modal {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 64px);
  padding: 0; border: 0; border-radius: var(--r-md);
  background: var(--papel); color: var(--tinta); box-shadow: var(--sombra-flutuante);
}
.modal::backdrop { background: rgba(20, 22, 27, .45); }
.modal[open] { animation: entrar 180ms ease-out; }
.modal__cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--linha);
}
.modal__cabeca h2 { font-size: var(--t-lg); }
.modal__corpo { padding: var(--e-5); overflow-y: auto; }
.modal__rodape {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-2);
  padding: var(--e-4) var(--e-5); border-top: 1px solid var(--linha);
}
.modal--lateral {
  margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh;
  width: min(520px, 100vw); max-width: 100vw; border-radius: 0;
  display: flex; flex-direction: column;
}
.modal--lateral[open] { display: flex; animation: deslizar 200ms ease-out; }
.modal--lateral .modal__corpo { flex: 1; min-height: 0; }
@keyframes deslizar { from { transform: translateX(24px); opacity: 0; } }
@media (max-width: 639px) {
  .modal--lateral { width: 100vw; }
}
@media (prefers-reduced-motion: reduce) { .modal[open], .modal--lateral[open] { animation: none; } }

/* Tabela no celular: cada linha vira um bloco, com o nome da coluna ao lado do valor. */
@media (max-width: 639px) {
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr { display: block; width: 100%; }
  .tabela tr { padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linha); }
  .tabela tbody tr:last-child { border-bottom: 0; }
  .tabela td {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
    padding: var(--e-1) 0; border: 0; text-align: right;
  }
  .tabela td::before { content: attr(data-rotulo); color: var(--cinza); font-size: var(--t-xs); text-align: left; }
  .tabela td.col-principal { display: block; text-align: left; padding-bottom: var(--e-2); }
  .tabela td.col-principal::before { content: none; }
  .tabela td:empty { display: none; }
  .tabela-ferramentas, .tabela-rodape { padding-left: var(--e-4); padding-right: var(--e-4); }
  .tabela-ferramentas .campo__entrada { max-width: none; }
}

/* ---------- Interruptor (checkbox com aparência de chave) ---------- */
.interruptor {
  display: grid; grid-template-columns: auto 1fr; gap: 2px var(--e-3); align-items: start;
  padding: var(--e-3); border-radius: var(--r-sm); cursor: pointer;
}
.interruptor:hover { background: var(--nevoa); }
.interruptor input {
  appearance: none; -webkit-appearance: none; margin: 2px 0 0; cursor: pointer;
  width: 36px; height: 20px; border-radius: var(--r-cheio); flex: none;
  background: var(--linha-forte); position: relative; transition: background var(--transicao);
  grid-row: span 2;
}
.interruptor input::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform var(--transicao);
}
.interruptor input:checked { background: var(--marca); }
.interruptor input:checked::after { transform: translateX(16px); }
.interruptor input:disabled { cursor: not-allowed; opacity: .6; }
.interruptor input:focus-visible { box-shadow: var(--foco); outline: none; }
.interruptor__rotulo { font-weight: 600; font-size: var(--t-sm); }
.interruptor__ajuda { font-size: var(--t-xs); color: var(--cinza); }
.interruptor:has(input:disabled) { cursor: default; }
.interruptor:has(input:disabled):hover { background: none; }

.seletor-modulos { display: grid; gap: var(--e-5); }
.seletor-modulos fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.seletor-modulos legend { font-size: var(--t-xs); font-weight: 600; color: var(--cinza); padding: 0 var(--e-3) var(--e-1); }
.seletor-modulos__grade { display: grid; gap: 2px var(--e-2); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.seletor-modulos__aviso:empty { display: none; }
.seletor-modulos__aviso {
  padding: var(--e-3) var(--e-4); border-radius: var(--r-sm);
  background: var(--info-suave); color: var(--info); font-size: var(--t-sm);
}
.barra-salvar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--e-2);
  padding: var(--e-4) var(--e-5); border-top: 1px solid var(--linha);
}
.barra-salvar__estado { margin-right: auto; font-size: var(--t-sm); color: var(--grafite); }

/* ---------- Indicadores do painel ---------- */
.indicadores { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.indicador {
  display: grid; gap: var(--e-1); padding: var(--e-5);
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-md);
  color: inherit; text-decoration: none; transition: border-color var(--transicao);
}
.indicador:hover { border-color: var(--marca); }
.indicador__icone { color: var(--marca); }
.indicador__valor { font-family: var(--fonte-titulo); font-size: var(--t-3xl); line-height: 1; margin-top: var(--e-2); }
.indicador__rotulo { color: var(--grafite); font-size: var(--t-sm); }

/* ---------- Primeiros passos ---------- */
.passos { list-style: none; margin: 0; padding: var(--e-2) 0; }
.passos__item { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-5); }
.passos__item a { font-weight: 600; }
.passos__item--feito { color: var(--cinza); }
.passos__marca {
  width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center;
  border: 2px solid var(--linha-forte); color: var(--sucesso);
}
.passos__item--feito .passos__marca { border-color: transparent; }

/* ---------- Editor de expediente ---------- */
.expediente { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--e-2); }
.expediente__grade { display: grid; grid-template-columns: minmax(96px, auto) repeat(4, minmax(0, 1fr)); gap: var(--e-2); align-items: center; }
.expediente__cab { font-size: var(--t-xs); color: var(--cinza); font-weight: 600; }
.expediente__dia { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); font-weight: 500; }
.expediente .campo__entrada { padding: var(--e-1) var(--e-2); min-height: 36px; min-width: 0; font-size: var(--t-sm); }
.expediente .campo__entrada:disabled { opacity: .4; }
@media (max-width: 479px) {
  .expediente__grade { grid-template-columns: 1fr 1fr; }
  .expediente__grade > span:nth-child(-n+5) { display: none; }
  .expediente__dia { grid-column: 1 / -1; margin-top: var(--e-2); }
}

/* ---------- Agenda ---------- */
.agenda-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-bottom: var(--e-4); }
.agenda-barra__titulo { font-weight: 600; font-size: var(--t-lg); min-width: 0; margin-right: auto; }
.agenda-barra__grupo { display: flex; gap: var(--e-1); align-items: center; }
.agenda-barra select { min-height: 40px; }
.abas { display: inline-flex; border: 1px solid var(--linha-forte); border-radius: var(--r-sm); overflow: hidden; }
.abas button { border: 0; background: var(--papel); padding: 0 var(--e-3); min-height: 38px; cursor: pointer; font-weight: 600; font-size: var(--t-sm); color: var(--grafite); }
.abas button + button { border-left: 1px solid var(--linha-forte); }
.abas button[aria-pressed="true"] { background: var(--marca); color: var(--sobre-marca); }

.agenda-rolagem { overflow-x: auto; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-md); }
.agenda-grade { display: grid; grid-template-columns: 56px repeat(var(--colunas), minmax(150px, 1fr)); min-width: min-content; }
.agenda-grade__cab {
  position: sticky; top: 0; z-index: 2; height: 44px; display: flex; align-items: center; justify-content: center; gap: var(--e-1);
  padding: 0 var(--e-2); background: var(--papel); border-bottom: 1px solid var(--linha); border-left: 1px solid var(--linha);
  font-size: var(--t-sm); font-weight: 600; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.agenda-grade__cab--hoje { color: var(--marca); }
.agenda-grade__horas { position: relative; grid-row: 2; }
.agenda-grade__hora { position: absolute; right: var(--e-2); transform: translateY(-50%); font-size: var(--t-xs); color: var(--cinza); font-variant-numeric: tabular-nums; }
.agenda-grade__corpo {
  position: relative; grid-row: 2; border-left: 1px solid var(--linha); cursor: copy;
  background-image: repeating-linear-gradient(to bottom, var(--linha) 0 1px, transparent 1px var(--px-hora));
}
.agenda-grade__corpo--leitura { cursor: default; }
.agenda-fora { position: absolute; left: 0; right: 0; background: color-mix(in srgb, var(--nevoa) 75%, transparent);
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--linha) 60%, transparent) 6px 7px); pointer-events: none; }
.agenda-item, .agenda-bloqueio {
  position: absolute; left: 3px; right: 3px; overflow: hidden; text-align: left; cursor: pointer;
  padding: 2px var(--e-2); border-radius: var(--r-sm); font-size: var(--t-xs); line-height: 1.3;
  border: 1px solid transparent; border-left-width: 3px;
}
.agenda-item { background: var(--info-suave); border-left-color: var(--info); color: var(--tinta); }
.agenda-item--confirmado { background: var(--marca-suave); border-left-color: var(--marca); }
.agenda-item--concluido { background: var(--sucesso-suave); border-left-color: var(--sucesso); }
.agenda-item--nao_compareceu { background: var(--alerta-suave); border-left-color: var(--alerta); }
.agenda-item--cancelado { background: var(--papel); border: 1px dashed var(--linha-forte); color: var(--cinza); text-decoration: line-through; }
.agenda-item strong { display: block; font-size: var(--t-xs); }
.agenda-bloqueio { background: var(--nevoa); border-color: var(--linha-forte); color: var(--grafite);
  background-image: repeating-linear-gradient(135deg, transparent 0 8px, var(--linha) 8px 9px); }
.agenda-item:focus-visible, .agenda-bloqueio:focus-visible { box-shadow: var(--foco); z-index: 1; }

.agenda-mes { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-md); overflow: hidden; }
.agenda-mes th { padding: var(--e-2); font-size: var(--t-xs); color: var(--cinza); border-bottom: 1px solid var(--linha); }
.agenda-mes td { border: 1px solid var(--linha); padding: 0; height: 84px; vertical-align: top; }
.agenda-mes button { width: 100%; height: 100%; border: 0; background: none; cursor: pointer; text-align: left; padding: var(--e-2); display: grid; align-content: start; gap: var(--e-1); }
.agenda-mes button:hover { background: var(--nevoa); }
.agenda-mes__num { font-weight: 600; font-size: var(--t-sm); }
.agenda-mes__fora .agenda-mes__num { color: var(--linha-forte); }
.agenda-mes__hoje .agenda-mes__num { color: var(--marca); }
.agenda-mes__qtd { font-size: var(--t-xs); color: var(--grafite); }
@media (max-width: 639px) {
  .agenda-mes td { height: 56px; }
  .agenda-mes__qtd { font-size: 0.6875rem; }
}

.lista-escolha { display: grid; gap: 2px; margin-top: var(--e-2); }
.lista-escolha button { text-align: left; border: 1px solid var(--linha); background: var(--papel); border-radius: var(--r-sm);
  padding: var(--e-2) var(--e-3); cursor: pointer; font-size: var(--t-sm); }
.lista-escolha button:hover { border-color: var(--marca); }
.escolhido { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
  padding: var(--e-2) var(--e-3); border-radius: var(--r-sm); background: var(--marca-suave); font-weight: 600; }
.resumo-linha { display: flex; justify-content: space-between; gap: var(--e-3); font-size: var(--t-sm); color: var(--grafite); }
.linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); font-size: var(--t-sm); }
.linha-tempo li { padding-left: var(--e-4); border-left: 2px solid var(--linha); }
.linha-tempo small { color: var(--cinza); display: block; }