/* ==========================================================
   GERENCIAL TRIOCOR TINTAS — estilos
   Paleta extraída das logos: azul Triocor, amarelo, vermelho, ciano
   ========================================================== */
:root {
  --azul-900: #071a4d;
  --azul-800: #0b2468;
  --azul-700: #12358c;
  --azul-600: #1d4fae;
  --azul-500: #2a64d0;
  --ciano: #2bb3e6;
  --amarelo: #ffd21f;
  --laranja: #ff9f1c;
  --vermelho: #e63946;
  --marrom-3r: #7b5530;

  --bg: #f2f5fb;
  --surface: #ffffff;
  --surface-2: #f7f9fd;
  --border: #e3e9f3;
  --text: #13213f;
  --text-2: #55627d;
  --text-3: #8a95ab;
  --ok: #16a34a;
  --danger: #dc2f3c;

  --sb-w: 288px;
  --sb-w-min: 84px;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 32, 77, .05), 0 8px 24px -12px rgba(16, 32, 77, .18);
  --shadow-lg: 0 24px 60px -20px rgba(7, 26, 77, .45);
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); color: var(--text); background: var(--bg); font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--azul-600); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -.01em; }
p { margin: 0; }
.muted { color: var(--text-2); font-size: 13.5px; }
.muted-strong { color: var(--azul-600); }
[hidden] { display: none !important; }

.ic { width: 20px; height: 20px; flex: none; }

