/* components.css
   Botoes, cards, formulario, filtros, tabela, SelectBusca, modal, toggle,
   KPI, loading, estado vazio, abas, badges e a grade de marcacao.
   Nenhuma tela escreve CSS proprio: mudou componente, mudou aqui. */

/* ==========================================================
   BOTOES
   ========================================================== */

.btn {
  height: var(--ctrl-h);
  padding: 0 var(--sp-4);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--branco);
  color: var(--texto);
  font-weight: 500;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transicao), border-color var(--transicao);
}

.btn:hover {
  background: var(--fundo);
}

.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.btn-primary,
.btn-primario {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: var(--texto-invertido);
  font-weight: 600;
}

.btn-primary:hover,
.btn-primario:hover {
  background: var(--cor-primaria-escura);
  border-color: var(--cor-primaria-escura);
}

.btn-perigo {
  background: var(--perigo);
  border-color: var(--perigo);
  color: var(--texto-invertido);
  font-weight: 600;
}

.btn-perigo:hover {
  filter: brightness(.92);
}

.btn-fantasma {
  background: transparent;
  border-color: transparent;
  color: var(--texto-secundario);
  padding: 7px;
  height: auto;
}

.btn-fantasma:hover {
  background: var(--fundo);
}

.btn-sm {
  height: 34px;
  padding: 0 var(--sp-3);
  font-size: 12.5px;
}

/* Acao por linha de tabela. O slot existe em TODA linha: sem permissao ele
   vira span.desabilitado, nunca some e nunca vira button disabled. */
.btn-icone {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--texto-secundario);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-icone:hover {
  background: var(--fundo);
  color: var(--texto);
}

.btn-icone.desabilitado,
span.btn-icone.desabilitado {
  color: var(--texto-fraco);
  cursor: not-allowed;
  opacity: .5;
}

.btn-icone.desabilitado:hover {
  background: transparent;
}

/* No celular, alvo de toque nunca menor que 44px. */
@media (max-width: 720px) {
  .btn {
    min-height: 44px;
    padding: 11px 16px;
  }

  .btn-icone {
    width: 44px;
    height: 44px;
  }
}

/* ==========================================================
   CARD
   ========================================================== */

.cd {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  box-shadow: var(--sombra-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cd-sm { padding: 12px; }
.cd-lg { padding: 24px; }

.cd-titulo {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: -.02em;
}

/* Card clicavel: hover mexe em borda, sombra e leve subida. Nunca no fundo. */
.cd-clicavel {
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
  cursor: pointer;
}

.cd-clicavel:hover {
  border-color: var(--cor-primaria);
  box-shadow: var(--sombra);
  transform: translateY(-2px);
}

/* ==========================================================
   FORMULARIO
   Todos os controles na MESMA altura (40px).
   Label 13px peso 600, SEM uppercase e SEM letter-spacing.
   ========================================================== */

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.campo label {
  font-weight: 600;
  font-size: 13px;
  color: var(--texto-secundario);
}

.input,
.textarea {
  height: var(--ctrl-h);
  padding: 0 var(--sp-3);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--branco);
  color: var(--texto);
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

.textarea {
  height: auto;
  min-height: 88px;
  padding: var(--sp-2) var(--sp-3);
  resize: vertical;
  line-height: 1.5;
}

.input:focus,
.textarea:focus {
  border-color: var(--cor-primaria);
  outline: none;
  box-shadow: 0 0 0 3px var(--cor-primaria-suave);
}

.input.erro,
.textarea.erro {
  border-color: var(--perigo);
}

.campo-erro {
  font-size: 12px;
  color: var(--perigo);
}

.campo-ajuda {
  font-size: 12px;
  color: var(--texto-fraco);
}

/* Barra de acao do formulario. O botao vai num .campo.ra-acao que TAMBEM tem
   label (com nbsp invisivel), senao ele sobe e desalinha da linha. */
.ra-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: flex-end;
}

.ra-bar .campo {
  flex: 1 1 200px;
}

.ra-bar .input,
.ra-bar .sb-control,
.ra-bar .sb-control .sb-btn,
.ra-bar > .btn {
  height: var(--ctrl-h);
  box-sizing: border-box;
}

.ra-acao {
  margin-left: auto;
  flex: none;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-4);
}

