/* ===================================================================== ComReserva — site do cliente (mobile primeiro) As cores --cor, --cor-texto e --cor-esc vêm do banco, no . ===================================================================== */ :root{ --tinta:#0B1F13; --texto:#1D2939; --cinza:#667085; --cinza-claro:#98A2B3; --borda:#EAECF0; --fundo:#F6F8F7; --branco:#fff; --laranja:#F79009; --laranja-f:#FFFAEB; --vermelho:#F04438; --vermelho-f:#FEF3F2; --azul:#2E90FA; --azul-f:#EFF8FF; --roxo:#7A5AF8; --r:16px; --sombra:0 1px 3px rgba(16,24,40,.06); --sombra-md:0 8px 24px rgba(16,24,40,.10); --barra-baixo:68px; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0} body{ background:var(--fundo);color:var(--texto); font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; -webkit-font-smoothing:antialiased; padding-bottom:calc(var(--barra-baixo) + env(safe-area-inset-bottom)); overscroll-behavior-y:contain; } a{color:inherit;text-decoration:none} button,input,select,textarea{font-family:inherit;font-size:inherit} h1,h2,h3{margin:0;line-height:1.25;letter-spacing:-.02em} img{max-width:100%} .envolve{max-width:520px;margin:0 auto;padding:0 16px} /* ---------- Cabeçalho ---------- */ .cabeca{ background:var(--branco);border-bottom:1px solid var(--borda); position:sticky;top:0;z-index:40;padding-top:env(safe-area-inset-top); } .cabeca .dentro{ max-width:520px;margin:0 auto;padding:12px 16px; display:flex;align-items:center;gap:12px; } .logo-salao{ width:42px;height:42px;border-radius:13px;flex:0 0 42px;object-fit:cover; background:var(--cor);display:grid;place-items:center; font-weight:800;font-size:16px;color:var(--cor-texto); } .cabeca .nomes b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.3px;color:var(--tinta)} .cabeca .nomes span{font-size:12px;color:var(--cinza-claro)} .cabeca .dir{margin-left:auto;display:flex;align-items:center;gap:8px} .sino{ position:relative;width:38px;height:38px;border-radius:12px;border:1px solid var(--borda); background:var(--branco);display:grid;place-items:center;font-size:16px;cursor:pointer; } .sino .bolha{ position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:20px; background:var(--vermelho);color:#fff;font-size:10px;font-weight:800; display:grid;place-items:center;padding:0 4px; } /* ---------- Saudação ---------- */ .saudacao{padding:18px 0 6px} .saudacao .oi{font-size:12.5px;color:var(--cinza-claro);font-weight:600} .saudacao h1{font-size:23px;font-weight:800;margin-top:2px} /* ---------- Cartões ---------- */ .cartao{ background:var(--branco);border:1px solid var(--borda); border-radius:var(--r);box-shadow:var(--sombra);margin-bottom:14px;overflow:hidden; } .cartao .topo{padding:15px 16px 0;display:flex;align-items:center;gap:10px} .cartao .topo h2{font-size:16px;font-weight:800} .cartao .topo .dir{margin-left:auto} .cartao .corpo{padding:15px 16px} .secao-titulo{ display:flex;align-items:center;gap:10px;margin:22px 0 12px; } .secao-titulo h2{font-size:17px;font-weight:800} .secao-titulo a{margin-left:auto;font-size:13px;font-weight:700;color:var(--cor-esc)} /* ---------- Botões ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:13px 18px;border-radius:13px;border:1px solid var(--borda); background:var(--branco);color:var(--texto); font-weight:700;font-size:14.5px;letter-spacing:-.01em; cursor:pointer;text-align:center; box-shadow:0 1px 2px rgba(16,24,40,.05); transition:transform .14s cubic-bezier(.2,.9,.3,1), box-shadow .16s, background .14s, border-color .14s; } .btn:active{transform:scale(.975);box-shadow:0 1px 2px rgba(16,24,40,.06)} .btn .svgi{margin:-1px 0;flex:0 0 auto} /* O botão colorido é o mesmo do painel do salão: leve degradê, e brilho na cor da marca quando o dedo encosta. */ .btn-cor{ background:linear-gradient(180deg,color-mix(in srgb,var(--cor) 90%,white),var(--cor)); border-color:color-mix(in srgb,var(--cor) 78%,black); color:var(--cor-texto); box-shadow:0 2px 10px color-mix(in srgb,var(--cor) 26%,transparent); } .btn-cor:active{box-shadow:0 1px 5px color-mix(in srgb,var(--cor) 30%,transparent)} .btn-escuro{ background:linear-gradient(180deg,#1F2A24,var(--tinta)); border-color:var(--tinta);color:#fff; } .btn-vermelho{ background:linear-gradient(180deg,#F5675C,var(--vermelho)); border-color:#D92D20;color:#fff; box-shadow:0 2px 10px rgba(240,68,56,.26); } .btn-largo{width:100%} .btn-pequeno{padding:8px 13px;font-size:13px;border-radius:10px} .btn-pequeno .svgi{width:15px;height:15px} .btn[disabled]{opacity:.45;pointer-events:none;box-shadow:none} .btn-fantasma{background:transparent;border-color:var(--borda);color:var(--cinza);box-shadow:none} /* No computador o botão levanta; no celular só afunda ao toque. */ @media (hover:hover) and (pointer:fine){ .btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(16,24,40,.09)} .btn-cor:hover{ background:var(--cor); box-shadow:0 6px 18px color-mix(in srgb,var(--cor) 38%,transparent); } .btn-vermelho:hover{box-shadow:0 6px 18px rgba(240,68,56,.34)} .btn-fantasma:hover{background:var(--fundo);color:var(--texto)} } /* ---------- Atalhos rápidos ---------- */ .atalhos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px} .atalho{ background:var(--branco);border:1px solid var(--borda);border-radius:15px; padding:13px 6px 11px;text-align:center;box-shadow:var(--sombra);transition:.15s; } .atalho:active{transform:scale(.96)} .atalho .ic{ width:40px;height:40px;border-radius:13px;margin:0 auto 7px; display:grid;place-items:center;background:var(--fundo);color:var(--cinza); transition:transform .15s cubic-bezier(.2,.9,.3,1); } .atalho:active .ic{transform:scale(.92)} .atalho span{font-size:11px;font-weight:700;color:var(--texto);line-height:1.25;display:block} /* Cada atalho tem a própria cor: bate o olho e já sabe qual é qual. */ .atalho .ic.marca{background:color-mix(in srgb,var(--cor) 15%,white);color:var(--cor-esc)} .atalho .ic.roxo {background:#F1EFFE;color:#6941C6} .atalho .ic.azul {background:#E8F2FE;color:#1570EF} .atalho .ic.ambar{background:#FEF3E2;color:#B54708} .atalho .ic.ciano{background:#E4FAFE;color:#0891B2} .atalho .ic.rosa {background:#FDF2FA;color:#C11574} /* ---------- Calendário (estilo da referência) ---------- */ .calendario{background:var(--branco);border-radius:var(--r);border:1px solid var(--borda); box-shadow:var(--sombra);overflow:hidden;margin-bottom:14px} .cal-topo{ display:flex;align-items:center;gap:8px;padding:15px 16px 11px; } .cal-topo .mes{font-size:16px;font-weight:800;flex:1;text-align:center;letter-spacing:-.3px} .cal-nav{ width:33px;height:33px;border-radius:11px;border:1px solid var(--borda);background:var(--branco); display:grid;place-items:center;font-size:15px;color:var(--cinza);cursor:pointer;flex:0 0 33px; } .cal-nav:disabled{opacity:.35;cursor:not-allowed} .cal-semana{ display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px; padding:0 10px 6px; } .cal-semana span{ text-align:center;font-size:10px;font-weight:800;color:var(--cinza-claro); text-transform:uppercase;letter-spacing:.06em;padding:5px 0; } .cal-grade{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;padding:0 10px 14px} .cal-dia{ aspect-ratio:1;border:0;background:transparent;border-radius:12px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; font-size:14px;font-weight:700;color:var(--texto);cursor:pointer;transition:.14s;position:relative; } .cal-dia:disabled{color:var(--cinza-claro);opacity:.42;cursor:not-allowed} .cal-dia.vazio{visibility:hidden} .cal-dia .ponto{width:4px;height:4px;border-radius:50%;background:var(--cor)} .cal-dia:disabled .ponto{display:none} .cal-dia:not(:disabled):hover{background:var(--fundo)} .cal-dia.hoje{box-shadow:inset 0 0 0 1.5px var(--borda)} .cal-dia.escolhido{background:var(--cor);color:var(--cor-texto);box-shadow:none} .cal-dia.escolhido .ponto{background:var(--cor-texto);opacity:.75} /* Faixa horizontal de dias (topo da agenda) */ .faixa-dias{ display:flex;gap:8px;overflow-x:auto;padding:4px 16px 14px; scrollbar-width:none;-webkit-overflow-scrolling:touch; } .faixa-dias::-webkit-scrollbar{display:none} .dia-pilula{ flex:0 0 auto;min-width:52px;padding:10px 8px;border-radius:15px; background:var(--branco);border:1px solid var(--borda);text-align:center;cursor:pointer;transition:.15s; } .dia-pilula small{display:block;font-size:10px;font-weight:800;color:var(--cinza-claro);text-transform:uppercase} .dia-pilula b{display:block;font-size:17px;font-weight:800;margin-top:3px;letter-spacing:-.03em} .dia-pilula.on{background:var(--cor);border-color:var(--cor);color:var(--cor-texto)} .dia-pilula.on small{color:var(--cor-texto);opacity:.8} .dia-pilula:disabled{opacity:.36;cursor:not-allowed} /* ---------- Horários ---------- */ .horarios{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px} .horario{ padding:12px 4px;border-radius:12px;border:1px solid var(--borda);background:var(--branco); font-weight:700;font-size:14px;cursor:pointer;transition:.14s;text-align:center; } .horario:active{transform:scale(.96)} .horario.on{background:var(--cor);border-color:var(--cor);color:var(--cor-texto)} /* ---------- Lista de agendamentos ---------- */ .agenda-item{ display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--borda); align-items:flex-start; } .agenda-item:last-child{border-bottom:0} .agenda-item .risco{width:4px;border-radius:4px;align-self:stretch;flex:0 0 4px;min-height:44px} .agenda-item .meio{flex:1;min-width:0} .agenda-item .tit{font-weight:800;font-size:14.5px;margin-bottom:4px} .agenda-item .sub{font-size:12.5px;color:var(--cinza);display:flex;flex-wrap:wrap;gap:4px 10px} .agenda-item .pilulas{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap} .pilula{ background:var(--fundo);border-radius:20px;padding:4px 11px; font-size:11.5px;font-weight:700;color:var(--cinza); } .pilula.forte{background:var(--cor);color:var(--cor-texto)} .selo{ display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:3px 10px; font-size:11px;font-weight:800;white-space:nowrap; } .selo::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor} .selo.ok{background:#EAFDEE;color:#0A7A28} .selo.espera{background:var(--laranja-f);color:#B54708} .selo.feito{background:var(--azul-f);color:#175CD3} .selo.ruim{background:var(--vermelho-f);color:#B42318} .selo.cinza{background:var(--fundo);color:var(--cinza)} /* ---------- Serviços ---------- */ .servico{ display:flex;align-items:center;gap:12px;padding:13px 15px; border:1px solid var(--borda);border-radius:14px;background:var(--branco); margin-bottom:9px;cursor:pointer;transition:.14s; } .servico.on{border-color:var(--cor);background:color-mix(in srgb,var(--cor) 8%,white)} .servico .marca{ width:23px;height:23px;border-radius:8px;border:2px solid var(--borda);flex:0 0 23px; display:grid;place-items:center;font-size:12px;color:transparent;transition:.14s; } .servico.on .marca{background:var(--cor);border-color:var(--cor);color:var(--cor-texto)} .servico .info{flex:1;min-width:0} .servico .info b{display:block;font-size:14.5px;font-weight:700} .servico .info small{font-size:12px;color:var(--cinza-claro)} .servico .preco{font-weight:800;font-size:14.5px;white-space:nowrap} /* ---------- Resumo fixo no rodapé ---------- */ .resumo-fixo{ position:fixed;left:0;right:0;bottom:calc(var(--barra-baixo) + env(safe-area-inset-bottom)); background:var(--branco);border-top:1px solid var(--borda);padding:12px 16px;z-index:35; box-shadow:0 -6px 20px rgba(16,24,40,.07);transform:translateY(120%);transition:transform .25s; } .resumo-fixo.mostra{transform:none} .resumo-fixo .dentro{max-width:520px;margin:0 auto;display:flex;align-items:center;gap:12px} .resumo-fixo .txt{flex:1;min-width:0} .resumo-fixo .txt b{display:block;font-size:14px} .resumo-fixo .txt small{font-size:12px;color:var(--cinza)} /* ---------- Barra inferior ---------- */ .barra-baixo{ position:fixed;left:0;right:0;bottom:0;background:var(--branco); border-top:1px solid var(--borda);z-index:45; padding-bottom:env(safe-area-inset-bottom); } .barra-baixo .dentro{ max-width:520px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr); } .barra-baixo a{ padding:9px 2px 8px;text-align:center;color:var(--cinza-claro);transition:.14s; } .barra-baixo a .ic{font-size:19px;display:block;line-height:1.35} .barra-baixo a span{font-size:9.5px;font-weight:700;display:block} .barra-baixo a.on{color:var(--cor-esc)} .barra-baixo a.on .ic{transform:translateY(-1px)} /* ---------- Chat ---------- */ .chat-tela{ position:fixed;inset:0;background:var(--fundo);z-index:60;display:flex;flex-direction:column; } .chat-topo{ background:var(--branco);border-bottom:1px solid var(--borda); padding:calc(11px + env(safe-area-inset-top)) 14px 11px; display:flex;align-items:center;gap:11px;flex:0 0 auto; } .chat-topo .voltar{background:none;border:0;color:var(--texto);cursor:pointer;padding:0 3px; display:grid;place-items:center} .chat-topo .quem b{display:block;font-size:14.5px;font-weight:800} .chat-topo .quem small{font-size:11.5px;color:#12B76A;font-weight:600} .chat-topo .acoes{margin-left:auto;display:flex;gap:7px} .chat-corpo{ flex:1;overflow-y:auto;padding:16px 14px; display:flex;flex-direction:column;gap:9px; -webkit-overflow-scrolling:touch; } .msg{max-width:82%;display:flex;flex-direction:column;gap:5px} .msg.eu{align-self:flex-end;align-items:flex-end} .msg.robo{align-self:flex-start} .bolha{ padding:11px 14px;border-radius:17px;font-size:14.5px;line-height:1.5; white-space:pre-wrap;word-break:break-word; } .msg.robo .bolha{background:var(--branco);border:1px solid var(--borda);border-bottom-left-radius:5px} .msg.eu .bolha{background:var(--cor);color:var(--cor-texto);border-bottom-right-radius:5px} .msg .hora{font-size:10.5px;color:var(--cinza-claro);padding:0 5px} .digitando{ align-self:flex-start;background:var(--branco);border:1px solid var(--borda); border-radius:17px;border-bottom-left-radius:5px;padding:14px 16px;display:flex;gap:4px; } .digitando i{width:7px;height:7px;border-radius:50%;background:var(--cinza-claro);animation:pula 1.3s infinite} .digitando i:nth-child(2){animation-delay:.18s} .digitando i:nth-child(3){animation-delay:.36s} @keyframes pula{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}} .chat-botoes{display:flex;flex-wrap:wrap;gap:7px;margin-top:3px} .chat-botao{ padding:8px 14px;border-radius:20px;border:1.5px solid var(--cor); background:var(--branco);color:var(--cor-esc);font-size:13px;font-weight:700;cursor:pointer; } .chat-botao:active{background:var(--cor);color:var(--cor-texto)} .chat-pe{ background:var(--branco);border-top:1px solid var(--borda); padding:10px 12px calc(10px + env(safe-area-inset-bottom)); display:flex;gap:9px;align-items:flex-end;flex:0 0 auto; } .chat-pe textarea{ flex:1;border:1px solid var(--borda);border-radius:20px;padding:11px 15px; resize:none;max-height:110px;font-size:15px;line-height:1.4;background:var(--fundo); } .chat-pe textarea:focus{outline:none;border-color:var(--cor);background:var(--branco)} .chat-enviar{ width:44px;height:44px;border-radius:50%;border:0;background:var(--cor);color:var(--cor-texto); font-size:17px;cursor:pointer;flex:0 0 44px;display:grid;place-items:center; } .chat-enviar:disabled{opacity:.4} /* ---------- PIX / redes ---------- */ .copiar-caixa{ display:flex;align-items:center;gap:10px;background:var(--fundo); border:1px dashed var(--borda);border-radius:13px;padding:12px 14px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px; word-break:break-all;line-height:1.5; } .rede{ display:flex;align-items:center;gap:12px;padding:13px 15px; border:1px solid var(--borda);border-radius:14px;background:var(--branco);margin-bottom:9px; } .rede .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:17px;flex:0 0 38px} .rede .txt{flex:1;min-width:0} .rede .txt b{display:block;font-size:14px;font-weight:700} .rede .txt small{font-size:12px;color:var(--cinza-claro)} .rede .seta{color:var(--cinza-claro);font-size:16px} /* ---------- Avisos ---------- */ .recado{ border-radius:13px;padding:13px 15px;margin:14px 0;font-size:13.5px; display:flex;gap:10px;align-items:flex-start;line-height:1.5; } .recado.ok{background:#EAFDEE;border:1px solid #B6F5C1;color:#05603A} .recado.erro{background:var(--vermelho-f);border:1px solid #FECDCA;color:#B42318} .recado.info{background:var(--azul-f);border:1px solid #B9E6FE;color:#026AA2} .recado.atencao{background:var(--laranja-f);border:1px solid #FEDF89;color:#B54708} .vazio{text-align:center;padding:44px 22px;color:var(--cinza)} .vazio .ic{font-size:38px;margin-bottom:12px;opacity:.32} .vazio h3{font-size:15.5px;margin-bottom:6px;color:var(--texto)} .vazio p{margin:0 0 16px;font-size:13.5px;line-height:1.55} /* ---------- Formulários ---------- */ .campo{margin-bottom:14px} .campo label{display:block;font-weight:700;font-size:12.5px;margin-bottom:6px} .campo input,.campo select,.campo textarea{ width:100%;padding:13px 15px;border:1px solid var(--borda);border-radius:13px; background:var(--branco);font-size:16px; /* 16px evita o zoom automático no iPhone */ } .campo input:focus,.campo select:focus,.campo textarea:focus{ outline:none;border-color:var(--cor);box-shadow:0 0 0 3px color-mix(in srgb,var(--cor) 22%,transparent); } .campo .dica{font-size:12px;color:var(--cinza-claro);margin-top:6px;line-height:1.45} /* ---------- Tela de login do cliente ---------- */ .tela-entrada{ min-height:100vh;min-height:100dvh;background:var(--cor); display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 0; } .entrada-topo{ flex:0 0 auto;text-align:center;padding:46px 22px 30px; } .entrada-topo .marca{ width:88px;height:88px;border-radius:27px;margin:0 auto 16px; background:rgba(255,255,255,.22);backdrop-filter:blur(6px); display:grid;place-items:center;font-size:38px;font-weight:800; color:var(--cor-texto);overflow:hidden; } .entrada-topo .marca img{width:100%;height:100%;object-fit:cover} .entrada-topo h1{font-size:25px;font-weight:800;color:var(--cor-texto);letter-spacing:-.4px} .entrada-topo p{margin:7px 0 0;font-size:14px;color:var(--cor-texto);opacity:.78} .entrada-folha{ flex:1;background:var(--branco);border-radius:28px 28px 0 0; padding:26px 22px calc(30px + env(safe-area-inset-bottom)); box-shadow:0 -8px 30px rgba(0,0,0,.12); } .abas-entrada{ display:flex;background:var(--fundo);border-radius:13px;padding:4px;margin-bottom:22px; } .abas-entrada button{ flex:1;padding:10px;border:0;background:transparent;border-radius:10px; font-weight:700;font-size:14px;color:var(--cinza);cursor:pointer;transition:.15s; } .abas-entrada button.on{background:var(--branco);color:var(--tinta);box-shadow:var(--sombra)} /* ---------- Diversos ---------- */ .veu{ position:fixed;inset:0;background:rgba(11,31,19,.5);z-index:70; display:none;align-items:flex-end;justify-content:center; } .veu.mostra{display:flex} .folha{ background:var(--branco);border-radius:24px 24px 0 0;width:100%;max-width:520px; max-height:88vh;overflow-y:auto;padding:8px 18px calc(22px + env(safe-area-inset-bottom)); animation:sobe .26s cubic-bezier(.2,.9,.3,1); } @keyframes sobe{from{transform:translateY(100%)}to{transform:none}} .folha .pega{width:38px;height:4px;border-radius:4px;background:var(--borda);margin:8px auto 16px} .folha h3{font-size:17px;font-weight:800;margin-bottom:6px} .folha p.sub{margin:0 0 18px;color:var(--cinza);font-size:13.5px;line-height:1.5} .carregando{ display:inline-block;width:17px;height:17px;border:2.5px solid rgba(255,255,255,.35); border-top-color:currentColor;border-radius:50%;animation:gira .7s linear infinite; } @keyframes gira{to{transform:rotate(360deg)}} @media (min-width:560px){ body{padding-bottom:24px} .barra-baixo{position:static;border-top:0;border-radius:0 0 var(--r) var(--r);margin-top:20px} .resumo-fixo{bottom:0} } /* ---------- Cartela de fidelidade ---------- */ .cartela{ border-color:color-mix(in srgb,var(--cor) 32%,var(--borda)); background:linear-gradient(150deg,color-mix(in srgb,var(--cor) 9%,white),var(--branco) 62%); } .cartela.completa{ border:0; background:linear-gradient(145deg,#34D95A,#0FA43A); box-shadow:0 10px 30px -8px rgba(28,190,70,.62); color:#fff; animation:premio-brilha 2.4s ease-in-out infinite; } .cartela.completa .corpo > div > div > div{color:#fff !important} .cartela.completa .selo-fid{ background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.55);color:#fff; } .cartela.completa .selo-fid.feito{background:#fff;border-color:#fff;color:#0FA43A} .cartela.completa .btn-cor{background:#fff;border-color:#fff;color:#0B7A2B} @keyframes premio-brilha{ 0%,100%{box-shadow:0 10px 30px -8px rgba(28,190,70,.62)} 50% {box-shadow:0 14px 42px -6px rgba(28,190,70,.85)} } @media (prefers-reduced-motion:reduce){.cartela.completa{animation:none}} .selos{display:flex;flex-wrap:wrap;gap:7px} .selo-fid{ width:32px;height:32px;border-radius:50%;display:grid;place-items:center; font-size:12.5px;font-weight:800;background:var(--branco); border:1.5px dashed color-mix(in srgb,var(--cor) 40%,var(--borda));color:var(--cinza-claro); } .selo-fid.feito{ background:var(--cor);border:1.5px solid var(--cor);color:var(--cor-texto); } /* ---------- Ícones desenhados no site do cliente ---------- */ .svgi{display:block;flex:0 0 auto} .atalho .ic .svgi,.rede .ic .svgi{margin:0} .barra-baixo a .ic{display:grid;place-items:center;height:24px;margin-bottom:2px} .barra-baixo a .ic .svgi{transition:transform .16s cubic-bezier(.2,.9,.3,1)} .barra-baixo a.on .ic .svgi{transform:translateY(-1px) scale(1.06)} .sino{color:var(--cinza)} .sino .svgi{margin:0} /* ---------- Sem zoom ao tocar num campo ---------- */ /* O Safari do iPhone amplia sozinho quando a fonte é menor que 16px. */ input,select,textarea,button{font-size:16px} .chat-pe textarea{font-size:16px} .horario,.dia-pilula b{font-size:16px} /* ===================================================================== TEMA ESCURO Ligado pelo salão em Meu salão → Identidade. Só os tokens mudam; nenhum componente precisa saber qual tema está no ar. ===================================================================== */ body.escuro{ --tinta:#F2F6F3; --texto:#E4EAE6; --cinza:#9BAAA2; --cinza-claro:#6F8078; --borda:#25332C; --fundo:#0C1411; --branco:#141F1A; --laranja-f:#2A2010; --vermelho-f:#2B1513; --azul-f:#0F2233; } body.escuro .cartao, body.escuro .calendario, body.escuro .servico, body.escuro .rede, body.escuro .folha, body.escuro .dia-pilula, body.escuro .horario, body.escuro .atalho{background:var(--branco);border-color:var(--borda)} body.escuro .cabeca, body.escuro .barra-baixo, body.escuro .chat-topo, body.escuro .chat-pe, body.escuro .resumo-fixo{background:var(--branco);border-color:var(--borda)} body.escuro .chat-tela{background:var(--fundo)} body.escuro .msg.robo .bolha{background:var(--branco);border-color:var(--borda);color:var(--texto)} body.escuro .digitando{background:var(--branco);border-color:var(--borda)} body.escuro .campo input, body.escuro .campo select, body.escuro .campo textarea, body.escuro .chat-pe textarea{background:#0F1A15;border-color:var(--borda);color:var(--texto)} body.escuro .copiar-caixa, body.escuro .atalho .ic{background:#0F1A15;border-color:var(--borda)} body.escuro .selo.cinza, body.escuro .pilula{background:#1B2822;color:var(--cinza)} body.escuro .btn{background:var(--branco);border-color:var(--borda);color:var(--texto)} body.escuro .btn-fantasma{background:transparent} body.escuro .cal-dia:not(:disabled):hover{background:#1B2822} body.escuro .entrada-folha{background:var(--branco)} body.escuro .abas-entrada{background:#0F1A15} body.escuro .abas-entrada button.on{background:var(--branco);color:var(--tinta)} body.escuro .cartela{background:linear-gradient(150deg,color-mix(in srgb,var(--cor) 16%,#141F1A),var(--branco) 62%)} body.escuro .selo-fid{background:#0F1A15} /* --------------------------------------------------------------------- Marcar horário — o bloco principal da tela inicial O calendário fica aberto de propósito: quem abre o app quer marcar, e não deve ter que procurar onde se marca. ------------------------------------------------------------------ */ .marcar{ background:var(--branco);border:1px solid var(--borda);border-radius:20px; box-shadow:0 3px 16px rgba(16,24,40,.07);overflow:hidden;margin-bottom:18px; border-top:3px solid var(--cor); } .marcar-topo{ display:flex;align-items:center;gap:12px;padding:15px 16px 13px; background:linear-gradient(180deg,color-mix(in srgb,var(--cor) 10%,white),transparent); } .marcar-ic{ width:42px;height:42px;flex:0 0 42px;border-radius:14px;display:grid;place-items:center; background:linear-gradient(150deg,color-mix(in srgb,var(--cor) 88%,white),var(--cor)); color:var(--cor-texto); box-shadow:0 3px 12px color-mix(in srgb,var(--cor) 40%,transparent); } .marcar-txt{flex:1;min-width:0} .marcar-txt b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.02em} .marcar-txt span{display:block;font-size:12.5px;color:var(--cinza);margin-top:1px} .marcar .cal-topo{padding-top:6px} .marcar .cal-grade{padding-bottom:10px} .cal-legenda{ display:flex;gap:14px;flex-wrap:wrap;align-items:center; padding:11px 16px 14px;border-top:1px solid var(--borda); font-size:11.5px;color:var(--cinza); } .cal-legenda span{display:flex;align-items:center;gap:6px} .cal-legenda .fraco{opacity:.6;margin-left:auto} .cal-legenda i{display:block;flex:0 0 auto} .cal-legenda .pt-vaga{width:6px;height:6px;border-radius:50%;background:var(--cor)} .cal-legenda .pt-meu{width:10px;height:10px;border-radius:4px;background:#2FDC46} /* Dias com vaga ganham um contorno leve: dá para ver onde tocar antes mesmo de reparar no pontinho. */ .cal-dia{border:1px solid transparent} a.cal-dia{box-shadow:none} a.cal-dia:not(.escolhido){border-color:color-mix(in srgb,var(--cor) 26%,transparent)} a.cal-dia:not(.escolhido):active{background:color-mix(in srgb,var(--cor) 14%,white);transform:scale(.94)} .cal-dia.hoje{box-shadow:inset 0 0 0 1.5px var(--cinza-claro)} .cal-nav{color:var(--cinza);text-decoration:none} .cal-nav:active{background:var(--fundo)} .cartela-ic{display:inline-flex;align-items:center} /* ===================================================================== Agendar em passos --------------------------------------------------------------------- Cada passo é um bloco numerado. O que ainda não chegou a vez fica apagado — dá para ver que existe, mas não puxa a atenção. ===================================================================== */ .passo{ background:var(--branco);border:1px solid var(--borda);border-radius:18px; box-shadow:var(--sombra);overflow:hidden;margin-bottom:14px; transition:opacity .25s, filter .25s; } .passo.dormindo{opacity:.5;filter:saturate(.35);pointer-events:none} .passo-cabeca{ display:flex;align-items:center;gap:11px;padding:14px 16px; border-bottom:1px solid var(--borda); } .passo-cabeca > .svgi{color:var(--cinza-claro);flex:0 0 auto} .passo-n{ width:26px;height:26px;flex:0 0 26px;border-radius:9px;display:grid;place-items:center; background:linear-gradient(150deg,color-mix(in srgb,var(--cor) 88%,white),var(--cor)); color:var(--cor-texto);font-size:13px;font-weight:800; box-shadow:0 2px 7px color-mix(in srgb,var(--cor) 34%,transparent); } .passo.dormindo .passo-n{background:var(--cinza-claro);box-shadow:none} .passo-txt{flex:1;min-width:0} .passo-txt b{display:block;font-size:15px;font-weight:800;letter-spacing:-.02em} .passo-txt span{ display:block;font-size:12.5px;color:var(--cor-esc);font-weight:600;margin-top:1px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .passo.dormindo .passo-txt span{color:var(--cinza-claro);font-weight:500} .passo-corpo{padding:15px 16px} .dica-passo{margin:0;text-align:center;color:var(--cinza);font-size:13.5px;line-height:1.6;padding:8px 0} /* A faixa de dias sangra até a borda para caber mais dia na tela. */ .passo .faixa-dias{padding:13px 16px 4px} .calendario.embutido{border:0;box-shadow:none;border-radius:0;margin:0; border-top:1px solid var(--borda)} .calendario.embutido .cal-topo{padding-top:12px} .cal-carregando{ grid-column:1/-1;text-align:center;padding:26px;color:var(--cinza-claro);font-size:13px; } /* Aviso de que o serviço não coube no horário escolhido */ .encaixe{ margin-top:13px;padding:12px 14px;border-radius:12px; background:var(--laranja-f);border:1px solid #FEDF89;color:#93370D; font-size:13px;line-height:1.5; } .encaixe b{display:block;font-weight:800;margin-bottom:2px} .encaixe.ruim{background:var(--vermelho-f);border-color:#FECDCA;color:#B42318} .resumo-conf{ padding:14px 15px;border-radius:13px;background:var(--fundo); border:1px solid var(--borda);font-size:14px;line-height:1.6; } .resumo-conf > b{display:block;font-size:15.5px;font-weight:800;margin-bottom:3px} .resumo-conf span{display:block;color:var(--cinza)} .pronto-ico{ width:70px;height:70px;margin:6px auto 14px;border-radius:50%;display:grid;place-items:center; background:color-mix(in srgb,var(--cor) 16%,white);color:var(--cor-esc); } .pronto-ico.espera{background:var(--laranja-f);color:#B54708} .rodape-agendar{ text-align:center;font-size:12.5px;color:var(--cinza); margin:18px 0 8px;line-height:1.9; } .rodape-agendar a{ color:var(--cor-esc);font-weight:700;display:inline-flex;align-items:center;gap:4px; vertical-align:middle; } /* Horários: alvo grande o bastante para o dedo, e um brilho ao escolher */ .horario{box-shadow:0 1px 2px rgba(16,24,40,.04);min-height:46px} .horario.on{box-shadow:0 3px 12px color-mix(in srgb,var(--cor) 34%,transparent)} .servico .marca .svgi{width:13px;height:13px} .servico.on{box-shadow:0 2px 10px color-mix(in srgb,var(--cor) 20%,transparent)} /* A barra de baixo é estreita: o texto não pode empurrar o botão. */ .resumo-fixo .txt b, .resumo-fixo .txt small{ display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .resumo-fixo .btn{flex:0 0 auto} /* Setas das listas: ícone em vez de caractere, para alinhar direito. */ .rede .seta,.linha-lista .seta{display:grid;place-items:center;color:var(--cinza-claro);flex:0 0 auto} .rede .ic .svgi,.linha-lista .ic .svgi{display:block} /* O título e o botão dividem uma linha estreita: nada pode transbordar. */ .marcar-topo .btn{padding:9px 13px;font-size:13px} .marcar-txt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Ícones dentro dos recados e dos estados vazios */ .recado > .svgi{flex:0 0 auto;margin-top:1px} .vazio .ic{opacity:1;color:var(--cinza-claro);display:grid;place-items:center;font-size:0} .vazio .ic .svgi{opacity:.45} .pilula .svgi{margin:-1px 2px -1px 0;vertical-align:middle}