/* --------------------------------------------------------------- Estilo compartilhado: cliente, painel do dono e painel da plataforma As cores vivem em variaveis para o salao poder se pintar. O tema escolhido entra como data-tema no , e cada bloco abaixo so troca as variaveis — nenhuma regra de layout depende do tema. Assim tema novo custa seis linhas, e nao uma revisao da folha inteira. --------------------------------------------------------------- */ :root { --bg: #f7f4f8; --card: #ffffff; --ink: #2b2430; --muted: #7d7288; --line: #ebe3ee; --primary: #8e3d7f; --primary-dark: #742f68; --primary-soft: #f6ecf4; --topo-2: #5c2a6b; --ok: #1f8a5f; --ok-soft: #e6f5ee; --warn: #b4771a; --warn-soft: #fdf2e0; --danger: #c03a3a; --danger-soft: #fbeaea; --radius: 16px; --shadow: 0 1px 2px rgba(43, 36, 48, .05), 0 10px 30px rgba(43, 36, 48, .07); --shadow-alto: 0 2px 6px rgba(43, 36, 48, .08), 0 18px 44px rgba(43, 36, 48, .12); --titulo: Georgia, "Iowan Old Style", "Palatino Linotype", serif; } /* ---------- temas ---------- */ [data-tema="verde"] { --bg: #f4f7f2; --ink: #23301f; --muted: #6d7d69; --line: #e2ebde; --primary: #3f7d4e; --primary-dark: #2f6440; --primary-soft: #eaf3e9; --topo-2: #1f4a35; } [data-tema="rose"] { --bg: #fbf5f4; --ink: #33242a; --muted: #8b7178; --line: #f0e2e2; --primary: #b2596a; --primary-dark: #914656; --primary-soft: #fbeced; --topo-2: #7d3348; } [data-tema="areia"] { --bg: #faf7f1; --ink: #322c22; --muted: #857b6b; --line: #ece5d8; --primary: #a07542; --primary-dark: #825e34; --primary-soft: #f7efe3; --topo-2: #6b4b2a; } [data-tema="azul"] { --bg: #f2f6fa; --ink: #1f2a35; --muted: #6b7a89; --line: #dfe8f1; --primary: #2f6d99; --primary-dark: #24567a; --primary-soft: #e8f1f8; --topo-2: #1b3d5c; } [data-tema="carvao"] { --bg: #f5f5f6; --ink: #23242a; --muted: #74767f; --line: #e4e4e8; --primary: #3d3f4a; --primary-dark: #2b2d36; --primary-soft: #ececed; --topo-2: #191a20; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.6 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0 0 .4rem; line-height: 1.25; font-weight: 650; } h1 { font-size: 1.65rem; font-family: var(--titulo); font-weight: 600; letter-spacing: -.01em; } h2 { font-size: 1.2rem; font-family: var(--titulo); font-weight: 600; } h3 { font-size: 1rem; } p { margin: 0 0 .6rem; } a { color: var(--primary); } .wrap { max-width: 720px; margin: 0 auto; padding: 0 16px 64px; } .wrap-lg { max-width: 1080px; } /* ---------- topo ---------- */ /* O ornamento e um SVG embutido em data:, e nao um arquivo: a politica de seguranca do site so aceita imagem propria ou data:, e assim nao ha requisicao a servidor de terceiro na pagina da cliente. */ .topo { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--primary), var(--topo-2)); color: #fff; padding: 30px 0 34px; } .topo::after { content: ""; position: absolute; inset: 0; background-repeat: repeat; opacity: .16; pointer-events: none; } [data-ornamento="folhas"] .topo::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M20 96c0-18 10-30 26-34-2 18-11 30-26 34z'/%3E%3Cpath d='M20 96c10-8 17-19 20-30'/%3E%3Cpath d='M96 30c0 16-9 27-23 30 2-16 10-27 23-30z'/%3E%3Cpath d='M96 30c-9 7-15 17-18 27'/%3E%3Cpath d='M58 70c8-6 12-14 12-24'/%3E%3Cpath d='M70 46c-9 3-13 12-12 24 8-2 12-11 12-24z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 150px 150px; } [data-ornamento="ondas"] .topo::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='60' viewBox='0 0 160 60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cpath d='M0 30c20-16 40-16 60 0s40 16 60 0 40-16 40 0'/%3E%3Cpath d='M0 52c20-16 40-16 60 0s40 16 60 0 40-16 40 0'/%3E%3C/g%3E%3C/svg%3E"); background-size: 190px 70px; } [data-ornamento="bolhas"] .topo::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.3'%3E%3Ccircle cx='24' cy='28' r='13'/%3E%3Ccircle cx='78' cy='62' r='19'/%3E%3Ccircle cx='90' cy='18' r='7'/%3E%3Ccircle cx='38' cy='84' r='9'/%3E%3C/g%3E%3C/svg%3E"); background-size: 140px 140px; } .topo > * { position: relative; z-index: 1; } .topo .wrap { padding-bottom: 0; } .topo h1 { color: #fff; font-size: 1.9rem; } .topo .sub { opacity: .88; font-size: .9rem; margin-top: 2px; } .topo-linha { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } /* Frase que o salao escreve. Fica sob o nome, no lugar onde o olho ja esta. */ .chamada { margin-top: 10px; font-family: var(--titulo); font-size: 1.02rem; font-style: italic; opacity: .93; max-width: 46ch; } /* No celular o topo precisa caber sem empurrar o formulario para fora da tela. Nome menor, endereco discreto e o botao encolhido: o que importa na primeira dobra e o campo de nome, nao o cabecalho. */ @media (max-width: 520px) { .topo { padding: 20px 0 22px; } .topo h1 { font-size: 1.45rem; } .topo .sub { font-size: .82rem; opacity: .82; } .chamada { font-size: .95rem; margin-top: 8px; } .aba { padding: 8px 13px; font-size: .84rem; } .card { padding: 18px; } .btn-largo { padding: 14px; } } /* ---------- cartões ---------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin: 18px 0; box-shadow: var(--shadow); } .card.compacto { padding: 15px; } .card-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } /* ---------- formulários ---------- */ label { display: block; font-size: .85rem; font-weight: 600; color: var(--muted); margin: 14px 0 6px; } input, select, textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink); font: inherit; transition: border-color .15s, box-shadow .15s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } textarea { min-height: 76px; resize: vertical; } .linha { display: flex; gap: 12px; flex-wrap: wrap; } .linha > * { flex: 1 1 150px; min-width: 0; } .dica { font-size: .82rem; color: var(--muted); margin-top: 6px; } /* ---------- botões ---------- */ button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 20px; border: 1px solid transparent; border-radius: 11px; background: var(--primary); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .15s, transform .12s, box-shadow .15s, opacity .15s; } button:hover, .btn:hover { background: var(--primary-dark); } button:active { transform: translateY(1px); } button:disabled { opacity: .5; cursor: not-allowed; transform: none; } .btn-claro { background: #fff; color: var(--ink); border-color: var(--line); } .btn-claro:hover { background: var(--primary-soft); border-color: var(--primary); } .btn-perigo { background: var(--danger); } .btn-perigo:hover { background: #a32f2f; } .btn-pequeno { padding: 8px 13px; font-size: .85rem; border-radius: 9px; } .btn-largo { width: 100%; padding: 15px; font-size: 1.02rem; } .btn-texto { background: none; color: var(--primary); border: none; padding: 6px 8px; } .btn-texto:hover { background: var(--primary-soft); } .acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; } /* ---------- avisos ---------- */ .aviso { padding: 12px 15px; border-radius: 11px; font-size: .9rem; margin: 12px 0; } .aviso-erro { background: var(--danger-soft); color: #8d2a2a; } .aviso-ok { background: var(--ok-soft); color: #146648; } .aviso-info { background: var(--primary-soft); color: var(--primary-dark); } .aviso-atencao { background: var(--warn-soft); color: #8a5a12; } .vazio { text-align: center; color: var(--muted); padding: 30px 12px; } /* ---------- etapas do agendamento ---------- */ .passos { display: flex; gap: 6px; margin: 22px 0 6px; } .passo { flex: 1; height: 5px; border-radius: 3px; background: var(--line); transition: background .25s; } .passo.feito { background: var(--primary); } .passo-nome { font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; } /* ---------- opções (serviço / profissional) ---------- */ .opcoes { display: grid; gap: 11px; } .opcao { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: 13px; background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(43,36,48,.04); } .opcao:hover { background: var(--primary-soft); border-color: var(--primary); box-shadow: var(--shadow); } .opcao.ativa { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px var(--primary-soft); } .opcao b { display: block; font-weight: 650; font-size: 1.02rem; } .opcao small { color: var(--muted); font-weight: 400; } .opcao .preco { color: var(--primary); font-weight: 700; white-space: nowrap; font-size: 1.05rem; } /* ---------- grade de horários ---------- */ /* Alvos grandes de proposito: quem marca esta com uma mao so, no celular. */ .grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 9px; } .hora { padding: 14px 4px; border-radius: 11px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font-weight: 600; font-size: 1rem; } .hora:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-soft); } .hora.ativa { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--shadow); } .hora:disabled { background: var(--bg); color: #b9b0be; text-decoration: line-through; border-style: dashed; } .legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); margin-top: 14px; } .legenda span { display: flex; align-items: center; gap: 6px; } .bolinha { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--line); display: inline-block; } .bolinha.livre { background: #fff; } .bolinha.cheia { background: var(--bg); border-style: dashed; } /* ---------- dias ---------- */ .dias { display: flex; gap: 8px; flex-wrap: wrap; } .dia { padding: 10px 15px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-size: .87rem; font-weight: 600; color: var(--muted); } .dia.on { background: var(--primary); border-color: var(--primary); color: #fff; } /* ---------- onde fica o salão ---------- */ .mapa { margin-top: 4px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--primary-soft); } /* Palco do mapa: janela fixa por onde se ve a grade de pedacos, que e maior que ela. A grade e deslocada pelo JS para o salao cair no centro. */ .mapa-palco { position: relative; height: 200px; overflow: hidden; background: var(--primary-soft); } .mapa-grade { position: absolute; display: grid; } .mapa-grade img { display: block; } /* Alfinete desenhado em CSS: um circulo com um rabo, no centro exato. */ .mapa-alfinete { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -26px 0 0 -11px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--primary); border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); } .mapa-alfinete::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #fff; } /* Credito da licenca do mapa. Obrigatorio, e discreto de proposito. */ .mapa-credito { position: absolute; right: 0; bottom: 0; padding: 2px 7px; background: rgba(255,255,255,.82); color: #555; font-size: .68rem; border-top-left-radius: 6px; } .mapa-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; background: #fff; font-size: .88rem; } .mapa-rodape span { color: var(--muted); } /* ---------- listas / agenda ---------- */ .item { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; border-top: 1px solid var(--line); } .item:first-child { border-top: none; } .item .hora-col { min-width: 62px; font-weight: 700; color: var(--primary); } .item .corpo { flex: 1; min-width: 0; } .item .corpo b { display: block; } .item .corpo small { color: var(--muted); display: block; } .item.cancelado { opacity: .55; } .item.cancelado .corpo b { text-decoration: line-through; } .tag { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .tag-agendado { background: var(--primary-soft); color: var(--primary-dark); } .tag-concluido { background: var(--ok-soft); color: #146648; } .tag-cancelado { background: var(--danger-soft); color: #8d2a2a; } .tag-faltou { background: var(--warn-soft); color: #8a5a12; } .tag-off { background: var(--bg); color: var(--muted); } /* ---------- abas ---------- */ /* No celular as abas rolam de lado e vazam ate a borda da tela, sem parede: a faixa comeca e termina fora do respiro da pagina (as margens negativas), e o padding devolve o respiro so ao conteudo. Cortar as abas no meio de um retangulo parece defeito; deixar sumir na borda parece que continua — que e a verdade. Na tela grande elas quebram linha e nada disso e preciso. */ .abas { display: flex; gap: 6px; overflow-x: auto; /* Vaza ate a borda da tela: cancela o recuo do .wrap com margem negativa e devolve o mesmo valor como padding, para o conteudo manter o respiro. So funciona porque o .topo nao tem recuo lateral proprio — se voltar a ter, os dois se somam e a conta aqui para de fechar. */ margin: 0 -16px 4px; padding: 4px 16px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Edge antigo */ } .abas::-webkit-scrollbar { display: none; } /* Chrome, Safari */ .abas > * { scroll-snap-align: start; flex: 0 0 auto; } @media (min-width: 760px) { .abas { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; margin: 0 0 4px; padding: 4px 0; } } .aba { padding: 10px 16px; border-radius: 999px; border: 1px solid transparent; background: rgba(255,255,255,.18); color: #fff; font-size: .9rem; font-weight: 600; white-space: nowrap; } .aba:hover { background: rgba(255,255,255,.3); } .aba.on { background: #fff; color: var(--primary); } /* ---------- escolha de aparência (painel do dono) ---------- */ .paleta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; } .amostra { width: 54px; height: 54px; border-radius: 14px; border: 3px solid transparent; padding: 0; cursor: pointer; position: relative; box-shadow: var(--shadow); } .amostra.on { border-color: var(--ink); } .amostra:hover { transform: translateY(-2px); } .amostra-nome { font-size: .72rem; color: var(--muted); text-align: center; margin-top: 4px; } /* ---------- números do resumo ---------- */ .numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; } .numero { background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 16px; box-shadow: var(--shadow); } .numero .v { font-size: 1.6rem; font-weight: 700; color: var(--primary); font-family: var(--titulo); } .numero .r { font-size: .8rem; color: var(--muted); } /* ---------- tabela ---------- */ .tabela-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: .9rem; } th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; } th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } /* ---------- janela modal ---------- */ .modal-fundo { position: fixed; inset: 0; background: rgba(43, 36, 48, .55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; } .modal { background: #fff; border-radius: var(--radius); padding: 22px; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-alto); } /* ---------- recadinho flutuante ---------- */ #toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: #2b2430; color: #fff; padding: 13px 22px; border-radius: 11px; font-size: .9rem; box-shadow: var(--shadow-alto); z-index: 100; max-width: 90vw; text-align: center; } #toast.erro { background: var(--danger); } .centro { text-align: center; } .mt { margin-top: 16px; } .esconde { display: none !important; } .carregando { color: var(--muted); padding: 26px; text-align: center; } /* Quem prefere menos animacao no sistema nao deve levar animacao do site. */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }