/* Componentes. Nesta fase: utilitarios de icone (Icones_Phosphor).
   Botoes, cards, tabela, form e modal entram nas fases que os usam. */

/* --------------------------------------------------------------------------
   Icones Phosphor: tamanho e cor via classe, nunca inline.
   -------------------------------------------------------------------------- */
.icon {
  font-size: 1.1rem;
  line-height: 1;
  display: inline-flex;
  vertical-align: middle;
}

.icon-sm {
  font-size: 0.9rem;
}

.icon-md {
  font-size: 1.25rem;
}

.icon-lg {
  font-size: 1.75rem;
}

.icon-xl {
  font-size: 2.5rem;
}

.icon-accent {
  color: var(--accent);
}

.icon-success {
  color: var(--success);
}

.icon-danger {
  color: var(--danger);
}

.icon-muted {
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Tela de login (Fase 3).
   -------------------------------------------------------------------------- */
.tela-login {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

.cartao-login {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio-lg);
  box-shadow: var(--shadow);
  padding: var(--sp-5) var(--sp-4);
}

.icone-login {
  display: inline-flex;
  font-size: 2rem;
  color: var(--accent);
}

.tela-login h1 {
  font-size: var(--fs-2xl);
  margin-top: var(--sp-2);
}

.subtitulo-login {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.cartao-login form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

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

.campo label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-dim);
}

.campo input {
  min-height: 48px;
  width: 100%;
  padding: 0 var(--sp-3);
  font-size: var(--fs-lg); /* 16px: sem zoom no iOS */
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
}

.campo input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  width: 100%;
  padding: 0 var(--sp-4);
  font-size: var(--fs-lg);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  cursor: pointer;
}

.botao-primario {
  background: var(--accent);
  color: var(--texto-sobre-accent);
}

.botao-primario:hover {
  background: var(--accent-hover);
}

.mensagem-login {
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  font-size: var(--fs-base);
  border-radius: var(--raio-sm);
  border: 1px solid var(--border);
}

.mensagem-erro {
  color: var(--danger);
  border-color: var(--danger);
  margin-top: 0;
}

.mensagem-info {
  color: var(--text);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.mensagem-ok {
  color: var(--success);
}

.cartao-login .botao + .botao,
.mensagem-login + .botao {
  margin-top: var(--sp-4);
}

/* --------------------------------------------------------------------------
   Sidebar + Topbar (casca do admin, Fase 4).
   -------------------------------------------------------------------------- */
.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.sidebar-marca {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.marca-nome {
  font-family: var(--font-titulo);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 17px;
  color: var(--text);
}

.sidebar-nav {
  flex: 1;
  padding: var(--sp-3) 0;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  color: var(--text-dim);
  text-decoration: none;
  font-size: var(--fs-base);
  border-left: 3px solid transparent;
}

.nav-item:hover {
  background: var(--bg-elev);
  color: var(--text);
}

.nav-item.ativo {
  background: var(--accent-soft);
  color: var(--accent-texto);
  border-left-color: var(--accent);
}

.nav-item.sair {
  color: var(--danger);
}

.nav-item.sair:hover {
  background: var(--bg-elev);
  color: var(--danger);
}

/* Topbar */
.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-4);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.tb-titulo {
  display: flex;
  align-items: center;
}

.titulo-pagina {
  font-family: var(--font-titulo);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 18px;
  color: var(--text);
}

.tb-acoes {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.usuario-box {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio-full);
}

.usuario-nome {
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.usuario-conta {
  font-size: var(--fs-sm);
  color: var(--accent-texto);
  text-decoration: none;
  font-weight: 600;
}

.usuario-conta:hover {
  text-decoration: underline;
}

/* Botoes (Padrao_Botao): base neutra + variantes. O par -sm abaixo e o compacto.
   Base definida aqui; as telas so usam a classe, nunca CSS proprio. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 40px;
  padding: 0 var(--sp-4);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  cursor: pointer;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary,
.btn-primario {
  background: var(--accent);
  color: var(--texto-sobre-accent);
  border-color: var(--accent);
}
.btn-primary:hover,
.btn-primario:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--texto-sobre-accent);
}
.btn-secundario { color: var(--text-dim); }
.btn-secundario:hover { color: var(--accent); border-color: var(--accent); }
.btn:disabled,
.btn.desabilitado { opacity: .5; cursor: not-allowed; }
.btn:disabled:hover,
.btn.desabilitado:hover { border-color: var(--border); color: var(--text); }

/* Avisos (flash): faixa acima do conteudo, uma por categoria (ok/erro/info). */
.flash-area { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.flash {
  padding: 10px 14px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  font-size: var(--fs-sm);
}
.flash-erro { color: var(--danger); border-color: var(--danger); }
.flash-ok { color: var(--success); border-color: var(--success); }
.flash-info { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }

/* Campo de formulario reutilizavel (field + input), usado fora da barra .ra-bar. */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-3); }
.field > label,
.field .label-reset { font-size: 13px; font-weight: 600; color: var(--texto-secundario); }
.input {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 0 var(--sp-3);
  font-size: var(--fs-lg);           /* 16px: o iOS nao da zoom ao focar */
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
}
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
textarea.input { height: auto; min-height: 80px; padding: 8px var(--sp-3); resize: vertical; }

/* Botao primario pequeno (topbar) */
.btn-primary.btn-sm, .btn.btn-sm {
  padding: 0 var(--sp-3);
  font-size: var(--fs-sm);
  height: 34px;
}

/* --------------------------------------------------------------------------
   KPI (so na visao geral - Listagens_sem_KPI).
   -------------------------------------------------------------------------- */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.kpi-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.kpi-valor {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Tabela (Padrao_Tabela).
   -------------------------------------------------------------------------- */
.tabela-wrap {
  overflow-x: auto;
  margin-bottom: var(--sp-6);
}

.te-tab {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  overflow: hidden;
}

.te-tab th {
  background: var(--bg);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.te-tab td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-base);
  color: var(--text);
}

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

/* Coluna de acoes: slots fixos (Padrao_Tabela) */
.celula-acoes {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
}

.btn-icone {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--texto-secundario);
  text-decoration: none;
}

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

