:root {
--cream: #F0F4FF;
--warm-white: #FFFFFF;
--gold: #C9A84C;
--gold-light: #D4B85A;
--gold-pale: #EDE5D0;
--deep: #1A3A8F;
--brown: #1E3A5F;
--muted: #6B7D99;
--border: #D0D9E8;
--success-bg: #EDF7ED;
--success: #2E7D32;
--error: #C62828;
--error-bg: #FFEBEE;
--info-bg: #E3F2FD;
--info: #1565C0;
--radius: 12px;
--radius-sm: 8px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Inter', sans-serif;
background: var(--cream);
color: var(--deep);
min-height: 100vh;
padding-bottom: 2rem;
-webkit-font-smoothing: antialiased;
}
.container { max-width: 500px; margin: 0 auto; padding: 1.5rem 1rem; }
.screen { display: none; }
.screen.active { display: block; animation: fadeUp 0.3s ease; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }
.card {
background: var(--warm-white);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem;
margin-bottom: 1rem;
box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.card-title {
font-family: 'Lora';
font-size: 1.1rem;
color: var(--brown);
margin-bottom: 1rem;
font-weight: 600;
}
.field { margin-bottom: 0.8rem; }
label {
display: block;
font-size: 0.7rem;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
margin-bottom: 0.3rem;
letter-spacing: 0.5px;
}
input, textarea {
width: 100%;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.7rem;
font-family: 'Inter';
background: var(--cream);
outline: none;
font-size: 0.9rem;
color: var(--deep);
}
input:focus, textarea:focus {
border-color: var(--gold);
background: var(--warm-white);
}
textarea { resize: vertical; min-height: 60px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.btn-primary {
width: 100%;
background: var(--deep);
color: #fff;
border: none;
border-radius: var(--radius-sm);
padding: 0.9rem;
font-weight: 600;
cursor: pointer;
font-size: 0.95rem;
transition: opacity 0.2s;
font-family: 'Inter';
}
.btn-primary:hover { opacity: 0.9; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-gold {
width: 100%;
background: #1E3A5F;
color: #fff;
border: none;
border-radius: var(--radius-sm);
padding: 0.8rem;
font-weight: 600;
cursor: pointer;
font-size: 0.9rem;
font-family: 'Inter';
}
.btn-gold:hover { background: #2A4F7A; }
.btn-small {
background: var(--cream);
border: 1px solid var(--border);
padding: 6px 12px;
border-radius: 6px;
font-size: 0.8rem;
cursor: pointer;
margin-right: 6px;
margin-top: 8px;
font-weight: 600;
font-family: 'Inter';
color: var(--deep);
}
.btn-small:hover { background: var(--gold-pale); }
.btn-danger { background: #FEE; border-color: #FCC; color: var(--error); }
.btn-danger:hover { background: #FCC; }
.text-link {
color: var(--gold);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
}
.text-link:hover { text-decoration: underline; }
.app-header {
background: var(--deep);
text-align: center;
padding: 2.8rem 1rem;
position: relative;
overflow: hidden;
}
.app-header::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% -20%, rgba(201,168,76,0.3) 0%, transparent 70%);
}
.pub-nome-topo {
font-size: 0.85rem;
color: #C9A84C;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 1;
margin-bottom: 0.2rem;
display: block;
position: relative;
}
.pub-hierarquia {
font-size: 0.65rem;
color: rgba(255,255,255,0.5);
text-transform: uppercase;
font-weight: 600;
letter-spacing: 2px;
line-height: 1;
margin-bottom: 1.2rem;
position: relative;
}
.app-header h1 {
font-family: 'Lora';
font-size: 2.3rem;
color: #fff;
line-height: 1.1;
margin-bottom: 0.1rem;
position: relative;
}
.pub-subtitle {
font-size: 1rem;
color: rgba(255,255,255,0.7);
font-style: italic;
font-family: 'Lora';
margin-bottom: 1.5rem;
position: relative;
}
.wa-link-header {
display: inline-flex;
align-items: center;
gap: 8px;
background: #E8F5E9;
color: #1B5E20;
border-radius: 30px;
padding: 10px 20px;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
position: relative;
}
.service-btn {
background: var(--cream);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.9rem 1rem;
text-align: left;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
margin-bottom: 0.6rem;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.2s;
font-family: 'Inter';
color: var(--deep);
}
.service-btn:hover { border-color: var(--gold); }
.service-btn.selected { background: #E8EFF8; border-color: #1E3A5F; }
.expand-area {
display: none;
padding: 1rem;
background: #FDFBF7;
border: 1px solid var(--border);
border-top: none;
margin-top: -12px;
margin-bottom: 10px;
border-radius: 0 0 8px 8px;
}
.expand-area.open { display: block; }
.cal-grid-header {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
font-weight: 700;
font-size: 0.65rem;
color: var(--muted);
margin-bottom: 8px;
border-bottom: 1px solid var(--border);
padding-bottom: 4px;
}
.cal-grid-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-day {
height: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
border-radius: 6px;
color: #ccc;
}
.cal-day.has-slots {
background: var(--gold-pale);
color: var(--deep);
font-weight: 700;
cursor: pointer;
border: 1px solid var(--border);
}
.cal-day.has-slots:hover { background: #1E3A5F; color: #fff; }
.cal-day.selected-day { background: #1E3A5F !important; color: #fff !important; }
.cal-day.cal-day-restrito { border: 2px solid #E57373; }
.cal-day.cal-day-restrito.selected-day { background: #C62828 !important; }
.cal-nav-btn {
cursor: pointer;
padding: 5px 10px;
font-size: 1.2rem;
user-select: none;
color: var(--brown);
}
.cal-nav-btn.disabled { color: #ccc; cursor: not-allowed; }
.time-slots {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
margin-top: 15px;
}
.time-slot {
background: var(--cream);
border: 1px solid var(--border);
padding: 8px 14px;
border-radius: 8px;
font-size: 0.85rem;
cursor: pointer;
font-weight: 600;
}
.time-slot:hover { border-color: var(--gold); }
.time-slot.selected { background: #1E3A5F; color: #fff; border-color: #1E3A5F; }
.time-slot-restrito { border-color: #E57373; background: #FFF5F5; position: relative; }
.time-slot-restrito::after {
content: '
';
position: absolute;
top: -6px;
right: -6px;
font-size: 0.7rem;
background: #C62828;
color: #fff;
border-radius: 50%;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.time-slot-restrito:hover { border-color: #C62828; }
.time-slot-restrito.selected { background: #C62828; color: #fff; border-color: #C62828; }
.admin-header {
background: var(--deep);
color: #fff;
padding: 1rem 1.25rem;
border-radius: var(--radius);
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
font-weight: 600;
}
.tabs {
display: flex;
gap: 4px;
margin-bottom: 1rem;
background: var(--warm-white);
padding: 4px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
}
.tab {
flex: 1;
background: none;
border: none;
padding: 0.6rem;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
color: var(--muted);
font-size: 0.85rem;
font-family: 'Inter';
}
.tab.active { background: #1E3A5F; color: #fff; }
.status-badge {
display: inline-block;
background: var(--gold-pale);
color: var(--brown);
padding: 2px 8px;
border-radius: 10px;
font-size: 0.7rem;
font-weight: 600;
margin-left: 6px;
}
.status-agendado { background: var(--info-bg); color: var(--info); }
.status-inativo { background: var(--error-bg); color: var(--error); }
.status-concluido { background: var(--success-bg); color: var(--success); }
.empty-state {
text-align: center;
color: var(--muted);
padding: 2rem 1rem;
font-size: 0.9rem;
font-style: italic;
}
.loading-overlay {
position: fixed;
inset: 0;
background: rgba(255,255,255,0.98);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
}
.loading-spinner {
width: 35px;
height: 35px;
border: 4px solid #eee;
border-top-color: #C9A84C;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.toast {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: var(--deep);
color: #fff;
padding: 0.8rem 1.5rem;
border-radius: var(--radius-sm);
z-index: 10000;
font-weight: 600;
font-size: 0.9rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
opacity: 0;
transition: opacity 0.3s;
max-width: 90%;
text-align: center;
}
.toast.show { opacity: 1; }
.toast.success { background: var(--success); }
.toast.error { background: var(--error); }
.alert {
padding: 0.9rem;
border-radius: var(--radius-sm);
margin-bottom: 1rem;
font-size: 0.9rem;
border: 1px solid;
}
.alert-success { background: var(--success-bg); color: var(--success); border-color: #C8E6C9;
.alert-error { background: var(--error-bg); color: var(--error); border-color: #FFCDD2; }
.alert-info { background: var(--info-bg); color: var(--info); border-color: #BBDEFB; }
.info-box {
background: var(--gold-pale);
padding: 0.8rem;
border-radius: var(--radius-sm);
font-size: 0.85rem;
margin-bottom: 1rem;
color: var(--brown);
}
.agenda-item {
background: var(--cream);
margin-bottom: 0.6rem;
padding: 0.9rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
}
.agenda-item-info {
font-size: 0.8rem;
color: var(--muted);
margin-top: 0.4rem;
}
.pedido-card {
background: var(--cream);
margin-bottom: 0.8rem;
padding: 1rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
}
.pedido-header {
display: flex;
justify-content: space-between;
align-items: start;
margin-bottom: 0.5rem;
}
.pedido-msg {
margin: 0.6rem 0;
font-size: 0.9rem;
color: var(--brown);
white-space: pre-wrap;
word-wrap: break-word;
}
/* Link de compartilhamento (Novo) */
.share-container {
margin-bottom: 1.5rem;
border: 1px dashed #C9A84C;
background: #FFFDF9;
padding: 15px;
border-radius: 12px;
}
.share-label { font-size: 0.85rem; font-weight: 700; color: var(--brown); margin-bottom: 10px
.share-box { display: flex; gap: 8px; align-items: center; background: var(--cream); padding:
.share-url { font-family: monospace; font-size: 0.9rem; color: var(--deep); flex: 1; word-bre
/* Assinatura do desenvolvedor */
.dev-credit {
text-align: center;
font-size: 0.7rem;
font-style: italic;
color: var(--muted);
padding: 0.6rem 0 0.2rem;
letter-spacing: 0.3px;
}
.dev-credit-light {
color: rgba(255, 255, 255, 0.5);
}
/* Tutorial acordeão */
.tutorial-toggle {
width: 100%;
background: var(--gold-pale);
border: 1px solid var(--gold);
color: var(--brown);
padding: 0.8rem 1rem;
border-radius: var(--radius-sm);
font-weight: 600;
cursor: pointer;
font-size: 0.9rem;
font-family: 'Inter';
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 1rem;
transition: background 0.2s;
}
.tutorial-toggle:hover { background: #1E3A5F; color: #fff; }
.tutorial-toggle .chev { transition: transform 0.3s; display: inline-block; }
.tutorial-toggle.open .chev { transform: rotate(180deg); }
.tutorial-content {
display: none;
background: #FFFDF9;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 1rem 1.2rem;
margin-bottom: 1.2rem;
animation: fadeUp 0.3s ease;
}
.tutorial-content.open { display: block; }
.tutorial-content h3 {
font-family: 'Lora';
color: var(--brown);
font-size: 1rem;
margin-top: 1rem;
margin-bottom: 0.4rem;
font-weight: 600;
}
.tutorial-content h3:first-child { margin-top: 0; }
.tutorial-content ul { padding-left: 1.2rem; margin-bottom: 0.3rem; }
.tutorial-content li {
font-size: 0.85rem;
line-height: 1.55;
color: var(--deep);
margin-bottom: 0.3rem;
}
.tutorial-content li b { color: var(--brown); }
.tutorial-content .tut-dica {
background: var(--gold-pale);
border-left: 3px solid var(--gold);
padding: 0.6rem 0.8rem;
margin: 0.7rem 0;
font-size: 0.82rem;
border-radius: 4px;
color: var(--brown);
line-height: 1.5;
}
/* Botão "Visitar página" no painel */
.share-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 10px;
}
.share-actions button, .share-actions a {
flex: 1;
min-width: 110px;
padding: 8px 10px;
font-size: 0.78rem;
border-radius: 6px;
font-weight: 600;
font-family: 'Inter';
cursor: pointer;
text-align: center;
text-decoration: none;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.share-actions .btn-copiar { background: #C9A84C; color: #fff; }
.share-actions .btn-copiar:hover { background: #D4B85A; }
.share-actions .btn-visitar { background: var(--deep); color: #fff; }
.share-actions .btn-visitar:hover { opacity: 0.9; }
/* Botão atualizar (ícone circular) */
.btn-refresh {
background: var(--cream);
border: 1px solid var(--border);
border-radius: 50%;
width: 34px;
height: 34px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
color: var(--brown);
transition: all 0.2s;
padding: 0;
flex-shrink: 0;
}
.btn-refresh:hover { background: var(--gold-pale); border-color: var(--gold); }
.btn-refresh.spinning svg { animation: spin 0.8s linear infinite; }
.tab-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.6rem;
gap: 0.5rem;
}
.tab-header-title {
font-size: 0.85rem;
color: var(--muted);
font-weight: 600;
}
/* Botão Liberar (para horários agendados) */
.btn-liberar { background: #FFF3E0; border-color: #FFB74D; color: #E65100; }
.btn-liberar:hover:not(:disabled) { background: #FFE0B2; }
/* Modal do Termo de Responsabilidade */
.termo-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
z-index: 8000;
align-items: center;
justify-content: center;
padding: 1rem;
}
.termo-overlay.active { display: flex; }
.termo-box {
background: var(--warm-white);
border-radius: var(--radius);
padding: 1.5rem;
max-width: 480px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}
/* ===== Modal genérico (edição, confirmação, lançamento) ===== */
.modal-overlay {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.6); z-index: 9000;
align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay.active { display: flex; }
.modal-box {
background: var(--warm-white); border-radius: var(--radius);
padding: 1.5rem; max-width: 480px; width: 100%;
max-height: 90vh; overflow-y: auto;
box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}
.modal-actions {
display: flex; gap: 0.6rem; margin-top: 1.2rem; flex-wrap: wrap;
}
.modal-actions button { flex: 1; min-width: 120px; }
.btn-secondary {
background: var(--cream); color: var(--deep);
border: 1px solid var(--border); border-radius: var(--radius-sm);
padding: 0.8rem; font-weight: 600; cursor: pointer;
font-size: 0.9rem; font-family: 'Inter';
}
.btn-secondary:hover { background: var(--gold-pale); }
/* ===== Tag de origem ([Site] / [Pessoal]) ===== */
.origem-tag {
display: inline-block; padding: 1px 7px; border-radius: 4px;
font-size: 0.68rem; font-weight: 700; margin-left: 4px;
letter-spacing: 0.3px; vertical-align: middle;
}
.origem-tag.site { background: #E3F2FD; color: #1565C0; border: 1px solid #BBDEFB; }
.origem-tag.pessoal { background: #FFF3E0; color: #E65100; border: 1px solid #FFCC80; }
/* ===== Calendário inteligente (Aba Agenda/Lançar) ===== */
.cal-day.cal-day-busy {
background: #1E3A5F;
color: #fff;
font-weight: 700;
cursor: pointer;
border: 1px solid #1E3A5F;
}
.cal-day.cal-day-busy:hover { background: #2A4F7A; }
.cal-day.cal-day-busy.selected-day { background: #C9A84C !important; color: #1E3A5F !importan
.cal-day.cal-day-empty {
background: #F5F7FB;
color: var(--brown);
cursor: pointer;
border: 1px solid var(--border);
}
.cal-day.cal-day-empty:hover { background: var(--gold-pale); }
.cal-day.cal-day-empty.selected-day { background: var(--gold) !important; color: #fff !import
/* ===== Time slots (admin) ===== */
.time-slot-admin {
padding: 8px 12px; border-radius: 8px; font-size: 0.85rem;
font-weight: 600; cursor: pointer; user-select: none;
font-family: 'Inter'; transition: all 0.15s;
}
/* Bloqueado: já existe, não pode mudar */
.time-slot-admin.bloqueado {
background: #1E3A5F; color: #fff; border: 1px solid #1E3A5F;
cursor: not-allowed; opacity: 0.85;
}
.time-slot-admin.bloqueado.origem-pessoal {
background: #E65100; border-color: #E65100;
}
/* Sugestão livre (clicável, em estado claro) */
.time-slot-admin.sugestao {
background: var(--cream); color: var(--deep);
border: 1px dashed var(--border);
}
.time-slot-admin.sugestao:hover {
border-color: var(--gold); border-style: solid;
}
/* Selecionado para criar — distrito geral (azul escuro) */
.time-slot-admin.selecionado-geral {
background: #1E3A5F; color: #fff; border: 1px solid #1E3A5F;
}
/* Selecionado para criar — localidade específica (vermelho) */
.time-slot-admin.selecionado-loc {
background: #C62828; color: #fff; border: 1px solid #C62828;
}
.time-slot-admin.selecionado-unico {
background: var(--gold); color: var(--brown); border: 1px solid var(--gold);
}
.time-slots-admin {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 12px;
}
.time-input-row {
display: flex; gap: 6px; margin-top: 12px; align-items: center;
}
.time-input-row input[type="time"] {
flex: 1; max-width: 130px;
background: var(--warm-white);
}
.time-input-row button {
background: var(--gold); color: #fff; border: none;
padding: 0.55rem 0.9rem; border-radius: var(--radius-sm);
font-weight: 600; cursor: pointer; font-size: 0.85rem;
font-family: 'Inter'; white-space: nowrap;
}
.time-input-row button:hover { background: var(--gold-light); }
.legend-box {
background: var(--cream); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 0.6rem;
margin-top: 0.5rem; font-size: 0.72rem; color: var(--muted);
display: flex; flex-wrap: wrap; gap: 0.8rem;
}
.legend-box .leg {
display: inline-flex; align-items: center; gap: 4px;
}
.legend-box .leg-sw {
display: inline-block; width: 14px; height: 14px; border-radius: 3px;
}
Se preferir, entre
Seus dados