/* ============================================================================
   SER — Design System institucional NAVY "GovTech LIGHT" (CSS plano)
   ----------------------------------------------------------------------------
   Versão "plana" (sem Tailwind) dos tokens do DS navy usado nos apps RFID
   (ser-rfid/web). Para apps NÃO-Tailwind consumirem via <link>.
   Fonte da verdade dos tokens: ser-ui.css central (v2026070303).

   ATUALIZAÇÃO (2026-07-03): tokens migrados para camada de compat — os nomes
   expostos (--navy, --surface, --line, --ink, --muted etc.) são mantidos mas
   derivam dos aliases centrais fornecidos por ser-ui.css.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap");

:root {
  /* Cores institucionais — derivadas do central */
  --navy:      var(--navy, #002147);
  --navy-700:  var(--navy-700, #02315f);
  --navy-600:  var(--navy-600, #073d70);
  --navy-soft: var(--navy-600, #0b3a66);

  --surface:       var(--surface, #f8fafc);
  --surface-card:  var(--surface-card, #ffffff);
  --line:          var(--border, #e2e8f0);

  --success: var(--success, #10b981);
  --warning: var(--warning, #f59e0b);
  --danger:  var(--danger, #ef4444);

  --ink:    var(--text, #1e293b);
  --muted:  var(--muted, #64748b);

  /* Azul institucional de dados / hover sutil (derivado do accent rgb) */
  --tint: rgba(var(--navy-rgb, 0, 33, 71), 0.04);

  --font-sans:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "IBM Plex Sans", "Inter", ui-sans-serif, system-ui, sans-serif;

  --radius-sm:  0.125rem;
  --radius:     0.25rem;
  --radius-md:  0.375rem;
  --radius-lg:  0.5rem;

  --shadow-card: 0 1px 2px rgb(15 23 42 / 0.03);
  --focus-ring:  0 0 0 2px rgb(0 33 71 / 0.18);
}

*, *::before, *::after { box-sizing: border-box; }

html { font-family: var(--font-sans); }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
}

a { color: var(--navy); }

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* ---- Botões ---- */
.btn-primary {
  background: var(--navy);
  color: #fff;
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  font: 600 0.875rem/1.2 var(--font-sans);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: background-color 0.15s ease;
}
.btn-primary:hover { background: var(--navy-600); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  font: 600 0.875rem/1.2 var(--font-sans);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: background-color 0.15s ease;
}
.btn-secondary:hover { background: var(--tint); }

/* ---- Card ---- */
.card-ser {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ---- Inputs ---- */
.input-ser {
  width: 100%;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  font: 400 0.875rem/1.4 var(--font-sans);
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-ser:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: var(--focus-ring);
}

/* ---- Badges / chips de status ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}
.badge-success { background: rgba(var(--green-rgb, 16,185,129), 0.12); color: #047857; }
.badge-warning { background: rgba(var(--warning-rgb, 245,158,11), 0.14); color: #b45309; }
.badge-danger  { background: rgba(var(--red-rgb, 239,68,68), 0.12); color: #b91c1c; }
.badge-info    { background: var(--tint); color: var(--navy); }
.badge-neutral { background: var(--surface2, #f1f5f9); color: #475569; }

[data-theme="dark"] .badge-success { color: var(--success); }
[data-theme="dark"] .badge-warning { color: var(--warning); }
[data-theme="dark"] .badge-danger  { color: var(--danger); }
[data-theme="dark"] .badge-neutral { color: var(--text-dim); }