.btn-icone.perigo:hover {
  color: var(--danger);
}

.btn-icone.desabilitado {
  opacity: 0.30;
  cursor: not-allowed;
}

.btn-icone.desabilitado:hover {
  background: transparent;
  color: var(--texto-secundario);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px 8px;
  border-radius: var(--raio-full);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.badge-ok {
  background: var(--accent-soft);
  color: var(--accent-texto);
}

.badge-perigo {
  background: rgba(231, 76, 60, 0.1);
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   Formulario (Padrao_Formulario).
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio-lg);
  padding: var(--sp-6);
  max-width: 420px;
  margin: 0 auto;
}

.form-card h2 {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-4);
}

.campo label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-dim);
}

.campo input {
  min-height: 40px;
  width: 100%;
  padding: 0 var(--sp-3);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
}

.campo input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.ajuda {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-top: 2px;
}

.botoes {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
  margin-top: var(--sp-4);
}

.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--raio-sm);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-base);
  color: var(--text);
}

.aviso .icon {
  flex-shrink: 0;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   SelectBusca (Sem_Select_Nativo).
   -------------------------------------------------------------------------- */
.selectbusca {
  position: relative;
  min-width: 200px;
}

.selectbusca .sb-display {
  padding: 0 var(--sp-3);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 40px;
}

.selectbusca .sb-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  margin-top: 4px;
  box-shadow: var(--shadow);
  max-height: 280px;
  overflow-y: auto;
  display: none;
}

.selectbusca.open .sb-panel {
  display: block;
}

.selectbusca .sb-search {
  width: 100%;
  padding: var(--sp-3);
  background: var(--bg-elev);
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: var(--fs-base);
}

.selectbusca .sb-opt {
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  font-size: var(--fs-base);
  color: var(--text);
}

.selectbusca .sb-opt:hover {
  background: var(--accent-soft);
  color: var(--accent-texto);
}

/* --------------------------------------------------------------------------
   Modal (Padrao_Modal).
   -------------------------------------------------------------------------- */
.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}

.modal-bg.visivel {
  display: flex;
}

.modal-caixa {
  background: var(--surface);
  border-radius: var(--raio-lg);
  width: 100%;
  max-width: 560px;
  overflow-y: auto;
  box-shadow: var(--shadow);
  animation: modalSobe 0.2s ease;
}

