/* Tema "glass" moderado — camada por cima do app.css.
   Vidro só na moldura (barras, menus, janelas, botões de dia/horário);
   conteúdo e formulários continuam quase sólidos para leitura fácil.
   Sem suporte a desfoque, ou com "reduzir transparência", vira sólido. */

:root {
  --glass-bg: rgba(255, 253, 249, .58);
  --glass-strong: rgba(255, 253, 249, .82);
  --glass-border: rgba(255, 255, 255, .75);
  --glass-edge: rgba(62, 58, 53, .08);
  --glass-blur: blur(22px) saturate(1.6);
  --glass-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 8px 32px rgba(62, 58, 53, .10), 0 1px 3px rgba(62, 58, 53, .06);
  --radius: 22px;
}

/* ---------- fundo vivo ---------- */
html { background: #F4EEE4; }
body {
  background:
    radial-gradient(1200px 700px at 110% -10%, rgba(201, 143, 134, .30), transparent 60%),
    radial-gradient(900px 700px at -20% 30%, rgba(126, 156, 118, .30), transparent 60%),
    radial-gradient(900px 600px at 60% 120%, rgba(140, 134, 189, .26), transparent 60%),
    #F4EEE4;
  background-attachment: fixed;
  min-height: 100vh;
}
body::before, body::after {
  content: ""; position: fixed; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .55;
  pointer-events: none; will-change: transform;
}
body::before { width: 340px; height: 340px; top: 8%; left: -80px; background: #B9CDB2; animation: drift-a 26s ease-in-out infinite alternate; }
body::after  { width: 300px; height: 300px; bottom: 6%; right: -70px; background: #E8C3B9; animation: drift-b 32s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(90px, 120px) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-110px, -90px) scale(1.1); } }

/* ---------- superfícies ---------- */
.card, .number, details.section {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius);
}
/* telas de muito texto: vidro bem mais opaco */
form .card, details.section, .card:has(input, textarea, select) { background-color: var(--glass-strong); }
.card .card { background: rgba(255,255,255,.9); }

/* barra superior e menu inferior flutuante */
.portal-top {
  background: rgba(247, 242, 234, .66);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(255,255,255,.6);
}
.bottom-nav {
  left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
  border-radius: 26px; padding-bottom: 0;
  background: rgba(255, 253, 249, .74);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
}
.bottom-nav a { padding: 9px 0 8px; border-radius: 20px; margin: 4px; transition: background .2s; }
.bottom-nav a.on { background: rgba(47, 74, 53, .10); }
body.portal .wrap { padding-bottom: 120px; }
.portal-nav a.on { background: rgba(47, 74, 53, .10); }

.public-header {
  position: sticky; top: 8px; z-index: 10; margin: 8px auto 0; width: calc(100% - 24px);
  border-radius: 24px; padding: 10px 14px;
  background: rgba(255, 253, 249, .50);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
}

/* janelas */
dialog {
  background: rgba(255, 253, 249, .78);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: 26px;
}
dialog::backdrop { background: rgba(62, 58, 53, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---------- botões ---------- */
.btn {
  background: linear-gradient(180deg, #3D5C44 0%, #2F4A35 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px rgba(47, 74, 53, .25);
  transition: transform .12s, box-shadow .2s;
}
.btn:active { transform: scale(.97); }
.btn.wa { background: linear-gradient(180deg, #27A564 0%, #1F8F55 100%); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 6px 16px rgba(31, 143, 85, .28); }
.btn.ghost, .btn.danger {
  background: rgba(255,255,255,.45); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-color: rgba(255,255,255,.8);
}
.btn.soft { background: rgba(126, 156, 118, .18); box-shadow: none; }

/* dias e horários (agendamento) */
.day, .slot, .big-option, .scale-buttons button {
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 10px rgba(62,58,53,.06);
  border-radius: 18px; transition: transform .12s;
}
.day:active, .slot:active, .big-option:active, .scale-buttons button:active { transform: scale(.96); }
.slot { color: var(--green); background: rgba(226, 234, 223, .72); }
.day.active, .month.active { background: linear-gradient(180deg, #3D5C44, #2F4A35); border-color: transparent; }
.month { background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.7); }
.scale-buttons button:nth-child(-n+4) { background: rgba(226, 234, 223, .75); }
.scale-buttons button:nth-child(n+8) { background: rgba(243, 220, 212, .75); }

/* chips e campos: claros e nítidos */
.chip span { background: rgba(255,255,255,.75); border-color: rgba(62,58,53,.10); }
.chip input:checked + span { background: linear-gradient(180deg, #3D5C44, #2F4A35); box-shadow: 0 2px 8px rgba(47,74,53,.22); }
.chip.warn input:checked + span { background: linear-gradient(180deg, #C4554B, #B5483F); }
input[type=text], input[type=tel], input[type=date], input[type=time], input[type=number],
input[type=password], input[type=search], select, textarea {
  background: rgba(255,255,255,.92); border-color: rgba(62,58,53,.10); border-radius: 14px;
}
.tabs a { background: rgba(255,255,255,.5); border-color: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.tabs a.on { background: linear-gradient(180deg, #3D5C44, #2F4A35); }
.consent, .selected-points { background: rgba(255,255,255,.6); }

/* ---------- acessibilidade e aparelhos fracos: sólido ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .number, details.section, .portal-top, .bottom-nav, .public-header, dialog,
  .day, .slot, .big-option, .scale-buttons button, .tabs a { background-color: #FFFDF9; }
}
@media (prefers-reduced-transparency: reduce) {
  .card, .number, details.section, .portal-top, .bottom-nav, .public-header, dialog,
  .day, .slot, .big-option, .scale-buttons button, .tabs a, .btn.ghost {
    background-color: #FFFDF9; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}