/* ============================================================
   CEAON · Organic Nails — estilos base (mobile-first)
   ============================================================ */
:root {
  --black: #0d0d0d;
  --ink: #1a1a1a;
  --white: #ffffff;
  --gray-100: #f5f5f5;
  --gray-300: #d9d9d9;
  --gray-500: #8a8a8a;
  --gray-700: #4a4a4a;
  --accent: #c8a25a;          /* dorado sobrio */
  --presencial: #111111;      /* pin negro CEAON */
  --domicilio: #e63946;       /* pin rojo Manos Expertas */
  --star: #f4c430;
  --radius: 16px;
  --shadow: 0 8px 30px rgba(0,0,0,.12);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body { display: flex; flex-direction: column; min-height: 100dvh; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { max-width: 100%; display: block; }

.app { width: 100%; max-width: 480px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; position: relative; }

/* Vistas de la SPA: solo una visible a la vez, con fundido de entrada elegante */
.view[hidden] { display: none !important; }
.view--in { animation: viewIn 1s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes viewIn { from { opacity: 0; } to { opacity: 1; } }

/* Entrada del mapa: fundido lento y fino, controles que aparecen muy suaves */
#view-map.view--in .map-banner { animation: ctrlIn 1.1s cubic-bezier(.16,1,.3,1) .35s both; }
#view-map.view--in .map-filter { animation: ctrlInUp 1.1s cubic-bezier(.16,1,.3,1) .5s both; }
#view-map.view--in .bottom-nav { animation: ctrlInUp 1.1s cubic-bezier(.16,1,.3,1) .62s both; }
@keyframes ctrlIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes ctrlInUp { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: 1rem;
  transition: transform .12s ease, opacity .12s ease; width: 100%;
}
.btn:active { transform: scale(.97); }
.btn--dark { background: var(--black); color: var(--white); }
.btn--accent { background: var(--accent); color: var(--black); }
.btn--ghost { background: transparent; border: 1.5px solid var(--gray-300); color: var(--ink); }

/* ---------- Header ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(.8rem + var(--safe-top)) 1rem .8rem;
  background: var(--white); border-bottom: 1px solid var(--gray-100);
  position: sticky; top: 0; z-index: 500;
}
.topbar__logo { height: 30px; }
.topbar__title { font-weight: 700; letter-spacing: .04em; font-size: 1rem; }
.topbar__right { display: flex; align-items: center; gap: 8px; }
.topbar__user {
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--gray-300);
  display: grid; place-items: center; color: var(--gray-700);
}

/* ---------- Utilidades ---------- */
.stars { color: var(--star); letter-spacing: 1px; }
.muted { color: var(--gray-500); }
.center { text-align: center; }
.hidden { display: none !important; }