.modal-cab {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-cab h3 {
  font-size: 17px;
  color: var(--text);
  margin: 0;
}

.modal-x {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--texto-fraco);
  display: grid;
  place-items: center;
}

.modal-x:hover {
  color: var(--text);
}

.modal-corpo {
  padding: 22px;
}

.modal-rodape {
  padding: 16px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Tamanhos oficiais (vw/vh) */
.modal-caixa.modal-sm {
  width: 34vw;
  max-height: 42vh;
}
.modal-caixa.modal-md {
  width: 55vw;
  max-height: 70vh;
}
.modal-caixa.modal-lg {
  width: 89vw;
  max-height: 90vh;
}

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

@keyframes modalSobe {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   Matriz de permissoes (Fase 4).
   -------------------------------------------------------------------------- */
.matriz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-4);
}

.botoes-globais {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.grupo-bloco {
  margin-bottom: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  overflow: hidden;
}

.grupo-cab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.grupo-nome {
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--text);
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.06em;
}

.grupo-acoes {
  display: flex;
  gap: var(--sp-2);
}

.auto-liberar {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  font-size: var(--fs-sm);
}

.matriz th {
  text-align: center;
}

/* Estado vazio (Padrao_Estado_Vazio) */
.vz {
  flex: 1;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 20px;
}

.vz .vz-icone {
  font-size: 40px;
  color: var(--texto-fraco);
  line-height: 1;
  margin-bottom: 16px;
}

.vz-titulo {
  margin: 0;
  font-family: var(--font-titulo);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.vz-sub {
  margin: 7px 0 0;
  font-size: 13.5px;
  color: var(--texto-suave);
  line-height: 1.5;
  max-width: 400px;
}

/* Link de acesso (impersonacao) */
.link-box {
  display: flex;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
}

.link-box input[type="text"] {
  flex: 1;
  min-height: 40px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-base);
  font-family: var(--font);
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  background: var(--bg-elev);
  color: var(--text);
}

.confirm-icone {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
}

.confirm-icone i {
  font-size: 36px;
}

.confirm-icone.confirm-info {
  background: var(--accent-soft);
  color: var(--accent-texto);
}

.confirm-corpo {
  padding: 32px 28px 12px;
  text-align: center;
}

.confirm-corpo h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--text);
}

.confirm-corpo p {
  color: var(--texto-suave);
  font-size: 14px;
  line-height: 1.5;
}


/* --------------------------------------------------------------------------
   Rework Fase 4: classes utilitarias (nada de style= inline, CSP style-src
   'self'), menu mobile (Padrao_Menu_Sidebar) e drawer abaixo de 880px.
   -------------------------------------------------------------------------- */

/* Utilitarias que substituem os antigos style="" dos templates. */
.label-reset { margin: 0; }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.botoes {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.auto-liberar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}

/* Hamburguer e botao de fechar: so aparecem no celular. */
.menu-botao,
.sidebar-fechar,
.sidebar-overlay {
  display: none;
}

.menu-botao,
.sidebar-fechar {
  background: none;
  border: 0;
  padding: var(--sp-2);
  margin-right: var(--sp-2);
  color: var(--text);
  cursor: pointer;
}

@media (max-width: 880px) {
  /* A sidebar vira gaveta: sai da tela e entra por cima, com overlay. */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 82vw;
    max-width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 200;
  }

  .app-shell.menu-aberto .sidebar {
    transform: translateX(0);
  }

  .app-shell.menu-aberto .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 150;
  }

  .menu-botao {
    display: inline-flex;
    align-items: center;
  }

  .sidebar-fechar {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
  }

  .sidebar-marca {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Topbar enxuta: o nome longo com email nao cabe no celular. */
  .usuario-box {
    display: none;
  }

  .matriz-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }

  .grupo-cab {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }
}

/* Tabela da matriz de permissoes: centralizacao por classe, nao inline. */
.matriz th { text-align: center; }
.matriz th:first-child { width: 260px; text-align: left; }
.matriz td { text-align: center; }
.matriz td:first-child { text-align: left; }
.matriz .cel-rota { font-size: 12px; color: var(--text-dim); }

/* ==========================================================================
   Clientes / listagem paginada no servidor (Fase 5).
   Tudo por classe: o CSP e style-src 'self', entao atributo style= tambem e
   bloqueado (grep style= templates/ volta vazio). Barra de filtro
   (Padrao_Barra_de_Filtros), cabecalho dentro do card
   (Padrao_Cabecalho_da_Tabela), filtro por coluna no thead
   (Padrao_Filtro_por_Coluna), paginador completo (Padrao_Paginacao_Servidor),
   barra de formulario (Padrao_Formulario).
   ========================================================================== */

/* Barra de filtro: altura unica --fu-h (38px), label 11px em cima. */
.fu-bar {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: var(--sp-4);
}
.fu-bar .g { display: flex; flex-direction: column; gap: var(--sp-1); }
.fu-bar .g.cresce { flex: 1; min-width: 220px; }
.fu-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-secundario);
}
.fu-bar .inp-busca {
  height: var(--fu-h);
  box-sizing: border-box;
  width: 100%;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  background: var(--bg-elev);
  color: var(--text);
  font-size: var(--fs-lg);           /* 16px: o iOS nao da zoom ao focar */
}
.fu-bar .inp-busca:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* Card da tabela: overflow visivel para o popup do menu nao ser cortado
   (a armadilha do overflow em Padrao_Cabecalho_da_Tabela). So o miolo rola. */
.card-tabela {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  margin-bottom: var(--sp-6);
}
.card-tabela[hidden] { display: none; }
.card-tabela .tabela-scroll { overflow-x: auto; }
.card-tabela .te-tab { border: none; border-radius: 0; margin: 0; }

/* Cabecalho dentro do card: titulo, contagem e menu, primeira faixa. */
.tabela-cab {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.tabela-titulo {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
.tabela-info { flex: 1; font-size: var(--fs-sm); color: var(--text-dim); }

/* Menu sanduiche da tabela. */
.tab-menu-wrap { position: relative; }
.btn-tab-menu {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  background: var(--bg-elev);
  color: var(--text-dim);
  cursor: pointer;
}
.btn-tab-menu:hover { border-color: var(--accent); color: var(--accent); }
.tab-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 224px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  box-shadow: var(--shadow);
  z-index: 60;
  padding: var(--sp-1) 0;
}
.tab-menu[hidden] { display: none; }
.tab-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 14px;
  font-size: var(--fs-sm);
  color: var(--text);
  background: none; border: none;
  text-align: left; text-decoration: none;
  cursor: pointer;
}
.tab-menu-item:hover { background: var(--bg); color: var(--accent); }
.tab-menu-item i { color: var(--text-dim); }
.tab-menu-item:hover i,
.tab-menu-item.ativo,
.tab-menu-item.ativo i { color: var(--accent); }
.tab-menu-sep { height: 1px; background: var(--border); margin: var(--sp-1) 0; }
.tab-menu-rotulo {
  padding: 8px 14px 4px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-dim);
}
.tab-menu-linhas { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px 14px 10px; }
.tab-linhas-op {
  min-width: 42px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-elev);
  color: var(--text-dim);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.tab-linhas-op:hover { color: var(--accent); }
.tab-linhas-op.ativo {
  border-color: var(--accent);
  background: var(--accent-suave);
  color: var(--accent-texto);
}

/* Cabecalho ordenavel + indicador de ordem. */
.te-tab th.ordenavel { cursor: pointer; user-select: none; white-space: nowrap; }
.te-tab th.ordenavel:hover { color: var(--accent); }
.th-ordem { font-size: 11px; margin-left: 4px; opacity: .85; }

