/* Classes de apoio usadas nos formulários/modais (não são utilitárias do
   Tailwind, então não saem do build do template — ficam centralizadas aqui
   em vez de duplicadas em <style> por view). */
.campo-label { display: block; margin-bottom: 6px; font-size: 0.8125rem; font-weight: 500; color: #6b7280; }
.dark .campo-label { color: #9ca3af; }
.campo-input { height: 44px; width: 100%; border-radius: 8px; border: 1px solid #d1d5db; background: transparent; padding: 0 14px; font-size: 0.875rem; color: #1f2937; }
.dark .campo-input { border-color: #374151; color: rgba(255,255,255,.9); }
.campo-input:focus { outline: none; border-color: #9cb2ff; box-shadow: 0 0 0 3px rgba(70,95,255,.1); }
.btn-cancelar { border-radius: 8px; border: 1px solid #d1d5db; padding: 10px 16px; font-size: 0.875rem; font-weight: 500; color: #374151; background: #fff; }
.dark .btn-cancelar { border-color: #374151; color: #9ca3af; background: #1f2937; }
.btn-salvar { border-radius: 8px; background: #465fff; padding: 10px 16px; font-size: 0.875rem; font-weight: 500; color: #fff; }
.btn-salvar:hover { background: #3647d1; }

/* Data Table (busca + entries + ordenação + export CSV), estilo "Datatable 3" do TailAdmin */
.dt-toolbar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
@media (min-width: 640px) { .dt-toolbar { flex-direction: row; align-items: center; justify-content: space-between; } }
.dt-entries { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: #6b7280; }
.dark .dt-entries { color: #9ca3af; }
.dt-entries select { height: 36px; border-radius: 8px; border: 1px solid #d1d5db; background: transparent; padding: 0 8px; font-size: 0.875rem; color: #1f2937; }
.dark .dt-entries select { border-color: #374151; color: rgba(255,255,255,.9); }
.dt-actions { display: flex; align-items: center; gap: 12px; }
.dt-search-wrap { position: relative; }
.dt-search-wrap input { height: 40px; border-radius: 8px; border: 1px solid #d1d5db; background: transparent; padding: 0 14px 0 36px; font-size: 0.875rem; color: #1f2937; }
.dark .dt-search-wrap input { border-color: #374151; color: rgba(255,255,255,.9); }
.dt-search-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; fill: #9ca3af; }
.dt-download { display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; border: 1px solid #d1d5db; padding: 9px 16px; font-size: 0.875rem; font-weight: 500; color: #374151; background: transparent; }
.dark .dt-download { border-color: #374151; color: #9ca3af; }
.dt-download:hover { background: #f9fafb; }
.dark .dt-download:hover { background: rgba(255,255,255,.03); }
.dt-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.dt-sort-icon { display: inline-block; margin-left: 4px; font-size: 0.7em; color: #d1d5db; }
.dt-sort-icon.asc, .dt-sort-icon.desc { color: #465fff; }
.dt-footer { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; font-size: 0.875rem; color: #6b7280; }
@media (min-width: 640px) { .dt-footer { flex-direction: row; align-items: center; justify-content: space-between; } }
.dark .dt-footer { color: #9ca3af; }
.dt-pagination { display: flex; align-items: center; gap: 8px; }
.dt-pagination button { border-radius: 8px; border: 1px solid #d1d5db; padding: 6px 12px; font-size: 0.8125rem; color: #374151; background: #fff; }
.dark .dt-pagination button { border-color: #374151; color: #9ca3af; background: #1f2937; }
.dt-pagination button:disabled { opacity: .5; cursor: not-allowed; }