/* ---------------- Ícones em degradê ---------------- */
.gi { --s: 34px; width: var(--s); height: var(--s); border-radius: 10px; display: inline-grid; place-items: center; flex: none; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px -6px rgba(0,0,0,.45); position: relative; }
.gi .ic { width: 19px; height: 19px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.gi.sm { --s: 40px; border-radius: 12px; } .gi.sm .ic { width: 21px; height: 21px; }
.gi.xs { --s: 24px; border-radius: 7px; } .gi.xs .ic { width: 14px; height: 14px; }
.gi.xl { --s: 72px; border-radius: 20px; } .gi.xl .ic { width: 36px; height: 36px; }
.g-home { background: linear-gradient(135deg, #ffe066, #ff9f1c); }
.g-fat  { background: linear-gradient(135deg, #34d399, #0d9488); }
.g-cx   { background: linear-gradient(135deg, #38c8f2, #1d4fae); }
.g-desp { background: linear-gradient(135deg, #ff8a5b, #e63946); }
.g-ind  { background: linear-gradient(135deg, #c084fc, #db2777); }
.g-rh   { background: linear-gradient(135deg, #ffd21f, #f97316); }
.g-orc  { background: linear-gradient(135deg, #818cf8, #4338ca); }
.g-fin  { background: linear-gradient(135deg, #a3e635, #16a34a); }
.g-prod { background: linear-gradient(135deg, #22d3ee, #9333ea); }
.g-adm  { background: linear-gradient(135deg, #ffd21f, #e63946); }
.g-adm2 { background: linear-gradient(135deg, #2bb3e6, #7c3aed); }

/* ---------------- Botões / formulários ---------------- */
.btn { --h: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h); padding: 0 16px; border-radius: 10px;
  border: 1px solid transparent; font: 600 14px/1 var(--font); cursor: pointer; transition: transform .12s, box-shadow .2s, background .2s, opacity .2s; white-space: nowrap; }
.btn .ic { width: 17px; height: 17px; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--azul-500), var(--azul-700)); box-shadow: 0 8px 18px -8px rgba(29,79,174,.7); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 10px 22px -8px rgba(29,79,174,.85); filter: brightness(1.06); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); border-color: #cfd8e8; }
.btn-danger { color: #fff; background: linear-gradient(135deg, #f0585f, var(--danger)); box-shadow: 0 8px 18px -8px rgba(220,47,60,.7); }
.btn-sm { --h: 34px; padding: 0 12px; font-size: 13px; }
.btn-lg { --h: 50px; font-size: 15.5px; border-radius: 12px; }
.btn-block { width: 100%; }
.link-btn { background: none; border: 0; padding: 0; color: var(--azul-600); font: 600 13px var(--font); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.icon-btn { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; transition: .15s; }
.icon-btn .ic { width: 17px; height: 17px; }
.icon-btn:hover { color: var(--azul-600); border-color: #c5d3ee; background: #f1f5ff; }
.icon-btn.warn:hover { color: #b45309; border-color: #f6d39a; background: #fff8eb; }
.icon-btn.danger:hover { color: var(--danger); border-color: #f5c2c6; background: #fff3f4; }

.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
input[type=text], input[type=email], input[type=password], input[type=search], select {
  width: 100%; height: 42px; padding: 0 12px; border: 1px solid #d6deec; border-radius: 10px; background: #fff; color: var(--text);
  font: 500 14px var(--font); transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus { outline: none; border-color: var(--azul-500); box-shadow: 0 0 0 4px rgba(42,100,208,.14); }
select:disabled { background: var(--surface-2); color: var(--text-3); }
input.invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(220,47,60,.12); }
.input-ic { position: relative; }
.input-ic > .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-3); pointer-events: none; }
.input-ic > input { padding-left: 42px; padding-right: 44px; }
.input-ic.plain > input { padding-left: 12px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--text-3); cursor: pointer; display: grid; place-items: center; }
.pw-toggle .ic { width: 18px; height: 18px; }
.pw-toggle:hover, .pw-toggle.on { color: var(--azul-600); background: #eef3ff; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.form-actions.end { justify-content: flex-end; }
.hint { font-size: 12.5px; color: var(--text-2); background: var(--surface-2); border: 1px dashed var(--border); padding: 10px 12px; border-radius: 10px; }

.alert { padding: 11px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 500; border: 1px solid; }
.alert.error { background: #fff2f3; color: #a51d2a; border-color: #f8c9cd; }
.alert.info { background: #eef5ff; color: #1b3f86; border-color: #cddcfb; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.chip .ic { width: 14px; height: 14px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok { background: #e8f8ee; color: #15803d; }
.badge.off { background: #f1f3f7; color: #6b7590; }
.badge.adm { background: linear-gradient(135deg, #fff4c2, #ffe1e3); color: #9a3412; }
.badge.usr { background: #eaf1ff; color: #1d4fae; }
.badge.adm::before, .badge.usr::before { display: none; }

/* ==========================================================
   LOGIN
   ========================================================== */
.login-body { min-height: 100vh; background: var(--bg); }
.login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-brand { position: relative; overflow: hidden; color: #fff; display: flex; align-items: center; justify-content: center; padding: 48px;
  background: radial-gradient(1200px 600px at -10% -10%, rgba(43,179,230,.35), transparent 60%),
              radial-gradient(800px 500px at 110% 110%, rgba(255,210,31,.22), transparent 60%),
              linear-gradient(160deg, var(--azul-600) 0%, var(--azul-800) 55%, var(--azul-900) 100%); }
.login-brand-inner { position: relative; z-index: 2; max-width: 460px; }
.login-logo-main { width: 260px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); margin-bottom: 36px; }
.login-brand h1 { font-size: 42px; font-weight: 800; letter-spacing: -.02em; }
.login-brand h1 span { background: linear-gradient(90deg, var(--amarelo), #ffb347); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-brand p { margin-top: 16px; color: rgba(255,255,255,.78); font-size: 16px; max-width: 400px; }
.login-brand-foot { margin-top: 48px; display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.65); font-size: 13px; }
.login-logo-3r { width: 58px; filter: drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 0 10px rgba(255,255,255,.35)); }
.paint { position: absolute; border-radius: 999px; height: 22px; z-index: 1; opacity: .9; transform: rotate(-28deg); }
.paint.p1 { width: 520px; right: -160px; top: 70px; background: linear-gradient(90deg, transparent, var(--vermelho)); }
.paint.p2 { width: 620px; right: -200px; top: 112px; background: linear-gradient(90deg, transparent, var(--ciano)); }
.paint.p3 { width: 720px; right: -240px; top: 154px; background: linear-gradient(90deg, transparent, var(--amarelo)); }
.login-form-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; }
.login-form { width: 100%; max-width: 400px; display: grid; gap: 18px; }
.login-form h2 { font-size: 30px; font-weight: 800; }
.login-logo-mobile { display: none; width: 170px; margin: 0 auto 6px; }
.login-note { font-size: 12.5px; color: var(--text-3); text-align: center; }
.login-foot { margin-top: 40px; font-size: 12px; color: var(--text-3); }

/* ==========================================================
   LAYOUT DO SISTEMA
   ========================================================== */
.app { min-height: 100vh; }
.sb { position: fixed; inset: 0 auto 0 0; width: var(--sb-w); z-index: 40; display: flex; flex-direction: column; color: #e6ecff;
  background: radial-gradient(420px 300px at 0% 0%, rgba(43,179,230,.22), transparent 70%),
              radial-gradient(420px 380px at 100% 100%, rgba(255,210,31,.12), transparent 70%),
              linear-gradient(185deg, #1a46a3 0%, var(--azul-800) 42%, var(--azul-900) 100%);
  box-shadow: 8px 0 30px -18px rgba(7,26,77,.7); transition: width .28s cubic-bezier(.4,0,.2,1); }
.sb::after { /* listras de tinta discretas */ content: ""; position: absolute; top: 0; right: 0; width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--vermelho), var(--ciano) 50%, var(--amarelo)); opacity: .85; }

.sb-top { padding: 18px 18px 8px; display: flex; justify-content: center; }
.sb-logo { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none !important; }
.sb-logo img { width: 156px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); transition: width .28s; }
.sb-app { font-size: 11px; font-weight: 800; letter-spacing: .32em; color: var(--amarelo); text-transform: uppercase; }
.sb-toggle { position: absolute; top: 22px; right: -14px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; z-index: 3; cursor: pointer;
  background: linear-gradient(135deg, var(--amarelo), var(--laranja)); color: var(--azul-900); display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.sb-toggle .ic { width: 15px; height: 15px; stroke-width: 2.3; }

.sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 12px 16px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.sb-nav::-webkit-scrollbar { width: 6px; } .sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 6px; }

.sb-item, .sb-grp-btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 12px; border: 0; background: none;
  color: #dfe7ff; font: 600 14px var(--font); text-align: left; cursor: pointer; text-decoration: none !important; transition: background .18s, color .18s; position: relative; }
.sb-item:hover, .sb-grp-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.sb-item.active { background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.04)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.sb-item.active::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--amarelo); }
.sb-item .lbl, .sb-grp-btn .lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chev { width: 16px; height: 16px; opacity: .6; transition: transform .25s; }
.sb-grp.open > .sb-grp-btn .chev { transform: rotate(90deg); opacity: 1; }
.sb-grp.open > .sb-grp-btn { color: #fff; }

.sb-sec { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.sb-sec-head { display: flex; align-items: center; gap: 10px; padding: 4px 6px 10px; }
.sb-sec-logo { height: 40px; width: auto; flex: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)); }
.sb-sec-3r .sb-sec-logo { height: 54px; filter: drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 8px rgba(255,255,255,.3)); }
.sb-sec-title { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: rgba(255,255,255,.62); line-height: 1.35; }
.sb-sec-head.adm { padding-left: 8px; }
.sb-sec-head.adm .gi { --s: 30px; border-radius: 9px; }
.sb-sec-head.adm .gi .ic { width: 16px; height: 16px; }

.sb-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s cubic-bezier(.4,0,.2,1); }
.sb-grp.open > .sb-sub { grid-template-rows: 1fr; }
.sb-sub-inner { overflow: hidden; padding-left: 27px; margin-left: 0; }
.sb-sub-inner::before { content: ""; display: block; height: 4px; }
.sb-fly-title { display: none; }
.sb-link { display: block; position: relative; padding: 7px 10px 7px 22px; margin: 1px 0; border-radius: 9px; color: rgba(225,233,255,.78); font-size: 13.4px; font-weight: 500; text-decoration: none !important;
  border-left: 1px solid rgba(255,255,255,.14); border-radius: 0 9px 9px 0; transition: .15s; }
.sb-link::before { content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: rgba(255,255,255,.25); transition: .15s; }
.sb-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.sb-link.active { color: #fff; font-weight: 700; background: linear-gradient(90deg, rgba(255,210,31,.22), rgba(255,210,31,0)); border-left-color: var(--amarelo); }
.sb-link.active::before { background: var(--amarelo); box-shadow: 0 0 0 3px rgba(255,210,31,.25); }

.sb-foot { display: flex; align-items: center; gap: 10px; margin: 0 12px 12px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); }
.sb-foot-txt { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.sb-foot-txt strong { font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-foot-txt small { font-size: 11.5px; color: rgba(255,255,255,.6); }
.sb-out { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #ffd9dc; flex: none; }
.sb-out:hover { background: rgba(230,57,70,.25); color: #fff; }
.sb-out .ic { width: 18px; height: 18px; }
.avatar { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 13.5px; color: var(--azul-900);
  background: linear-gradient(135deg, var(--amarelo), var(--laranja)); }
.avatar.sm { width: 34px; height: 34px; border-radius: 10px; font-size: 12.5px; }

/* ---------- menu recolhido ---------- */
.sb-min .sb { width: var(--sb-w-min); }
.sb-min .sb .lbl, .sb-min .sb .chev { display: none; }
.sb-min .sb-top { padding: 16px 8px 6px; }
.sb-min .sb-logo img { width: 58px; }
.sb-min .sb-toggle .ic { transform: scaleX(-1); }
.sb-min .sb-nav { padding: 8px 10px 16px; }
.sb-min .sb-item, .sb-min .sb-grp-btn { justify-content: center; padding: 7px 0; }
.sb-min .sb-sec-head { justify-content: center; padding: 2px 0 8px; }
.sb-min .sb-sec-logo { height: 30px; }
.sb-min .sb-sec-3r .sb-sec-logo { height: 34px; }
.sb-min .sb-sub { display: none; }
.sb-min .sb-grp.fly > .sb-sub { display: block; position: fixed; left: calc(var(--sb-w-min) + 6px); z-index: 60; }
.sb-min .sb-grp.fly .sb-sub-inner { overflow: visible; min-width: 230px; padding: 8px; border-radius: 14px; background: linear-gradient(180deg, #16408f, var(--azul-900));
  box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.12); }
.sb-min .sb-grp.fly .sb-sub-inner::before { display: none; }
.sb-min .sb-fly-title { display: block; padding: 6px 10px 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--amarelo); }
.sb-min .sb-grp.fly .sb-link { border-left: 0; border-radius: 9px; }
.sb-min .sb-foot { flex-direction: column; margin: 0 10px 12px; padding: 8px 0; }
.sb-min .sb-item[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%); white-space: nowrap;
  padding: 7px 11px; border-radius: 9px; font-size: 12.5px; background: var(--azul-900); color: #fff; box-shadow: var(--shadow-lg); z-index: 70; }

.main { margin-left: var(--sb-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .28s cubic-bezier(.4,0,.2,1); }
.sb-min .main { margin-left: var(--sb-w-min); }

.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; padding: 14px 28px; background: rgba(242,245,251,.82); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border); }
.tb-menu { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--text); cursor: pointer; place-items: center; flex: none; }
.tb-title { flex: 1; min-width: 0; }
.tb-title h1 { font-size: 21px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-3); font-weight: 600; flex-wrap: wrap; }
.crumbs .ic { width: 12px; height: 12px; }
.crumbs .cur { color: var(--azul-600); }
.tb-right { display: flex; align-items: center; gap: 14px; }
.tb-date { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.tb-user { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: 12px; background: #fff; border: 1px solid var(--border); }
.tb-user-txt { display: grid; line-height: 1.2; }
.tb-user-txt strong { font-size: 13px; }
.tb-user-txt small { font-size: 11.5px; color: var(--text-3); }

.content { flex: 1; padding: 26px 28px 40px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.card + .card { margin-top: 18px; }
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.card-head.between { justify-content: space-between; flex-wrap: wrap; }
.card-head.between > .card-head { margin-bottom: 0; }
.card-head h3 { font-size: 16.5px; font-weight: 800; }

/* ---------------- Página em construção ---------------- */
.wip { min-height: calc(100vh - 160px); display: grid; place-items: center; }
.wip-card { text-align: center; max-width: 520px; padding: 40px 36px 44px; background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 14px; position: relative; overflow: hidden; }
.wip-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--vermelho), var(--ciano), var(--amarelo)); }
.wip-logo { height: 54px; width: auto; }
.wip-art { width: 230px; color: var(--azul-900); }
.wip-art svg { width: 100%; height: auto; overflow: visible; }
.wip-card .chip { background: #fff6d6; color: #8a5a00; }
.wip-card h2 { font-size: 26px; font-weight: 800; }
.wip-card p { color: var(--text-2); }
.wip-roller { animation: roll 3.2s ease-in-out infinite; }
.wip-stroke { transform-origin: 14px 0; animation: stroke 3.2s ease-in-out infinite; }
.wip-drop { animation: drop 2.4s ease-in-out infinite; }
.wip-drop.d2 { animation-delay: .6s; } .wip-drop.d3 { animation-delay: 1.2s; }
@keyframes roll { 0%, 100% { transform: translateX(-34px); } 50% { transform: translateX(62px); } }
@keyframes stroke { 0%, 100% { transform: scaleX(.18); } 50% { transform: scaleX(1); } }
@keyframes drop { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-8px); opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .wip-roller, .wip-stroke, .wip-drop { animation: none; } }

/* ---------------- Cadastro de usuários ---------------- */
.grid-users { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: 18px; align-items: start; }
.grid-users .card + .card { margin-top: 0; }
.grid-users > * { min-width: 0; }
.editing .card-head h3 { color: var(--azul-600); }
.search { position: relative; }
.search .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--text-3); }
.search input { padding-left: 36px; height: 38px; min-width: 240px; }
.table-wrap { overflow-x: auto; margin: 0 -20px -20px; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 700; padding: 10px 20px; background: var(--surface-2);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 12px 20px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: #f8faff; }
.table tr.sel { background: #eef4ff; }
.tr { text-align: right; }
.u-cell { display: flex; align-items: center; gap: 11px; min-width: 200px; }
.table td:nth-child(4) { white-space: nowrap; }
.u-cell .avatar { width: 36px; height: 36px; font-size: 12.5px; }
.u-cell .avatar.alt { background: linear-gradient(135deg, #cfe6ff, #a9c6ff); color: var(--azul-700); }
.u-cell strong { display: block; font-size: 13.8px; }
.u-cell small { color: var(--text-3); font-size: 12.3px; }
.acts { display: inline-flex; gap: 6px; }
.empty { text-align: center; color: var(--text-3); padding: 28px 12px !important; }
.you { font-size: 10.5px; font-weight: 800; color: var(--azul-600); background: #eaf1ff; border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px; }

/* ---------------- Modal ---------------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(7,26,77,.45); backdrop-filter: blur(3px); animation: fade .18s; }
.modal-box { width: 100%; max-width: 440px; background: #fff; border-radius: 18px; padding: 22px; box-shadow: var(--shadow-lg); display: grid; gap: 14px; animation: pop .22s cubic-bezier(.2,.9,.3,1.2); }
.modal-box.sm { max-width: 400px; }
.modal-head { display: flex; align-items: center; gap: 12px; }
.modal-head h3 { flex: 1; font-size: 17px; font-weight: 800; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.97); } }

/* ---------------- Toasts ---------------- */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: grid; gap: 10px; }
.toast { display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 380px; padding: 12px 16px; border-radius: 12px; background: var(--azul-900); color: #fff;
  font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-lg); animation: pop .25s; border-left: 4px solid var(--ciano); }
.toast.ok { border-left-color: #34d399; }
.toast.err { border-left-color: var(--vermelho); }
.toast.out { opacity: 0; transform: translateY(8px); transition: .3s; }

/* ---------------- Telas de acesso ---------------- */
.filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filters select { width: auto; height: 38px; }
.user-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; max-height: 300px; overflow-y: auto; padding: 2px; }
.user-opt { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  text-align: left; font: inherit; color: inherit; transition: .15s; }
.user-opt:hover { border-color: #bfd0f2; background: #f8faff; }
.user-opt.sel { border-color: var(--azul-500); background: linear-gradient(135deg, #eef4ff, #fff); box-shadow: 0 0 0 3px rgba(42,100,208,.14); }
.user-opt .avatar { width: 34px; height: 34px; font-size: 12px; }
.user-opt .avatar.alt { background: linear-gradient(135deg, #cfe6ff, #a9c6ff); color: var(--azul-700); }
.user-opt .t { flex: 1; min-width: 0; line-height: 1.25; }
.user-opt strong { display: block; font-size: 13.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-opt small { display: block; font-size: 11.8px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-opt .cnt { font-size: 11px; font-weight: 700; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.user-opt.inativo { opacity: .6; }

.sticky-head { position: sticky; top: 76px; z-index: 5; background: var(--surface); margin: -20px -20px 16px; padding: 16px 20px; border-radius: var(--radius) var(--radius) 0 0; border-bottom: 1px solid var(--border); }
#avisoAdmin { margin-bottom: 16px; }
.perm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; transition: opacity .2s; }
.perm-col { display: grid; gap: 16px; align-content: start; }
.perm-grid.is-off { opacity: .45; pointer-events: none; filter: grayscale(.4); }
.perm-sec { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface-2); align-self: start; }
.perm-sec-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #fff; background: linear-gradient(135deg, var(--azul-600), var(--azul-900)); }
.perm-sec-head img { height: 30px; width: auto; }
.perm-3r .perm-sec-head img { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 6px rgba(255,255,255,.4)); }
.perm-sec-head strong { flex: 1; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.perm-sec-head .chk { color: rgba(255,255,255,.85); }
.perm-grp { padding: 10px 14px 12px; border-top: 1px solid var(--border); background: #fff; }
.perm-grp:first-of-type { border-top: 0; }
.perm-grp-head { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 13.4px; margin-bottom: 6px; }
.perm-grp-head > span:nth-child(2) { flex: 1; }
.chk { display: flex; align-items: center; gap: 9px; padding: 5px 4px; font-size: 13.3px; cursor: pointer; border-radius: 7px; user-select: none; }
.perm-grp > .chk { padding-left: 34px; }
.perm-grp > .chk:hover { background: #f4f7fd; }
.chk input { position: absolute; opacity: 0; pointer-events: none; }
.chk > span { width: 18px; height: 18px; flex: none; border-radius: 5px; border: 1.6px solid #b9c5dc; background: #fff; display: grid; place-items: center; transition: .15s; }
.chk input:checked + span { border-color: transparent; background: linear-gradient(135deg, var(--azul-500), var(--azul-700)); }
.chk input:checked + span::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.chk input:indeterminate + span { border-color: transparent; background: var(--azul-500); }
.chk input:indeterminate + span::after { content: ""; width: 8px; height: 2px; background: #fff; border-radius: 2px; }
.chk input:focus-visible + span { box-shadow: 0 0 0 3px rgba(42,100,208,.3); }
.chk.all { font-size: 11.5px; font-weight: 700; gap: 6px; padding: 2px; }
.perm-sec-head .chk.all > span { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.12); }
.perm-grid.is-admin .chk input:checked + span { background: linear-gradient(135deg, #ffd21f, #f97316); }

/* ---------------- Responsivo ---------------- */
.sb-backdrop { display: none; }
@media (max-width: 1360px) {
  .grid-users { grid-template-columns: 1fr; }
}
@media (max-width: 1180px) {
  .perm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-date { display: none; }
}
@media (max-width: 960px) {
  .sb, .sb-min .sb { width: var(--sb-w); transform: translateX(-105%); transition: transform .28s cubic-bezier(.4,0,.2,1); }
  .sb-min .sb .lbl, .sb-min .sb .chev { display: initial; }
  .sb-min .sb-sub { display: grid; }
  .sb-toggle { display: none; }
  .sb-open .sb { transform: none; }
  .sb-open .sb-backdrop { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(7,26,77,.45); backdrop-filter: blur(2px); }
  .main, .sb-min .main { margin-left: 0; }
  .tb-menu { display: grid; }
  .tb-user-txt, .tb-out span { display: none; }
  .tb-user { padding: 3px; }
  .topbar { padding: 12px 16px; }
  .content { padding: 18px 16px 32px; }
  .sticky-head { top: 66px; }
  .login { grid-template-columns: 1fr; }
  .login-brand { display: none; }
  .login-logo-mobile { display: block; }
  .login-form h2, .login-form > .muted { text-align: center; }
}
@media (max-width: 560px) {
  .row2 { grid-template-columns: 1fr; }
  .perm-grid { grid-template-columns: 1fr; }
  .search input { min-width: 0; }
  .card-head.between, .filters { width: 100%; }
  .filters .search { flex: 1; }
  .filters .btn { flex: 1; }
  .tb-title h1 { font-size: 18px; }
  .wip-card { padding: 32px 20px 36px; }
}