@font-face { font-family: Inter; src: url("fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Smart NFC — Luminous Azure Enterprise Design System.
   Linked into both web projects: one source, same-origin assets, no CDN. */
:root {
    color-scheme: light;
    --bg-app: #eff6fd; --bg-subtle: #e7f1fa; --bg-accent: #dbe9f5;
    --surface-primary: #f8fbff; --surface-secondary: #f0f7fc;
    --surface-glass: rgba(248,251,255,.88); --surface-hover: #e9f4fc;
    --border-default: #d3e1f0; --border-soft: #e3edf6;
    --primary-400: #35a1f3; --primary-500: #158cf0; --primary-600: #0670e6; --primary-700: #075fc4;
    --cyan-500: #24b8df; --cyan-glow-soft: rgba(36,184,223,.14);
    --text-primary: #101828; --text-secondary: #526372;
    --text-tertiary: #62798b; --text-disabled: #738596;
    --success: #13845a; --warning: #965b09; --danger: #bd3044; --info: #176cc2;
    --whatsapp-bg: #ecfdf5; --whatsapp-border: #a7f3d0; --whatsapp-text: #166534; --whatsapp-hover: #d1fae5;
    --success-bg: #eaf8f2; --warning-bg: #fff7e8; --danger-bg: #fff0f1; --info-bg: #e5f3fe;
    --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 24px; --radius-pill: 999px;
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
    --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
    --shadow-subtle: 0 2px 8px rgba(37,76,110,.05);
    --shadow-card: 0 8px 24px rgba(37,76,110,.08);
    --shadow-floating: 0 16px 42px rgba(37,76,110,.13);
    --shadow-primary: 0 8px 20px rgba(6,112,230,.20);
    /* Darker endpoint keeps small white button labels readable. */
    --brand-gradient: linear-gradient(135deg,#075fc4 0%,#0670d8 55%,#0874d6 100%);
    --app-background: radial-gradient(circle at 15% 10%,rgba(53,161,243,.12),transparent 32%),radial-gradient(circle at 90% 20%,rgba(36,184,223,.08),transparent 28%),var(--bg-app);
    --font-body: Inter,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --background: var(--bg-app); --surface: var(--surface-primary); --text: var(--text-primary);
    --muted: var(--text-secondary); --border: var(--border-default); --accent: var(--primary-700);
    --accent-contrast: #fff; --focus: var(--primary-600); --placeholder: var(--bg-accent);
    --disabled-background: var(--bg-subtle); --disabled-text: var(--text-disabled);
    --warning-background: var(--warning-bg); --warning-text: var(--warning);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 88px; }
body { margin: 0; font: 14px/1.6 var(--font-body); color: var(--text); background: var(--app-background); min-height: 100vh; }
a { color: var(--accent); text-underline-offset: 3px; }
button,input,select,textarea { font: inherit; }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1,h2,h3 { color: var(--text); font-weight: 700; line-height: 1.3; }
h1 { font-size: 28px; line-height: 36px; letter-spacing: -.035em; margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
h2 { font-size: 20px; line-height: 28px; margin: var(--space-8) 0 var(--space-4); letter-spacing: -.02em; }
h3 { font-size: 16px; line-height: 24px; margin: var(--space-6) 0 var(--space-3); }
p { margin: 0 0 var(--space-4); }
img { max-width: 100%; height: auto; }
code,.token { font-family: Consolas,"Courier New",monospace; overflow-wrap: anywhere; font-size: .92em; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-8) 0; }
label { display: block; margin: var(--space-4) 0 var(--space-1); font-size: 13px; line-height: 18px; font-weight: 600; }
label.inline { display: inline; font-weight: 400; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea {
    width: 100%; max-width: 480px; min-height: 44px; padding: 10px 12px;
    color: var(--text); background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); transition: border-color 160ms,box-shadow 160ms;
}
textarea { min-height: 100px; resize: vertical; }
input::placeholder,textarea::placeholder { color: var(--text-tertiary); opacity: 1; }
input:focus,select:focus,textarea:focus { border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(21,140,240,.13); }
input[type=checkbox],input[type=radio] { width: 18px; height: 18px; accent-color: var(--primary-700); vertical-align: middle; margin: 0 8px 0 0; flex-shrink: 0; }
input[type=file] { padding: 8px; }
input::file-selector-button { font: inherit; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface-secondary); color: var(--text); margin-right: 8px; }
fieldset { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); margin: var(--space-6) 0; background: var(--surface); }
legend { font-size: 16px; font-weight: 700; padding: 0 var(--space-2); }
button,.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--accent); background: var(--surface); font: 600 14px/20px var(--font-body); cursor: pointer; text-decoration: none; text-align: center; transition: background 160ms,border-color 160ms,box-shadow 160ms; }
button:hover,.button:hover { background: var(--surface-hover); border-color: var(--primary-400); }
button:active,.button:active { transform: translateY(1px); }
button.primary,.button.primary,.button--primary { background: var(--brand-gradient); border-color: var(--primary-700); color: var(--accent-contrast); box-shadow: var(--shadow-primary); }
button.primary:hover,.button.primary:hover,.button--primary:hover { filter: brightness(.96); }
button.danger,.button.danger { color: var(--danger); background: var(--danger-bg); border-color: var(--danger); }
button:disabled,input:disabled,select:disabled,textarea:disabled { color: var(--disabled-text); background: var(--disabled-background); box-shadow: none; cursor: not-allowed; opacity: 1; }
.linklike { border: 0; background: transparent; box-shadow: none; padding: 8px 12px; text-decoration: none; color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-5) 0; }
.actions form { margin: 0; }
.muted { color: var(--muted); } .error,.field-validation-error { color: var(--danger); } .success { color: var(--success); }
.field-validation-error { display: block; margin: 4px 0; font-size: 13px; }
.input-validation-error { border-color: var(--danger) !important; }
.validation-summary-valid,.field-validation-valid { display: none; }
.notice,.validation-summary-errors { border: 1px solid var(--border); border-left: 4px solid var(--success); border-radius: var(--radius-sm); background: var(--success-bg); padding: var(--space-4) var(--space-5); margin: var(--space-5) 0; overflow-wrap: anywhere; }
.notice--warn,.validation-summary-errors { border-left-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.notice--info { border-left-color: var(--info); background: var(--info-bg); color: var(--text); }
.validation-summary-errors ul { margin: 4px 0; padding-left: 20px; }
.panel { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: var(--space-6); margin: var(--space-6) 0; box-shadow: var(--shadow-subtle); }
.panel__head { margin-bottom: var(--space-4); } .panel h2 { margin-top: 0; } .panel__head p { margin: 0; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--bg-subtle); color: var(--muted); font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.pill--live,.pill[data-state=Active],.pill[data-state=Locked] { color: var(--success); background: var(--success-bg); }
.pill--warn,.pill[data-state=Suspended],.pill[data-state=Revoked],.pill[data-state=Disabled] { color: var(--danger); background: var(--danger-bg); }
.pill[data-state=Written],.pill[data-state=Pending],.pill[data-state=New] { color: var(--warning); background: var(--warning-bg); }
.pill[data-state=Assigned],.pill[data-state=Contacted] { color: var(--info); background: var(--info-bg); }
.table-scroll { width: 100%; max-width: 100%; overflow-x: auto; margin: var(--space-5) 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-subtle); }
table { border-collapse: collapse; width: 100%; margin: var(--space-5) 0; font-size: 13px; background: var(--surface); }
.table-scroll table { margin: 0; }
table:has(thead) { min-width: 640px; }
table:has(thead th:nth-child(7)) { min-width: 1040px; }
table:has(thead th:nth-child(10)) { min-width: 1440px; }
.table-scroll td form { min-width: 144px; }
.table-scroll td form .actions { flex-wrap: nowrap; }
th,td { padding: 12px 16px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--border-soft); }
th { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-secondary); }
thead th { white-space: nowrap; } tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-hover); } td button { min-height: 40px; }
.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.page-header p { margin: 4px 0 0; color: var(--muted); } .page-header .actions { margin: 0; }
.eyebrow { display: block; margin-bottom: 8px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.empty-state { padding: var(--space-8); border: 1px dashed var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--muted); }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 20px; background: var(--surface); border-radius: var(--radius-sm); }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
dialog { color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); width: min(480px,calc(100% - 32px)); max-height: calc(100dvh - 32px); box-shadow: var(--shadow-floating); }
dialog::backdrop { background: rgba(16,24,40,.38); }
dialog h2 { margin-top: 0; } dialog .actions { justify-content: flex-end; margin-bottom: 0; }
@media (prefers-color-scheme: dark) {
    :root { color-scheme: dark; --bg-app:#101c2b; --bg-subtle:#1e3046; --bg-accent:#263e58; --surface-primary:#17273a; --surface-secondary:#1b2e44; --surface-glass:rgba(23,39,58,.94); --surface-hover:#213951; --border-default:#40556d; --border-soft:#30445a; --text-primary:#edf5ff; --text-secondary:#b7c9dc; --text-tertiary:#a0b7ce; --text-disabled:#91a4b8; --primary-700:#96caff; --focus:#96caff; --success:#85dbb4; --warning:#f2c576; --danger:#ffacb8; --info:#9bcbff; --whatsapp-bg:#173c35; --whatsapp-border:#376f57; --whatsapp-text:#85dbb4; --whatsapp-hover:#204a3e; --success-bg:#173c35; --warning-bg:#3c3221; --danger-bg:#432633; --info-bg:#203d5a; }
}
@media (max-width:639px) { h1 { font-size: 24px; line-height: 32px; } .panel { padding: var(--space-5); } input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea { font-size: 16px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }