/* Complementos da interface aprovada para a versão conectada ao servidor. */
.google-login { display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none }
#devLogin { margin-top:14px;display:grid;gap:8px }
#devLogin label { display:grid;gap:5px;font-size:10px;color:#6c7a8f }
#devLogin input { padding:9px;border:1px solid #dfe6ef;border-radius:6px }
.profile .logout { font:500 9px 'DM Sans';color:#7a8aa0;background:none;border:0;cursor:pointer;margin-left:auto }
.sidebar.collapsed .profile .logout, .sidebar.collapsed .profile>span { display:none }
.view-loading { padding:60px;text-align:center;color:#8a97aa;font-size:11px }
.page-actions { display:flex;gap:8px;align-items:center;flex-wrap:wrap }
.toolbar { display:flex;gap:8px;align-items:end;flex-wrap:wrap;margin-bottom:12px }
.toolbar label { display:grid;gap:4px;font-size:9px;color:#7d8aa0 }
.toolbar input, .toolbar select, .form-grid input, .form-grid select, .form-grid textarea, .settings-section input, .settings-section select, .settings-section textarea {
  border:1px solid #dfe6ef;border-radius:6px;padding:8px 9px;font:10px 'DM Sans';color:#33445c;background:rgba(255,255,255,.85) }
.form-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px }
.form-grid .full { grid-column:1/-1 }
.form-grid label { display:grid;gap:5px;font-size:9px;color:#6c7a8f }
.form-grid textarea { min-height:90px;resize:vertical }
.modal { max-width:640px;width:100%;max-height:92vh;overflow:auto }
.modal h2 { margin:4px 0 6px }
.modal p.lead { color:#8391a5;font-size:10px;margin:0 0 14px }
.modal-actions { display:flex;justify-content:flex-end;gap:8px;margin-top:16px }
.form-error { color:#c0544d;font-size:10px;min-height:14px;margin-top:8px }
.pill.open { background:#eef3fb;color:#4a6fa5 }
.pill.canceled, .pill.failed { background:#f3f4f6;color:#7f8a99 }
.pill.failed { background:#fff0ef;color:#c26d68 }
.pill.processing { background:#f4f0fd;color:#7a63b8 }
.row-actions { display:flex;gap:6px;justify-content:flex-end }
.row-actions button { font:500 9px 'DM Sans';border:1px solid #e1e8f1;background:#fff;border-radius:5px;padding:5px 7px;color:#4f6584;cursor:pointer }
.row-actions button.danger { color:#b65650 }
.amount-in { color:#3f9a72 } .amount-out { color:#c45f5a }
.notice-banner { display:flex;gap:9px;align-items:center;font-size:10px;border-radius:8px;padding:10px 12px;margin-bottom:12px;background:#fff8ea;color:#8e6a2e;border:1px solid #f4e2bd }
.notice-banner.ok { background:#eef9f3;color:#3f7d62;border-color:#cdebdc }
.notice-banner.err { background:#fff1f0;color:#a2504b;border-color:#f3d2cf }
.empty { padding:30px;text-align:center;color:#8a97aa;font-size:10px }
.kv { display:grid;grid-template-columns:150px 1fr;gap:6px 12px;font-size:10px;color:#5b6b82 }
.kv b { color:#33445c }
.mono { font-family:ui-monospace,Menlo,Consolas,monospace;font-size:9px;word-break:break-all }
.chart .bars .month .pair { display:flex;align-items:flex-end;gap:3px;height:100% }
.cf-table td.neg { color:#c45f5a } .cf-table td.pos { color:#3f9a72 }
.cf-table tr.projected td { background:rgba(240,245,252,.5) }
.rule-card { display:grid;grid-template-columns:120px 1fr auto;gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid rgba(222,230,240,.7) }
.rule-card textarea { width:100%;min-height:70px }
.rule-card .days { display:flex;gap:6px;align-items:center;font-size:10px;color:#5b6b82 }
.rule-card .days input { width:54px }
.vars-help { font-size:9px;color:#8a97aa;margin-top:8px }
.vars-help code { background:#f1f5fa;padding:1px 4px;border-radius:3px }
.wa-layout { min-height:560px }
.conversation-body { overflow-y:auto;max-height:430px }
.bubble.system { align-self:center;background:transparent;box-shadow:none;color:#94a1b3;font-size:9px;font-style:italic }
.bubble img { max-width:220px;border-radius:6px;display:block }
.bubble pre { white-space:pre-wrap;font:inherit;margin:0 }
.wa-tags { display:flex;gap:4px;flex-wrap:wrap;margin-top:6px }
.wa-tags button { font:9px 'DM Sans';border:1px solid #dfe7f0;background:#fff;border-radius:10px;padding:3px 7px;color:#6a7d96;cursor:pointer }
.wa-tags button.on { background:#e8f1fc;border-color:#bcd3f1;color:#2f66ad }
.conversation-compose textarea { flex:1;border:1px solid #dfe6ef;border-radius:8px;padding:9px;font:10px 'DM Sans';resize:none;height:38px }
.wa-empty { display:grid;place-items:center;height:100%;color:#8a97aa;font-size:11px;padding:40px;text-align:center }
.is-dragging { outline:2px dashed #7aa6e0;outline-offset:-6px }
.log-table td { white-space:normal }
.small-note { font-size:9px;color:#8a97aa;margin-top:6px }
.inline-check { display:flex !important;align-items:center;gap:6px;grid-template-columns:none !important }
@media (max-width:650px) { .form-grid { grid-template-columns:1fr } .rule-card { grid-template-columns:1fr } .kv { grid-template-columns:1fr } }
@media (max-width:700px) { .sidebar.collapsed .brand>span:not(.brandmark) { display:none } }
a.textlink, a.primary { text-decoration:none;display:inline-flex;align-items:center }
a.soft-button, a.secondary, a.shortcut, a.row-link { text-decoration:none;display:inline-flex;align-items:center }
/* Celular: menu sempre recolhido; ao expandir, abre por cima do conteúdo sem sobrepor o cabeçalho. */
@media (max-width:700px) {
  .sidebar.collapsed .brand>span:not(.brandmark) { display:none }
  .sidebar:not(.collapsed) { width:236px;z-index:60;box-shadow:0 12px 40px rgba(12,25,53,.18);background:rgba(255,255,255,.97) }
  .sidebar:not(.collapsed)+main { margin-left:62px }
  .sidebar:not(.collapsed) nav button { font-size:11px;text-align:left;padding:0 12px;display:flex;align-items:center;gap:10px }
  .sidebar:not(.collapsed) .nav-label { font-size:9px }
  .welcome { flex-wrap:wrap;gap:10px }
}
.dev-quick { display:grid;gap:8px }
.env-banner { display:none }
body.env-test .env-banner { display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;background:#b5651d;color:#fff;text-align:center;font:600 10px 'DM Sans',sans-serif;padding:5px 8px;letter-spacing:.3px }
body.env-test main { padding-bottom:26px }
/* ---------- Atendimento WhatsApp em janela própria ---------- */
body.wa-app { height:100vh;display:flex;flex-direction:column;overflow:hidden }
.wa-app-head { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;border-bottom:1px solid rgba(218,228,240,.8);background:rgba(255,255,255,.75);backdrop-filter:blur(14px) }
.wa-app-head .brand { padding:0;display:flex;align-items:center;gap:10px;font-size:13px }
.wa-app-head .brandmark { display:grid !important }
.wa-app-actions { display:flex;align-items:center;gap:12px }
.wa-app-user { font:500 12px 'DM Sans';color:#5b6b82 }
.wa-app-body { flex:1;min-height:0;padding:14px 18px;display:flex;flex-direction:column;gap:10px }
body.wa-app.env-test .wa-app-body { padding-bottom:34px }
.wa-app .wa-layout { flex:1;min-height:0;grid-template-columns:minmax(280px,1fr) minmax(420px,2.2fr) minmax(250px,1fr) }
.wa-app .wa-inbox, .wa-app .wa-conversation, .wa-app .client-panel { min-height:0;overflow:hidden }
.wa-app #waList { flex:1;overflow-y:auto }
.wa-app .client-panel { overflow-y:auto }
.wa-app .conversation-body { max-height:none;min-height:0 }
.wa-app .notice-banner { margin-bottom:0 }
/* letras maiores na janela de atendimento */
.wa-app .bubble { font-size:13px }
.wa-app .bubble small { font-size:10px }
.wa-app .wa-chattext b { font-size:12.5px } .wa-app .wa-chattext small { font-size:11px }
.wa-app .conversation-compose { height:auto;padding:10px }
.wa-app .conversation-compose textarea { font-size:13px;height:46px }
.wa-app .module-head h2 { font-size:15px }
.wa-app .wa-status-filters button { font-size:11px }
.wa-app .wa-search input { font-size:12px }
.wa-app .client-section, .wa-app .client-heading h3 { font-size:12px }
.wa-app .signature-row { font-size:11px }
.wa-launch { text-align:center;padding:40px 20px }
.wa-launch p { color:#7d8aa0;font-size:12px;margin:8px 0 18px }
@media (max-width:1000px) {
  body.wa-app { height:auto;overflow:auto }
  .wa-app .wa-layout { grid-template-columns:1fr }
  .wa-app .wa-inbox { max-height:320px } .wa-app .wa-conversation { min-height:520px }
}
.wa-app .client-panel { font-size:12px }
.wa-app .client-section small { font-size:10px }
.wa-app .wa-tags button { font-size:11px;padding:4px 9px }
.wa-app .shortcut, .wa-app .bill-action { font-size:12px }
.wa-app .bill-due, .wa-app .client-panel .small-note, .wa-app .client-heading span { font-size:11px }
.wa-app .client-panel select, .wa-app .attendant-select-label select { font-size:12px;padding:5px }
.wa-app .conversation-head .soft-button, .wa-app .conversation-head .primary { font-size:11.5px }

/* ---------- Formulários compactos (modais) ---------- */
.modal { padding:18px 20px }
.modal.wide { width:min(720px,100%) }
.modal h2 { font-size:17px;margin:4px 0 2px }
.modal p.lead { margin:0 0 10px;font-size:10.5px }
.modal .form-grid { grid-template-columns:repeat(12,minmax(0,1fr));gap:8px 10px }
.modal .form-grid > * { grid-column:span 6 }
.modal .form-grid > .full { grid-column:1/-1 }
.modal .form-grid > [data-span="2"] { grid-column:span 2 } .modal .form-grid > [data-span="3"] { grid-column:span 3 }
.modal .form-grid > [data-span="4"] { grid-column:span 4 } .modal .form-grid > [data-span="5"] { grid-column:span 5 }
.modal .form-grid > [data-span="7"] { grid-column:span 7 } .modal .form-grid > [data-span="8"] { grid-column:span 8 }
.modal label { margin:0;font-size:9.5px;gap:3px }
.modal input, .modal label select, .modal select, .modal textarea { height:30px;margin-top:0;padding:0 8px;font-size:11px;border-radius:5px }
.modal textarea { height:auto;min-height:48px;padding:6px 8px;resize:vertical }
.modal input[type=checkbox] { height:auto;width:auto }
.modal .small-note { margin-top:1px;font-size:9px;font-weight:400 }
.modal .form-section { grid-column:1/-1;font:700 9px 'DM Sans';letter-spacing:.6px;color:#8a97aa;text-transform:uppercase;margin-top:4px;padding-top:6px;border-top:1px solid rgba(222,230,240,.8) }
.modal .modal-actions { margin-top:12px }
.modal .modal-actions button, .modal .modal-actions a { padding:7px 12px;font-size:10.5px }
.modal .form-error { min-height:0;margin-top:6px }
@media (max-width:650px) { .modal .form-grid > * { grid-column:1/-1 !important } }

/* ---------- Painel do cliente recolhível (WhatsApp) ---------- */
.client-toggle { display:flex;align-items:center;gap:6px;width:100%;border:0;background:none;padding:10px 0 4px;color:#6f7f96;font:600 10px 'DM Sans';cursor:pointer;justify-content:flex-end }
.client-toggle:hover { color:#376fb8 }
.wa-layout.client-collapsed { grid-template-columns:minmax(215px,.82fr) minmax(330px,2.2fr) 40px }
.wa-app .wa-layout.client-collapsed { grid-template-columns:minmax(280px,1fr) minmax(420px,3.2fr) 40px }
.wa-layout.client-collapsed .client-panel { padding:0;display:flex;justify-content:center }
.wa-layout.client-collapsed .client-panel > :not(.client-toggle) { display:none }
.wa-layout.client-collapsed .client-toggle { writing-mode:vertical-rl;justify-content:center;padding:14px 0;height:100%;align-items:center }
@media (max-width:1000px) { .wa-app .wa-layout.client-collapsed { grid-template-columns:1fr } .wa-layout.client-collapsed .client-toggle { writing-mode:horizontal-tb;height:auto } }

/* ---------- Menu lateral com submenus ---------- */
.sidebar nav .nav-group { display:grid;gap:2px }
.sidebar nav .nav-children { display:none;gap:2px;margin-left:14px;padding-left:8px;border-left:1px solid rgba(160,180,210,.35) }
.sidebar nav .nav-group.open .nav-children { display:grid }
.sidebar nav .nav-children button { height:32px;font-size:11.5px }
.sidebar nav .nav-children button i { font-size:13px;width:22px }
.sidebar nav .nav-parent .chev { float:right;margin-left:6px;font-size:13px;color:#9aa8bb;transition:transform .15s;display:inline-block }
.sidebar nav .nav-group.open .nav-parent .chev { transform:rotate(90deg) }
.sidebar nav .nav-group.open .nav-parent em { display:none }
.sidebar nav .nav-group.has-active > .nav-parent { color:#2865bd }
.sidebar nav .nav-group.has-active > .nav-parent i { color:#3475d2 }
.sidebar.collapsed nav .nav-children { margin-left:0;padding-left:0;border-left:0;border-top:1px dashed rgba(160,180,210,.4);border-bottom:1px dashed rgba(160,180,210,.4);padding:2px 0 }
.sidebar.collapsed nav .nav-children button { height:34px }
.sidebar.collapsed nav .nav-parent .chev { display:none }
@media (max-width:700px) {
  .sidebar:not(.collapsed) nav .nav-children button { font-size:11px }
  .sidebar:not(.collapsed) nav .nav-parent .chev { font-size:13px }
}
.sidebar.collapsed nav .nav-children button { font-size:0 }
.sidebar.collapsed nav .nav-children button i { font-size:14px;width:auto }
.sidebar.collapsed nav .nav-children em { display:none }
.qr-box { display:grid;place-items:center;padding:12px;background:#fff;border-radius:10px;border:1px solid #e3e9f1 }
.qr-box img { width:260px;height:260px;image-rendering:pixelated }