/* Componentes utilitários complementares ao Tailwind */

.card { background:#fff; border:1px solid #e2e8f0; border-radius:10px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.card-header { padding:1.25rem 1.5rem; border-bottom:1px solid #e2e8f0; }
.card-body { padding:1.5rem; }

label.field { display:block; }
label.field > .lbl { display:block; font-size:.75rem; font-weight:500; color:#475569; margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.05em; }
label.field > input,
label.field > select,
label.field > textarea {
  width:100%; padding:.55rem .75rem; border:1px solid #cbd5e1; border-radius:.375rem;
  font-size:.875rem; color:#1e293b; background:#fff; transition:border-color .15s, box-shadow .15s;
}
label.field > input:focus,
label.field > select:focus,
label.field > textarea:focus {
  outline:none; border-color:#1F3864; box-shadow:0 0 0 3px rgba(31,56,100,.12);
}
label.field > textarea { resize:vertical; min-height:80px; }

table.data { width:100%; border-collapse:collapse; }
table.data thead th { text-align:left; padding:.625rem .875rem; font-size:.7rem; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:.05em; background:#f8fafc; border-bottom:1px solid #e2e8f0; }
table.data tbody td { padding:.75rem .875rem; border-bottom:1px solid #f1f5f9; font-size:.875rem; vertical-align:middle; }
table.data tbody tr:hover { background:#fafbfc; cursor:pointer; }
table.data tbody tr.no-hover:hover { background:transparent; cursor:default; }

.badge { display:inline-flex; align-items:center; padding:.125rem .5rem; border-radius:9999px; font-size:.7rem; font-weight:500; }
.badge-green { background:#d1fae5; color:#065f46; }
.badge-amber { background:#fef3c7; color:#92400e; }
.badge-red   { background:#fee2e2; color:#991b1b; }
.badge-slate { background:#e2e8f0; color:#475569; }
.badge-blue  { background:#dbeafe; color:#1e3a8a; }

.section-title { font-size:.7rem; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.75rem; padding-bottom:.5rem; border-bottom:1px solid #f1f5f9; }

.modal-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.55); display:flex; align-items:flex-start; justify-content:center; padding:3rem 1rem; z-index:40; overflow-y:auto; }
.modal { background:#fff; border-radius:10px; width:100%; max-width:880px; box-shadow:0 25px 50px -12px rgba(0,0,0,.25); }
.modal-header { padding:1rem 1.5rem; border-bottom:1px solid #e2e8f0; display:flex; align-items:center; justify-content:space-between; }
.modal-body { padding:1.5rem; max-height:calc(100vh - 14rem); overflow-y:auto; }
.modal-footer { padding:1rem 1.5rem; border-top:1px solid #e2e8f0; display:flex; justify-content:flex-end; gap:.5rem; background:#f8fafc; border-radius:0 0 10px 10px; }