:root{ --branco:#fff; --cinza:#f2f2f2; --preto:#222; --laranja:#FF6600; --vermelho:#dc3545; }
body{ background:var(--branco); color:var(--preto); font-family:Arial; margin:0; }
header{ background:var(--laranja); color:var(--branco); text-align:center; padding:20px; }
.container{ max-width:550px; margin:20px auto; padding:0 15px; }
.card{ background:var(--cinza); padding:20px; border-radius:8px; margin-bottom:20px; }
.card h2{ border-bottom:2px solid var(--laranja); padding-bottom:8px; margin-bottom:15px; }
.campo{ margin-bottom:15px; }
.campo input{ width:100%; padding:12px; border:1px solid #ccc; border-radius:6px; }
.grade-horarios{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.grade-horarios button{ padding:12px; border:1px solid #ccc; background:var(--branco); border-radius:6px; cursor:pointer; }
.grade-horarios button.selecionado{ background:var(--laranja); color:var(--branco); }
.grade-horarios button.ocupado{ background:#ccc; cursor:not-allowed; }
button[type="submit"], #btn-cancelar{ width:100%; padding:14px; background:var(--laranja); color:var(--branco); border:none; border-radius:6px; font-weight:700; cursor:pointer; }
.item-agendamento{ display:flex; justify-content:space-between; background:var(--branco); padding:10px; border-radius:6px; margin-top:10px; }
.btn-cancelar{ background:var(--vermelho); color:var(--branco); border:none; padding:8px; border-radius:6px; cursor:pointer; }
footer{ text-align:center; padding:20px; font-size:0.8rem; }