:root{
  --accent:#0E7C66;
  --accent-soft:#0E7C6620;
  --bg:#F7F7F5;
  --card:#FFFFFF;
  --border:#E7E6E2;
  --text:#232420;
  --text-muted:#6B6D66;
  --text-faint:#94958F;
  --soft:#F0F0EE;
  --danger:#C0392B;
  --warn:#B7791F;
  --warn-soft:#B7791F1A;
}
:root[data-theme="escuro"]{
  --accent:#1DBF98;
  --accent-soft:#1DBF9826;
  --bg:#17181B;
  --card:#1F2023;
  --border:#2C2D31;
  --text:#EDEDEA;
  --text-muted:#A8A9A4;
  --text-faint:#75766F;
  --soft:#292A2E;
  --warn:#E0A93C;
  --warn-soft:#E0A93C24;
}
* { box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; overflow-x:hidden; width:100%; }
input, select, textarea{ min-width:0; }
h1,h2,h3,.heading{ font-family:'Manrope',sans-serif; }
button{ font-family:inherit; cursor:pointer; }
a{ color:var(--accent); }

/* ---------- Login / cadastro ---------- */
.center-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card{ width:100%; max-width:400px; background:var(--card); border:1px solid var(--border); border-radius:20px; padding:32px 28px; box-shadow:0 12px 28px -14px rgba(20,20,18,.18); }
.auth-logo{ display:flex; align-items:center; gap:9px; margin-bottom:22px; }
.auth-logo svg{ width:28px; height:28px; border-radius:8px; }
.auth-logo span{ font-family:'Manrope',sans-serif; font-weight:800; font-size:17px; }
.auth-tabs{ display:flex; gap:6px; background:var(--bg); border-radius:999px; padding:4px; margin-bottom:22px; }
.auth-tabs button{ flex:1; border:none; background:transparent; padding:8px 0; border-radius:999px; font-weight:700; font-size:13.5px; color:var(--text-muted); }
.auth-tabs button.active{ background:var(--text); color:var(--card); }
.auth-error{ background:#F4E3DE; color:#95462E; border-radius:10px; padding:9px 12px; font-size:13px; margin-bottom:13px; }
.auth-convite{ background:var(--accent-soft); color:var(--accent); border-radius:10px; padding:9px 12px; font-size:13px; margin-bottom:13px; font-weight:600; }

.trial-banner{ display:flex; align-items:center; gap:10px; background:var(--warn-soft); color:var(--warn); border-bottom:1px solid var(--border); padding:10px 20px; font-size:13px; font-weight:600; }
.trial-banner.urgente{ background:#C0392B1A; color:var(--danger); }
.trial-banner svg{ flex-shrink:0; }
.trial-banner span{ flex:1; }
.trial-banner a{ color:inherit; text-decoration:underline; font-weight:700; white-space:nowrap; }
.auth-switch{ text-align:center; font-size:13px; color:var(--text-muted); margin-top:16px; }
.auth-switch a{ font-weight:700; text-decoration:none; }
.auth-card .btn-primary{ width:100%; }

/* ---------- Shell ---------- */
.shell{ display:flex; min-height:100vh; align-items:flex-start; }

.sidebar{ width:230px; flex-shrink:0; background:var(--card); border-right:1px solid var(--border); padding:24px 16px; display:flex; flex-direction:column; gap:2px; position:sticky; top:0; min-height:100vh; }
.brand{ display:flex; align-items:center; gap:10px; padding:0 6px; margin-bottom:8px; }
.logo{ width:34px; height:34px; border-radius:9px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; flex-shrink:0; overflow:hidden; }
.brand .title{ font-weight:800; font-size:18px; letter-spacing:-0.02em; }
.brand .tag{ display:block; font-size:11px; color:var(--text-faint); font-weight:600; margin-top:1px; }
.nav{ display:flex; flex-direction:column; gap:2px; margin-top:18px; }
.nav-item{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; font-weight:600; font-size:14px; color:var(--text-muted); border:none; background:none; text-align:left; width:100%; }
.nav-item svg{ flex-shrink:0; }
.nav-item.active{ background:var(--accent-soft); color:var(--accent); font-weight:700; }
.sidebar-foot{ margin-top:auto; display:flex; align-items:center; gap:10px; padding:11px; border-radius:12px; background:var(--bg); }
.sidebar-foot .av{ width:30px; height:30px; border-radius:999px; background:#E7E6E2; font-weight:700; font-size:11.5px; color:#54554E; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sidebar-foot .name{ font-size:12.5px; font-weight:700; }
.sidebar-foot .status{ font-size:11px; color:var(--text-faint); }
.sidebar-foot button{ background:none; border:none; color:var(--text-faint); padding:4px; flex-shrink:0; display:flex; }
.sidebar-foot button:hover{ color:var(--danger); }

/* ---------- Main ---------- */
.main{ flex:1; min-width:0; padding:28px 32px 60px; max-width:1280px; }
.view[hidden]{ display:none; }
.view-head{ margin-bottom:18px; }
.view-head .h{ font-size:22px; font-weight:800; letter-spacing:-0.01em; }
.view-head .p{ font-size:13.5px; color:var(--text-muted); margin-top:3px; }
.view-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }

.card{ background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; }

/* ---------- Chat ---------- */
.layout{ display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; }
.chat-col-solo{ width:100%; max-width:640px; }
.chat-card{ display:flex; flex-direction:column; height:640px; }
.chat-head{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.chat-head .av{ width:32px; height:32px; border-radius:999px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; overflow:hidden; }
.chat-head .name{ font-weight:800; font-size:14.5px; }
.chat-head .status{ font-size:11.5px; color:var(--text-faint); }
.search-toggle{ margin-left:auto; width:30px; height:30px; border-radius:999px; border:none; background:none; color:var(--text-faint); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.search-toggle:hover{ background:var(--bg); color:var(--text); }
.search-bar{ display:flex; align-items:center; gap:8px; padding:9px 14px; border-bottom:1px solid var(--border); background:var(--bg); color:var(--text-faint); flex-shrink:0; }
.search-bar[hidden]{ display:none; }
.search-bar input{ flex:1; border:none; background:none; outline:none; font-size:13px; color:var(--text); font-family:inherit; }
.search-count{ font-size:11.5px; color:var(--text-faint); white-space:nowrap; min-width:32px; text-align:right; }
.search-nav{ width:24px; height:24px; border-radius:999px; border:none; background:none; color:var(--text-faint); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.search-nav:hover{ background:var(--border); color:var(--text); }
mark.hl{ background:#FFE58A; color:#232420; border-radius:2px; padding:0 1px; }
mark.hl.active{ background:var(--accent); color:#fff; }
.chat-body{ flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:10px; background:var(--bg); }
.bubble{ max-width:84%; padding:10px 13px; border-radius:16px; font-size:13.5px; line-height:1.45; }
.bubble.out{ align-self:flex-end; background:var(--accent); color:#fff; border-radius:16px 16px 4px 16px; }
.bubble.in{ align-self:flex-start; background:var(--card); border:1px solid var(--border); border-radius:16px 16px 16px 4px; }
.bubble .time{ font-size:10px; opacity:0.7; margin-top:5px; text-align:right; }
.bubble .field-row{ margin:1px 0; }
.bubble .field-row b{ color:var(--text-muted); font-weight:600; }
.bubble .bubble-actions{ display:flex; gap:8px; margin-top:8px; }
.bubble .fix{ background:none; border:none; padding:0; font-size:12px; color:var(--accent); font-weight:700; text-decoration:underline; }
.bubble .oco-fix-select{ border:1px solid var(--border); border-radius:8px; padding:3px 8px; font-size:13px; font-family:inherit; background:var(--bg); color:var(--text); margin-left:4px; }
.thinking{ align-self:flex-start; font-size:12.5px; color:var(--text-faint); padding:2px 4px; }
.chat-input{ display:flex; align-items:center; gap:9px; padding:11px 12px; border-top:1px solid var(--border); flex-shrink:0; background:var(--card); }
.chat-input input{ flex:1; border:none; background:var(--soft); border-radius:999px; padding:10px 15px; font-size:13.5px; outline:none; color:var(--text); }
.mic-btn, .send-btn{ width:36px; height:36px; border-radius:999px; border:none; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mic-btn.listening{ background:var(--danger); animation:mic-pulse 1.2s ease-in-out infinite; }
.mic-btn:disabled{ background:#C9C9C5; cursor:not-allowed; }
@keyframes mic-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(192,57,43,.35); } 50%{ box-shadow:0 0 0 8px rgba(192,57,43,0); } }

/* ---------- Stat tiles ---------- */
.stats{ display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.stat{ flex:1; min-width:110px; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 16px; }
.stat .dot{ width:7px; height:7px; border-radius:999px; display:inline-block; margin-right:6px; vertical-align:middle; }
.stat .lab{ font-size:10.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block; max-width:calc(100% - 15px); vertical-align:middle; }
.stat .num{ font-size:26px; font-weight:800; margin-top:6px; }

/* ---------- Ocorrências: filtro + cartões agrupados por data ---------- */
.oco-filter-row{ margin-bottom:14px; }
.oco-filter-row select{ border:1px solid var(--border); border-radius:9px; padding:8px 30px 8px 12px; font-size:13px; font-family:inherit; background:var(--card); color:var(--text); }

.date-group{ margin-bottom:22px; }
.date-group:last-child{ margin-bottom:0; }
.date-group-head{ font-size:11px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-faint); margin-bottom:10px; }

.oco-card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:15px 16px; margin-bottom:10px; }
.oco-card:last-child{ margin-bottom:0; }
.oco-card-top{ display:flex; align-items:flex-start; gap:11px; }
.oco-card-top .avatar{ width:32px; height:32px; font-size:11.5px; flex-shrink:0; margin-top:1px; }
.oco-card-info{ flex:1; min-width:0; }
.oco-card-name{ font-weight:700; font-size:13.5px; }
.oco-card-cargo{ font-weight:500; color:var(--text-faint); font-size:12px; }
.oco-card-motivo{ color:var(--text-muted); font-size:12.5px; margin-top:3px; line-height:1.45; }
.oco-card-top > .badge{ flex-shrink:0; margin-top:1px; }
.oco-card-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.situ-badge{ display:inline-flex; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.situ-pendente{ background:#FBEEE1; color:#8a4b1f; }
.situ-resolvido{ background:#DFF2E8; color:#1c6b4d; }
.situ-arquivado{ background:var(--soft); color:var(--text-faint); }
.oco-card-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.oco-card-actions .btn{ padding:7px 13px; font-size:12.5px; }

/* ---------- Table ---------- */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ width:100%; min-width:640px; border-collapse:collapse; font-size:13px; }
thead th{ text-align:left; font-size:11px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:var(--text-faint); padding:11px 16px; border-bottom:1px solid var(--border); }
tbody td{ padding:11px 16px; border-bottom:1px solid var(--soft); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
.who{ display:flex; align-items:center; gap:9px; font-weight:600; }
.avatar{ width:26px; height:26px; border-radius:999px; background:#E7E6E2; color:#54554E; font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.badge{ display:inline-flex; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.motivo{ color:var(--text-muted); max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.origem{ display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--text-faint); }
.edit-btn{ background:none; border:none; color:var(--text-faint); padding:4px; }
.edit-btn:hover{ color:var(--text); }
.btn-lab{ display:none; }
.empty{ padding:40px 20px; text-align:center; color:var(--text-faint); font-size:13.5px; }

/* ---------- Buttons ---------- */
.btn{ padding:10px 16px; border-radius:10px; border:none; font-weight:700; font-size:13.5px; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:disabled{ opacity:.6; }
.btn-ghost{ background:var(--soft); color:var(--text); }
.btn-danger{ background:none; border:1.5px solid #E3B3AC; color:var(--danger); }
.btn-block{ width:100%; }

/* ---------- Modal ---------- */
.overlay{ position:fixed; inset:0; background:rgba(20,20,18,0.4); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px; }
.overlay[hidden]{ display:none; }
.modal{ background:var(--card); border-radius:16px; width:360px; max-width:100%; padding:22px; max-height:90vh; overflow-y:auto; }
.modal h3{ margin:0 0 16px; font-size:16px; }
.modal label{ display:block; font-size:12px; font-weight:700; color:var(--text-muted); margin:12px 0 5px; }
.modal input, .modal select, .modal textarea{ width:100%; border:1px solid var(--border); border-radius:9px; padding:9px 11px; font-size:13.5px; font-family:inherit; background:var(--bg); color:var(--text); }
.modal textarea{ resize:vertical; min-height:56px; }
.modal-actions{ display:flex; gap:10px; margin-top:20px; }
.modal-actions .btn{ flex:1; }

/* ---------- Funcionários ---------- */
.emp-row{ display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid var(--soft); flex-wrap:wrap; }
.emp-row:last-child{ border-bottom:none; }
.emp-row .avatar{ width:34px; height:34px; font-size:12.5px; }
.emp-info{ flex:1; min-width:140px; }
.emp-info .nm{ font-weight:700; font-size:13.5px; }
.emp-info .cg{ font-size:12px; color:var(--text-faint); }
.emp-counts{ display:flex; gap:16px; font-size:12px; color:var(--text-muted); }
.emp-counts b{ color:var(--text); font-weight:800; }

/* ---------- Relatórios ---------- */
.rep-pdf-row{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; }
.rep-pdf-row .field{ min-width:150px; }
.rep-pdf-row input[type="date"]{ width:100%; border:1px solid var(--border); border-radius:9px; padding:9px 11px; font-size:13.5px; font-family:inherit; background:var(--bg); color:var(--text); }
.rep-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:16px; align-items:start; }
@media (max-width: 900px){ .rep-grid{ grid-template-columns:1fr; } }
.rep-card{ padding:18px 20px; }
.rep-card h3{ font-size:14px; margin:0 0 14px; }
.bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:12.5px; }
.bar-row .lab{ width:150px; flex-shrink:0; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track{ flex:1; height:8px; border-radius:4px; background:var(--soft); overflow:hidden; }
.bar-fill{ height:100%; border-radius:4px; }
.bar-row .cnt{ width:22px; text-align:right; font-weight:700; flex-shrink:0; }
.rank-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--soft); font-size:13px; }
.rank-row:last-child{ border-bottom:none; }
.rank-row .rn{ width:18px; color:var(--text-faint); font-size:12px; }
.rank-row .rname{ flex:1; font-weight:600; }
.rank-row .rmini{ font-size:11.5px; color:var(--text-faint); width:70px; text-align:right; }
.trend{ display:flex; align-items:flex-end; gap:4px; height:70px; margin-top:6px; }
.trend .col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.trend .bar{ width:100%; max-width:16px; border-radius:2px 2px 0 0; background:var(--accent); min-height:2px; }
.trend .day{ font-size:9px; color:var(--text-faint); margin-top:4px; }

/* ---------- Configurações ---------- */
.settings-grid{ display:flex; flex-direction:column; gap:16px; max-width:640px; }
.settings-card{ padding:20px 22px; }
.settings-card h3{ font-size:14.5px; margin:0 0 4px; }
.settings-card .desc{ font-size:12.5px; color:var(--text-faint); margin-bottom:14px; }
.field label{ display:block; font-size:12px; font-weight:700; color:var(--text-muted); margin:0 0 5px; }
.field input, .field select{ width:100%; border:1px solid var(--border); border-radius:9px; padding:9px 11px; font-size:13.5px; font-family:inherit; background:var(--bg); color:var(--text); }
.field{ margin-bottom:12px; }

.password-field{ position:relative; }
.password-field input{ padding-right:38px; }
.password-field .toggle-senha{ position:absolute; top:50%; right:4px; transform:translateY(-50%); width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:none; background:none; padding:0; color:var(--text-faint); cursor:pointer; }
.password-field .toggle-senha:hover{ color:var(--text-muted); }
.type-check{ display:flex; align-items:center; gap:9px; padding:7px 0; font-size:13px; }
.type-check .sw{ width:9px; height:9px; border-radius:999px; flex-shrink:0; }
.type-check.custom{ justify-content:space-between; }
.type-check.custom label{ display:flex; align-items:center; gap:9px; flex:1; cursor:pointer; margin:0; font-size:13px; font-weight:400; color:var(--text); text-transform:none; }
.type-del{ display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:999px; border:none; background:none; color:var(--text-faint); padding:0; flex-shrink:0; }
.type-del:hover{ color:var(--danger); background:var(--soft); }
.status-row{ display:flex; align-items:center; gap:10px; }
.status-dot{ width:8px; height:8px; border-radius:999px; background:#C9642B; flex-shrink:0; }
.status-pill{ display:inline-flex; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; background:#FBEEE1; color:#8a4b1f; }
.saved-note{ font-size:12px; color:var(--accent); margin-left:10px; opacity:0; transition:opacity 0.2s; }
.saved-note.show{ opacity:1; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.chip{ display:inline-flex; align-items:center; gap:7px; padding:6px 8px 6px 12px; border-radius:999px; background:var(--bg); border:1px solid var(--border); font-size:12.5px; font-weight:600; }
.chip button{ display:flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:999px; border:none; background:none; color:var(--text-faint); padding:0; }
.chip button:hover{ color:var(--danger); }
.chip-empty{ font-size:12.5px; color:var(--text-faint); }
.chip-add{ display:flex; gap:8px; }
.chip-add input{ flex:1; border:1px solid var(--border); border-radius:9px; padding:9px 11px; font-size:13.5px; font-family:inherit; background:var(--bg); color:var(--text); }

.horario-dias{ display:flex; flex-direction:column; margin-bottom:10px; border:1px solid var(--border); border-radius:9px; overflow:hidden; }
.horario-dia-row{ display:flex; align-items:center; gap:14px; padding:8px 11px; flex-wrap:wrap; }
.horario-dia-row + .horario-dia-row{ border-top:1px solid var(--border); }
.horario-dia-check{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--text); min-width:56px; cursor:pointer; }
.horario-dia-check input[type=checkbox]{ width:16px; height:16px; accent-color:var(--accent); cursor:pointer; margin:0; }
.horario-dia-horas{ display:flex; align-items:center; gap:8px; flex:1; min-width:180px; }
.horario-dia-horas input[type=time]{ flex:1; min-width:0; border:1px solid var(--border); border-radius:8px; padding:7px 9px; font-size:12.5px; font-family:inherit; background:var(--bg); color:var(--text); }
.horario-dia-horas span{ font-size:12px; color:var(--text-faint); flex-shrink:0; }

.atividade-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px; border:none; background:none; cursor:pointer; text-align:left; }
.atividade-toggle-label{ font-size:14.5px; font-weight:700; color:var(--text); }
.atividade-chevron{ color:var(--text-faint); transition:transform 0.15s; flex-shrink:0; }
.atividade-toggle.open .atividade-chevron{ transform:rotate(90deg); }
.atividade-row{ display:flex; align-items:center; gap:11px; padding:10px 18px; border-top:1px solid var(--border); cursor:pointer; }
.atividade-row:hover{ background:var(--bg); }
.atividade-row .avatar{ width:32px; height:32px; font-size:11.5px; flex-shrink:0; }
.atividade-info{ flex:1; min-width:0; }
.atividade-nome{ font-size:12.5px; font-weight:600; }
.atividade-motivo{ font-size:12px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.atividade-data{ font-size:11.5px; color:var(--text-faint); flex-shrink:0; width:70px; text-align:right; }

.cargo-suggestions{ margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.cargo-suggestions .sugg-label{ font-size:11.5px; color:var(--text-faint); margin-bottom:9px; }
.sugg-chip{ display:inline-flex; align-items:center; gap:5px; padding:6px 11px 6px 9px; border-radius:999px; border:1.5px dashed var(--border); background:none; color:var(--text-muted); font-size:12.5px; font-weight:600; margin:0 6px 6px 0; }
.sugg-chip:hover{ border-color:var(--accent); border-style:solid; color:var(--accent); }

.icon-picker{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.icon-preview{ width:52px; height:52px; border-radius:14px; background:var(--accent); color:#fff; font-weight:800; font-size:19px; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.icon-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
.icon-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.icon-actions .btn{ cursor:pointer; }
.icon-error{ margin-top:10px; font-size:12px; color:#B23A2E; }
.theme-options{ display:flex; gap:12px; flex-wrap:wrap; }
.theme-opt{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 18px; border-radius:12px; border:1.5px solid var(--border); background:none; font-size:12.5px; font-weight:700; color:var(--text-muted); }
.theme-opt.active{ border-color:var(--accent); color:var(--text); background:var(--bg); }
.theme-swatch{ width:44px; height:30px; border-radius:7px; border:1px solid var(--border); }
.theme-swatch-claro{ background:#F7F7F5; }
.theme-swatch-escuro{ background:#1B1C1F; }
select{ font-family:inherit; }

/* Topo compacto — só aparece quando o menu lateral vira barra inferior */
.mobile-topbar{ display:none; align-items:center; gap:10px; padding:12px 18px; background:var(--card); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:30; }
.mobile-topbar .logo{ width:28px; height:28px; border-radius:8px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex-shrink:0; overflow:hidden; }
.mobile-topbar .title{ font-weight:800; font-size:15px; letter-spacing:-0.01em; }
.mobile-logout-btn{ margin-left:auto; background:none; border:none; color:var(--text-faint); padding:6px; display:flex; align-items:center; justify-content:center; border-radius:8px; }
.mobile-logout-btn:hover, .mobile-logout-btn:active{ color:var(--danger); background:var(--bg); }

@media (max-width: 820px){
  .chat-col-solo{ width:100%; }
  .shell{ flex-direction:column; align-items:stretch; }
  .main{ min-width:0; }
}

/* Celular: menu lateral vira barra de navegação fixa embaixo, ao estilo de app */
@media (max-width: 640px){
  .mobile-topbar{ display:flex; }
  .shell{ min-height:0; }
  .sidebar{
    position:fixed; left:0; right:0; bottom:0; top:auto; width:100%; min-height:0;
    flex-direction:row; align-items:stretch; justify-content:space-around;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    border-right:none; border-top:1px solid var(--border); gap:0; z-index:40;
  }
  .sidebar .brand, .sidebar .sidebar-foot{ display:none; }
  .nav{ flex-direction:row; width:100%; margin-top:0; gap:2px; }
  .nav-item{ flex-direction:column; gap:2px; padding:6px 2px; font-size:10px; border-radius:10px; flex:1; text-align:center; align-items:center; }
  .nav-item span{ font-size:10px; }

  .main{ padding:18px 14px calc(84px + env(safe-area-inset-bottom)); }
  .view-head .h{ font-size:19px; }
  .view-head-row{ flex-wrap:wrap; }
  .layout{ gap:16px; }

  .chat-card{ height:min(72vh, 560px); }
  .stats{ gap:8px; }
  .stat{ min-width:100px; padding:12px 13px; }
  .stat .num{ font-size:22px; }

  .modal{ width:92vw; padding:18px; }

  .theme-options{ flex-wrap:wrap; }
  .icon-picker{ flex-wrap:wrap; gap:12px; }
  .chip-add{ flex-wrap:wrap; }

  .bar-row .lab{ width:96px; font-size:11.5px; }
  .rank-row .rname{ font-size:12.5px; }

  .emp-row{ flex-wrap:wrap; row-gap:8px; }
  .emp-counts{ gap:10px; flex-wrap:wrap; width:100%; padding-left:46px; }

  .atividade-row{ flex-wrap:wrap; row-gap:4px; }
  .atividade-motivo{ display:none; }
  .atividade-data{ width:auto; margin-left:auto; }

  /* Ocorrências: lista de cartões em vez de tabela larga, sem rolagem lateral */
  .table-scroll{ overflow-x:visible; padding:12px; }
  table{ display:block; min-width:0; width:100%; border-collapse:separate; }
  thead{ display:none; }
  tbody{ display:block; }
  tbody tr{
    display:grid;
    grid-template-columns:auto auto 1fr;
    grid-template-areas:
      "who    who    who"
      "motivo motivo motivo"
      "tipo   data   origem"
      "acoes  acoes  acoes";
    align-items:center;
    row-gap:9px; column-gap:8px;
    border:1px solid var(--border); border-radius:13px; padding:13px 14px;
    margin-bottom:10px; background:var(--card);
  }
  tbody tr:last-child{ margin-bottom:0; }
  tbody td{ display:block; padding:0; border-bottom:none; min-width:0; }
  tbody td:nth-child(1){ grid-area:who; }
  tbody td:nth-child(2){ grid-area:tipo; }
  tbody td:nth-child(3){ grid-area:data; font-size:11.5px; color:var(--text-faint); }
  tbody td:nth-child(4){ grid-area:motivo; color:var(--text-muted); font-size:12.5px; line-height:1.45; white-space:normal; max-width:none; overflow:visible; text-overflow:clip; }
  tbody td:nth-child(5){ grid-area:origem; }
  tbody td:nth-child(6){ grid-area:acoes; white-space:nowrap !important; display:flex; gap:6px; }
  .btn-lab{ display:inline; }
  tbody .delete-btn{ display:inline-flex; align-items:center; gap:5px; border:1.5px solid #E3B3AC; color:var(--danger); border-radius:999px; padding:5px 11px 5px 9px; font-size:12px; font-weight:700; }
  tbody .edit-btn:not(.delete-btn){ display:inline-flex; align-items:center; gap:5px; border:1.5px solid var(--border); border-radius:999px; padding:5px 10px; }
}

/* Telas bem estreitas (celulares pequenos) */
@media (max-width: 380px){
  .main{ padding-left:10px; padding-right:10px; }
  .stat{ min-width:calc(50% - 4px); }
  .nav-item{ font-size:9px; }
  .nav-item svg{ width:18px; height:18px; }
}

[hidden]{ display:none !important; }