/* Oficina OS — design system RD (base Apple HIG + identidade da marca). Azul RD #0d47a1 (o mesmo do ícone do app) + ciano "ar gelado", vidro fosco, dark mode automático. Mantém alvos de toque grandes (uso com luvas/celular). */ * { box-sizing: border-box; margin: 0; padding: 0; } /* O atributo hidden deve SEMPRE esconder — regras como `.form-bloco input`, `.btn` e `.aba` tem display proprio que venceria o [hidden] do navegador. */ [hidden] { display: none !important; } /* ============================================================ TOKENS — identidade RD sobre cores semânticas ============================================================ */ :root { /* acentos */ --azul: #1256c4; --azul-escuro: #0d47a1; --ciano: #00acc1; --grad-marca: linear-gradient(140deg, #0d47a1 8%, #0b6fc0 55%, #00acc1 100%); --verde: #248a3d; --verde-vivo: #34c759; --vermelho: #ff3b30; --vermelho-escuro: #d70015; --laranja: #f57c00; --amarelo: #ffcc00; --cinza: #8e8e93; --roxo: #5e5ce6; /* superfícies */ --fundo: #f2f2f7; --card: #ffffff; --card-2: #f7f7fa; --fill: rgba(120, 120, 128, .12); --fill-2: rgba(120, 120, 128, .20); /* texto */ --texto: #1c1c1e; --texto-2: rgba(60, 60, 67, .62); --texto-3: rgba(60, 60, 67, .38); /* linhas e vidro */ --separador: rgba(60, 60, 67, .16); --vidro: rgba(250, 250, 252, .82); --sombra-card: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .05); --sombra-flutuante: 0 8px 32px rgba(0, 0, 0, .16); /* tintas (fundos coloridos suaves) */ --tinta-azul: rgba(18, 86, 196, .11); --tinta-ciano: rgba(0, 172, 193, .14); --tinta-verde: rgba(52, 199, 89, .14); --tinta-vermelha: rgba(255, 59, 48, .12); --tinta-amarela: rgba(255, 204, 0, .18); /* aliases legados */ --cor-fundo: var(--fundo); --cor-cartao: var(--card); --cor-texto: var(--texto); --cor-primaria: var(--azul); --raio-card: 18px; --raio-controle: 13px; } @media (prefers-color-scheme: dark) { /* Automatico: segue o modo do aparelho — EXCETO quando o usuario escolheu um tema pelo botao (data-theme no ), que sempre vence. */ :root:not([data-theme]) { --azul: #5b9cf5; --azul-escuro: #8ab8ff; --ciano: #26c6da; --grad-marca: linear-gradient(140deg, #1a5fd0 8%, #0e86c9 55%, #00acc1 100%); --verde: #30d158; --verde-vivo: #30d158; --vermelho: #ff453a; --vermelho-escuro: #ff6961; --laranja: #ff9f0a; --amarelo: #ffd60a; --cinza: #98989e; --roxo: #7d7aff; --fundo: #000000; --card: #1c1c1e; --card-2: #2c2c2e; --fill: rgba(120, 120, 128, .24); --fill-2: rgba(120, 120, 128, .36); --texto: #f2f2f7; --texto-2: rgba(235, 235, 245, .64); --texto-3: rgba(235, 235, 245, .40); --separador: rgba(84, 84, 88, .60); --vidro: rgba(22, 22, 24, .82); --sombra-card: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .35); --sombra-flutuante: 0 8px 32px rgba(0, 0, 0, .55); --tinta-azul: rgba(91, 156, 245, .22); --tinta-ciano: rgba(38, 198, 218, .18); --tinta-verde: rgba(48, 209, 88, .20); --tinta-vermelha: rgba(255, 69, 58, .20); --tinta-amarela: rgba(255, 214, 10, .22); } } /* Escolha manual pelo botao de tema (vence o automatico acima). O tema CLARO forcado usa os tokens do :root (default), entao so precisamos do ESCURO. */ :root[data-theme="dark"] { --azul: #5b9cf5; --azul-escuro: #8ab8ff; --ciano: #26c6da; --grad-marca: linear-gradient(140deg, #1a5fd0 8%, #0e86c9 55%, #00acc1 100%); --verde: #30d158; --verde-vivo: #30d158; --vermelho: #ff453a; --vermelho-escuro: #ff6961; --laranja: #ff9f0a; --amarelo: #ffd60a; --cinza: #98989e; --roxo: #7d7aff; --fundo: #000000; --card: #1c1c1e; --card-2: #2c2c2e; --fill: rgba(120, 120, 128, .24); --fill-2: rgba(120, 120, 128, .36); --texto: #f2f2f7; --texto-2: rgba(235, 235, 245, .64); --texto-3: rgba(235, 235, 245, .40); --separador: rgba(84, 84, 88, .60); --vidro: rgba(22, 22, 24, .82); --sombra-card: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .35); --sombra-flutuante: 0 8px 32px rgba(0, 0, 0, .55); --tinta-azul: rgba(91, 156, 245, .22); --tinta-ciano: rgba(38, 198, 218, .18); --tinta-verde: rgba(48, 209, 88, .20); --tinta-vermelha: rgba(255, 69, 58, .20); --tinta-amarela: rgba(255, 214, 10, .22); } html { -webkit-text-size-adjust: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; background: var(--fundo); color: var(--texto); padding-bottom: 40px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { letter-spacing: -.02em; } /* ============================================================ TOPO — barra em vidro fosco (estilo iOS navigation bar) ============================================================ */ .topo { background: var(--vidro); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); color: var(--texto); padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: 0; z-index: 40; border-bottom: .5px solid var(--separador); } .topo h1 { font-size: 1.1rem; font-weight: 700; color: var(--texto); } .topo-marca .slogan-topo { font-size: .76rem; font-weight: 600; color: var(--azul); letter-spacing: 0; margin-top: 2px; } .quem-sou { display: flex; align-items: center; gap: 8px; font-size: .9rem; flex: 1; color: var(--texto-2); } /* Sino sempre COLADO no canto direito do cabecalho. */ .quem-sou .sino { margin-left: auto; } .quem-sou small { opacity: .85; } .btn-sair { background: var(--fill); color: var(--azul); border: none; border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: .85rem; cursor: pointer; transition: opacity .15s ease, transform .15s ease; } .btn-sair:active { opacity: .6; transform: scale(.96); } /* Menu ⋮ do topo (Tema / Atualizar / Sair) — desafoga o cabecalho no celular. */ .menu-wrap { position: relative; } .menu-topo { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; background: var(--card); border: .5px solid var(--separador); border-radius: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, .18); padding: 6px; min-width: 210px; display: flex; flex-direction: column; gap: 2px; } .menu-topo button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; color: var(--texto); font-size: .95rem; font-weight: 500; padding: 12px 12px; border-radius: 9px; cursor: pointer; } .menu-topo button:active { background: var(--fill); } .menu-topo .btn-sair { color: var(--vermelho); background: none; padding: 12px; } /* ============================================================ ABAS — topo no desktop, tab bar flutuante no celular ============================================================ */ .abas { display: flex; background: var(--vidro); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); overflow-x: auto; border-bottom: .5px solid var(--separador); } .aba { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 11px; font-size: .72rem; font-weight: 600; border: none; background: transparent; color: var(--texto-2); cursor: pointer; white-space: nowrap; position: relative; transition: color .2s ease; } /* .aba define display proprio, que venceria o [hidden] do navegador. */ .aba[hidden] { display: none !important; } .aba-ico { font-size: 1.35rem; line-height: 1; filter: grayscale(100%) opacity(.55); transition: filter .2s ease; } .aba-txt { letter-spacing: 0; } .aba.ativa { color: var(--azul); } .aba.ativa .aba-ico { filter: none; } .aba.ativa::before { content: ""; position: absolute; bottom: 0; left: 22%; right: 22%; height: 2.5px; border-radius: 3px 3px 0 0; background: var(--azul); } main { padding: 16px; max-width: 720px; margin: 0 auto; } /* ============================================================ CARTÕES DE OS ============================================================ */ .lista-os { display: flex; flex-direction: column; gap: 14px; } /* Aba Acoes: coluna lateral de status + cartoes do status ativo */ .acoes-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; } .acoes-side { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 8px; } .acoes-side-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 11px 13px; border: none; background: transparent; border-radius: var(--raio-controle); cursor: pointer; text-align: left; font-size: 1rem; color: var(--texto); transition: background .12s; } .acoes-side-item:hover { background: var(--fill); } .acoes-side-item.ativo { background: var(--tinta-azul); color: var(--azul); font-weight: 600; } .acoes-qtd { min-width: 22px; text-align: center; font-size: .8rem; font-weight: 600; color: var(--texto-2); background: var(--fill); border-radius: 11px; padding: 1px 7px; } .acoes-side-item.ativo .acoes-qtd { color: #fff; background: var(--azul); } .acoes-cards { display: flex; flex-direction: column; gap: 14px; min-width: 0; } @media (max-width: 640px) { .acoes-layout { grid-template-columns: 1fr; gap: 12px; } .acoes-side { flex-direction: row; overflow-x: auto; position: static; gap: 6px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .acoes-side-item { flex: 0 0 auto; white-space: nowrap; padding: 9px 12px; } } .card-os { background: var(--card); border-radius: var(--raio-card); padding: 16px; box-shadow: var(--sombra-card); border: .5px solid var(--separador); border-left: 5px solid var(--cinza); } .card-os.paralisada { border-left-color: var(--vermelho); } .card-os.executando { border-left-color: var(--verde-vivo); } .card-os .os-numero { font-size: 1.2rem; font-weight: 700; color: var(--texto); } .card-os .os-info { color: var(--texto-2); margin: 4px 0 10px; font-size: .93rem; } .status-badge { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .01em; color: var(--texto-2); background: var(--fill); margin-bottom: 10px; } .status-badge.vermelho { background: var(--tinta-vermelha); color: var(--vermelho-escuro); animation: piscar 1.2s infinite; } .status-badge.verde { background: var(--tinta-verde); color: var(--verde); } .status-badge.azul { background: var(--tinta-azul); color: var(--azul); } @keyframes piscar { 50% { opacity: .55; } } .alerta-aberto { background: var(--tinta-vermelha); border: 1px solid rgba(255, 59, 48, .35); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; font-size: .93rem; } /* ============================================================ BOTÕES — preenchidos estilo iOS (sem gradiente) ============================================================ */ .btn { display: block; width: 100%; padding: 17px 12px; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; border: none; border-radius: var(--raio-controle); color: #fff; cursor: pointer; margin-top: 10px; transition: transform .15s ease, opacity .15s ease, filter .15s ease; } .btn:active { transform: scale(.97); opacity: .85; } .btn:disabled { opacity: .55; transform: none; cursor: default; } .btn-vermelho { background: var(--vermelho); } .btn-laranja { background: var(--laranja); } .btn-amarelo { background: var(--amarelo); color: #1c1c1e; } .btn-verde { background: var(--verde); } .btn-azul { background: var(--azul); } .btn-cinza { background: var(--fill-2); color: var(--texto); } /* .btn tem display:block, que venceria o [hidden] do navegador — reforca o esconder (modais so-de-leitura mostram apenas FECHAR, sem CONFIRMAR morto). */ .btn[hidden] { display: none; } .vazio { text-align: center; color: var(--texto-3); margin-top: 40px; font-size: 1.02rem; } /* ============================================================ PAINEL ============================================================ */ #aba-painel h2 { margin: 22px 0 10px; font-size: .82rem; font-weight: 600; color: var(--texto-2); text-transform: uppercase; letter-spacing: .06em; } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .card-num { background: var(--card); border-radius: 16px; padding: 14px; text-align: center; box-shadow: var(--sombra-card); border: .5px solid var(--separador); } .card-num .valor { font-size: 1.85rem; font-weight: 700; letter-spacing: -.03em; color: var(--texto); font-variant-numeric: tabular-nums; } .card-num .rotulo { font-size: .78rem; color: var(--texto-2); margin-top: 2px; } .card-num.destaque-vermelho .valor { color: var(--vermelho); } .card-num.destaque-verde .valor { color: var(--verde); } /* ============================================================ FORMULÁRIOS — campos estilo inset iOS ============================================================ */ .form-bloco { background: var(--card); border-radius: var(--raio-card); padding: 18px 16px; margin-bottom: 16px; box-shadow: var(--sombra-card); border: .5px solid var(--separador); } .form-bloco h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 12px; color: var(--texto); } form label, .modal-caixa label { display: block; margin-bottom: 13px; font-weight: 600; font-size: .9rem; color: var(--texto); } form input:not([type="radio"]):not([type="checkbox"]), form select, form textarea, .form-bloco input:not([type="radio"]):not([type="checkbox"]), .form-bloco select, .form-bloco textarea, .modal-caixa input:not([type="radio"]):not([type="checkbox"]), .modal-caixa select, .modal-caixa textarea { display: block; width: 100%; margin-top: 6px; padding: 13px 14px; font-size: 1rem; font-family: inherit; border: 1px solid transparent; border-radius: 12px; background: var(--fill); color: var(--texto); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; -webkit-appearance: none; appearance: none; } form select, .form-bloco select, .modal-caixa select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } form input:focus, form select:focus, form textarea:focus, .form-bloco input:focus, .form-bloco select:focus, .form-bloco textarea:focus, .modal-caixa input:focus, .modal-caixa select:focus, .modal-caixa textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3.5px var(--tinta-azul); background: var(--card); } input::placeholder, textarea::placeholder { color: var(--texto-3); } form textarea, .form-bloco textarea, .modal-caixa textarea { min-height: 80px; resize: vertical; } /* Radios mantem layout proprio. */ .form-bloco .opcoes-radio input, .modal-caixa .opcoes-radio input { width: auto; margin: 0; display: inline-block; } .linha-usuario { display: flex; justify-content: space-between; padding: 11px 4px; border-bottom: .5px solid var(--separador); font-size: .95rem; } .linha-usuario .papel { color: var(--texto-2); font-weight: 600; } /* Orcamento tecnico */ .bloco-orcamento { background: var(--tinta-azul); border: none; border-radius: 12px; padding: 10px 12px; margin-top: 10px; font-size: .95rem; } .vazio-mini { color: var(--texto-3); font-size: .9rem; padding: 6px 0; } .btn-remover { border: none; background: var(--tinta-vermelha); color: var(--vermelho-escuro); font-weight: 700; border-radius: 9px; padding: 5px 11px; cursor: pointer; transition: opacity .15s ease; } .btn-remover:active { opacity: .6; } /* ============================================================ MODAL — sheet estilo iOS ============================================================ */ .modal-fundo { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 16px; /* acima da telaAuth (100): o modal de primeiro acesso abre ainda no login */ z-index: 130; } /* display:flex acima sobrepoe o atributo hidden; reforca o esconder. */ .modal-fundo[hidden], .toast[hidden] { display: none; } .modal-caixa { background: var(--card); border-radius: 22px; padding: 22px 20px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: var(--sombra-flutuante); animation: subir-sheet .32s cubic-bezier(.32, .72, .28, 1); } @keyframes subir-sheet { from { transform: translateY(24px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } } .modal-caixa h2 { margin-bottom: 14px; font-size: 1.15rem; font-weight: 700; } .modal-acoes { display: flex; gap: 10px; margin-top: 8px; } .modal-acoes .btn { margin-top: 0; } .opcoes-radio { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .opcoes-radio label { display: flex; align-items: center; gap: 10px; background: var(--fill); border: 2px solid transparent; border-radius: 12px; padding: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .opcoes-radio input { width: auto; margin: 0; accent-color: var(--azul); } .opcoes-radio label:has(input:checked) { border-color: var(--azul); background: var(--tinta-azul); } .obrigatorio { color: var(--vermelho); } /* ============================================================ ASSISTENTE TÉCNICO ============================================================ */ .dica { color: var(--texto-2); font-size: .9rem; margin-bottom: 10px; line-height: 1.45; } .resposta-tecnico .pergunta-eco { font-weight: 600; color: var(--texto); margin-bottom: 8px; } .texto-resposta { white-space: pre-wrap; font-family: inherit; background: var(--fill); border-radius: 12px; padding: 13px; font-size: 1.02rem; line-height: 1.55; } .fonte-badge { color: var(--texto-3); } /* ============================================================ PREÇOS ============================================================ */ .barra-logado { display: flex; justify-content: space-between; align-items: center; background: var(--tinta-verde); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; font-weight: 600; } .linha-preco { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: .5px solid var(--separador); font-size: .95rem; } .campo-valor { display: flex; align-items: center; gap: 4px; font-weight: 600; } .campo-valor input { width: 110px; padding: 9px; border: 1px solid transparent; border-radius: 10px; background: var(--fill); color: var(--texto); font-size: 1rem; text-align: right; font-variant-numeric: tabular-nums; } .total-linha { text-align: right; font-size: 1.05rem; font-weight: 600; margin: 12px 0; color: var(--verde); } .ok-finalizada { color: var(--verde); font-weight: 600; margin-top: 8px; } .btn-link { background: none; border: none; color: var(--azul); text-decoration: none; cursor: pointer; font-size: .95rem; padding: 0; font-weight: 600; } .btn-link:active { opacity: .5; } /* ============================================================ TOAST — pílula flutuante em vidro ============================================================ */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: rgba(28, 28, 30, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: .95rem; box-shadow: var(--sombra-flutuante); /* toast e mensagem transitoria: sempre visivel, acima de qualquer camada */ z-index: 250; max-width: 90vw; text-align: center; animation: subir-toast .3s cubic-bezier(.32, .72, .28, 1); } @keyframes subir-toast { from { transform: translate(-50%, 12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } .toast.erro { background: rgba(215, 0, 21, .92); } .toast.sucesso { background: rgba(36, 138, 61, .92); } /* ============================================================ BARRA DE CONEXAO — sem internet / fila esperando para subir Fica no TOPO (o toast ocupa o rodape) e respeita o notch do iPhone. ============================================================ */ .barra-conexao { position: fixed; top: 0; left: 0; right: 0; z-index: 240; padding: calc(env(safe-area-inset-top, 0px) + 7px) 14px 7px; text-align: center; font-weight: 700; font-size: .85rem; color: #fff; box-shadow: var(--sombra-flutuante); } .barra-conexao[hidden] { display: none; } .barra-conexao.off { background: rgba(150, 80, 0, .96); } /* sem sinal */ .barra-conexao.sync { background: rgba(0, 82, 168, .96); } /* subindo a fila */ .barra-conexao .btn-link { color: #fff; text-decoration: underline; font-weight: 700; font-size: .85rem; } /* ============================================================ AVATARES ============================================================ */ .avatar { border-radius: 50%; object-fit: cover; vertical-align: middle; display: inline-block; } .avatar-letra { background: var(--azul); color: #fff; font-weight: 700; text-align: center; font-size: .85em; } /* ============================================================ BUSCA — campo estilo iOS search ============================================================ */ .busca-placa { width: 100%; padding: 14px 16px; font-size: 1.02rem; border: 1px solid transparent; border-radius: var(--raio-controle); margin-bottom: 14px; text-transform: uppercase; background: var(--card); color: var(--texto); box-shadow: var(--sombra-card); transition: border-color .15s ease, box-shadow .15s ease; } .busca-placa:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3.5px var(--tinta-azul); } /* ============================================================ AVISOS E AÇÕES MENORES ============================================================ */ .alerta-info { background: var(--tinta-azul); border: none; border-radius: 12px; padding: 11px 13px; margin: 8px 0; font-size: .95rem; } .alerta-ok { background: var(--tinta-verde); border: none; border-radius: 12px; padding: 11px 13px; margin: 8px 0; font-weight: 600; color: var(--verde); } .acoes-mini { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .btn-mini { border: none; background: var(--fill); color: var(--azul); border-radius: 999px; padding: 10px 14px; min-height: 40px; font-size: .85rem; font-weight: 600; cursor: pointer; transition: opacity .15s ease, transform .15s ease; } .btn-mini:active { opacity: .6; transform: scale(.96); } /* ============================================================ TELA DE ENTRADA (login / cadastro) ============================================================ */ .auth-fundo { position: fixed; inset: 0; z-index: 100; background: var(--fundo); background-image: radial-gradient(1100px 560px at 85% -12%, var(--tinta-ciano), transparent 62%), radial-gradient(950px 540px at -12% 112%, var(--tinta-azul), transparent 58%), linear-gradient(180deg, var(--tinta-azul), transparent 44%); display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; } .auth-fundo[hidden] { display: none; } /* Marca RD: tile estilo ícone do app (mesmo azul do PWA instalado). */ .auth-tile { width: 78px; height: 78px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; font-size: 2.3rem; line-height: 1; border-radius: 24px; background: var(--grad-marca); box-shadow: 0 10px 24px rgba(13, 71, 161, .35), inset 0 1px 0 rgba(255, 255, 255, .25); } .auth-erro { background: var(--tinta-vermelha); color: var(--vermelho-escuro); border-radius: 12px; padding: 12px 14px; font-weight: 600; font-size: .95rem; line-height: 1.4; margin: 2px 0 12px; } .auth-erro[hidden] { display: none; } .auth-caixa { background: var(--card); border-radius: 26px; padding: 32px 26px; width: 100%; max-width: 400px; box-shadow: var(--sombra-flutuante); border: .5px solid var(--separador); } .auth-logo { text-align: center; font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; color: var(--texto); margin-bottom: 18px; line-height: 1; } .auth-logo span { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .32em; color: var(--azul); margin-top: 8px; } .slogan-auth { text-align: center; color: var(--texto-2); font-size: .92rem; font-weight: 500; margin: -6px 0 24px; } .auth-caixa h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 16px; color: var(--texto); } .auth-caixa label { display: block; margin-bottom: 16px; font-weight: 600; font-size: .95rem; color: var(--texto); } .auth-caixa input, .auth-caixa select { display: block; width: 100%; margin-top: 7px; padding: 17px 16px; font-size: 1.15rem; border: 1px solid transparent; border-radius: 14px; background: var(--fill); color: var(--texto); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; -webkit-appearance: none; appearance: none; } .auth-caixa select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; } .auth-caixa input:focus, .auth-caixa select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3.5px var(--tinta-azul); background: var(--card); } .auth-caixa .btn { padding: 18px; font-size: 1.1rem; border-radius: 14px; } .auth-troca { text-align: center; margin-top: 16px; font-size: .95rem; color: var(--texto-2); } .auth-troca .btn-link { font-size: .95rem; } .link-criar { text-align: center; margin-top: 10px; } /* ============================================================ ASSISTENTE: campo e botão grandes ============================================================ */ .campo-grande { min-height: 130px !important; font-size: 1.1rem !important; line-height: 1.45; padding: 16px !important; } .btn-grande { padding: 20px !important; font-size: 1.15rem !important; } /* ============================================================ TREINAMENTO ============================================================ */ .passos-treino { margin: 0; padding-left: 22px; } .passos-treino li { margin-bottom: 12px; font-size: 1rem; line-height: 1.5; } /* ============================================================ CELULAR: tab bar flutuante em vidro (estilo iOS) ============================================================ */ @media (max-width: 760px) { nav.abas { position: fixed; left: 10px; right: 10px; bottom: 10px; top: auto; transform: none; z-index: 60; width: auto; display: flex; flex-direction: row; align-items: center; gap: 2px; background: var(--vidro); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border: .5px solid var(--separador); border-radius: 28px; box-shadow: var(--sombra-flutuante); padding: 7px 6px; padding-bottom: calc(7px + env(safe-area-inset-bottom, 0)); } nav.abas .aba { flex: 1; min-width: 0; padding: 10px 2px; border-radius: 20px; color: var(--texto-2); } nav.abas .aba[hidden] { display: none; } nav.abas .aba .aba-ico { font-size: 1.5rem; line-height: 1; } /* Inativas: so o icone (grande). O nome aparece na aba ativa. */ nav.abas .aba .aba-txt { display: none; } nav.abas .aba.ativa { flex: 2.6; flex-direction: row; justify-content: center; gap: 7px; background: var(--tinta-azul); color: var(--azul); box-shadow: none; } nav.abas .aba.ativa .aba-txt { display: block; font-size: .8rem; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } nav.abas .aba.ativa::before { display: none; } nav.abas .aba:active { transform: scale(.94); } nav.abas[hidden] { display: none; } /* Conteudo abre espaco para a barra de baixo; topo volta a largura natural. */ body { padding-bottom: 100px; padding-right: 0; } header.topo { padding-top: calc(14px + env(safe-area-inset-top, 0)); } } /* ============================================================ PLAYER DA VIDEO-AULA ============================================================ */ .player-fundo { position: fixed; inset: 0; z-index: 200; background: #0b0b0f; background-image: radial-gradient(1000px 600px at 50% -20%, rgba(10, 132, 255, .28), transparent 65%); display: flex; flex-direction: column; color: #fff; } .player-fundo[hidden] { display: none; } .player-topo { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; font-weight: 700; font-size: 1.05rem; padding-top: calc(18px + env(safe-area-inset-top, 0)); } .player-fechar { background: rgba(255,255,255,.14); border: none; color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 1.05rem; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .player-slide { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px; text-align: center; gap: 18px; } .player-numero { font-size: .85rem; font-weight: 700; letter-spacing: .18em; color: #64b5f6; text-transform: uppercase; } .player-texto { font-size: 1.55rem; line-height: 1.5; font-weight: 600; letter-spacing: -.02em; max-width: 640px; margin: 0 auto; } .player-progresso { display: flex; gap: 6px; justify-content: center; padding: 8px 20px; flex-wrap: wrap; } .player-progresso .ponto { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); transition: transform .2s ease, background .2s ease; } .player-progresso .ponto.feito { background: rgba(255,255,255,.65); } .player-progresso .ponto.ativo { background: var(--amarelo); transform: scale(1.35); } .player-controles { display: flex; justify-content: center; align-items: center; gap: 22px; padding: 18px 0 calc(34px + env(safe-area-inset-bottom, 0)); } .player-controles button { background: rgba(255,255,255,.12); border: none; color: #fff; width: 62px; height: 62px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; transition: transform .15s ease; } .player-controles button:active { transform: scale(.92); } .player-controles .player-play { background: #fff; color: #1c1c1e; width: 74px; height: 74px; font-size: 1.8rem; } /* ---- Fase 2: agenda, separacao, laudo, consultor ---- */ .foto-mini { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: .5px solid var(--separador); margin: 4px 4px 0 0; } .bloco-consultor { border-top: .5px solid var(--separador); margin-top: 10px; padding-top: 8px; } .laudo-texto { max-height: 45vh; overflow-y: auto; background: var(--fill); border-radius: 12px; padding: 12px; font-size: .92rem; } .bloco-orcamento ul { margin: 6px 0 8px 20px; font-size: .95rem; } details summary { cursor: pointer; color: var(--azul); font-weight: 600; font-size: .9rem; margin: 10px 0 6px; } /* ============================================================ FLUXO DO SERVIÇO no cartão da OS ============================================================ */ .fluxo-os { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin: 10px 0 4px; padding: 8px 10px; background: var(--fill); border-radius: 12px; } .fluxo-os .etapa { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600; color: var(--texto-3); padding: 3px 8px; border-radius: 999px; white-space: nowrap; } .fluxo-os .etapa.feita { color: var(--verde); background: var(--tinta-verde); } .fluxo-os .etapa.atual { color: #fff; background: var(--azul); box-shadow: 0 2px 8px var(--tinta-azul); } .fluxo-os .etapa-ico { font-size: .8rem; line-height: 1; } .fluxo-os .etapa-seta { color: var(--texto-3); font-weight: 700; font-size: .8rem; } /* Passo a passo do orçamento (consultor) — aprovação SEMPRE por último. */ .passo-orc { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: .5px solid var(--separador); } .passo-orc:last-child { border-bottom: none; } .passo-num { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--fill-2); color: var(--texto); font-weight: 800; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; } .passo-orc.feito .passo-num { background: var(--tinta-verde); color: var(--verde); } .passo-orc.feito .passo-corpo > b { color: var(--verde); } .passo-corpo { flex: 1; font-size: .92rem; } .hist-tec { margin: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ EMERGÊNCIA ============================================================ */ .btn-emergencia { display: block; width: 100%; margin-bottom: 12px; background: var(--tinta-vermelha); color: var(--vermelho-escuro); border: none; border-radius: var(--raio-controle); padding: 12px; font-weight: 700; font-size: .92rem; cursor: pointer; letter-spacing: .01em; transition: transform .15s ease, opacity .15s ease; } .btn-emergencia:active { transform: scale(.97); opacity: .8; } .faixa-emergencia { position: sticky; top: 0; z-index: 70; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--vermelho); color: #fff; font-weight: 700; font-size: .95rem; padding: 12px 16px; animation: piscar 1.2s infinite; } .faixa-emergencia[hidden] { display: none; } .faixa-emergencia button { background: rgba(255,255,255,.25); border: none; color: #fff; border-radius: 999px; padding: 5px 11px; font-weight: 700; cursor: pointer; } @media (prefers-reduced-motion: reduce) { .faixa-emergencia { animation: none; } } /* ============================================================ SINO DE AVISOS ============================================================ */ .sino { position: relative; background: var(--fill); border: none; border-radius: 999px; width: 44px; height: 44px; font-size: 1.3rem; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: transform .15s ease, opacity .15s ease; } .sino:active { transform: scale(.9); opacity: .7; } .sino-badge { position: absolute; top: -5px; right: -5px; background: var(--vermelho); color: #fff; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: 2px 6px; min-width: 19px; text-align: center; border: 2px solid var(--card); } .aviso-novo { background: var(--tinta-amarela); border-radius: 10px; } /* Alerta de pendencias de faturamento (consultor/admin) */ .alerta-faturamento { background: var(--tinta-amarela); border: none; color: var(--texto); border-radius: 12px; padding: 11px 14px; margin-bottom: 12px; font-size: .92rem; } .alerta-faturamento[hidden] { display: none; } /* Aviso GRANDE do Compras: solicitações de peça aguardando (topo da aba). */ .aviso-compras { background: var(--tinta-vermelha); color: var(--vermelho-escuro); border: 1px solid rgba(255,59,48,.35); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; font-weight: 700; font-size: 1rem; line-height: 1.4; animation: piscar 1.4s infinite; } .aviso-compras[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .aviso-compras { animation: none; } } /* Selos de ERP e nota fiscal no cartao */ .selo-erp, .selo-nf { display: inline-block; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 3px 10px; margin: 2px 4px 0 0; } .selo-erp { background: var(--tinta-azul); color: var(--azul); } .selo-nf { background: var(--tinta-verde); color: var(--verde); } .btn-mini-nf { background: var(--tinta-amarela); color: var(--texto); } /* Pendencia de evidencia no orcamento */ .pendencia { color: var(--vermelho-escuro); font-weight: 700; font-size: .78rem; background: var(--tinta-vermelha); border-radius: 999px; padding: 2px 8px; white-space: nowrap; } /* ============================================================ ALERTA GIGANTE ============================================================ */ .alertao-fundo { position: fixed; inset: 0; z-index: 120; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 18px; } .alertao-fundo[hidden] { display: none; } .alertao-caixa { background: var(--card); border-radius: 26px; padding: 30px 24px; width: 100%; max-width: 440px; text-align: center; box-shadow: var(--sombra-flutuante); animation: alertao-pulso .4s cubic-bezier(.32, .72, .28, 1); } @keyframes alertao-pulso { 0% { transform: scale(.86); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .alertao-icone { font-size: 4rem; line-height: 1; } .alertao-titulo { font-size: .95rem; font-weight: 700; letter-spacing: .14em; color: var(--vermelho); margin: 12px 0 12px; text-transform: uppercase; } .alertao-texto { font-size: 1.25rem; font-weight: 600; line-height: 1.45; color: var(--texto); letter-spacing: -.01em; } .alertao-extra { color: var(--texto-2); font-size: .9rem; margin-top: 10px; } .alertao-botao { font-size: 1.15rem !important; padding: 18px !important; margin-top: 20px; } @media (prefers-reduced-motion: reduce) { .alertao-caixa, .alertao-icone { animation: none; } } /* ============================================================ BOTÕES DO TOPO da aba Serviços ============================================================ */ .linha-botoes-topo { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .linha-botoes-topo .btn-emergencia { flex: 1; margin-bottom: 0; } .btn-cobrar { flex: 1; background: var(--tinta-azul); color: var(--azul); border: none; border-radius: var(--raio-controle); padding: 12px; font-weight: 700; font-size: .92rem; cursor: pointer; letter-spacing: .01em; transition: transform .15s ease, opacity .15s ease; } .btn-cobrar:active { transform: scale(.97); opacity: .8; } /* Quadro de assinatura do cliente (checklist) */ .quadro-assinatura { width: 100%; border: 2px dashed var(--separador); border-radius: 14px; touch-action: none; background: var(--card); margin-bottom: 8px; } /* ============================================================ ETAPAS DO SERVIÇO (tela Meu Serviço do mecânico) ============================================================ */ .etapas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 10px 0; } .etapa-btn { border: 1.5px solid var(--separador); background: var(--card); color: var(--texto); border-radius: 12px; padding: 13px 6px; font-weight: 600; font-size: .85rem; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; } .etapa-btn.ativa { background: var(--azul); color: #fff; border-color: var(--azul); box-shadow: 0 3px 10px var(--tinta-azul); } .etapa-btn:active { transform: scale(.96); } .etapa-btn.feita { opacity: .5; } .etapa-btn:disabled { cursor: not-allowed; } /* ============================================================ CAMPO DE FOTO ============================================================ */ .campo-foto { margin-bottom: 12px; } .btn-foto { display: block; width: 100%; text-align: left; background: var(--tinta-azul); color: var(--azul); border: 1.5px dashed var(--azul); border-radius: 12px; padding: 13px 14px; font-weight: 600; font-size: .95rem; cursor: pointer; transition: transform .15s ease, opacity .15s ease; } .btn-foto:active { transform: scale(.98); opacity: .8; } .foto-status { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; } .foto-ok { color: var(--verde); font-weight: 700; font-size: .85rem; } .foto-erro { color: var(--vermelho-escuro); font-weight: 600; font-size: .85rem; } .enviando { color: var(--laranja); font-weight: 600; font-size: .85rem; animation: piscar 1.2s infinite; } .grade-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .thumb-envio { display: flex; align-items: center; gap: 4px; } /* ============================================================ DRIVE (memória da oficina) ============================================================ */ .drive-filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; } .drive-filtros input { width: 100%; padding: 12px 13px; font-size: .95rem; border: 1px solid transparent; border-radius: 12px; background: var(--fill); color: var(--texto); } .drive-filtros input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3.5px var(--tinta-azul); } .drive-grade { margin-top: 8px; } .drive-item { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: inherit; } .drive-thumb { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; font-size: 34px; background: var(--fill); border-radius: 14px; overflow: hidden; } .drive-thumb .foto-mini { width: 72px; height: 72px; object-fit: cover; } .drive-rotulo { font-size: 11px; text-align: center; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-2); } .btn-atualizar { background: var(--fill); color: var(--azul); border: none; border-radius: 999px; font-weight: 600; padding: 10px 14px; font-size: 14px; cursor: pointer; transition: transform .15s ease, opacity .15s ease; } .btn-atualizar:active { transform: scale(.96); opacity: .7; } .btn-atualizar-topo { margin-right: 4px; } .selo-excluida { background: var(--tinta-vermelha); color: var(--vermelho-escuro); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .btn-ia { background: var(--roxo); color: #fff; border: none; margin: 4px 0 8px; } .btn-mini-apagar { background: var(--tinta-vermelha); color: var(--vermelho-escuro); } /* ============================================================ KANBAN (painel de acompanhamento) ============================================================ */ /* Kanban VERTICAL: uma etapa embaixo da outra, encostado à esquerda. */ /* Servicos: o kanban ROMPE a largura do main (720px) e usa a tela toda, as 6 colunas preenchem o espaco por igual (nada de coluna espremida). */ #listaOS { width: min(1500px, 95vw); margin-left: 50%; transform: translateX(-50%); } .kanban { display: flex; flex-direction: row; gap: 14px; padding-bottom: 12px; align-items: flex-start; } .kanban-col { flex: 1 1 220px; min-width: 0; background: var(--fill); border-radius: 16px; padding: 10px; border-top: 4px solid var(--cinza); } /* Celular: volta a empilhar (uma coluna por vez, rolando pra baixo). */ @media (max-width: 640px) { #listaOS { width: 100%; margin-left: 0; transform: none; } .kanban { flex-direction: column; } .kanban-col { flex: none; width: 100%; } } /* Cor por etapa do fluxo (identidade visual do kanban). */ .kanban-col.col-0 { border-top-color: var(--azul); } .kanban-col.col-1 { border-top-color: var(--roxo); } .kanban-col.col-2 { border-top-color: var(--laranja); } .kanban-col.col-3 { border-top-color: var(--verde-vivo); } .kanban-col.col-4 { border-top-color: var(--ciano); } .kanban-col.col-5 { border-top-color: var(--cinza); } .kanban-col.col-1 .kanban-qtd { background: var(--roxo); } .kanban-col.col-2 .kanban-qtd { background: var(--laranja); } .kanban-col.col-3 .kanban-qtd { background: var(--verde); } .kanban-col.col-4 .kanban-qtd { background: var(--ciano); } .kanban-col.col-5 .kanban-qtd { background: var(--cinza); } .kanban-titulo { font-weight: 700; color: var(--texto); font-size: 13px; padding: 4px 6px 8px; display: flex; justify-content: space-between; align-items: center; text-transform: uppercase; letter-spacing: .04em; } .kanban-qtd { background: var(--azul); color: #fff; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; } .kanban-card { background: var(--card); border-radius: 12px; padding: 9px 11px; margin-bottom: 8px; border-left: 4px solid var(--azul); box-shadow: var(--sombra-card); font-size: 13px; line-height: 1.4; cursor: pointer; transition: transform .12s ease, opacity .12s ease; } .kanban-card:active { transform: scale(.98); opacity: .85; } /* CORES PADRONIZADAS: 1 cor = 1 significado, por PRIORIDADE (corDaOS). Antes o mesmo vermelho servia p/ garantia, atraso e parada — ninguem sabia o que a cor queria dizer. */ .kanban-card.os-servico { border-left-color: var(--azul); } /* serviço normal */ .kanban-card.os-garantia { border-left-color: var(--vermelho); } /* é garantia */ .kanban-card.os-atencao { border-left-color: var(--laranja); } /* parada/atrasada/sem estoque */ .kanban-card.os-pronta { border-left-color: var(--verde-vivo); } /* pronta/entregue */ .kanban-selos .sel-garantia { background: var(--tinta-vermelha); color: var(--vermelho-escuro); } .kanban-selos .sel-alerta { background: var(--tinta-amarela); color: var(--laranja); } .kanban-selos .sel-ok { background: var(--tinta-verde); color: var(--verde-vivo); } /* Filtros da aba Servicos (natureza + etapa): pilulas que reusam o visual dos chips de Acoes; no celular rolam na horizontal em vez de quebrar a tela. */ .serv-filtros { display: flex; flex-flow: row wrap; gap: 6px; margin-bottom: 14px; } .serv-filtros .acoes-side-item { width: auto; flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--separador); border-radius: 999px; padding: 8px 13px; } .serv-filtros .acoes-side-item.ativo { border-color: var(--azul); background: var(--tinta-azul); color: var(--azul); font-weight: 600; } .serv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; } /* Legenda das cores (topo da lista de Servicos). */ .serv-legenda { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 2px 12px; } .serv-legenda span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-3); } .serv-legenda i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; } .serv-legenda .pt-servico { background: var(--azul); } .serv-legenda .pt-garantia { background: var(--vermelho); } .serv-legenda .pt-atencao { background: var(--laranja); } .serv-legenda .pt-pronta { background: var(--verde-vivo); } .kanban-selos { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; } .kanban-selos span { background: var(--tinta-vermelha); color: var(--vermelho-escuro); font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; } .kanban-vazio { color: var(--texto-3); text-align: center; font-size: 12px; padding: 8px; } .btn-ajuda-app { background: var(--fill); color: var(--azul); border: none; border-radius: var(--raio-controle); font-weight: 700; padding: 12px 14px; font-size: .92rem; cursor: pointer; transition: transform .15s ease, opacity .15s ease; } .btn-ajuda-app:active { transform: scale(.97); opacity: .8; } /* ============================================================ SKELETON LOADING (primeira carga) ============================================================ */ .skeleton { background: linear-gradient(90deg, var(--fill) 25%, var(--fill-2) 50%, var(--fill) 75%); background-size: 200% 100%; animation: brilho 1.2s infinite; border-radius: var(--raio-card); min-height: 110px; margin-bottom: 10px; } @keyframes brilho { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================================ ANIMAÇÕES LEVES ============================================================ */ .card-os, .kanban-card { animation: surgir .28s cubic-bezier(.32, .72, .28, 1); } @keyframes surgir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .card-os, .kanban-card, .modal-caixa, .toast, .alertao-caixa { animation: none; } } /* ============================================================ DESEMPENHO DA EQUIPE (podio melhor x pior + tabela) ============================================================ */ .podio { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 14px; } @media (max-width: 480px) { .podio { grid-template-columns: 1fr; } } .podio-card { border: 1px solid var(--separador); border-radius: 12px; padding: 14px; text-align: center; } .podio-card.podio-melhor { border-color: var(--verde-vivo); background: var(--tinta-verde); } .podio-card.podio-pior { border-color: var(--laranja); background: var(--tinta-amarela); } .podio-titulo { font-size: 13px; font-weight: 700; color: var(--texto-2); } .podio-nome { font-size: 17px; font-weight: 700; margin: 4px 0; } .podio-nota { font-size: 34px; font-weight: 800; line-height: 1; } .podio-nota small { font-size: 14px; font-weight: 600; color: var(--texto-3); } .podio-sub { font-size: 12px; color: var(--texto-2); margin-top: 6px; } .tab-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tab-desempenho { width: 100%; border-collapse: collapse; font-size: 13px; } .tab-desempenho th, .tab-desempenho td { padding: 8px 10px; text-align: center; white-space: nowrap; } .tab-desempenho th { color: var(--texto-3); font-weight: 600; border-bottom: 1px solid var(--separador); } .tab-desempenho td { border-bottom: 1px solid var(--separador); } .tab-desempenho td:first-child, .tab-desempenho th:first-child { text-align: left; } .pill-nota { display: inline-block; min-width: 34px; padding: 2px 8px; border-radius: 999px; background: var(--fill); font-weight: 700; } .pill-nota.destaque-verde { background: var(--tinta-verde); color: var(--verde-vivo); } .pill-nota.destaque-vermelho { background: var(--tinta-vermelha); color: var(--vermelho-escuro); } /* Referencia de tempo (previsao por veiculos iguais) no modal de orcamento. */ .ref-tempo { background: var(--tinta-azul); border: 1px solid var(--azul); border-radius: 12px; padding: 10px 12px; margin: 10px 0; font-size: 14px; line-height: 1.5; color: var(--texto); } .ref-tempo small { color: var(--texto-2); } .ref-tempo .btn-mini { margin-left: 4px; } /* Cronômetro por etapa (execução do mecânico). */ .cron-etapa { border: 1px solid var(--separador); border-radius: 12px; padding: 12px; margin: 8px 0; display: flex; flex-direction: column; gap: 8px; background: var(--card-2); } .cron-etapa.estouro { border-color: var(--vermelho); background: var(--tinta-vermelha); } .cron-topo { font-size: 15px; } .cron-topo small { color: var(--texto-3); font-weight: 400; } .cron-flag { color: var(--vermelho-escuro); font-weight: 700; margin-left: 4px; }