/* Painel de orçamentos — Rasqui Apparel Dois temas. As cores vivem só aqui, em variáveis: o resto do CSS nunca cita cor fixa, então trocar de tema é trocar o data-tema no . */ /* claro (padrão) */ :root{ --fundo:#f5f4f1; --painel:#ffffff; --painel2:#f0efec; --linha:#e4e2dd; --linha2:#d3d0c9; --texto:#17171a; --suave:#6f6c66; --cor:#d1121f; --ok:#237a49; --alerta:#8a6414; --sombra:0 1px 2px rgba(0,0,0,.05); --campo:#ffffff; --lateral:#101012; --lateral-texto:#e8e6e1; --lateral-suave:#9b9892; --selo-neutro-bg:#f0efec; --selo-neutro-borda:#dcd9d3; --selo-neutro-texto:#6d6a65; --selo-info-bg:#eef4fb; --selo-info-borda:#cadcf0; --selo-info-texto:#2c5f96; --selo-ok-bg:#eef7f1; --selo-ok-borda:#c6e3d2; --selo-ok-texto:#256f47; --selo-erro-bg:#fdeded; --selo-erro-borda:#f3cccc; --selo-erro-texto:#a52626; --selo-alerta-bg:#fdf5e6; --selo-alerta-borda:#ecdcb8; --selo-alerta-texto:#8a6414; --aviso-bg:#fdf5e6; --aviso-borda:#ecdcb8; --aviso-texto:#7d5a12; --barra-vazia:#e7e5e0; } /* escuro */ [data-tema="escuro"]{ --fundo:#0a0a0a; --painel:#121212; --painel2:#191919; --linha:#262626; --linha2:#333; --texto:#f4f1e8; --suave:#a3a09a; --cor:#e3142a; --ok:#3fa66b; --alerta:#e0a03a; --sombra:none; --campo:#0f0f0f; --lateral:#121212; --lateral-texto:#f4f1e8; --lateral-suave:#a3a09a; --selo-neutro-bg:#1c1c1c; --selo-neutro-borda:#3a3a3a; --selo-neutro-texto:#9b9b9b; --selo-info-bg:#131c24; --selo-info-borda:#284157; --selo-info-texto:#6fa8dc; --selo-ok-bg:#12211a; --selo-ok-borda:#245239; --selo-ok-texto:#5fce93; --selo-erro-bg:#231313; --selo-erro-borda:#4a2020; --selo-erro-texto:#ff7a7a; --selo-alerta-bg:#221c10; --selo-alerta-borda:#4c3a15; --selo-alerta-texto:#e0a03a; --aviso-bg:#221c10; --aviso-borda:#4c3a15; --aviso-texto:#e0a03a; --barra-vazia:#1e1e1e; } :root{ --fonte:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --display:'Barlow Condensed',Impact,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; } *{box-sizing:border-box} body{margin:0;background:var(--fundo);color:var(--texto);font-family:var(--fonte);font-size:14px;line-height:1.5} a{color:inherit} h1,h2,h3{font-family:var(--display);font-weight:900;letter-spacing:.01em;margin:0} h1{font-size:30px;text-transform:uppercase} h2{font-size:21px;text-transform:uppercase} h3{font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--suave)} button{font-family:inherit} /* layout */ .app{display:grid;grid-template-columns:220px 1fr;min-height:100vh} .lateral{background:var(--lateral);color:var(--lateral-texto);padding:20px 14px;display:flex;flex-direction:column;gap:3px;position:sticky;top:0;height:100vh} .marca{margin-bottom:20px;display:flex;align-items:center;min-height:34px} .marca img{max-width:150px;max-height:44px;object-fit:contain;display:block} .marca .texto{font-family:var(--display);font-weight:900;font-size:26px;letter-spacing:-.01em;text-transform:uppercase;color:var(--lateral-texto)} .marca .texto i{color:var(--cor);font-style:normal} .lateral a{display:block;padding:10px 12px;border-radius:3px;text-decoration:none;color:var(--lateral-suave);font-size:13.5px;font-weight:600} .lateral a:hover{background:#ffffff14;color:var(--lateral-texto)} .lateral a.ativo{background:var(--cor);color:#fff} .lateral .rodape-lateral{margin-top:auto;display:flex;flex-direction:column;gap:6px} .lateral .acao-lateral{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;background:none;border:1px solid #ffffff2b;color:var(--lateral-suave);padding:9px;border-radius:3px;cursor:pointer;text-align:center} .lateral .acao-lateral:hover{border-color:#ffffff55;color:var(--lateral-texto)} .conteudo{padding:28px 32px 60px;max-width:1180px} .cabecalho{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px;flex-wrap:wrap} .cabecalho p{color:var(--suave);margin:4px 0 0;font-size:13px} /* botões */ .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:3px;border:1px solid var(--linha2);background:var(--painel);color:var(--texto);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-family:var(--mono);cursor:pointer;text-decoration:none} .btn:hover{border-color:var(--suave)} .btn.principal{background:var(--cor);border-color:var(--cor);color:#fff} .btn.principal:hover{filter:brightness(1.1)} .btn.mini{padding:6px 10px;font-size:10.5px} .btn.perigo{color:var(--selo-erro-texto);border-color:var(--selo-erro-borda)} .btn:disabled{opacity:.45;cursor:default} /* cards e tabelas */ .grade{display:grid;gap:14px} .grade.k4{grid-template-columns:repeat(4,1fr)} .grade.k3{grid-template-columns:repeat(3,1fr)} .grade.k2{grid-template-columns:repeat(2,1fr)} .cartao{background:var(--painel);border:1px solid var(--linha);border-radius:4px;padding:18px;box-shadow:var(--sombra)} .cartao .rotulo{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--suave)} .cartao .numero{font-family:var(--display);font-weight:900;font-size:30px;margin-top:6px;line-height:1} .cartao .numero.cor{color:var(--cor)} .cartao .numero.ok{color:var(--ok)} table.lista{width:100%;border-collapse:collapse;background:var(--painel);border:1px solid var(--linha);border-radius:4px;overflow:hidden;box-shadow:var(--sombra)} table.lista th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--suave);font-weight:400;padding:12px 14px;border-bottom:1px solid var(--linha)} table.lista td{padding:13px 14px;border-bottom:1px solid var(--linha);font-size:13.5px;vertical-align:middle} table.lista tr:last-child td{border-bottom:0} table.lista tbody tr:hover{background:var(--painel2)} table.lista .num{font-family:var(--mono);white-space:nowrap} .vazio{padding:40px;text-align:center;color:var(--suave);border:1px dashed var(--linha2);border-radius:4px} /* selos */ .selo{display:inline-block;padding:4px 9px;border-radius:2px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:1px solid} .selo.rascunho,.selo.cancelado,.selo.sem_pagamento,.selo.aguardando_sinal{background:var(--selo-neutro-bg);border-color:var(--selo-neutro-borda);color:var(--selo-neutro-texto)} .selo.enviado{background:var(--selo-info-bg);border-color:var(--selo-info-borda);color:var(--selo-info-texto)} .selo.aprovado,.selo.quitado{background:var(--selo-ok-bg);border-color:var(--selo-ok-borda);color:var(--selo-ok-texto)} .selo.recusado{background:var(--selo-erro-bg);border-color:var(--selo-erro-borda);color:var(--selo-erro-texto)} .selo.expirado,.selo.parcial{background:var(--selo-alerta-bg);border-color:var(--selo-alerta-borda);color:var(--selo-alerta-texto)} /* formulários */ .campo{margin-bottom:14px} .campo label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--suave);margin-bottom:6px} input,select,textarea{width:100%;background:var(--campo);border:1px solid var(--linha2);border-radius:3px;color:var(--texto);padding:10px 12px;font-family:inherit;font-size:14px} input:focus,select:focus,textarea:focus,[contenteditable]:focus{outline:2px solid var(--cor);outline-offset:1px;border-color:transparent} input[type=color]{padding:4px;height:42px} textarea{min-height:90px;resize:vertical} .editor{background:var(--campo);border:1px solid var(--linha2);border-radius:3px;padding:12px;min-height:110px;font-size:14px;line-height:1.6} .editor ol,.editor ul{padding-left:20px} .ferramentas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px;padding:6px;background:var(--painel2);border:1px solid var(--linha2);border-radius:3px 3px 0 0} .ferramentas .grupo{display:flex;gap:3px;align-items:center;padding-right:8px;border-right:1px solid var(--linha2)} .ferramentas .grupo:last-child{border-right:0;padding-right:0} .ferramentas button{background:var(--painel);border:1px solid var(--linha2);color:var(--texto);border-radius:3px;min-width:30px;height:28px;padding:0 6px;cursor:pointer;font-size:12px;line-height:1} .ferramentas button:hover{border-color:var(--cor);color:var(--cor)} .ferramentas select{width:auto;min-width:96px;height:28px;padding:0 6px;font-size:12px;background:var(--painel)} .ferramentas .cor{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;border:1px solid var(--linha2);border-radius:3px;background:var(--painel);font-weight:700;font-size:12px;cursor:pointer;overflow:hidden} .ferramentas .cor.destaque{background:#ffe873;color:#161616} .ferramentas .cor input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0} .editor{border-radius:0 0 3px 3px} .editor table.tabela-texto{border-collapse:collapse;width:100%;margin:8px 0} .editor table.tabela-texto td{border:1px solid var(--linha2);padding:6px 8px;min-width:40px} .editor img{max-width:100%} .linha-campos{display:grid;gap:14px} .linha-campos.k2{grid-template-columns:1fr 1fr} .linha-campos.k3{grid-template-columns:1fr 1fr 1fr} .linha-campos.k4{grid-template-columns:1fr 1fr 1fr 1fr} .secao{background:var(--painel);border:1px solid var(--linha);border-radius:4px;padding:20px;margin-bottom:18px;box-shadow:var(--sombra)} .secao > h2{margin-bottom:16px} .dica{color:var(--suave);font-size:12px;margin:-6px 0 12px} /* itens do orçamento */ table.itens{width:100%;border-collapse:collapse} table.itens th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--suave);font-weight:400;text-align:left;padding-bottom:8px} table.itens td{padding:4px 4px 4px 0;vertical-align:middle} table.itens input,table.itens select{padding:8px 10px} table.itens .total-linha{font-family:var(--mono);white-space:nowrap;text-align:right;padding-right:8px} .remover{background:none;border:1px solid var(--linha2);color:var(--selo-erro-texto);border-radius:3px;width:32px;height:34px;cursor:pointer} .totais{margin-top:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-end} .totais .linha{display:flex;gap:20px;font-family:var(--mono);font-size:13px;color:var(--suave)} .totais .linha b{color:var(--texto);min-width:110px;text-align:right} .totais .linha.destaque{font-size:19px;font-family:var(--display);font-weight:900;color:var(--texto)} .totais .linha.destaque b{color:var(--cor);font-family:var(--display)} /* galeria de imagens */ .miniaturas{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-top:12px} .miniatura{border:1px solid var(--linha2);border-radius:4px;overflow:hidden;background:var(--painel2)} .miniatura img{width:100%;height:96px;object-fit:cover;display:block;background:#fff} .miniatura .barra{display:flex;gap:4px;padding:6px;justify-content:space-between;align-items:center} .miniatura .barra button{background:none;border:1px solid var(--linha2);color:var(--suave);border-radius:2px;padding:3px 6px;font-size:10px;cursor:pointer;font-family:var(--mono)} .miniatura .barra button.on{border-color:var(--cor);color:var(--cor);font-weight:700} .miniatura .larguras{display:flex;gap:2px} .miniatura .larguras button{padding:3px 4px} /* pagamento */ .progresso{height:8px;background:var(--barra-vazia);border-radius:99px;overflow:hidden;margin:10px 0} .progresso i{display:block;height:100%;background:var(--ok)} .parcelas{width:100%;border-collapse:collapse;margin-top:10px} .parcelas th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--suave);text-align:left;font-weight:400;padding:8px 10px;border-bottom:1px solid var(--linha)} .parcelas td{padding:10px;border-bottom:1px solid var(--linha);font-size:13px} .parcelas td.num{font-family:var(--mono)} .parcelas tr.paga td{color:var(--suave)} .parcelas tr.vencida td.venc{color:var(--selo-erro-texto)} /* relatórios */ .barras{display:flex;align-items:flex-end;gap:10px;height:150px;margin:6px 0 14px;padding-top:8px} .barras .coluna{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%} .barras .pilha{width:100%;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:2px} .barras .parte{width:100%;border-radius:2px 2px 0 0;min-height:2px} .barras .parte.orcado{background:var(--barra-vazia)} .barras .parte.aprovado{background:var(--cor)} .barras .rot{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--suave);text-transform:uppercase} .legenda{display:flex;gap:16px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--suave);margin-bottom:4px} .legenda i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px} /* modal, toast e prévia da logo */ .caixa-modal{background:var(--painel);border:1px solid var(--linha);border-radius:4px;padding:24px;width:min(760px,100%);box-shadow:0 18px 44px rgba(0,0,0,.25)} .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:99;padding:12px 20px;border-radius:3px;font-size:13px;font-weight:600;border:1px solid;background:var(--selo-ok-bg);border-color:var(--selo-ok-borda);color:var(--selo-ok-texto)} .toast.erro{background:var(--selo-erro-bg);border-color:var(--selo-erro-borda);color:var(--selo-erro-texto)} .previa-logo{margin-top:10px;padding:14px;border-radius:3px;border:1px solid var(--linha2); background-color:#f7f6f4; background-image:linear-gradient(45deg,#e9e7e2 25%,transparent 25%),linear-gradient(-45deg,#e9e7e2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9e7e2 75%),linear-gradient(-45deg,transparent 75%,#e9e7e2 75%); background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0} .previa-logo.escura{background-color:#111;background-image:none} .previa-logo img{max-height:56px;display:block} .previa-capa{margin-top:10px;border:1px solid var(--linha2);border-radius:3px;overflow:hidden;background:#111} .previa-capa img{width:100%;max-height:120px;object-fit:cover;display:block} /* login */ .login{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--fundo)} .login .caixa{width:min(360px,100%);background:var(--painel);border:1px solid var(--linha);border-radius:4px;padding:30px;box-shadow:var(--sombra)} .login .caixa .marca{justify-content:center;margin-bottom:14px} .login .caixa .marca img{max-height:56px} .login .caixa .marca .texto{font-size:34px;color:var(--texto)} .login p{color:var(--suave);margin:0 0 22px;font-size:13px;text-align:center} .erro{color:var(--selo-erro-texto);font-size:13px;margin-top:10px;min-height:18px} .aviso{background:var(--aviso-bg);border:1px solid var(--aviso-borda);color:var(--aviso-texto);padding:12px 14px;border-radius:4px;font-size:13px;margin-bottom:16px} .acoes-topo{display:flex;gap:8px;flex-wrap:wrap} .filtros{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap} .filtros input,.filtros select{width:auto;min-width:150px} @media(max-width:900px){ .app{grid-template-columns:1fr} .lateral{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px} .lateral .marca{margin:0 12px 0 0} .lateral .marca img{max-height:30px} .lateral .marca .texto{font-size:20px} .lateral .rodape-lateral{margin-left:auto;flex-direction:row} .conteudo{padding:20px 16px 60px} .grade.k4,.grade.k3,.grade.k2,.linha-campos.k2,.linha-campos.k3,.linha-campos.k4{grid-template-columns:1fr} table.lista{display:block;overflow-x:auto} .barras{height:120px} }