/* =========================
   TABELA — TRATAMENTO VERBAL (3 colunas)
   aplique em: <table class="tabela-tratamento">
   ========================= */

.tabela-tratamento{
  width:100%;
  max-width:900px;
  margin:var(--spacing-md) auto;
  border-collapse:separate;
  border-spacing:0;
  background:#F3F4F6;
  border:1px solid var(--line);
  border-radius:var(--border-radius);
  overflow:hidden;
  box-shadow:0 10px 28px rgba(2,6,23,.12);

  font-family:var(--fonte-texto);
  color:var(--text);
}

/* Cabeçalho */
.tabela-tratamento thead th{
  background:linear-gradient(180deg, rgba(0,104,181,.14), rgba(0,104,181,.06));
  color:#07101f;
  font-family:var(--fonte-destaque);
  font-weight:700;
  letter-spacing:.35px;
  text-transform:uppercase;
  padding:14px 12px;
  font-size:clamp(.82rem, 2.2vw, .92rem);
  text-align:center;
  border-bottom:1px solid var(--line);
}

/* Colunas (proporção boa e igual ao “modelo” da imagem) */
.tabela-tratamento thead th:nth-child(1),
.tabela-tratamento tbody td:nth-child(1){ width:30%; }

.tabela-tratamento thead th:nth-child(2),
.tabela-tratamento tbody td:nth-child(2){ width:35%; }

.tabela-tratamento thead th:nth-child(3),
.tabela-tratamento tbody td:nth-child(3){ width:35%; }

/* Corpo */
.tabela-tratamento tbody td{
  padding:14px 12px;
  font-size:clamp(.95rem, 2.8vw, 1.02rem);
  line-height:1.6;
  vertical-align:middle;
  text-align:center;
  border-bottom:1px solid rgba(15,23,42,.10);
}

/* Primeira coluna (Categorias) */
.tabela-tratamento tbody td.col-categoria{
  font-family:var(--fonte-destaque);
  font-weight:700;
  color:#0b2b5a;
  text-align:center;
}

/* Divisores verticais */
.tabela-tratamento thead th + th,
.tabela-tratamento tbody td + td{
  border-left:1px solid rgba(15,23,42,.14);
}

/* Listras suaves */
.tabela-tratamento tbody tr:nth-child(odd) td{
  background:rgba(244,246,254,.70);
}
.tabela-tratamento tbody tr:nth-child(even) td{
  background:rgba(243,244,246,.95);
}

/* Hover (desktop) */
@media (hover:hover){
  .tabela-tratamento tbody tr:hover td{
    background:rgba(239,186,50,.16);
  }
}

/* Pequenas siglas/badges (V. Exa / V. Sa / Sr.) */
.tabela-tratamento .sigla{
  display:inline-block;
  margin-left:6px;
  padding:2px 8px;
  border-radius:999px;
  font-size:.80em;
  line-height:1.35;
  background:rgba(46,88,162,.12);
  border:1px solid rgba(46,88,162,.22);
  color:#0b2b5a;
  font-family:var(--fonte-destaque);
  white-space:nowrap;
}

/* =========================
   RESPONSIVO (CELULAR)
   vira cards (não espreme)
   ========================= */
@media (max-width:560px){
  .tabela-tratamento thead{ display:none; }

  .tabela-tratamento,
  .tabela-tratamento tbody,
  .tabela-tratamento tr,
  .tabela-tratamento td{
    display:block;
    width:100%;
  }

  .tabela-tratamento tr{
    border-bottom:1px solid rgba(15,23,42,.14);
  }

  .tabela-tratamento tbody td{
    text-align:left;
    padding:10px 12px;
    border:none;
    background:transparent;
  }

  .tabela-tratamento tbody td + td{
    border-left:none;
  }

  .tabela-tratamento tbody td::before{
    content:attr(data-label);
    display:block;
    font-family:var(--fonte-destaque);
    font-weight:700;
    font-size:.78rem;
    letter-spacing:.3px;
    color:rgba(15,23,42,.70);
    text-transform:uppercase;
    margin-bottom:4px;
  }

  .tabela-tratamento tbody td.col-categoria{
    padding-top:14px;
    text-align:left;
  }
}