/* ===== navo · Panel — estilos (marca oficial) ===== */
:root{
  --deep:#124734;      /* verde profundo (primario) */
  --green:#1E5C4A;     /* verde medio */
  --sage:#3E7C63;      /* salvia */
  --cream:#F2F4EF;     /* crema (fondo) */
  --gray:#E6E9E4;      /* gris claro */
  --red:#C1453B;       /* cancelada / no-show (funcional, tono terroso) */
  --ink:#124734;       /* texto */
  --muted:#5C7268;     /* texto secundario */
  --border:#E1E7E1;
  --card:#FFFFFF;
  --shadow:0 1px 2px rgba(18,71,52,.05), 0 10px 26px rgba(18,71,52,.08);
  --radius:16px;
  --font:"Nunito", system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box}
[x-cloak]{display:none !important}
html,body{margin:0;height:100%}
body{font-family:var(--font);color:var(--ink);background:var(--cream);
     -webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
img{max-width:100%}

/* ===== LOGIN ===== */
.login{min-height:100dvh;display:grid;place-items:center;position:relative;padding:24px;
  background:radial-gradient(120% 120% at 50% -10%, #1c6a4c 0%, var(--deep) 62%, #0e3a2a 100%)}
.login::before{content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);background-size:24px 24px}
.login-inner{position:relative;text-align:center;width:min(400px,92vw)}
.login-logo{width:220px;margin:0 auto;filter:drop-shadow(0 8px 20px rgba(0,0,0,.25))}
.tagline{color:#CFE3D8;font-size:1rem;font-weight:600;margin:18px 0 30px;letter-spacing:.01em}
.gbtn{display:flex;justify-content:center;min-height:44px}
.login-hint{margin:20px 0 0;color:rgba(255,255,255,.6);font-size:.84rem}
.login-error{margin:14px auto 0;max-width:320px;color:#fff;background:rgba(193,69,59,.9);
  border-radius:12px;padding:10px 14px;font-size:.88rem;font-weight:600}
.login-foot{position:absolute;bottom:20px;left:0;right:0;text-align:center;
  color:rgba(255,255,255,.5);font-size:.78rem;letter-spacing:.02em}

/* ===== APP SHELL ===== */
.app{min-height:100dvh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:22px;padding:0 22px;height:62px;
  background:var(--deep);color:#fff;position:sticky;top:0;z-index:10}
.topbar-logo{height:30px;width:auto}
.nav{display:flex;gap:4px}
.nav button{background:transparent;border:0;color:rgba(255,255,255,.72);font-size:.95rem;
  font-weight:700;padding:9px 15px;border-radius:10px;transition:.15s}
.nav button:hover{color:#fff;background:rgba(255,255,255,.1)}
.nav button.active{color:var(--deep);background:var(--cream)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.negocio{font-size:.92rem;font-weight:700;color:rgba(255,255,255,.92);
  max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logout{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;
  font-size:.85rem;font-weight:700;padding:7px 14px;border-radius:10px;transition:.15s}
.logout:hover{background:rgba(255,255,255,.22)}

.content{flex:1;padding:32px 24px;max-width:1180px;width:100%;margin:0 auto}
.panel-head{margin-bottom:20px}
.panel-head h2{font-weight:800;font-size:1.7rem;margin:0;letter-spacing:-.02em;color:var(--deep)}
.panel-head .sub{margin:4px 0 0;color:var(--muted);font-size:.95rem;font-weight:600}
.placeholder{background:var(--card);border:1px dashed var(--border);border-radius:var(--radius);
  padding:60px 24px;text-align:center;color:var(--muted);font-size:1rem;font-weight:600;box-shadow:var(--shadow)}

/* ===== SPLASH (bienvenida) ===== */
.splash{position:fixed;inset:0;z-index:60;display:grid;place-items:center;cursor:pointer;
  background:radial-gradient(120% 120% at 50% -10%, #1c6a4c, var(--deep) 62%, #0e3a2a 100%)}
.splash::before{content:"";position:absolute;inset:0;opacity:.05;
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);background-size:24px 24px}
.splash-inner{position:relative;text-align:center;color:#fff}
.splash-logo{width:120px;height:auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.3));
  animation:pop .7s cubic-bezier(.2,.9,.25,1) both}
.splash-word{font-weight:800;font-size:2.4rem;letter-spacing:-.02em;margin-top:12px;
  animation:rise .55s .3s both}
.splash-hello{font-size:1.05rem;font-weight:700;margin-top:12px;color:#fff;animation:rise .55s .5s both}
.splash-sub{font-size:.85rem;font-weight:600;color:rgba(255,255,255,.6);margin-top:4px;animation:rise .55s .62s both}
@keyframes pop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ===== responsive ===== */
@media (max-width:640px){
  .topbar{gap:10px;padding:0 12px;flex-wrap:wrap;height:auto;min-height:56px}
  .topbar-logo{height:26px}
  .nav{order:3;width:100%;margin:0 0 8px;justify-content:space-between}
  .nav button{flex:1;text-align:center;padding:9px 6px;font-size:.88rem}
  .negocio{max-width:120px}
  .content{padding:22px 14px}
  .login-logo{width:180px}
}

/* ===== accesibilidad ===== */
:focus-visible{outline:2px solid var(--sage);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}