/* ========================================================================= AgendaBeleza — design system Mobile-first. Tokens claros no :root; escuro via prefers-color-scheme. Cor da marca do salão entra via --cor (setada inline no ). ========================================================================= */ /* ------------------------------------------------------------------ */ /* Tokens */ /* ------------------------------------------------------------------ */ :root { /* marca do salão (default; sobrescrito inline por tenant) */ --cor: #7c3aed; --cor-contraste: #ffffff; --cor-fraca: color-mix(in srgb, var(--cor) 12%, transparent); --cor-fraca-2: color-mix(in srgb, var(--cor) 22%, transparent); /* superfícies */ --bg: #faf8f5; --surface: #ffffff; --surface-2: #f3f0ec; --surface-hover: #f0ece7; /* texto */ --texto: #211d19; --texto-2: #6f675f; --texto-3: #9a928a; /* bordas / divisores */ --borda: #e6e0d8; --borda-forte: #d6cec4; /* estados */ --ok: #16794a; --ok-fraca: #e5f4ec; --erro: #b3261e; --erro-fraca: #fdeceb; --aviso: #9a6700; --aviso-fraca: #fdf3dd; --info: #155a8a; --info-fraca: #e6f1f8; --neutro: #6f675f; --neutro-fraca: #efebe6; /* sombras */ --sombra-1: 0 1px 2px rgba(33, 29, 25, .06), 0 1px 3px rgba(33, 29, 25, .08); --sombra-2: 0 4px 12px rgba(33, 29, 25, .10); --sombra-3: 0 12px 32px rgba(33, 29, 25, .16); /* raio */ --raio: 12px; --raio-s: 8px; --raio-pill: 999px; /* tipografia */ --fonte: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --fonte-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* dimensões */ --topbar-h: 60px; --sidebar-w: 250px; --container: 1080px; --gap: 16px; } @media (prefers-color-scheme: dark) { :root { --cor-fraca: color-mix(in srgb, var(--cor) 22%, transparent); --cor-fraca-2: color-mix(in srgb, var(--cor) 34%, transparent); --bg: #17130f; --surface: #211c17; --surface-2: #2a241e; --surface-hover: #302a23; --texto: #f2ede6; --texto-2: #c4b9ad; --texto-3: #877d71; --borda: #3a332b; --borda-forte: #4a4137; --ok: #4cc38a; --ok-fraca: #123325; --erro: #f28b82; --erro-fraca: #3c1613; --aviso: #e0b74c; --aviso-fraca: #3a2f12; --info: #69b7e8; --info-fraca: #122b3c; --neutro: #c4b9ad; --neutro-fraca: #2e2822; --sombra-1: 0 1px 2px rgba(0, 0, 0, .4); --sombra-2: 0 4px 12px rgba(0, 0, 0, .5); --sombra-3: 0 12px 32px rgba(0, 0, 0, .6); } } /* ------------------------------------------------------------------ */ /* Reset + base */ /* ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--fonte); font-size: 15px; line-height: 1.5; color: var(--texto); background: var(--bg); min-height: 100vh; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; } h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } p { margin: 0 0 1em; } a { color: var(--cor); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; } hr { border: 0; border-top: 1px solid var(--borda); margin: 1rem 0; } small, .mutado { color: var(--texto-2); font-size: .85em; } code { font-family: var(--fonte-mono); font-size: .9em; background: var(--surface-2); padding: .1em .35em; border-radius: 4px; } /* ------------------------------------------------------------------ */ /* Layout utilitário */ /* ------------------------------------------------------------------ */ .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gap); } .wrap { max-width: var(--container); margin: 0 auto; } .row { display: flex; gap: var(--gap); } .row--wrap { flex-wrap: wrap; } .col { flex: 1; min-width: 0; } .grid { display: grid; gap: var(--gap); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grow { flex: 1; } .center { display: flex; align-items: center; justify-content: center; } .between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); } .stack { display: flex; flex-direction: column; gap: var(--gap); } .gap-s { gap: 8px; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .hide { display: none !important; } @media (max-width: 720px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ */ /* Cards */ /* ------------------------------------------------------------------ */ .card { background: var(--surface); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-1); padding: var(--gap); } .card--link { display: block; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; cursor: pointer; } .card--link:hover { transform: translateY(-1px); box-shadow: var(--sombra-2); border-color: var(--cor-fraca-2); text-decoration: none; } .card__titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); margin-bottom: var(--gap); } .card__titulo h2, .card__titulo h3 { margin: 0; } /* ------------------------------------------------------------------ */ /* Botões */ /* ------------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600; padding: .55rem 1rem; border-radius: var(--raio-s); border: 1px solid transparent; cursor: pointer; text-decoration: none !important; transition: background .12s ease, box-shadow .12s ease, opacity .12s ease, transform .05s ease; white-space: nowrap; user-select: none; } .btn:active { transform: translateY(1px); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; } .btn--primario { background: var(--cor); color: var(--cor-contraste); border-color: var(--cor); } .btn--primario:hover { filter: brightness(1.07); } .btn--outline { background: transparent; color: var(--texto); border-color: var(--borda-forte); } .btn--outline:hover { background: var(--surface-2); } .btn--perigo { background: var(--erro); color: #fff; border-color: var(--erro); } .btn--perigo:hover { filter: brightness(1.07); } .btn--sucesso { background: var(--ok); color: #fff; border-color: var(--ok); } .btn--sucesso:hover { filter: brightness(1.07); } .btn--ghost { background: transparent; color: var(--texto-2); } .btn--ghost:hover { background: var(--surface-2); color: var(--texto); } .btn--bloco { display: flex; width: 100%; } .btn--sm { padding: .35rem .7rem; font-size: .85rem; } .btn--lg { padding: .8rem 1.4rem; font-size: 1.05rem; } .btn-link { background: none; border: 0; padding: 0; color: var(--cor); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; } .btn-link:hover { text-decoration: underline; } .btn-link--perigo { color: var(--erro); } /* ------------------------------------------------------------------ */ /* Formulários */ /* ------------------------------------------------------------------ */ .field { margin-bottom: var(--gap); } .field label, .field legend { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--texto); } .field .dica { font-size: .8rem; color: var(--texto-3); margin-top: 4px; } .input, .select, textarea.input { width: 100%; font: inherit; color: var(--texto); background: var(--surface); border: 1px solid var(--borda-forte); border-radius: var(--raio-s); padding: .6rem .75rem; transition: border-color .12s ease, box-shadow .12s ease; } .input:focus, .select:focus, textarea.input:focus { outline: none; border-color: var(--cor); box-shadow: 0 0 0 3px var(--cor-fraca); } .input::placeholder { color: var(--texto-3); } textarea.input { min-height: 84px; resize: vertical; } .select { appearance: auto; } .input--erro { border-color: var(--erro) !important; } .erro-msg { color: var(--erro); font-size: .82rem; margin-top: 4px; } .check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; } .check input { width: 18px; height: 18px; accent-color: var(--cor); } /* ------------------------------------------------------------------ */ /* Badges */ /* ------------------------------------------------------------------ */ .badge { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; padding: .18em .65em; border-radius: var(--raio-pill); background: var(--neutro-fraca); color: var(--neutro); } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge--confirmado { background: var(--ok-fraca); color: var(--ok); } .badge--concluido { background: var(--info-fraca); color: var(--info); } .badge--cancelado { background: var(--erro-fraca); color: var(--erro); } .badge--nao_compareceu { background: var(--aviso-fraca); color: var(--aviso); } /* ------------------------------------------------------------------ */ /* Tabelas */ /* ------------------------------------------------------------------ */ .tabela-wrap { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--surface); } table.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; } table.tabela th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); font-weight: 700; padding: .6rem .8rem; border-bottom: 1px solid var(--borda); background: var(--surface-2); white-space: nowrap; } table.tabela td { padding: .7rem .8rem; border-bottom: 1px solid var(--borda); vertical-align: middle; } table.tabela tr:last-child td { border-bottom: 0; } table.tabela tr:hover td { background: var(--surface-hover); } table.tabela .acoes { text-align: right; white-space: nowrap; } /* ------------------------------------------------------------------ */ /* Topbar / Sidebar (painel) */ /* ------------------------------------------------------------------ */ .layout { min-height: 100vh; } .topbar { position: sticky; top: 0; z-index: 40; height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--borda); display: flex; align-items: center; gap: var(--gap); padding: 0 var(--gap); } .topbar__logo { font-weight: 800; font-size: 1.1rem; color: var(--texto); } .topbar__logo b { color: var(--cor); } .topbar__spacer { flex: 1; } .sidebar { background: var(--surface); border-right: 1px solid var(--borda); width: var(--sidebar-w); flex-shrink: 0; padding: var(--gap) 12px; display: flex; flex-direction: column; gap: 4px; } .sidebar__titulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); font-weight: 700; padding: .6rem .75rem .2rem; } .sidebar a { display: flex; align-items: center; gap: 10px; padding: .55rem .75rem; border-radius: var(--raio-s); color: var(--texto-2); font-weight: 600; font-size: .92rem; text-decoration: none; transition: background .1s ease, color .1s ease; } .sidebar a:hover { background: var(--surface-hover); color: var(--texto); text-decoration: none; } .sidebar a.ativo { background: var(--cor-fraca); color: var(--cor); } .sidebar a .icone { width: 18px; text-align: center; } .conteudo { flex: 1; min-width: 0; padding: var(--gap); } .conteudo__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); flex-wrap: wrap; margin-bottom: var(--gap); } @media (max-width: 860px) { .sidebar { display: none; } } /* ------------------------------------------------------------------ */ /* Site público */ /* ------------------------------------------------------------------ */ .site-hero { background: linear-gradient(160deg, var(--cor-fraca) 0%, var(--cor-fraca-2) 100%); padding: 2.2rem var(--gap); text-align: center; } .site-hero h1 { font-size: 1.7rem; } .site-hero .slogan { color: var(--texto-2); } .passo-container { padding: var(--gap) 0 var(--gap)*2; } /* Stepper */ .stepper { display: flex; gap: 0; margin: 0 0 var(--gap); padding: 0; list-style: none; overflow-x: auto; } .stepper li { flex: 1; display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--texto-3); white-space: nowrap; min-width: max-content; } .stepper li .num { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--texto-3); font-size: .8rem; font-weight: 700; flex-shrink: 0; } .stepper li.ativo { color: var(--cor); } .stepper li.ativo .num { background: var(--cor); color: var(--cor-contraste); } .stepper li.feito { color: var(--ok); } .stepper li.feito .num { background: var(--ok); color: #fff; } /* Grade de serviços */ .servico-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--gap); } .servico-card { display: flex; flex-direction: column; gap: 8px; padding: var(--gap); background: var(--surface); border: 1px solid var(--borda); border-radius: var(--raio); cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; } .servico-card:hover { border-color: var(--cor-fraca-2); box-shadow: var(--sombra-2); transform: translateY(-1px); } .servico-card .preco { font-weight: 800; color: var(--cor); font-size: 1.05rem; } .servico-card .cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); font-weight: 700; } .servico-card .duracao { font-size: .85rem; color: var(--texto-2); } /* Profissional */ .profissional-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap); } .profissional-card { padding: var(--gap); } .profissional-card .avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--cor-fraca); color: var(--cor); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; margin-bottom: 8px; } /* Seletor de data */ .datas { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; } .data-chip { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .55rem .8rem; border: 1px solid var(--borda); border-radius: var(--raio-s); background: var(--surface); cursor: pointer; font-size: .82rem; color: var(--texto-2); transition: border-color .12s ease, background .12s ease; } .data-chip .dw { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); font-weight: 700; } .data-chip .dn { font-size: 1.1rem; font-weight: 800; color: var(--texto); } .data-chip.ativo { border-color: var(--cor); background: var(--cor-fraca); } .data-chip.ativo .dn { color: var(--cor); } .data-chip.fechado { opacity: .45; pointer-events: none; } /* Slots */ .slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .slot { padding: .55rem .4rem; border: 1px solid var(--borda-forte); border-radius: var(--raio-s); text-align: center; font-weight: 700; font-size: .9rem; color: var(--texto); background: var(--surface); cursor: pointer; transition: border-color .12s ease, background .12s ease, transform .05s ease; } .slot:hover:not(:disabled) { border-color: var(--cor); } .slot:disabled { opacity: .38; cursor: not-allowed; background: var(--surface-2); } .slot.ativo { background: var(--cor); border-color: var(--cor); color: var(--cor-contraste); } .slot .sub { display: block; font-size: .68rem; font-weight: 600; color: var(--texto-3); } .slot.ativo .sub { color: inherit; opacity: .8; } .grupo-slots { margin-bottom: 20px; } .grupo-slots h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); } /* Resumo do agendamento */ .resumo { display: grid; gap: 4px; font-size: .95rem; } .resumo .linha { display: flex; justify-content: space-between; gap: var(--gap); padding: 6px 0; border-bottom: 1px dashed var(--borda); } .resumo .linha:last-child { border-bottom: 0; } .resumo .k { color: var(--texto-2); } .resumo .v { font-weight: 700; text-align: right; } /* ------------------------------------------------------------------ */ /* Flash */ /* ------------------------------------------------------------------ */ .flash { display: flex; align-items: flex-start; gap: 10px; padding: .75rem 1rem; border-radius: var(--raio-s); margin-bottom: var(--gap); font-weight: 500; border: 1px solid transparent; } .flash--sucesso { background: var(--ok-fraca); color: var(--ok); border-color: var(--ok); } .flash--erro { background: var(--erro-fraca); color: var(--erro); border-color: var(--erro); } .flash--aviso { background: var(--aviso-fraca); color: var(--aviso); border-color: var(--aviso); } .flash--info { background: var(--info-fraca); color: var(--info); border-color: var(--info); } /* ------------------------------------------------------------------ */ /* Modal */ /* ------------------------------------------------------------------ */ .modal-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .5); display: none; align-items: center; justify-content: center; padding: var(--gap); } .modal-backdrop.aberto { display: flex; } .modal { background: var(--surface); border-radius: var(--raio); box-shadow: var(--sombra-3); width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; padding: var(--gap); } .modal__topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--gap); } .modal__topo h3 { margin: 0; } .modal__fechar { background: none; border: 0; cursor: pointer; font-size: 1.4rem; line-height: 1; color: var(--texto-3); } .modal__fechar:hover { color: var(--texto); } /* ------------------------------------------------------------------ */ /* Toasts */ /* ------------------------------------------------------------------ */ .toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 80; opacity: 0; transition: opacity .2s ease, transform .2s ease; background: var(--surface); border: 1px solid var(--borda-forte); border-radius: var(--raio-s); box-shadow: var(--sombra-2); padding: .7rem 1.1rem; font-weight: 600; max-width: 92vw; } .toast.mostrar { opacity: 1; transform: translateX(-50%) translateY(0); } .toast--erro { border-color: var(--erro); color: var(--erro); } .toast--ok { border-color: var(--ok); color: var(--ok); } /* ------------------------------------------------------------------ */ /* Dashboard stats */ /* ------------------------------------------------------------------ */ .stat { background: var(--surface); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--gap); } .stat .valor { font-size: 1.5rem; font-weight: 800; color: var(--texto); } .stat .rotulo { font-size: .8rem; color: var(--texto-2); font-weight: 600; } .stat .icone { font-size: 1.3rem; } /* lista de agendamentos (dashboard/agenda) */ .agenda-item { display: flex; align-items: center; gap: 12px; padding: .65rem 0; border-bottom: 1px solid var(--borda); } .agenda-item:last-child { border-bottom: 0; } .agenda-item .hora { font-weight: 800; font-size: .95rem; min-width: 46px; font-variant-numeric: tabular-nums; } .agenda-item .corpo { flex: 1; min-width: 0; } .agenda-item .corpo .nome { font-weight: 700; } .agenda-item .corpo .det { font-size: .8rem; color: var(--texto-2); } /* vazios */ .vazio { text-align: center; color: var(--texto-3); padding: 2.5rem var(--gap); border: 1px dashed var(--borda-forte); border-radius: var(--raio); } /* utilitários de cor */ .cor-marca { color: var(--cor); } /* impressão de relatório */ @media print { .topbar, .sidebar, .conteudo__topo .acoes { display: none !important; } body { background: #fff; } .card { box-shadow: none; border-color: #ccc; } } /* bar-chart (relatórios) */ .bar-chart { display: flex; align-items: flex-end; gap: 4px; height: 160px; padding: 1rem 0 0; border-bottom: 1px solid var(--borda-forte); } .bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; min-width: 0; } .bar { width: 100%; max-width: 34px; background: var(--cor); border-radius: 4px 4px 0 0; opacity: .85; min-height: 2px; transition: height .3s ease; } .bar-dia { font-size: .68rem; color: var(--texto-3); font-variant-numeric: tabular-nums; } /* swatch de cor */ .cor-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--borda-forte); vertical-align: -2px; margin-right: 6px; } /* forms inline (ações em tabela) */ .inline-form { display: inline-block; margin: 0 2px; vertical-align: middle; }