.form-grid .col-2 {
  grid-column: span 2;
}

@media (max-width: 720px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-grid .col-2 {
    grid-column: span 1;
  }

  .ra-acao {
    margin-left: 0;
    width: 100%;
  }

  .ra-acao .btn {
    width: 100%;
  }
}

/* ==========================================================
   BARRA DE FILTROS
   Altura unica --fu-h para input, SelectBusca, preset e botao.
   ========================================================== */

.fu-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--sp-3);
}

.fu-bar .sp {
  flex: 1;
}

.fu-bar .input,
.fu-bar .btn,
.fu-bar .sb-control,
.fu-bar .sb-control .sb-btn,
.fu-bar .fu-preset {
  height: var(--fu-h);
  box-sizing: border-box;
}

.fu-bar .btn {
  padding: 0 var(--sp-3);
}

.fu-presets {
  display: flex;
  gap: 2px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 2px;
}

.fu-preset {
  border: 0;
  background: transparent;
  color: var(--texto-secundario);
  font-size: 12.5px;
  font-weight: 500;
  padding: 0 var(--sp-3);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.fu-preset:hover {
  color: var(--texto);
}

.fu-preset.ativo {
  background: var(--branco);
  color: var(--cor-primaria-escura);
  font-weight: 600;
  box-shadow: var(--sombra-sm);
}

@media (max-width: 720px) {
  .fu-bar .input,
  .fu-bar .btn,
  .fu-bar .sb-control,
  .fu-bar .fu-preset {
    height: 44px;
  }

  .fu-presets {
    width: 100%;
    overflow-x: auto;
  }
}

/* ==========================================================
   TABELA
   Titulo e menu sanduiche sao a PRIMEIRA FAIXA dentro do card.
   Contagem no rodape, a esquerda, na mesma linha da paginacao.
   ========================================================== */

.tabela-wrap {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.tabela-faixa {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--borda);
}

.tabela-faixa .tabela-titulo {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: -.02em;
}

.tabela-faixa .tabela-menu-alvo {
  margin-left: auto;
  position: relative;
}

.tabela-scroll {
  overflow-x: auto;
  border-radius: 0 0 12px 12px;
}

.te-tab {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.te-tab th {
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-secundario);
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.te-tab th .th-ordem {
  color: var(--texto-fraco);
  margin-left: 4px;
}

.te-tab th.sem-ordem {
  cursor: default;
}

.te-tab td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--borda);
  color: var(--texto);
  vertical-align: middle;
}

.te-tab tbody tr:last-child td {
  border-bottom: 0;
}

.te-tab tbody tr:hover {
  background: var(--fundo-alt);
}

.te-tab .col-acoes {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

/* Linha de filtro por coluna: campos "contem" logo abaixo dos titulos.
   Nunca em coluna de acao, toggle ou icone. */
.te-filtros th {
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--borda);
  cursor: default;
}

.te-filtros .filtro-col {
  width: 100%;
  height: 30px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--borda);
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

.te-filtros .filtro-col:focus {
  border-color: var(--cor-primaria);
  outline: none;
}

.tabela-rodape {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--borda);
}

.oc-pag-info {
  font-size: 12.5px;
  color: var(--texto-fraco);
}

.tabela-rodape .sp {
  flex: 1;
}

/* Menu sanduiche da tabela */
.tabela-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: var(--z-dropdown);
  min-width: 230px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra);
  padding: var(--sp-1);
}

.tabela-menu .menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  background: transparent;
  color: var(--texto);
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}

.tabela-menu .menu-item:hover {
  background: var(--fundo);
}

.tabela-menu .menu-sep {
  height: 1px;
  background: var(--borda);
  margin: var(--sp-1) 0;
}

