:root { --cor-primaria: #b5657a; --cor-primaria-escura: #8f4b5c; --cor-secundaria: #d9a441; --fundo: #fbf6f4; --texto: #332328; --texto-suave: #7a6a6d; --borda: #eee0dd; } body { background: var(--fundo); color: var(--texto); font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* Mantém o rodapé sempre colado ao fundo da janela nas páginas públicas com pouco conteúdo — mas continua abaixo de tudo se a página for mais alta do que o ecrã. Só se aplica às páginas com class="pagina-publica" no , para não mexer no layout das páginas de administração. */ body.pagina-publica { min-height: 100vh; display: flex; flex-direction: column; } body.pagina-publica > footer { margin-top: auto; } .navbar-marca { background: var(--cor-primaria) !important; } .navbar-marca .navbar-brand, .navbar-marca .nav-link { color: #fff !important; font-weight: 600; } .navbar-marca .nav-link:hover { color: #ffe9ee !important; } .btn-primary, .btn-marca { background-color: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; } .btn-primary:hover, .btn-marca:hover { background-color: var(--cor-primaria-escura); border-color: var(--cor-primaria-escura); color: #fff; } .text-marca { color: var(--cor-primaria) !important; } .card-kpi { border:none; border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,.06); transition:transform .2s; } .card-kpi:hover { transform: translateY(-3px); } .card-servico { border: 1px solid var(--borda); border-radius: 14px; cursor: pointer; transition: all .15s ease; background: #fff; } .card-servico:hover { border-color: var(--cor-primaria); box-shadow: 0 6px 16px rgba(181,101,122,.15); } .card-servico.selecionado { border-color: var(--cor-primaria); background: #fbeef1; box-shadow: 0 6px 16px rgba(181,101,122,.2); } .slot-hora { border: 1px solid var(--borda); border-radius: 8px; padding: 8px 4px; text-align: center; cursor: pointer; font-weight: 600; font-size: .9rem; background: #fff; transition: all .12s ease; } .slot-hora:hover { border-color: var(--cor-primaria); background: #fbeef1; } .slot-hora.selecionado { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; } .sidebar-admin { min-width: 240px; max-width: 240px; background: #fff; border-right: 1px solid var(--borda); min-height: 100vh; } .sidebar-admin .nav-link { color: var(--texto); border-radius: 8px; padding: 10px 14px; margin-bottom: 4px; font-weight: 500; } .sidebar-admin .nav-link.active, .sidebar-admin .nav-link:hover { background: #fbeef1; color: var(--cor-primaria-escura); } .badge-confirmada { background:#e3f7ea; color:#1c7a3d; border:1px solid #b9e5c6; } .badge-cancelada { background:#fde8e8; color:#b3261e; border:1px solid #f3c2c2; } .badge-concluida { background:#e7ecfd; color:#3348b3; border:1px solid #c6cffb; } .table-hover tbody tr:hover { background: rgba(181,101,122,.04); } .passo-marcacao { display:none; } .passo-marcacao.ativo { display:block; } .step-indicador { display:flex; gap:8px; margin-bottom:24px; justify-content:center; flex-wrap:wrap; } .step-indicador .step { padding:6px 14px; border-radius:999px; background:#f1e6e8; color:var(--texto-suave); font-size:.82rem; font-weight:600; } .step-indicador .step.ativo { background: var(--cor-primaria); color:#fff; } .step-indicador .step.feito { background: #e3f7ea; color:#1c7a3d; } /* ---- Mini calendário (passo "Escolhe o dia") ---- */ .mini-calendario { max-width: 360px; } .mini-calendario-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .mini-calendario-header .btn { padding:2px 10px; } .mini-calendario-titulo { font-weight:700; text-transform:capitalize; } .mini-calendario-grelha { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; } .mini-calendario-diasemana { text-align:center; font-size:.72rem; font-weight:700; color:var(--texto-suave); text-transform:uppercase; padding-bottom:4px; } .dia-calendario { aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:8px; font-size:.85rem; font-weight:600; border:1px solid transparent; } .dia-calendario.vazio { visibility:hidden; } .dia-calendario.disponivel { background:#fff; border-color:var(--borda); color:var(--texto); cursor:pointer; } .dia-calendario.disponivel:hover { border-color:var(--cor-primaria); background:#fbeef1; } .dia-calendario.indisponivel { background:#f5f1f0; color:#c9bdba; cursor:not-allowed; } .dia-calendario.hoje { box-shadow: inset 0 0 0 2px var(--cor-secundaria); } .dia-calendario.selecionado { background:var(--cor-primaria); border-color:var(--cor-primaria); color:#fff; } .mini-calendario-legenda { display:flex; gap:14px; margin-top:10px; font-size:.78rem; color:var(--texto-suave); } .mini-calendario-legenda span { display:inline-flex; align-items:center; gap:5px; } .mini-calendario-legenda i { width:12px; height:12px; border-radius:4px; display:inline-block; } .legenda-disponivel { background:#fff; border:1px solid var(--borda); } .legenda-indisponivel { background:#f5f1f0; } /* Foto/avatar do técnico — usado na página de marcações e no admin */ .avatar-tecnico { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1px solid var(--borda); flex-shrink: 0; } .avatar-tecnico-sm { width: 28px; height: 28px; } .avatar-tecnico-lg { width: 84px; height: 84px; } .avatar-placeholder { display: flex; align-items: center; justify-content: center; background: var(--fundo); color: var(--texto-suave); font-size: 1.2rem; } .avatar-tecnico-lg.avatar-placeholder { font-size: 2rem; } .card-tecnico-info { display: flex; align-items: center; gap: 12px; } /* Dashboard — KPIs do período */ .kpi-periodo-row { display: flex; flex-wrap: wrap; gap: 12px; } .kpi-periodo-item { flex: 1 1 150px; min-width: 150px; } /* Dashboard — gráfico de barras "Marcações por dia" */ .grafico-barras-scroll { overflow-x: auto; padding-bottom: 4px; } .grafico-barras { display: flex; align-items: flex-end; gap: 3px; height: 160px; min-width: 100%; } .barra-dia { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1 0 10px; min-width: 10px; height: 100%; cursor: default; } .barra-dia-fill { width: 100%; max-width: 22px; background: var(--cor-primaria); border-radius: 4px 4px 0 0; transition: background .15s; } .barra-dia:hover .barra-dia-fill { background: var(--cor-primaria-escura); } .barra-dia-label { font-size: .6rem; color: var(--texto-suave); margin-top: 4px; writing-mode: vertical-rl; transform: rotate(180deg); max-height: 40px; } .tooltip-grafico { position: fixed; background: var(--texto); color: #fff; font-size: .78rem; padding: 4px 10px; border-radius: 6px; pointer-events: none; z-index: 2000; } /* Dashboard — barras de ocupação / ranking */ .barra-ocupacao { background: var(--fundo); border: 1px solid var(--borda); border-radius: 6px; height: 8px; overflow: hidden; } .barra-ocupacao-fill { background: var(--cor-secundaria); height: 100%; border-radius: 6px; }