/* App del cliente (app.<dominio>) con la estética de la portada: verde lima para la acción principal, violeta para
   los detalles, botones redondeados y la barra de abajo oscura. Va después de barrio.css y solo en la app, así el
   mostrador de los locales queda como está. */
:root{
  --bg:#f6f4ef; --surface:#ffffff; --ink:#14122b; --muted:#6b6886; --line:#e7e3ee;
  --accent:#6b4bff; --accent-soft:#ece7ff; --on-accent:#ffffff; --stamp-empty:#d9d5e4;
  --lime:#c6ff3a; --on-lime:#14122b; --bar:#14122b;
}
:root[data-theme="dark"]{
  --bg:#0d0c1d; --surface:#16142d; --ink:#f4f2ff; --muted:#a9a5c9; --line:#2a2748;
  --accent:#9b85ff; --accent-soft:#2a2357; --stamp-empty:#3a3760; --bar:#22204a;
}
body{-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:800;letter-spacing:-.03em}
.hero h2{font-size:30px;line-height:1.05}
.top h2{font-size:28px}

/* Logo: el mismo cuadradito lima con la estrella de la portada */
.brand-mark{width:44px;height:44px;border:0;border-radius:14px;background:var(--lime);color:var(--on-lime);transform:none}
.brand h1{font-size:22px}

/* Botones */
.btn{background:var(--lime);color:var(--on-lime);border-radius:999px;padding:15px 18px;transition:transform .15s}
.btn:active{transform:scale(.98)}
.btn.ghost{background:none;color:var(--ink);border:1.5px solid var(--line)}
.btn.danger{border-radius:999px}
.btn.small{padding:8px 14px;font-size:13px}
.link{color:var(--accent);text-decoration:none;font-weight:600}
.back{color:var(--accent)}

/* Tarjetas de contenido: sin bordes marcados, apenas una sombra */
.panel,.qrcard,.list,.facts,.empty{border-color:transparent;box-shadow:0 1px 2px rgba(20,18,43,.06),0 8px 24px -16px rgba(20,18,43,.25)}
.panel{border-radius:22px}
.qrcard{border-radius:28px;padding:24px 20px}
.list,.facts{border-radius:20px}
.empty{border:1.5px dashed var(--line);box-shadow:none}
input,select{border-radius:14px}
:root[data-theme="dark"] .panel,:root[data-theme="dark"] .qrcard,:root[data-theme="dark"] .list,:root[data-theme="dark"] .facts{box-shadow:none;border-color:var(--line)}

/* Avatar (public/js/avatar.js) */
.avatar{width:46px;height:46px;padding:0;overflow:hidden;background:var(--accent-soft);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--lime)}
.avatar svg{display:block;width:100%;height:100%}
.avatar.big{width:72px;height:72px;border-radius:22px;flex:none}
.me-card{display:flex;align-items:center;gap:16px;background:var(--surface);border-radius:22px;padding:16px;
  box-shadow:0 1px 2px rgba(20,18,43,.06),0 8px 24px -16px rgba(20,18,43,.25)}
.me-card>div:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.me-card b{font-family:var(--display);font-size:19px}
.me-card span{color:var(--muted);font-size:13px;margin-bottom:6px}
:root[data-theme="dark"] .me-card{box-shadow:none;border:1px solid var(--line)}

.ava-pick{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center}
.ava-big{aspect-ratio:1;border-radius:24px;overflow:hidden;background:var(--accent-soft)}
.ava-big svg{display:block;width:100%;height:100%}
.ava-pick b{font-family:var(--display);font-size:24px}
.ava-traits{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.ava-traits li{padding:5px 9px;border-radius:10px;background:var(--surface);font-size:13px;font-weight:600}
.ava-traits small{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ava-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ava-grid button{padding:0;border:0;border-radius:18px;overflow:hidden;aspect-ratio:1;background:var(--accent-soft);transition:transform .15s}
.ava-grid button:active{transform:scale(.96)}
.ava-grid button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--accent)}
.ava-grid svg{display:block;width:100%;height:100%}

/* Mi QR */
.ring .p{stroke:var(--accent)}
.how li span{background:var(--accent-soft);color:var(--accent)}
.banner{border-radius:18px}

/* Barra de abajo: una píldora oscura, la pestaña elegida en lima */
.tabs{background:var(--bar);border:0;border-radius:999px;padding:6px;box-shadow:0 14px 30px -12px rgba(20,18,43,.55)}
.tabs button{color:rgba(255,255,255,.7);border-radius:999px}
.tabs button[aria-current="page"]{background:var(--lime);color:var(--on-lime)}
.tabs .theme-btn{color:#fff}

.toast{border-radius:999px;padding:12px 18px;background:var(--bar);color:#fff}

/* Tarjetas del tarjetero y del detalle */
.pass{border-radius:20px}
.lcard{border-radius:26px}
.chip.ready{background:var(--lime);color:var(--on-lime)}

/* Instalar la app (Mi QR y Mi cuenta) y la guía para iPhone */
.install{position:relative;display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:20px;padding:12px 14px;
  box-shadow:0 1px 2px rgba(20,18,43,.06),0 8px 24px -16px rgba(20,18,43,.25)}
.install img{flex:none;border-radius:12px}
.install>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.install b{font-family:var(--display);font-size:16px;letter-spacing:-.02em}
.install span{font-size:13px;color:var(--muted)}
.install .btn{flex:none}
.install-x{position:absolute;top:-8px;right:-6px;width:26px;height:26px;border-radius:50%;border:0;background:var(--bar);color:#fff;font-size:12px;line-height:1}
:root[data-theme="dark"] .install{box-shadow:none;border:1px solid var(--line)}
.sheet-bg{position:fixed;inset:0;z-index:30;background:rgba(13,12,29,.55);display:flex;align-items:flex-end;justify-content:center;padding:12px}
.sheet{width:100%;max-width:430px;background:var(--surface);color:var(--ink);border-radius:26px;padding:22px 20px 18px;
  margin-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -10px 40px -10px rgba(0,0,0,.4)}
.sheet h3{font-size:22px;margin-bottom:12px}
.ios-steps{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:12px}
.ios-steps li{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.ios-steps li>span{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:13px}
.ios-steps svg{vertical-align:-3px;color:var(--accent)}
@media (prefers-reduced-motion: no-preference){.sheet{animation:sheet-up .25s ease-out}@keyframes sheet-up{from{transform:translateY(30px);opacity:0}}}