.tabela-menu .menu-rotulo {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--texto-fraco);
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
}

/* Sombra de pista lateral no celular, avisando que a tabela rola */
@media (max-width: 880px) {
  .tabela-scroll {
    background:
      linear-gradient(to right, var(--branco) 30%, rgba(255, 255, 255, 0)),
      linear-gradient(to right, rgba(255, 255, 255, 0), var(--branco) 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(17, 24, 39, .12), rgba(0, 0, 0, 0)),
      radial-gradient(farthest-side at 100% 50%, rgba(17, 24, 39, .12), rgba(0, 0, 0, 0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  .te-tab {
    min-width: 640px;
  }
}

/* ==========================================================
   SELECTBUSCA  (nunca select nativo)
   ========================================================== */

.selectbusca {
  position: relative;
  min-width: 0;
}

.sb-control {
  height: var(--ctrl-h);
  width: 100%;
}

.sb-btn {
  height: 100%;
  width: 100%;
  padding: 0 var(--sp-3);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--branco);
  color: var(--texto);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  text-align: left;
}

.sb-btn:focus {
  border-color: var(--cor-primaria);
  outline: none;
  box-shadow: 0 0 0 3px var(--cor-primaria-suave);
}

.sb-btn .sb-texto {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-btn .sb-placeholder {
  color: var(--texto-fraco);
}

.sb-btn .sb-seta {
  color: var(--texto-fraco);
  flex: none;
}

.sb-painel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: var(--z-dropdown);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra);
  padding: var(--sp-1);
  max-height: 280px;
  display: flex;
  flex-direction: column;
}

.sb-busca {
  height: 34px;
  margin: var(--sp-1);
  padding: 0 var(--sp-2);
  border: 1px solid var(--borda);
  border-radius: 6px;
  font-size: 13px;
}

.sb-busca:focus {
  border-color: var(--cor-primaria);
  outline: none;
}

.sb-lista {
  overflow-y: auto;
  flex: 1;
}

.sb-opcao {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 6px;
  font-size: 13.5px;
  cursor: pointer;
}

.sb-opcao:hover,
.sb-opcao.marcada {
  background: var(--fundo);
}

.sb-opcao.selecionada {
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-escura);
  font-weight: 600;
}

.sb-vazio {
  padding: var(--sp-3);
  font-size: 13px;
  color: var(--texto-fraco);
  text-align: center;
}

/* ==========================================================
   MODAL
   Tamanho SEMPRE em vw/vh, nunca px.
   Sai pelo X ou pelo Cancelar, e por mais nada.
   ========================================================== */

.modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, .5);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

.modal-caixa {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra-lg);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-sm { width: 34vw; max-height: 42vh; }
.modal-md { width: 55vw; max-height: 70vh; }
.modal-lg { width: 89vw; max-height: 90vh; }

.modal-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--borda);
  flex: none;
}

.modal-cabecalho .modal-titulo {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: -.02em;
  flex: 1;
  min-width: 0;
}

