/* =====================================================================
   InfraMap — tokens e componentes compartilhados
   ===================================================================== */
:root{
  --bg:#eef1f5; --surface:#ffffff; --surface-alt:#f5f7fa; --surface-raised:#ffffff;
  --border:#d9dfe6; --border-strong:#b9c3cf;
  --text:#1a2330; --text-muted:#5b6673; --text-faint:#8994a3;
  --accent:#15803d; --accent-soft:#dcfce7; --accent-contrast:#ffffff; --accent-hover:#166534;
  --danger:#d0453e; --danger-soft:#fbe3e1; --danger-contrast:#ffffff;
  --success:#0d9488; --success-soft:#d5f5f0;
  --warning:#b7791f; --warning-soft:#fdf1dc;
  --row-hover:#e9edf3; --row-selected:#d7f0df; --row-focus:#15803d;
  --shadow:0 1px 2px rgba(20,30,45,.06),0 6px 20px rgba(20,30,45,.07);
  --shadow-lg:0 2px 6px rgba(20,30,45,.08),0 24px 60px rgba(20,30,45,.18);
  --font-ui:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
  --radius:8px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f151d; --surface:#161e28; --surface-alt:#1b2430; --surface-raised:#1e2834;
    --border:#2a3440; --border-strong:#3b4855;
    --text:#e7ecf3; --text-muted:#93a0b1; --text-faint:#677282;
    --accent:#4ade80; --accent-soft:#143524; --accent-contrast:#052e16; --accent-hover:#86efac;
    --danger:#e2685f; --danger-soft:#3a1f1f; --danger-contrast:#1a0d0c;
    --success:#2dd4bf; --success-soft:#133330;
    --warning:#e0a642; --warning-soft:#3a2d15;
    --row-hover:#1f2935; --row-selected:#16352a; --row-focus:#4ade80;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.4);
    --shadow-lg:0 2px 6px rgba(0,0,0,.4),0 24px 60px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f151d; --surface:#161e28; --surface-alt:#1b2430; --surface-raised:#1e2834;
  --border:#2a3440; --border-strong:#3b4855;
  --text:#e7ecf3; --text-muted:#93a0b1; --text-faint:#677282;
  --accent:#4ade80; --accent-soft:#143524; --accent-contrast:#052e16; --accent-hover:#86efac;
  --danger:#e2685f; --danger-soft:#3a1f1f; --danger-contrast:#1a0d0c;
  --success:#2dd4bf; --success-soft:#133330;
  --warning:#e0a642; --warning-soft:#3a2d15;
  --row-hover:#1f2935; --row-selected:#16352a; --row-focus:#4ade80;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.4);
  --shadow-lg:0 2px 6px rgba(0,0,0,.4),0 24px 60px rgba(0,0,0,.55);
  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ height:100%; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-ui); font-size:13.5px; line-height:1.45; -webkit-font-smoothing:antialiased; }
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; }
a{ color:var(--accent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ---------- Marca ---------- */
.brand{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--text); font-weight:700; letter-spacing:-.01em; }
.brand-mark{ width:26px; height:26px; border-radius:7px; background:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.brand-mark svg{ width:16px; height:16px; stroke:var(--accent-contrast); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.brand-name{ font-size:15px; }
.brand-name b{ color:var(--accent); font-weight:700; }

/* ---------- Botões ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:34px; padding:0 14px; border-radius:7px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); font-weight:500; text-decoration:none; white-space:nowrap; transition:background .12s,border-color .12s,color .12s,box-shadow .12s; }
.btn:hover{ background:var(--surface-alt); }
.btn svg{ width:15px; height:15px; flex-shrink:0; }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }
.btn-primary:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
.btn-danger{ background:var(--danger); border-color:var(--danger); color:var(--danger-contrast); }
.btn-danger:hover{ filter:brightness(1.06); background:var(--danger); }
.btn-ghost{ border-color:transparent; background:transparent; color:var(--text-muted); }
.btn-ghost:hover{ background:var(--surface-alt); color:var(--text); }
.btn-sm{ height:28px; padding:0 10px; font-size:12.5px; border-radius:6px; }
.btn-lg{ height:42px; padding:0 20px; font-size:14.5px; border-radius:8px; }
.btn-block{ width:100%; }
.btn[disabled],.btn.is-loading{ opacity:.55; cursor:default; pointer-events:none; }
.btn.is-loading::after{ content:""; width:13px; height:13px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:none; border-radius:6px; background:transparent; color:var(--text-muted); flex-shrink:0; padding:0; }
.icon-btn svg{ width:16px; height:16px; }
.icon-btn:hover{ background:var(--surface-alt); color:var(--text); }
.icon-btn.is-active{ background:var(--accent-soft); color:var(--accent); }
.icon-btn[disabled]{ opacity:.4; cursor:default; pointer-events:none; }

/* ---------- Formulários ---------- */
.field{ display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.field > label,.field-label{ font-size:12.5px; font-weight:500; color:var(--text-muted); }
.input,.select,.textarea{ width:100%; min-height:36px; padding:7px 11px; border:1px solid var(--border-strong); border-radius:7px; background:var(--surface); color:var(--text); transition:border-color .12s, box-shadow .12s; }
.textarea{ resize:vertical; min-height:84px; line-height:1.5; }
.input::placeholder,.textarea::placeholder{ color:var(--text-faint); }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.input.is-invalid{ border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-soft); }
.input-sm{ min-height:28px; padding:3px 8px; font-size:12.5px; border-radius:6px; }
.hint{ font-size:12px; color:var(--text-faint); }
.field-error{ font-size:12px; color:var(--danger); }
.mono{ font-family:var(--font-mono); }

.alert{ display:flex; gap:9px; align-items:flex-start; padding:10px 12px; border-radius:7px; font-size:13px; border:1px solid transparent; }
.alert svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; }
.alert-error{ background:var(--danger-soft); color:var(--danger); border-color:color-mix(in srgb, var(--danger) 30%, transparent); }
.alert-success{ background:var(--success-soft); color:var(--success); border-color:color-mix(in srgb, var(--success) 30%, transparent); }
.alert-info{ background:var(--accent-soft); color:var(--accent); border-color:color-mix(in srgb, var(--accent) 25%, transparent); }
.alert-warning{ background:var(--warning-soft); color:var(--warning); border-color:color-mix(in srgb, var(--warning) 30%, transparent); }

/* ---------- Modal ---------- */
.modal-overlay{ position:fixed; inset:0; z-index:1000; background:rgba(10,16,24,.45); display:flex; align-items:center; justify-content:center; padding:16px; animation:fade-in .12s ease-out; }
.modal{ width:100%; max-width:440px; background:var(--surface-raised); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); animation:pop-in .14s ease-out; overflow:hidden; }
.modal-header{ display:flex; align-items:center; gap:10px; padding:16px 18px 6px; }
.modal-header h2{ margin:0; font-size:15.5px; font-weight:600; flex:1; }
.modal-icon{ width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.modal-icon svg{ width:17px; height:17px; }
.modal-icon.danger{ background:var(--danger-soft); color:var(--danger); }
.modal-body{ padding:6px 18px 4px; color:var(--text-muted); font-size:13.5px; }
.modal-body p{ margin:0 0 12px; }
.modal-body strong{ color:var(--text); }
.modal-body code{ font-family:var(--font-mono); font-size:12.5px; padding:1px 5px; border-radius:4px; background:var(--surface-alt); border:1px solid var(--border); color:var(--text); user-select:all; }
.modal-footer{ display:flex; justify-content:flex-end; gap:8px; padding:12px 18px 16px; }
@keyframes fade-in{ from{ opacity:0; } }
@keyframes pop-in{ from{ opacity:0; transform:translateY(6px) scale(.98); } }

/* ---------- Toast ---------- */
.toast-stack{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:1100; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:max-content; max-width:calc(100vw - 32px); }
.toast{ display:flex; align-items:center; gap:9px; padding:9px 14px; border-radius:8px; background:var(--text); color:var(--surface); font-size:13px; box-shadow:var(--shadow-lg); animation:pop-in .16s ease-out; pointer-events:auto; }
.toast svg{ width:16px; height:16px; flex-shrink:0; }
.toast.error{ background:var(--danger); color:var(--danger-contrast); }
.toast.success .t-ico{ color:var(--success); }
.toast.leaving{ opacity:0; transform:translateY(6px); transition:all .2s; }

/* ---------- Tema ---------- */
.theme-toggle .ico-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .ico-sun{ display:block; }
:root[data-theme="dark"] .theme-toggle .ico-moon{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .theme-toggle .ico-sun{ display:block; }
  :root:not([data-theme]) .theme-toggle .ico-moon{ display:none; }
}

.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; }

/* ---------- Papéis, avatares e marcadores (compartilhados) ---------- */
.role-chip{ display:inline-flex; align-items:center; height:19px; padding:0 7px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap; background:var(--surface-alt); color:var(--text-muted); border:1px solid var(--border); }
.role-chip.role-admin{ background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.role-chip.role-editor{ background:color-mix(in srgb, #2563eb 12%, transparent); color:#2563eb; border-color:transparent; }
.role-chip.role-leitor{ background:var(--surface-alt); color:var(--text-muted); }
:root[data-theme="dark"] .role-chip.role-editor{ color:#93b4ff; }
@media (prefers-color-scheme: dark){ :root:not([data-theme]) .role-chip.role-editor{ color:#93b4ff; } }
.org-avatar{ width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #0f172a)); color:#fff; font-size:11.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.org-avatar.sm{ width:20px; height:20px; font-size:10.5px; border-radius:5px; }
.org-avatar.lg{ width:48px; height:48px; font-size:22px; border-radius:12px; }
.avatar{ width:32px; height:32px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; letter-spacing:.02em; }
.avatar.sm{ width:26px; height:26px; font-size:10.5px; }
.tag{ display:inline-flex; align-items:center; height:17px; padding:0 6px; margin-left:4px; border-radius:4px; font-size:10.5px; font-weight:600; background:var(--surface-alt); color:var(--text-muted); border:1px solid var(--border); vertical-align:1px; }