/* Tema: claro = branco com azul · escuro = cinza claro. A escolha do usuário vira data-tema no ; sem escolha, segue o sistema operacional. */ :root { --fundo: #f2f7fd; --painel: #ffffff; --borda: #d3e2f2; --texto: #132231; --suave: #5c7488; --acento: #1a6fc4; --acento-suave: #e8f2fd; --acento-texto: #ffffff; --erro: #c0392b; --erro-fundo: #fdecea; --ok: #1a7f5a; --raio: 8px; } /* preto acinzentado, sem contraste duro */ :root[data-tema="escuro"] { --fundo: #3c434a; --painel: #474f58; --borda: #5d666f; --texto: #f2f4f7; --suave: #c2cad3; --acento: #a8d3f8; --acento-suave: #56606a; --acento-texto: #1b2026; --erro: #ffb3aa; --erro-fundo: #57403c; --ok: #79dab0; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --fundo: #3c434a; --painel: #474f58; --borda: #5d666f; --texto: #f2f4f7; --suave: #c2cad3; --acento: #a8d3f8; --acento-suave: #56606a; --acento-texto: #1b2026; --erro: #ffb3aa; --erro-fundo: #57403c; --ok: #79dab0; } } * { box-sizing: border-box; } body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } a { color: var(--acento); } h1 { font-size: 1.35rem; margin: 0 0 .25rem; } h2 { font-size: 1.05rem; margin: 0 0 .75rem; } .suave { color: var(--suave); font-size: .875rem; } /* ---------------------------------------------------------------- login */ .tela-login { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; } .cartao { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.75rem; width: 100%; max-width: 360px; } /* ---------------------------------------------------------------- shell */ .app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; } .lateral { background: var(--painel); border-right: 1px solid var(--borda); padding: 1.25rem 1rem; display: flex; flex-direction: column; gap: 1.25rem; } .marca { font-weight: 600; letter-spacing: -.01em; } .menu { display: flex; flex-direction: column; gap: 2px; } .menu button { text-align: left; background: none; border: 0; border-radius: 6px; padding: .5rem .625rem; color: var(--texto); cursor: pointer; font: inherit; } .menu button:hover { background: var(--acento-suave); } .menu button[aria-current="true"] { background: var(--acento); color: var(--acento-texto); } .menu button:disabled { color: var(--suave); cursor: default; } .menu button:disabled:hover { background: none; } .rodape-lateral { margin-top: auto; font-size: .8125rem; color: var(--suave); } .conteudo { padding: 1.75rem 2rem; min-width: 0; } @media (max-width: 720px) { .app { grid-template-columns: 1fr; } .lateral { border-right: 0; border-bottom: 1px solid var(--borda); } .conteudo { padding: 1.25rem; } } /* ---------------------------------------------------------------- form */ label { display: block; font-size: .8125rem; color: var(--suave); margin: .75rem 0 .25rem; } input, select { width: 100%; padding: .5rem .625rem; border: 1px solid var(--borda); border-radius: 6px; background: var(--fundo); color: var(--texto); font: inherit; } input:focus, select:focus { outline: 2px solid var(--acento); outline-offset: -1px; } .botao { margin-top: 1rem; padding: .5rem .875rem; border: 1px solid transparent; border-radius: 6px; background: var(--acento); color: var(--acento-texto); font: inherit; cursor: pointer; } .botao.secundario { background: none; border-color: var(--borda); color: var(--texto); } .botao:disabled { opacity: .6; cursor: default; } .linha-botoes { display: flex; gap: .5rem; flex-wrap: wrap; } /* ---------------------------------------------------------------- tabela */ table { width: 100%; border-collapse: collapse; font-size: .9375rem; } th, td { text-align: left; padding: .5rem .625rem; border-bottom: 1px solid var(--borda); } th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); } .tabela-rolagem { overflow-x: auto; } .etiqueta { display: inline-block; padding: .0625rem .4rem; border-radius: 999px; border: 1px solid var(--borda); font-size: .75rem; } .inativo { color: var(--suave); } /* ---------------------------------------------------------------- avisos */ .aviso { border: 1px solid var(--borda); border-radius: var(--raio); padding: .625rem .75rem; margin: .75rem 0; font-size: .875rem; } .aviso.erro { color: var(--erro); background: var(--erro-fundo); border-color: currentColor; } .aviso.ok { color: var(--ok); border-color: currentColor; } .painel { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.25rem; margin-bottom: 1.25rem; } .construcao { color: var(--suave); } /* ---------------------------------------------------------------- estoque */ .cartoes { display: flex; gap: 1.5rem; flex-wrap: wrap; } .cartao-num { display: flex; flex-direction: column; gap: .125rem; } .cartao-num strong { font-size: 1.5rem; font-weight: 600; } .cartao-num strong.alerta { color: var(--erro); } .filtros { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; } .filtros input, .filtros select { width: auto; min-width: 180px; } label.inline { display: inline-flex; align-items: center; gap: .375rem; margin: 0; font-size: .875rem; color: var(--texto); } label.inline input { width: auto; } .grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 1rem; } .grade label { margin-top: .5rem; } code { font-size: .875rem; } input[type=file] { padding: .375rem; } /* ---------------------------------------------------------------- calendário */ .area-calendario { position: relative; } .calendario { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr)); gap: .375rem; margin: 1rem 0; } .dia { position: relative; min-height: 4.6rem; padding-bottom: 1.7rem; border: 1px solid var(--borda); border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; user-select: none; background: var(--fundo); } .dia:hover { outline: 2px solid var(--acento); outline-offset: -1px; } .dia.vazio { border-style: dashed; opacity: .3; cursor: default; } .dia.vazio:hover { outline: none; } .dia.livre { background: color-mix(in srgb, var(--ok) 18%, var(--painel)); } .dia.bloqueado { color: var(--suave); } .dia.parcial { border-color: var(--acento); border-width: 2px; } .dia-num { font-weight: 600; font-size: .9375rem; line-height: 1.1; } .dia-sem { font-size: .625rem; color: var(--suave); text-transform: uppercase; } .dia-badge { position: absolute; top: 1px; right: 3px; font-size: .5625rem; color: var(--acento); font-weight: 600; } .dia.editando { border-style: dashed; } .dia.aberto { outline: 2px solid var(--acento); outline-offset: -1px; } /* ------------------------------------------------- marcações do dia */ /* Estrela = entrega prevista. A cor é a faixa de confiança da fila e o número é a posição: amarelo 1..5, azul 6..15, verde 16..20, vermelho 21+. */ .marcas { position: absolute; bottom: 2px; left: 0; right: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; } /* A estrela é o ::before recortado; o número fica POR CIMA, sem recorte. Recortar o número junto com a estrela comia o algarismo no vão entre as duas pontas de baixo — a estrela aparecia vazia. */ .estrela { position: relative; width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; flex: none; } .estrela::before { content: ''; position: absolute; inset: 0; background: var(--cor-estrela, var(--acento)); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .estrela b { position: relative; /* o corpo largo da estrela fica um pouco acima do meio da caixa */ margin-top: -.12rem; font-size: .625rem; font-weight: 800; line-height: 1; color: #1b2026; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .estrela-mais { font-size: .625rem; color: var(--suave); align-self: center; } .marca-visita { display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; align-self: center; border-radius: 4px; background: var(--acento); color: var(--acento-texto); font-size: .5625rem; font-weight: 700; line-height: 1; } /* ------------------------------------------------- caixinha do dia */ .caixa-dia { position: absolute; z-index: 20; width: min(22rem, 100%); background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: 0 6px 20px rgba(0, 0, 0, .18); padding: .75rem; } .caixa-dia h3 { font-size: .8125rem; margin: .75rem 0 .375rem; color: var(--suave); text-transform: uppercase; letter-spacing: .03em; } .caixa-dia h3:first-child { margin-top: 0; } .caixa-dia-topo { display: flex; align-items: baseline; gap: .5rem; padding-bottom: .5rem; margin-bottom: .5rem; border-bottom: 1px solid var(--borda); } .fechar-caixa { margin-left: auto; border: 0; background: none; cursor: pointer; color: var(--suave); font-size: 1.1rem; line-height: 1; padding: 0 .25rem; } .item-dia { display: flex; gap: .5rem; align-items: flex-start; padding: .375rem 0; border-bottom: 1px solid var(--borda); font-size: .875rem; } .item-dia:last-child { border-bottom: 0; } @media (max-width: 520px) { .caixa-dia { position: static; width: 100%; box-shadow: none; margin-top: .5rem; } } .alerta-txt { color: var(--erro); } .etiqueta.servico { color: var(--acento); border-color: currentColor; } /* ---------------------------------------------------------------- etapas */ .detalhe-etapas td { border-bottom: 1px solid var(--borda); padding-top: 0; } .passo { display: inline-block; margin: 0 .75rem .25rem 0; padding: .125rem .5rem; border: 1px solid var(--borda); border-radius: 999px; font-size: .8125rem; } /* ---------------------------------------------------------------- tema */ .topo-marca { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .botao-tema { border: 1px solid var(--borda); background: var(--painel); color: var(--texto); border-radius: 999px; width: 2rem; height: 2rem; display: grid; place-items: center; cursor: pointer; font-size: .9375rem; line-height: 1; padding: 0; } .botao-tema:hover { background: var(--acento-suave); border-color: var(--acento); } .botao-tema:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } /* ---------------------------------------------------------------- fila de pedidos */ .legenda { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-bottom: .75rem; font-size: .8125rem; } .legenda-item { display: inline-flex; align-items: center; gap: .375rem; } .legenda-item i { width: 1.5rem; height: .875rem; border-radius: 3px; border: 1px solid; display: inline-block; } /* ---------------------------------------------------------------- abas */ .abas { display: flex; gap: .25rem; border-bottom: 1px solid var(--borda); margin-bottom: .75rem; flex-wrap: wrap; } .aba { background: none; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; padding: .5rem .875rem; margin-bottom: -1px; color: var(--suave); font: inherit; cursor: pointer; } .aba:hover { background: var(--acento-suave); color: var(--texto); } .aba.ativa { background: var(--painel); border-color: var(--borda); color: var(--texto); font-weight: 600; } .aba .conta { display: inline-block; min-width: 1.25rem; padding: 0 .3rem; margin-left: .25rem; border-radius: 999px; background: var(--acento-suave); color: var(--texto); font-size: .75rem; font-weight: 600; } .aba.ativa .conta { background: var(--acento); color: var(--acento-texto); }