:root{
  --fundo:#F2F4F7;--azul:#1B5DB1;--azul-hover:#154A8E;--verde:#2D9C6A;--ambar:#B98900;
  --vermelho:#D93025;--tinta:#0A0B0D;--texto:#374151;--suave:#6B7280;--borda:#D9DEE7;--branco:#FFFFFF;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fundo);font-family:Inter,system-ui,sans-serif;color:var(--texto);font-size:14px}
.app{display:flex;min-height:100vh}

/* Marca usada na tela de login (login.php) — mantida à parte da marca da sidebar */
.marca{display:flex;align-items:center;gap:9px;padding:20px 20px 22px}
.marca .nome{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:19px;color:var(--tinta)}
.marca .eti{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:11px;color:#fff;background:var(--azul);padding:3px 7px;border-radius:4px}

/* ===== SIDEBAR — medidas e classes copiadas de crm/sidebar.css, mesma aparência do CRM ===== */
:root{
  --side-bg:          #FFFFFF;
  --side-border:      #ECECEE;
  --side-header-bg:   #FFFFFF;
  --side-active-bg:   #F4F4F5;
  --side-hover-bg:    #F8F8FA;
  --side-accent:      #1B5DB1;
  --side-text:        #3F3F46;
  --side-text-active: #172B4D;
  --side-icon:        #9A9AA2;
  --side-section:     #9A9AA2;
  --sidebar-w:        200px;
  --sidebar-w-col:    64px;
}

.sidebar-hp{width:var(--sidebar-w);background:var(--side-bg);border-right:1px solid var(--side-border);height:100vh;display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:10016;transition:width .25s ease;overflow:hidden}
.sidebar-hp-header{padding:16px 12px 12px;border-bottom:1px solid var(--side-border);flex-shrink:0;background:var(--side-header-bg);display:flex;align-items:center;justify-content:space-between;gap:6px}
.sidebar-brand{flex:1;overflow:hidden;min-width:0}
.marca-sidebar{display:inline-flex;align-items:center;gap:6px;max-width:100%}
.marca-sidebar .marca-haig{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1rem;color:#0A0B0D;letter-spacing:-.3px}
.marca-sidebar .marca-adv{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:.62rem;color:#FFFFFF;background:#1B5DB1;padding:2px 6px;border-radius:4px;letter-spacing:.3px;flex-shrink:0}

/* Sidebar recolhida: só "h" + ponto azul no lugar da marca completa */
.sidebar-brand-mini{display:none;align-items:center;justify-content:center;gap:4px}
.sidebar-brand-mini .marca-haig{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1.05rem;color:#0A0B0D}
.sidebar-brand-mini .marca-dot{width:6px;height:6px;border-radius:50%;background:#1B5DB1;flex-shrink:0}

/* Botão de recolher/expandir */
.sidebar-toggle-btn{background:none;border:none;color:var(--side-icon);cursor:pointer;padding:5px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,transform .25s ease;flex-shrink:0;line-height:0}
.sidebar-toggle-btn:hover{background:var(--side-hover-bg);color:var(--side-text-active)}
.sidebar-hp--recolhido .sidebar-toggle-btn{transform:rotate(180deg)}

/* Menu */
.sidebar-hp-menu{list-style:none;padding:4px 0 0;margin:0;flex:1;overflow-y:auto;overflow-x:hidden}
.sidebar-grupo{font-size:.67rem;color:var(--side-section);text-transform:uppercase;letter-spacing:.08em;padding:20px 16px 5px;font-weight:600;user-select:none;white-space:nowrap;overflow:hidden}
.sidebar-grupo:first-child{padding-top:10px}

.sidebar-hp-menu li a{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 10px 13px;color:var(--side-text);text-decoration:none;font-size:.81rem;font-weight:400;transition:background .15s,color .15s;border-left:3px solid transparent;gap:0;position:relative}
.sidebar-hp-menu li a .lbl{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.sidebar-hp-menu li a .nav-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-hp-menu li a .nav-icon{width:15px;height:15px;flex-shrink:0;stroke:var(--side-icon);transition:stroke .15s}
.sidebar-hp-menu li a:hover{color:var(--side-text-active);background:var(--side-hover-bg)}
.sidebar-hp-menu li.active a{background:var(--side-active-bg);color:var(--side-text-active);font-weight:600;border-left-color:var(--side-accent)}
.sidebar-hp-menu li.active a .nav-icon{stroke:var(--side-accent)}

/* Sidebar recolhida (mesmo mecanismo do CRM) */
.sidebar-hp--recolhido{width:var(--sidebar-w-col)}
.sidebar-hp--recolhido .sidebar-hp-header{justify-content:center;padding:14px 0}
.sidebar-hp--recolhido .sidebar-brand{display:none}
.sidebar-hp--recolhido .sidebar-brand-mini{display:flex}
.sidebar-hp--recolhido .sidebar-grupo{display:none}
.sidebar-hp--recolhido .sidebar-hp-menu li a{padding:10px 0;justify-content:center}
.sidebar-hp--recolhido .sidebar-hp-menu li a .lbl{flex:none;gap:0;justify-content:center}
.sidebar-hp--recolhido .sidebar-hp-menu li a .nav-txt{display:none}
.sidebar-hp--recolhido .sidebar-hp-menu li a .nav-icon{width:18px;height:18px}

/* Conteúdo: recuo pela largura da barra fixa (mesmo mecanismo do CRM: margin-left + transição) */
.main-content{margin-left:var(--sidebar-w);transition:margin-left .25s ease}
body.sidebar-collapsed .main-content{margin-left:var(--sidebar-w-col)}

/* area */
.area{flex:1;min-width:0}
.topo{background:var(--branco);border-bottom:1px solid var(--borda);height:60px;display:flex;align-items:center;padding:0 26px;gap:14px}
.topo h1{font-size:16px;font-weight:600;color:var(--tinta);margin:0}
.topo .dir{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13px;color:var(--suave)}
.topo .separador{color:var(--borda)}
.conteudo{padding:24px 26px 60px}

.explica{background:var(--branco);border:1px solid var(--borda);border-left:3px solid var(--azul);border-radius:7px;padding:13px 16px;font-size:13px;line-height:1.65;margin-bottom:20px}
.explica b{color:var(--tinta)}

.btn{height:34px;border-radius:7px;padding:0 13px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--borda);background:var(--branco);color:var(--texto)}
.btn:hover{border-color:var(--azul);color:var(--azul)}
.btn-p{background:var(--azul);border-color:var(--azul);color:#fff}
.btn-p:hover{background:var(--azul-hover);color:#fff}
.btn-pq{height:29px;font-size:12px;padding:0 10px}

.form-logout{margin:0}

/* login */
body.pagina-login{display:flex;align-items:center;justify-content:center;min-height:100vh}
.cartao-login{background:var(--branco);border:1px solid var(--borda);border-radius:9px;padding:32px;width:340px}
.marca-login{padding:0 0 22px;justify-content:center}
.cartao-login h1{font-size:18px;font-weight:600;color:var(--tinta);margin:0 0 18px;text-align:center}
.cartao-login label{display:block;font-size:12px;color:var(--suave);margin:14px 0 6px}
.cartao-login input{width:100%;height:38px;border:1px solid var(--borda);border-radius:7px;padding:0 12px;font-family:inherit;font-size:14px;color:var(--tinta)}
.btn-login{width:100%;margin-top:20px}
.aviso-erro{background:#FDECEA;color:#B71C1C;border-radius:7px;padding:10px 12px;font-size:13px;margin-bottom:6px}