/* ========================================================================== somma.css — tokens de marca + reset + componentes base Compartilhado por index.html (login), sistema.php (shell) e módulos. Paleta extraída do protótipo em proposta/dashboard_alocacao_v1.html. ========================================================================== */ :root{ /* --- marca Somma Investimentos ------------------------------------- */ --deep1:#012837; --deep2:#023C53; --deep3:#05506E; --deep4:#0D86A6; --deep5:#66C5E2; --teal1:#003A3A; --teal2:#005657; --teal3:#007374; --teal4:#07A09C; --teal5:#24C6C1; --amber1:#EBAF0A; --amber2:#C18E0C; --amber3:#EABC49; --amber4:#CD8C19; --amber5:#AA6F11; --amber6:#E2A849; --gray1:#373C3C; --gray2:#696E6E; --gray3:#91969B; --gray4:#BEC3C8; --gray5:#DCE1EB; --gray6:#EBEBF0; --vermelho:#c0392b; --verde:#1e8449; /* --- superfícies (tema claro) --------------------------------------- */ --bg:#F4F6F8; --panel:#FFFFFF; --ink:#1B2226; --ink-soft:#5A6268; --radius:10px; --sombra:0 1px 3px rgba(1,40,55,.10); --largura-max:1400px; --topbar-h:58px; --fonte:"Inter","Segoe UI",Arial,sans-serif; } /* O shell e os módulos respeitam a preferência do sistema operacional. [data-theme] no permite forçar um dos dois, se um dia for preciso. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0E1417; --panel:#1B2226; --ink:#EDEFEF; --ink-soft:#9AA3A7; --gray4:#3A4448; --gray5:#2B3438; --gray6:#232C30; --sombra:0 1px 3px rgba(0,0,0,.4); } } :root[data-theme="dark"]{ --bg:#0E1417; --panel:#1B2226; --ink:#EDEFEF; --ink-soft:#9AA3A7; --gray4:#3A4448; --gray5:#2B3438; --gray6:#232C30; --sombra:0 1px 3px rgba(0,0,0,.4); } *{box-sizing:border-box;} html,body{margin:0;padding:0;height:100%;} body{ background:var(--bg); color:var(--ink); font-family:var(--fonte); font-size:14px; -webkit-font-smoothing:antialiased; } /* --- controles de formulário ----------------------------------------- */ .campo{ font-family:inherit; font-size:.88rem; color:var(--ink); background:var(--panel); border:1px solid var(--gray4); border-radius:6px; padding:8px 11px; width:100%; } .campo:focus{ outline:none; border-color:var(--deep4); box-shadow:0 0 0 3px rgba(13,134,166,.18); } .btn{ font-family:inherit; font-size:.85rem; font-weight:600; cursor:pointer; border-radius:8px; padding:9px 16px; border:1px solid transparent; transition:background .15s, color .15s, border-color .15s; } .btn-primario{ background:var(--deep2); color:#fff; } .btn-primario:hover{ background:var(--deep3); } .btn-secundario{ background:var(--gray6); color:var(--deep1); border-color:var(--gray4); } .btn-secundario:hover{ background:var(--gray5); } .btn:disabled{ opacity:.6; cursor:not-allowed; } /* --- painel padrão ---------------------------------------------------- */ .painel{ background:var(--panel); border:1px solid var(--gray5); border-radius:var(--radius); box-shadow:var(--sombra); } /* --- mensagens -------------------------------------------------------- */ .alerta{ font-size:.82rem; border-radius:6px; padding:9px 12px; display:none; } .alerta.visivel{ display:block; } .alerta-erro{ background:rgba(192,57,43,.10); color:var(--vermelho); border:1px solid rgba(192,57,43,.35); } /* --- estados de carregamento ------------------------------------------ */ .carregando{ display:flex; align-items:center; justify-content:center; gap:10px; padding:48px 0; color:var(--ink-soft); font-size:.85rem; } .spinner{ width:18px; height:18px; border-radius:50%; border:2px solid var(--gray4); border-top-color:var(--deep4); animation:girar .7s linear infinite; } @keyframes girar{ to{ transform:rotate(360deg); } } /* --- utilitários ------------------------------------------------------- */ .oculto{ display:none !important; }