/* Linha de filtro por coluna, dentro do thead (30px, placeholder minusculo). */
.th-filtro[hidden] { display: none; }
.th-filtro th { padding: 4px var(--sp-4) 8px; background: var(--bg); }
.inp-filtro {
  height: 30px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  background: var(--bg-elev);
  color: var(--text);
  font-size: var(--fs-lg);           /* 16px: evita o zoom do iOS ao focar */
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
.inp-filtro:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* Paginador completo: 5 controles, centralizados, contagem a esquerda. */
.oc-pag {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
}
.oc-pag[hidden] { display: none; }
.oc-pag-info { font-size: var(--fs-sm); color: var(--text-dim); }
.oc-pag-ctrls { display: inline-flex; align-items: center; gap: 4px; justify-content: center; }
.oc-pag-indicador {
  font-size: var(--fs-sm);
  color: var(--text);
  padding: 0 var(--sp-2);
  white-space: nowrap;
}
.oc-pag-espac { }                     /* 3a coluna vazia: centra os controles */
.oc-pg {
  min-width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  background: var(--bg-elev);
  color: var(--text);
  cursor: pointer;
}
.oc-pg:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.oc-pg:disabled { opacity: .4; cursor: not-allowed; }

/* Barra de formulario (Padrao_Formulario): controles 40px, label 13px/600. */
.ra-bar {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.ra-bar .campo { display: flex; flex-direction: column; gap: 5px; }
.ra-bar .campo.cresce { flex: 1; }
.ra-bar label {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-secundario);
}
.ra-bar .input {
  height: 40px;
  box-sizing: border-box;
  min-width: 200px;
  width: 100%;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  background: var(--bg-elev);
  color: var(--text);
  font-size: var(--fs-lg);           /* 16px: sem zoom do iOS */
}
.ra-bar .input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ra-bar .campo.ra-acao .btn { height: 40px; white-space: nowrap; }
.ra-erro {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--danger);
  border-radius: var(--raio-sm);
  background: var(--bg-elev);
  color: var(--danger);
  font-size: var(--fs-sm);
}

@media (max-width: 720px) {
  .ra-bar .campo { flex: 1 1 100%; }
}
@media (max-width: 880px) {
  .oc-pag { grid-template-columns: 1fr; text-align: center; }
  .oc-pag-espac { display: none; }
}

/* --------------------------------------------------------------------------
   Card generico (Padrao_Box_Card) e spinner (Padrao_Loading_Estado), Fase 6.
   -------------------------------------------------------------------------- */
.cd {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: var(--sp-4);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.cd-titulo {
  font-size: var(--fs-lg);
  margin: 0;
}

.spinner-circle {
  width: 16px;
  height: 16px;
  border: 2px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: var(--raio-full);
  display: inline-block;
  animation: giro 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .spinner-circle { animation-duration: 2s; }
}

/* --------------------------------------------------------------------------
   Ficha do cliente (Fase 6).
   -------------------------------------------------------------------------- */
.ficha { display: flex; flex-direction: column; gap: var(--sp-3); }

.ficha-status {
  position: fixed;
  bottom: var(--sp-4);
  left: 50%;
  transform: translateX(-50%);
  box-shadow: var(--shadow);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--accent-suave);
  color: var(--text);
  border-radius: var(--raio-sm);
  font-size: var(--fs-sm);
}

.ficha-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

.ficha-col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

.dados-linha { display: flex; flex-direction: column; gap: 4px; }
.dados-obs { margin: 0; color: var(--texto-fraco); font-size: var(--fs-sm); }

.dado-input,
.medida-input {
  height: 44px;
  padding: 0 var(--sp-3);
  font-size: 16px;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  width: 100%;
  box-sizing: border-box;
}

.dado-input:focus,
.medida-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.medida-input { text-align: right; width: 110px; }

.medidas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.medida {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
}

.medida:last-child { border-bottom: 0; }

.medida-rotulo { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.medida-valor { display: inline-flex; align-items: center; gap: var(--sp-1); }
.medida-un { color: var(--texto-fraco); font-size: var(--fs-sm); min-width: 22px; }
.medida-num { font-size: var(--fs-base); }
.medida-acoes { display: inline-flex; gap: 2px; }

.medida-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--raio-sm);
  color: var(--texto-fraco);
  cursor: pointer;
}

.medida-btn:hover,
.medida-btn:focus-visible { color: var(--accent); background: var(--accent-suave); }

.medida-erro {
  grid-column: 1 / -1;
  color: var(--danger);
  font-size: var(--fs-sm);
}

.medida.salvo .medida-input { border-color: var(--success); }
.medida.com-erro .medida-input,
.dados-linha.com-erro .dado-input { border-color: var(--danger); }

.medidas-rodape { display: flex; justify-content: flex-start; }

.seletor-dois { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }

.sel-op {
  height: 44px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  cursor: pointer;
}