.modal-corpo {
  padding: var(--sp-4);
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.modal-rodape {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-top: 1px solid var(--borda);
  flex: none;
}

/* Aviso de erro dentro do modal. O modal NAO fecha em erro de validacao. */
.modal-aviso {
  background: var(--perigo-suave);
  border: 1px solid var(--perigo);
  border-radius: var(--raio-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: 13px;
  color: var(--perigo);
}

/* Confirmacao: unica variante com rodape centralizado. */
.modal-confirm {
  width: 34vw;
  max-height: 42vh;
}

.modal-confirm .modal-rodape {
  justify-content: center;
}

.modal-confirm .confirm-corpo {
  text-align: center;
  padding: var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.confirm-icone {
  width: 52px;
  height: 52px;
  border-radius: var(--raio-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.confirm-perigo .confirm-icone {
  background: var(--perigo-suave);
  color: var(--perigo);
}

.confirm-aviso .confirm-icone {
  background: var(--aviso-suave);
  color: var(--aviso);
}

/* Variante popup-centrado: usada quando o modal contem SelectBusca.
   O dropdown escapa pelo top-layer nativo do dialog, nao subindo z-index. */
dialog.popup-centrado {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  overflow: visible;
}

dialog.popup-centrado::backdrop {
  background: rgba(17, 24, 39, .5);
}

@media (max-width: 880px) {
  .modal-sm,
  .modal-md,
  .modal-lg,
  .modal-confirm {
    width: 96vw;
    max-height: 92vh;
  }
}

/* ==========================================================
   TOGGLE ON/OFF
   Trio span.cv-sw + input + label. O input nativo fica escondido.
   42x24, verde quando ligado. 36x20 em linha de tabela densa.
   ========================================================== */

.cv-sw {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex: none;
}

.cv-sw input {
  display: none;
}

.cv-sw label {
  position: absolute;
  inset: 0;
  background: var(--borda-forte);
  border-radius: var(--raio-full);
  cursor: pointer;
  transition: background var(--transicao);
}

.cv-sw label::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--branco);
  border-radius: var(--raio-full);
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicao);
}

.cv-sw input:checked + label {
  background: #16a34a;
}

.cv-sw input:checked + label::after {
  transform: translateX(18px);
}

.cv-sw input:disabled + label {
  opacity: .5;
  cursor: not-allowed;
}

.cv-sw-densa {
  width: 36px;
  height: 20px;
}

.cv-sw-densa label::after {
  width: 14px;
  height: 14px;
}

.cv-sw-densa input:checked + label::after {
  transform: translateX(16px);
}

/* ==========================================================
   TOGGLE TIPO 1: multi opcoes (escolha entre valores)
   Cor da marca, nunca verde. Verde e de estado ligado.
   ========================================================== */

.tg-multi {
  display: inline-flex;
  gap: 2px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 2px;
}

.tg-multi .tg-op {
  border: 0;
  background: transparent;
  color: var(--texto-secundario);
  font-size: 13px;
  font-weight: 500;
  padding: var(--sp-2) var(--sp-3);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.tg-multi .tg-op:hover {
  color: var(--texto);
}

.tg-multi .tg-op.ativo {
  background: var(--cor-primaria);
  color: var(--texto-invertido);
  font-weight: 600;
}

/* Seletor de dias da semana */
.dias-semana {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.dia-op {
  width: 42px;
  height: 42px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--branco);
  color: var(--texto-secundario);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.dia-op:hover {
  border-color: var(--cor-primaria);
}

.dia-op.ativo {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: var(--texto-invertido);
}

/* ==========================================================
   ABAS
   Ativa = texto laranja + borda inferior de 2px. Nunca pilula.
   ========================================================== */

.abas {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--borda);
  overflow-x: auto;
}

.aba {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--texto-secundario);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.aba:hover {
  color: var(--texto);
}

.aba.ativa {
  color: var(--cor-primaria);
  border-bottom-color: var(--cor-primaria);
  font-weight: 600;
}

/* ==========================================================
   KPI  (so em dashboard, relatorio, analytics e visao geral)
   Faixa colorida de 3px NO TOPO. Nunca na base.
   ========================================================== */

.mg-kpi {
  position: relative;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--sp-4);
  box-shadow: var(--sombra-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.mg-kpi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cor-primaria), var(--cor-primaria-escura));
}

.mg-kpi.pos::before     { background: linear-gradient(90deg, #22c55e, #16a34a); }
.mg-kpi.neg::before     { background: linear-gradient(90deg, #f87171, #dc2626); }
.mg-kpi.neutro::before  { background: linear-gradient(90deg, #cbd5e1, #94a3b8); }

.mg-kpi .lbl {
  min-height: 25px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-secundario);
}

.mg-kpi .kpi-valor {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--texto);
}

.mg-kpi .disc {
  min-height: 14px;
  font-size: 12px;
  color: var(--texto-fraco);
}

@media (max-width: 520px) {
  .mg-kpi {
    padding: 14px;
  }

  .mg-kpi .kpi-valor {
    font-size: 22px;
  }
}

/* ==========================================================
   LOADING
   Spinner + texto descritivo NA TELA. Nunca dentro do botao.
   ========================================================== */

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--cor-primaria-suave);
  border-top-color: var(--cor-primaria);
  border-radius: var(--raio-full);
  animation: girar .7s linear infinite;
  flex: none;
}

.spinner-lg {
  width: 30px;
  height: 30px;
  border-width: 3px;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

.loading-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  color: var(--texto-secundario);
  font-size: 13.5px;
}

.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  background: rgba(255, 255, 255, .82);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  color: var(--texto);
  font-size: 14px;
}

/* ==========================================================
   ESTADO VAZIO
   Sem card, sem borda, sem botao. Centrado em X e Y.
   ========================================================== */

.vz {
  flex: 1;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-align: center;
  padding: var(--sp-5);
}

.vz-inline {
  flex: none;
  min-height: 150px;
}

.vz .vz-icone {
  font-size: 38px;
  color: var(--texto-fraco);
}

.vz .vz-titulo {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: -.02em;
  color: var(--texto);
}

.vz .vz-frase {
  font-size: 13.5px;
  color: var(--texto-fraco);
  max-width: 420px;
}

/* ==========================================================
   BADGE
   ========================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  font-size: 11.5px;
  padding: 3px var(--sp-2);
  border-radius: var(--raio-full);
  background: var(--fundo);
  color: var(--texto-secundario);
}

.badge-sucesso { background: var(--sucesso-suave); color: var(--sucesso); }
.badge-perigo  { background: var(--perigo-suave);  color: var(--perigo); }
.badge-aviso   { background: var(--aviso-suave);   color: var(--aviso); }
.badge-marca   { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }

/* ==========================================================
   FLASH
   ========================================================== */

.flash-area {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.flash {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--raio-sm);
  font-size: 13.5px;
  border: 1px solid transparent;
}

.flash-sucesso { background: var(--sucesso-suave); border-color: var(--sucesso); color: var(--sucesso); }
.flash-erro    { background: var(--perigo-suave);  border-color: var(--perigo);  color: var(--perigo); }
.flash-aviso   { background: var(--aviso-suave);   border-color: var(--aviso);   color: var(--aviso); }
.flash-info    { background: var(--info-suave);    border-color: var(--info);    color: var(--info); }

/* ==========================================================
   GRADE DE MARCACAO
   Painel de marcar, nao listagem de consultar. Desvio de
   Tabela_Sempre_com_Ferramentas autorizado em 04/08/2026.
   ========================================================== */

.grade-wrap {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}

.grade-scroll {
  overflow-x: auto;
}

.grade {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.grade th,
.grade td {
  border-bottom: 1px solid var(--borda);
  padding: 0;
}

.grade thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-grade-cabecalho);
  background: var(--branco);
  font-size: 11px;
  font-weight: 700;
  color: var(--texto-secundario);
  height: 36px;
  text-align: center;
  min-width: 30px;
}

.grade thead th.dia-hoje {
  color: var(--cor-primaria-escura);
  background: var(--cor-primaria-suave);
}

/* Coluna do nome do habito: fixa a esquerda, para nao sumir no scroll */
.grade .col-habito {
  position: sticky;
  left: 0;
  z-index: var(--z-grade-coluna);
  background: var(--branco);
  min-width: 180px;
  max-width: 180px;
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-right: 1px solid var(--borda);
}

.grade thead .col-habito {
  z-index: var(--z-grade-canto);
}

.grade .habito-nome {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--texto);
  min-width: 0;
}

