/* ============================================================
   DentoApp — estilos (mobile-first, estética clínica premium)
   ============================================================ */
:root {
  --teal-900:#08414a; --teal-800:#0a5560; --teal-700:#0e7c86; --teal-600:#12969e; --teal-500:#18b0b5;
  --teal-100:#cfeceb; --teal-050:#e9f6f5;
  --ink:#0f2429; --ink-2:#3d565c; --muted:#6b8085;
  --bg:#eef4f4; --surface:#ffffff; --line:#e0eaea;
  --ok:#0a9d6b; --ok-bg:#e2f6ee;
  --warn:#c9820a; --warn-bg:#fdf2dd;
  --err:#d0453b; --err-bg:#fbe7e5;
  --colega:#7c5cff; --trabajo:#0e8f97; --general:#2f80ed;
  --shadow-sm:0 2px 8px rgba(12,52,58,.06);
  --shadow:0 10px 30px rgba(12,52,58,.10);
  --shadow-lg:0 24px 60px rgba(8,52,58,.20);
  --radius:18px; --radius-sm:13px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --nav-h:66px;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; padding:0; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
}
img { max-width:100%; display:block; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* ---------- Boot ---------- */
.boot { min-height:100dvh; display:grid; place-content:center; gap:14px; color:var(--muted); }
.boot__spinner, .btn.is-loading::before {
  width:30px; height:30px; border-radius:50%;
  border:3px solid var(--teal-100); border-top-color:var(--teal-600);
  animation:spin .8s linear infinite; margin:0 auto;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ============================================================
   LOGIN
   ============================================================ */
.login {
  position:relative; overflow:hidden;
  min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 24px calc(32px + var(--safe-bottom));
  background:
    radial-gradient(130% 90% at 50% -20%, var(--teal-050) 0%, rgba(233,246,245,0) 60%),
    linear-gradient(180deg,#f3f9f8 0%, var(--bg) 100%);
}
/* Blobs de fondo (decorativos, suaves) */
.login__blobs { position:absolute; inset:0; z-index:0; pointer-events:none; }
.blob { position:absolute; border-radius:50%; filter:blur(40px); opacity:.5; }
.blob--a { width:280px; height:280px; top:-70px; right:-80px;
  background:radial-gradient(circle at 30% 30%, #7fded9, transparent 70%); animation:float1 14s ease-in-out infinite; }
.blob--b { width:240px; height:240px; bottom:-60px; left:-70px;
  background:radial-gradient(circle at 60% 40%, #a9c7ff, transparent 70%); opacity:.4; animation:float2 18s ease-in-out infinite; }
@keyframes float1 { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-18px,20px) scale(1.08);} }
@keyframes float2 { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(16px,-16px) scale(1.06);} }
@media (prefers-reduced-motion: reduce) { .blob { animation:none; } }

.login__card {
  position:relative; z-index:1; width:100%; max-width:360px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.login__logo {
  position:relative; width:92px; height:92px; border-radius:26px; display:grid; place-items:center;
  background:linear-gradient(155deg, var(--teal-500) 0%, var(--teal-800) 100%);
  color:#fff; box-shadow:0 18px 38px rgba(10,72,80,.34), inset 0 1px 0 rgba(255,255,255,.35);
  margin-bottom:24px; overflow:hidden;
}
.login__logo svg { width:50px; height:50px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.12)); }
.login__logo-shine { position:absolute; top:-40%; left:-20%; width:90%; height:80%;
  background:linear-gradient(180deg, rgba(255,255,255,.5), transparent); border-radius:50%; transform:rotate(-18deg); pointer-events:none; }
.login__title {
  font-size:30px; font-weight:800; letter-spacing:-.7px; margin:0;
  background:linear-gradient(120deg, var(--teal-800), var(--teal-600));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.login__tagline { margin:7px 0 32px; color:var(--muted); font-size:15px; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  padding:16px 22px; border-radius:15px; font-size:16px; font-weight:650;
  transition:transform .14s ease, box-shadow .16s ease, opacity .12s;
}
.btn:active { transform:scale(.975); }
.btn--google {
  background:#fff; color:#1f2937; width:100%;
  border:1px solid var(--line); box-shadow:0 6px 18px rgba(12,52,58,.12);
}
.btn--google:active { box-shadow:0 3px 10px rgba(12,52,58,.14); }
.btn--google .gicon { width:20px; height:20px; }
.btn.is-loading { color:transparent; position:relative; }
.btn.is-loading::before { content:""; position:absolute; inset:0; margin:auto; }
.btn--danger { background:var(--err-bg); color:var(--err); width:100%; }
.btn--ghost { background:transparent; color:var(--muted); width:100%; }

.login__chip {
  margin-top:22px; display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.7);
  border:1px solid var(--line); color:var(--teal-700); font-size:12px; font-weight:600;
  backdrop-filter:blur(6px);
}
.login__chip svg { flex:0 0 auto; }

/* ============================================================
   SHELL
   ============================================================ */
.shell { min-height:100dvh; display:flex; flex-direction:column; }
.topbar {
  position:sticky; top:0; z-index:20;
  padding:calc(var(--safe-top) + 11px) 16px 11px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar__brand { display:flex; align-items:center; gap:9px; font-weight:800; color:var(--teal-900); letter-spacing:-.3px; font-size:16px; }
.brand-ico { width:28px; height:28px; border-radius:9px; background:linear-gradient(155deg,var(--teal-500),var(--teal-800)); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-sm); }
.brand-ico svg { width:17px; height:17px; }
.topbar__user { display:flex; align-items:center; gap:8px; padding:4px 12px 4px 4px; border-radius:999px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.topbar__name { font-size:13px; font-weight:650; color:var(--ink-2); }
.avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; }
.avatar--initial { background:linear-gradient(155deg,var(--teal-500),var(--teal-800)); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:700; }

.view { flex:1; padding:18px 16px calc(var(--nav-h) + var(--safe-bottom) + 22px); }
.page { display:flex; flex-direction:column; gap:16px; max-width:560px; margin:0 auto; width:100%; }

/* Hero */
.hero { padding:4px 4px 2px; }
.hero__hello { margin:2px 0 4px; color:var(--muted); font-size:14px; font-weight:500; }
.hero__title { margin:0; font-size:26px; font-weight:800; letter-spacing:-.6px; color:var(--teal-900); }

/* Card */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.card__title { margin:0 0 13px; font-size:15px; font-weight:750; color:var(--ink); display:flex; align-items:center; gap:7px; }
.card__body { display:flex; flex-direction:column; gap:11px; }
.muted { color:var(--muted); font-size:14px; line-height:1.55; margin:0; }
.small { font-size:12.5px; }

.statusline { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:650; padding:9px 13px; border-radius:11px; align-self:flex-start; }
.statusline--ok { background:var(--ok-bg); color:var(--ok); }
.statusline--wait { background:var(--teal-050); color:var(--teal-700); }
.statusline--error { background:var(--err-bg); color:var(--err); }

/* Lista de pestañas */
.tablist { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; }
.tablist__clinic { font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); margin:15px 0 7px; }
.tablist__clinic:first-child { margin-top:4px; }
.tablist__item { display:flex; align-items:center; gap:11px; padding:12px 13px; background:var(--bg); border-radius:12px; margin-bottom:7px; font-size:14.5px; font-weight:650; color:var(--ink-2); }
.tablist__item .tag { margin-left:auto; }
.dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 0 3px rgba(0,0,0,.03); }
.dot--general { background:var(--general); } .dot--trabajo { background:var(--trabajo); } .dot--colega { background:var(--colega); }
.tag { font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; }
.tag--general { background:#eaf1fd; color:var(--general); } .tag--trabajo { background:var(--teal-050); color:var(--trabajo); } .tag--colega { background:#efeaff; color:var(--colega); }

/* Accesos rápidos */
.quick { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
.quick__btn { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:17px 8px; display:flex; flex-direction:column; align-items:center; gap:9px; font-size:12.5px; font-weight:650; color:var(--ink-2); box-shadow:var(--shadow-sm); transition:transform .14s, box-shadow .14s; }
.quick__btn:active { transform:translateY(1px) scale(.97); box-shadow:var(--shadow-sm); }
.quick__ico { font-size:21px; width:46px; height:46px; display:grid; place-items:center; background:linear-gradient(155deg,var(--teal-050),#d7efee); color:var(--teal-700); border-radius:13px; font-weight:700; }

/* Empty / placeholder */
.empty { text-align:center; padding:52px 20px; display:flex; flex-direction:column; align-items:center; gap:13px; }
.empty__icon { width:70px; height:70px; display:grid; place-items:center; font-size:31px; background:linear-gradient(155deg,var(--teal-050),#d7efee); color:var(--teal-700); border-radius:22px; box-shadow:var(--shadow-sm); }
.empty__title { margin:0; font-size:21px; font-weight:800; color:var(--teal-900); letter-spacing:-.3px; }
.empty__desc { margin:0; color:var(--muted); max-width:320px; line-height:1.55; font-size:14.5px; }

/* Bottom nav */
.tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  height:calc(var(--nav-h) + var(--safe-bottom)); padding-bottom:var(--safe-bottom);
  display:grid; grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line);
}
.tabbar__btn { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--muted); font-size:11px; font-weight:650; transition:color .14s; }
.tabbar__ico { font-size:19px; line-height:1; transition:transform .16s; }
.tabbar__btn.is-active { color:var(--teal-700); }
.tabbar__btn.is-active .tabbar__ico { transform:translateY(-1px) scale(1.06); }
.tabbar__btn.is-active::before { content:""; position:absolute; top:8px; width:30px; height:30px; border-radius:10px; background:var(--teal-050); z-index:-1; }

/* Bottom sheet */
.sheet-backdrop { position:fixed; inset:0; z-index:60; background:rgba(8,28,32,.44); display:flex; align-items:flex-end; animation:fade .18s ease; }
@keyframes fade { from { opacity:0; } }
.sheet { width:100%; background:var(--surface); border-radius:24px 24px 0 0; padding:10px 18px calc(24px + var(--safe-bottom)); display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow-lg); animation:slideup .26s cubic-bezier(.2,.8,.2,1); }
@keyframes slideup { from { transform:translateY(100%); } }
.sheet__grip { width:40px; height:5px; border-radius:3px; background:var(--line); margin:2px auto 8px; }
.sheet__user { display:flex; align-items:center; gap:12px; padding:8px 4px 15px; border-bottom:1px solid var(--line); }
.sheet__user .avatar { width:46px; height:46px; }
.sheet__name { font-weight:750; font-size:16px; }
.sheet__email { color:var(--muted); font-size:13px; }

/* Toast */
.toast { position:fixed; left:50%; bottom:calc(var(--nav-h) + var(--safe-bottom) + 16px); transform:translate(-50%,20px); z-index:80; background:var(--ink); color:#fff; padding:12px 16px; border-radius:12px; font-size:13.5px; max-width:88%; text-align:center; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; box-shadow:var(--shadow); }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }
.toast--error { background:var(--err); }
.toast--ok { background:var(--ok); }

@media (min-width:640px) {
  .view { padding-top:26px; }
}