/* public/css/style.css — Tema claro (padrão) inspirado na referência do cliente, com alternância
   para escuro. Complementa o Tailwind (CDN). Trocar tema: document.documentElement.dataset.theme
   = 'light' | 'dark' (ver BarberApp.initTheme/toggleTheme em app.js). */

:root {
  /* Tema claro — padrão */
  --bg: #fafafa;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --border: #e4e4e7;
  --gold: #d9762f;       /* acento laranja/terracota, como na referência */
  --gold-soft: #f0a868;
  --text: #18181b;
  --text-muted: #71717a;
  --success: #16a34a;
  --warning: #ca8a04;
  --danger: #dc2626;
  --shadow: 0 1px 3px rgba(0,0,0,.06);
}

:root[data-theme="dark"] {
  --bg: #0b0b0d;
  --bg-elevated: #16161a;
  --bg-card: #1c1c21;
  --border: #2a2a30;
  --gold: #d4af37;
  --gold-soft: #f1d98b;
  --text: #f5f5f0;
  --text-muted: #a1a1aa;
  --success: #22c55e;
  --warning: #eab308;
  --danger: #ef4444;
  --shadow: 0 4px 20px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.25rem; border-radius: 12px; font-weight: 600; font-size: .95rem;
  transition: transform .15s ease, opacity .15s ease; cursor: pointer; border: none;
}
.btn:active { transform: scale(.97); }
.btn-gold { background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: #fff; }
:root:not([data-theme="dark"]) .btn-gold { color: #ffffff; }
.btn-gold:hover { opacity: .92; }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-danger { background: var(--danger); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 999px; }

.input, select.input, textarea.input {
  width: 100%; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: .7rem .9rem; font-size: .95rem;
}
.input:focus { outline: none; border-color: var(--gold); }

.badge {
  display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600;
}
.badge-dot { width: .5rem; height: .5rem; border-radius: 999px; display: inline-block; }
.dot-open { background: var(--success); }
.dot-break { background: var(--warning); }
.dot-closed { background: var(--danger); }

/* --- Selo da logo (fallback com iniciais em degradê de 2 cores) --------- */
.logo-badge {
  width: 2.25rem; height: 2.25rem; border-radius: 999px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: #fff; font-weight: 800; font-size: .85rem; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* --- Avatares circulares (profissionais) -------------------------------- */
.avatar-ring {
  border-radius: 999px; border: 2px solid var(--gold); padding: 2px; position: relative; display: inline-block;
}
.avatar-status {
  position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; border-radius: 999px;
  background: var(--success); border: 2px solid var(--bg-card);
}

/* --- Toasts ------------------------------------------------------------ */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text);
  padding: .75rem 1.25rem; border-radius: 12px; opacity: 0; transition: all .3s ease; z-index: 9999;
  max-width: 90vw; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-error { border-color: var(--danger); }
.toast-success { border-color: var(--success); }

/* --- Cropper de imagens (media.js) -------------------------------------- */
.cropper-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.cropper-box {
  background: var(--bg-card); border-radius: 16px; padding: 1.25rem; width: 100%; max-width: 420px;
  border: 1px solid var(--border);
}
.cropper-box h3 { margin: 0 0 .75rem; font-size: 1rem; color: var(--gold); }
.cropper-canvas-wrap { width: 100%; overflow: hidden; border-radius: 12px; background: #000; touch-action: none; }
.cropper-canvas-wrap.is-round { border-radius: 999px; }
.cropper-canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.cropper-zoom { width: 100%; margin: .9rem 0; accent-color: var(--gold); }
.cropper-actions { display: flex; justify-content: flex-end; gap: .6rem; }

/* --- Widget de IA -------------------------------------------------------- */
.ai-fab {
  position: fixed; right: 18px; bottom: 18px; width: 58px; height: 58px; border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold)); display: flex; align-items: center;
  justify-content: center; box-shadow: 0 8px 24px rgba(217,118,47,.4); z-index: 9000; cursor: pointer; border: none;
}
.ai-panel {
  position: fixed; right: 18px; bottom: 88px; width: min(360px, 92vw); max-height: 60vh; z-index: 9000;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; display: none;
  flex-direction: column; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.ai-panel.open { display: flex; }
.ai-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.ai-msg { padding: .6rem .85rem; border-radius: 12px; font-size: .88rem; max-width: 85%; }
.ai-msg.user { align-self: flex-end; background: var(--gold); color: #fff; }
.ai-msg.bot { align-self: flex-start; background: var(--bg-elevated); border: 1px solid var(--border); }

.skeleton { background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--border) 37%, var(--bg-elevated) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 10px; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.bottom-nav { position: sticky; bottom: 0; background: var(--bg-elevated); border-top: 1px solid var(--border); }