.grade .habito-nome .habito-rotulo {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grade .habito-cor {
  width: 10px;
  height: 10px;
  border-radius: var(--raio-full);
  flex: none;
}

.grade td.celula {
  text-align: center;
  vertical-align: middle;
}

/* O quadradinho. Clique unico marca e desmarca. */
.qd {
  width: 22px;
  height: 22px;
  margin: 4px auto;
  border: 1px solid var(--borda-forte);
  border-radius: 6px;
  background: var(--branco);
  cursor: pointer;
  display: block;
  padding: 0;
  transition: background var(--transicao), border-color var(--transicao);
}

.qd:hover {
  border-color: var(--cor-primaria);
}

.qd.feito {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
}

/* Dia fora da programacao semanal: apagado e nao clicavel. */
.qd.fora-programacao {
  background: repeating-linear-gradient(
    45deg,
    var(--fundo),
    var(--fundo) 3px,
    var(--branco) 3px,
    var(--branco) 6px
  );
  border-color: var(--borda);
  cursor: not-allowed;
}

.qd.futuro {
  background: var(--fundo);
  border-color: var(--borda);
  cursor: not-allowed;
  opacity: .55;
}

.qd.salvando {
  opacity: .5;
}

.grade .col-total {
  min-width: 62px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto-secundario);
  padding: 0 var(--sp-2);
  border-left: 1px solid var(--borda);
}

