/* ─── Reset & base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--gray-100);
  color: var(--gray-900);
  line-height: 1.5;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ─── Tipografia ─── */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; color: var(--gray-900); }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

/* ─── Alertas ─── */
.alert { padding: .7rem 1rem; border-radius: var(--radius-sm); font-size: .875rem; border: 1px solid transparent; }
.alert-error   { background: var(--red-100);    color: var(--red-600);    border-color: #fca5a5; }
.alert-success { background: var(--green-100);  color: var(--green-600);  border-color: #86efac; }
.alert-warning { background: var(--yellow-100); color: var(--yellow-600); border-color: #fde047; }
.alert-info    { background: var(--blue-100);   color: var(--blue-600);   border-color: #93c5fd; }

/* ─── Botões ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem 1.1rem; border: none; border-radius: var(--radius-sm);
  font-size: .875rem; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: opacity .15s, background .15s;
  white-space: nowrap;
}
.btn:disabled         { opacity: .55; cursor: not-allowed; }
.btn:hover:not(:disabled) { opacity: .88; }
.btn-primary   { background: var(--gray-800); color: var(--white); }
.btn-secondary { background: var(--gray-200); color: var(--gray-800); }
.btn-danger    { background: var(--red-600);  color: var(--white); }
.btn-link      { background: none; color: var(--gray-700); padding: 0; font-size: .8rem; }
.btn-sm        { padding: .35rem .75rem; font-size: .8rem; }
.btn-block     { width: 100%; }
.btn-google    { background: var(--white); color: var(--gray-800); border: 1px solid var(--gray-300); }

/* ─── Formulários ─── */
.form-group   { margin-bottom: 1rem; }
label         { display: block; font-size: .8rem; font-weight: 600; color: var(--gray-700); margin-bottom: .35rem; }
.form-control {
  width: 100%; padding: .6rem .85rem;
  border: 1px solid var(--gray-300); border-radius: var(--radius-sm);
  font-size: .875rem; font-family: inherit; background: var(--white);
  color: var(--gray-900); transition: border-color .15s, box-shadow .15s;
}
.form-control:focus { outline: none; border-color: var(--gray-700); box-shadow: 0 0 0 3px rgba(74,85,104,.12); }
.form-control-code  { font-size: 1.5rem; letter-spacing: .4rem; text-align: center; font-family: monospace; }
.form-hint    { font-size: .75rem; color: var(--gray-500); margin-top: .25rem; display: block; }

/* ─── Card ─── */
.card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.5rem; }

/* ─── Badges ─── */
.badge        { display: inline-block; padding: .2rem .55rem; border-radius: 4px; font-size: .72rem; font-weight: 600; }
.badge-module { background: var(--gray-100); color: var(--gray-700); }
.badge-info   { background: var(--blue-100);   color: var(--blue-600); }
.badge-warning{ background: var(--yellow-100); color: var(--yellow-600); }
.badge-error  { background: var(--red-100);    color: var(--red-600); }

/* ─── Tabelas ─── */
.table-responsive { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .825rem; }
.table th, .table td { padding: .6rem .85rem; text-align: left; border-bottom: 1px solid var(--gray-200); }
.table th { background: var(--gray-50); font-weight: 600; color: var(--gray-700); font-size: .75rem; text-transform: uppercase; letter-spacing: .4px; }
.table tr:hover td { background: var(--gray-50); }

/* ─── Paginação ─── */
.pagination { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: 1rem; }
.pagination a { padding: .3rem .65rem; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); font-size: .8rem; color: var(--gray-700); }
.pagination a.active, .pagination a:hover { background: var(--gray-800); color: var(--white); border-color: var(--gray-800); }

/* ─── Misc ─── */
.text-muted  { color: var(--gray-500); font-size: .8rem; }
.monospace   { font-family: monospace; font-size: .8rem; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.page-header h2 { margin: 0; }