.sel-op.ativo {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--texto-sobre-accent);
}

.sel-op:disabled { cursor: default; opacity: 0.7; }

.mq-aviso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--accent-suave);
  border-radius: var(--raio-sm);
  font-size: var(--fs-sm);
}

.mq-palco { display: flex; justify-content: center; }
.mq-svg { width: 100%; max-width: 560px; height: auto; touch-action: manipulation; }
.mq-palco.marcando .mq-svg { cursor: crosshair; outline: 2px dashed var(--accent); outline-offset: 2px; }

.mq-corpo { fill: var(--accent-soft); }
.mq-detalhe { fill: var(--accent-escura); }

.mq-linha { stroke: var(--text); stroke-width: 1.2; stroke-dasharray: 5 4; }
.mq-texto { fill: var(--text); font-size: 18px; font-family: inherit; }
.mq-alca { fill: var(--accent); stroke: var(--surface); stroke-width: 2; cursor: grab; touch-action: none; }

.mq-credito { margin: 0; font-size: var(--fs-xs); color: var(--texto-fraco); }

@media (max-width: 880px) {
  .ficha-grade { grid-template-columns: minmax(0, 1fr); }
  .medida-input { width: 96px; }
}

.lnk-ficha {
  display: inline-block;
  padding: 10px 0;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.lnk-ficha:hover,
.lnk-ficha:focus-visible { text-decoration: underline; }

/* Alvo de toque confortavel no celular (Celinha): botao pequeno, fechar de
   modal e checkbox chegam a 44px de area util. */
@media (max-width: 880px) {
  .btn.btn-sm,
  .modal-x {
    min-height: 44px;
    min-width: 44px;
  }

  .checkbox-label {
    min-height: 44px;
    align-items: center;
  }

  .checkbox-label input[type="checkbox"] {
    width: 22px;
    height: 22px;
  }
}

.mq-alca-area { fill: transparent; cursor: grab; touch-action: none; }

/* --------------------------------------------------------------------------
   Foto da ficha (Fase 7): Padrao_Upload_Arquivo + leitura para conferir.
   -------------------------------------------------------------------------- */
.im-drop {
  display: block;
  border: 2px dashed var(--border);
  border-radius: var(--raio);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  color: var(--texto-secundario);
  cursor: pointer;
  transition: 0.15s;
  user-select: none;
  min-height: 44px;
}
.im-drop:hover,
.im-drop.over,
.im-drop:focus-within {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-soft);
  color: var(--accent-texto);
}
.im-drop.loaded {
  border-style: solid;
  border-color: var(--success);
  background: var(--success-soft);
  color: var(--success-texto);
}
.im-drop i { font-size: 36px; display: block; margin-bottom: 6px; }
.im-arq { display: block; margin-top: 6px; font-weight: 600; color: var(--success-texto); }
.im-inp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.im-acao {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.im-acao .im-msg { margin-right: auto; font-size: var(--fs-sm); color: var(--texto-secundario); }
.im-acao .im-msg.ok { color: var(--success-texto); font-weight: 600; }
.im-acao .im-msg.erro { color: var(--danger-texto); font-weight: 600; }
#imBtn:disabled { opacity: 0.45; cursor: not-allowed; }

.foto-status {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--texto-secundario);
  font-size: var(--fs-sm);
}
.foto-status[hidden] { display: none; }

.foto-leitura { display: flex; flex-direction: column; gap: var(--sp-2); }
.foto-leitura[hidden] { display: none; }
.foto-leitura-txt { margin: 0; color: var(--texto-secundario); font-size: var(--fs-sm); }
.foto-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
}
.foto-linha.confira { border-color: var(--warning); background: var(--warning-soft); }
.foto-linha-nome { font-weight: 600; overflow-wrap: anywhere; }
.foto-linha-input {
  width: 100%;
  min-height: 44px;
  font-size: 16px;
  text-align: right;
  padding: 0 var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  background: var(--surface);
  color: var(--texto);
}
.foto-linha-aviso {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--warning-texto);
}
.foto-linha-aviso[hidden] { display: none; }
.foto-fotos { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.foto-mini {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--border);
  overflow: hidden;
}
.foto-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-vazio { margin: 0; color: var(--texto-secundario); font-size: var(--fs-sm); }