@media (max-width: 720px) {
  .grade .col-habito {
    min-width: 130px;
    max-width: 130px;
  }

  .qd {
    width: 26px;
    height: 26px;
    margin: 9px auto;
  }

  .grade thead th {
    min-width: 34px;
  }
}

/* ==========================================================
   DASHBOARD: barras de desempenho
   ========================================================== */

.barra-linha {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 3fr auto auto;
  align-items: center;
  gap: var(--sp-3);
}

.barra-trilho {
  height: 10px;
  background: var(--fundo);
  border-radius: var(--raio-full);
  overflow: hidden;
}

.barra-preenchida {
  display: block;
  height: 100%;
  border-radius: var(--raio-full);
  background: var(--cor-primaria);
  width: 0;
  transition: width var(--transicao);
}

.barra-numero {
  font-weight: 700;
  font-size: 13px;
  min-width: 46px;
  text-align: right;
}

.barra-detalhe {
  font-size: 12px;
  color: var(--texto-fraco);
  min-width: 84px;
  text-align: right;
}

.ano-colunas {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-2);
  align-items: end;
  min-height: 190px;
}

.ano-mes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

.ano-barra {
  width: 100%;
  min-height: 4px;
  background: var(--cor-primaria);
  border-radius: var(--raio-sm) var(--raio-sm) 0 0;
  height: 0;
  transition: height var(--transicao);
}

.ano-numero {
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-secundario);
}

.ano-rotulo {
  font-size: 11px;
  color: var(--texto-fraco);
}

@media (max-width: 720px) {
  .barra-linha {
    grid-template-columns: 1fr auto;
    row-gap: var(--sp-1);
  }

  .barra-trilho {
    grid-column: 1 / -1;
    order: 3;
  }

  .barra-detalhe {
    order: 2;
  }

  .ano-colunas {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: var(--sp-4);
  }
}

/* ==========================================================
   PAINEL ADMIN E DESENVOLVEDOR
   ========================================================== */

.auto-linha,
.param-linha {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--borda);
}

.auto-linha:last-of-type,
.param-linha:last-of-type {
  border-bottom: 0;
}

.auto-rotulo,
.param-rotulo {
  flex: 1;
  font-size: 13.5px;
  color: var(--texto-secundario);
  min-width: 0;
}

.param-campo {
  width: 120px;
  flex: none;
}

.amostra-cor {
  height: var(--ctrl-h);
  border-radius: var(--raio-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  color: var(--texto-invertido);
  background: var(--cor-primaria);
}

.senha-sorteada {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3);
  background: var(--aviso-suave);
  border: 1px solid var(--aviso);
  border-radius: var(--raio-sm);
}

.senha-valor {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--texto);
  word-break: break-all;
}

@media (max-width: 720px) {
  .auto-linha,
  .param-linha {
    flex-wrap: wrap;
  }

  .param-campo {
    width: 100%;
  }
}