:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #171717;
  background: #f5f4f0;
  --line: #dcdad3;
  --soft: #efeee8;
  --muted: #64645e;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
a {
  color: inherit;
}
header {
  height: 76px;
  max-width: 760px;
  margin: auto;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
header img {
  width: 76px;
  max-height: 42px;
}
header a:last-child {
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  padding: 12px;
}
main {
  max-width: 720px;
  margin: auto;
  padding: 28px 20px 110px;
  outline: none;
}
h1 {
  font-size: 34px;
  letter-spacing: -1.4px;
  line-height: 1.07;
  margin: 12px 0 14px;
}
h2 {
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 24px 0 12px;
}
h3 {
  font-size: 17px;
  margin: 0 0 8px;
}
p {
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 16px;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  margin: 4px 0;
}
.muted,
.sub {
  color: var(--muted);
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  margin: 12px 0;
  min-width: 0;
}
.card p:last-child {
  margin-bottom: 0;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.stack {
  display: grid;
  gap: 10px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.btn,
button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  border: 1px solid #171717;
  background: #171717;
  color: #fff;
  border-radius: 13px;
  padding: 13px 18px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
.btn:active,
button:active {
  transform: scale(0.985);
}
button:disabled {
  background: #e5e4de;
  color: #777;
  border-color: #ddd;
  cursor: not-allowed;
  transform: none;
}
.secondary {
  background: transparent;
  color: #171717;
  border-color: var(--line);
}
.wide {
  width: 100%;
}
.small {
  font-size: 13px;
  min-height: 44px;
  padding: 10px 14px;
}
.danger {
  color: #9e2c2c;
  background: #fff;
  border-color: #cfa7a7;
}
.service {
  width: 100%;
  text-align: left;
  justify-content: space-between;
  background: #fff;
  color: #171717;
  border-color: var(--line);
  padding: 20px;
  border-radius: 18px;
  min-height: 94px;
}
.service strong {
  display: block;
  font-size: 17px;
  line-height: 1.3;
}
.service small {
  font-weight: 400;
  color: var(--muted);
  display: block;
  margin-top: 8px;
}
.service .choose {
  background: #171717;
  color: #fff;
  padding: 10px 13px;
  border-radius: 10px;
  font-size: 12px;
}
.portrait {
  width: 58px;
  height: 64px;
  border-radius: 15px;
  object-fit: cover;
  background: var(--soft);
}
label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin: 18px 0 7px;
}
input,
select,
textarea {
  display: block;
  width: 100%;
  border: 1px solid #ccc9c0;
  border-radius: 12px;
  padding: 14px;
  background: #fff;
  color: #171717;
  font-size: 16px;
  min-height: 50px;
}
textarea {
  min-height: 100px;
  resize: vertical;
}
input[type="checkbox"] {
  width: 21px;
  min-height: 21px;
  flex-shrink: 0;
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  line-height: 1.5;
}
.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
.form-actions > * {
  flex: 1;
}
.badge {
  display: inline-block;
  border-radius: 30px;
  background: var(--soft);
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
}
.warning {
  background: #fff5de;
  border: 1px solid #e2d0a1;
  padding: 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
}
.error {
  color: #a62a29;
  background: #fff0ee;
  padding: 12px;
  border-radius: 12px;
  margin: 16px 0;
}
.empty {
  padding: 26px 20px;
  border: 1px dashed #ccc9c0;
  border-radius: 18px;
  margin: 18px 0;
  color: var(--muted);
  line-height: 1.5;
}
.days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin: 18px 0;
}
.day {
  padding: 10px 0;
  min-width: 0;
  font-size: 14px;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  color: #171717;
  border-color: var(--line);
  min-height: 64px;
}
.day small {
  font-size: 10px;
  font-weight: 400;
}
.day.active {
  background: #171717;
  color: #fff;
}
.slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.slot {
  background: #fff;
  color: #171717;
  border-color: var(--line);
}
.metric {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 8px 0;
}
.metric-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.tabs {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding-bottom: 5px;
}
.tabs a {
  white-space: nowrap;
}
.receipt {
  background: #e9eddf;
  border: 1px solid #cdd5bb;
  padding: 22px;
  border-radius: 18px;
}
.receipt h2 {
  margin-top: 0;
}
nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  background: #f5f4f0f5;
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 10px 8px max(10px, env(safe-area-inset-bottom));
  justify-content: center;
  gap: 3px;
}
nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  max-width: 140px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  min-height: 44px;
  border-radius: 10px;
  color: var(--muted);
}
nav a.active {
  background: #171717;
  color: #fff;
}
#notice {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 85px;
  max-width: 600px;
  margin: auto;
  z-index: 30;
  border-radius: 12px;
  background: #171717;
  color: #fff;
  padding: 14px;
  display: none;
}
#notice.visible {
  display: block;
}
:focus-visible {
  outline: 3px solid #8a944c;
  outline-offset: 3px;
}
details {
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
summary {
  font-weight: 700;
  cursor: pointer;
  min-height: 30px;
}
code {
  overflow-wrap: anywhere;
  font-size: 12px;
}
.price {
  font-size: 22px;
  font-weight: 700;
}
.photo {
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.admin-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.admin-menu .btn {
  background: #fff;
  color: #171717;
  border-color: var(--line);
  justify-content: flex-start;
  min-height: 72px;
}
@media (min-width: 700px) {
  main {
    padding-top: 40px;
  }
  h1 {
    font-size: 44px;
  }
  .slots {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 359px) {
  main {
    padding-left: 16px;
    padding-right: 16px;
  }
  h1 {
    font-size: 30px;
  }
  .choose {
    display: none;
  }
  .days {
    gap: 3px;
  }
  .admin-menu {
    grid-template-columns: 1fr;
  }
}
a.card {
  text-decoration: none;
}
.stack > .card {
  margin: 0;
}
.stack {
  margin-top: 20px;
}
.service p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.portrait {
  flex-shrink: 0;
}
.metric {
  display: block;
}
.card small {
  overflow-wrap: anywhere;
}
button:focus-visible,
a:focus-visible {
  outline-offset: 3px;
}
.confirm-dialog{border:1px solid var(--line);border-radius:20px;padding:24px;max-width:420px;width:calc(100% - 32px);color:#171717;background:#f5f4f0}.confirm-dialog::backdrop{background:#17171770}.confirm-dialog h2{margin-top:0}.confirm-dialog .form-actions{margin-top:20px}
.member-card{background:#171717;color:#fff;padding:24px;gap:20px}.member-card .btn{color:#fff;border-color:#555}.member-logo{width:72px;filter:invert(1)}.member-card .row span{font-size:12px;letter-spacing:3px}.qr-code{width:220px;max-width:100%;height:auto;border-radius:12px;justify-self:center}
/* ── Carga sin parpadeo ─────────────────────────────────────────────── */
#app{transition:opacity .15s}
#app.is-loading{opacity:.55;pointer-events:none}
#app.is-loading::before{content:"";position:fixed;top:0;left:0;height:3px;width:40%;background:#171717;z-index:40;animation:garden-bar 1s ease-in-out infinite}
@keyframes garden-bar{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
@media (prefers-reduced-motion:reduce){#app.is-loading::before{animation:none;width:100%}}
/* ── Home: bloques inferiores ─────────────────────────────────────── */
.home-block{margin-top:56px;padding-top:36px;border-top:1px solid var(--line)}
.home-block h2{font-size:28px;letter-spacing:-1px;line-height:1.08;margin:8px 0 14px}
.home-actions{display:grid;gap:10px;margin-top:14px}
.rating-card{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 16px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;text-decoration:none;margin-top:18px}
.g-brand{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted)}
.g-brand svg{width:20px;height:20px}
.rating-number{font-size:52px;font-weight:700;letter-spacing:-2px;line-height:1}
.rating-number small{font-size:16px;color:var(--muted);letter-spacing:0;margin-left:4px;font-weight:400}
.stars{color:#e4a11b;font-size:24px;letter-spacing:2px}
.stars-inline{color:#f2c14e;letter-spacing:1px;font-size:14px}
.rating-count{grid-column:1/-1;font-size:13px;color:var(--muted)}
.map-shell{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;margin-top:18px}
.map-tabs{display:flex;gap:6px;padding:8px;background:var(--soft);border-bottom:1px solid var(--line)}
.map-tab{flex:1;min-height:40px;padding:8px 10px;font-size:13px;border-radius:10px;background:transparent;color:#171717;border-color:transparent}
.map-tab.active{background:#171717;color:#fff}
.map-frame{position:relative;height:360px;background:#e8e7e1}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:13px}
.visit{display:grid;gap:16px;margin-top:12px}
.visit address{font-style:normal;display:grid;gap:3px}
.visit address strong{font-size:18px}
.visit address span,.hours span{color:var(--muted);font-size:14px}
.hours{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hours strong{font-size:18px}
.hours .closed{grid-column:1/-1;font-size:13px}
.ico{width:20px;height:20px}
.pro{background:#1a1b17;color:#f5f4f0;border:0;border-radius:22px;padding:30px 24px;margin-top:56px}
.pro .eyebrow{color:#c1c2b6}
.pro p{color:#d9dacf}
.pro .btn{background:#f5f4f0;color:#171717;border-color:#f5f4f0;margin-top:6px}
.franchise{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:24px}
.franchise .eyebrow{margin:0}
.home-footer{margin-top:56px;padding:28px 0 8px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.home-footer strong{letter-spacing:1px}
.socials{display:flex;gap:16px;font-size:13px;font-weight:700}
.socials a{text-decoration:none;color:var(--muted)}
@media (min-width:700px){
  .home-actions{grid-template-columns:1fr 1fr}
  .map-frame{height:440px}
  .visit{grid-template-columns:1fr 1fr;align-items:center}
  .visit .btn{grid-column:1/-1}
  .home-block h2{font-size:34px}
}
/* ── Reserva: barberos, calendario y datos ──────────────────────────── */
.back-link{display:inline-block;font-size:13px;font-weight:700;color:var(--muted);text-decoration:none;padding:6px 0}
.cromos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
.cromo{position:relative;display:flex;flex-direction:column;text-decoration:none;color:#f5f4f0;background:linear-gradient(160deg,#2a2b25 0%,#121310 70%);border-radius:22px;padding:7px;box-shadow:0 1px 0 #ffffff10 inset,0 14px 30px -18px #000c;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;isolation:isolate;overflow:hidden;-webkit-tap-highlight-color:transparent}
.cromo::after{content:"";position:absolute;inset:0;border-radius:22px;padding:1px;background:linear-gradient(140deg,#ffffff55,#ffffff08 35%,#c9b46e66 70%,#ffffff22);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.cromo::before{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,#ffffff26 50%,transparent 60%);transform:translateX(-60%);transition:transform .7s ease;z-index:2;pointer-events:none}
.cromo-photo{position:relative;display:block;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:#222}
.cromo-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cromo-photo::after{content:"";position:absolute;inset:auto 0 0 0;height:35%;background:linear-gradient(transparent,#0008)}
.cromo-num{position:absolute;top:10px;left:10px;z-index:1;font-size:10px;font-weight:700;letter-spacing:1.5px;background:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid #ffffff30;border-radius:20px;padding:4px 8px}
.cromo-foot{display:grid;gap:3px;padding:11px 8px 8px;text-align:center}
.cromo-name{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;line-height:1.25}
.cromo-role{font-size:10px;letter-spacing:1px;color:#b9b9ad;text-transform:uppercase}
@media (hover:hover){.cromo:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 1px 0 #ffffff10 inset,0 26px 40px -22px #000}.cromo:hover::before{transform:translateX(60%)}.cromo:hover img{transform:scale(1.04)}}
.cromo:active{transform:scale(.97)}
.cromo.picked{transform:scale(.97);box-shadow:0 0 0 3px #f5f4f0,0 0 0 5px #171717}
.cromo.picked::before{transform:translateX(60%)}
.pick-summary{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 14px 10px 10px;margin:14px 0 16px}
.pick-summary img{width:44px;height:44px;border-radius:12px;object-fit:cover;background:var(--soft)}
.pick-summary div{display:grid;gap:2px;min-width:0}
.pick-summary strong{font-size:15px}
.pick-summary span{font-size:13px;color:var(--muted)}
.cal-card,.times,.club-card,.phone-field select,.phone-field input{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.cal-card{background:#fff;border-radius:22px;padding:16px 14px 12px;box-shadow:0 1px 2px #0000000d,0 8px 30px -12px #0000001f;border:1px solid #ecebe6}
.cal-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 10px}
.cal-head strong{font-size:17px;font-weight:600;letter-spacing:-.2px}
.cal-nav{min-height:36px;width:36px;padding:0;border-radius:50%;background:transparent;color:#171717;border:0;font-size:24px;font-weight:400;line-height:1}
.cal-nav:hover:not(:disabled){background:var(--soft)}
.cal-nav:disabled{background:transparent;color:#c9c8c1;border:0}
.cal-week,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center}
.cal-week span{font-size:11px;font-weight:600;color:#8e8e93;padding:6px 0}
.cal-grid{row-gap:4px}
.cal-cell{position:relative;justify-self:center;width:42px;height:42px;min-height:0;padding:0;border-radius:50%;border:0;background:transparent;color:#c7c7cc;font-size:17px;font-weight:400;font-variant-numeric:tabular-nums}
.cal-cell.blank{pointer-events:none}
.cal-cell:disabled{background:transparent;color:#c7c7cc;cursor:default}
.cal-cell.open{color:#171717;font-weight:600}
.cal-cell.open:hover{background:#f2f2f2}
.cal-cell.today{color:#b8860b}
.cal-cell.today:disabled{color:#d9c48f}
.cal-cell.selected,.cal-cell.selected:hover{background:#171717;color:#fff}
.cal-cell.open::after{content:"";position:absolute;bottom:5px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#34c759}
.cal-cell.selected::after{background:#fff}
.times{margin-top:22px}
.times-title{font-size:20px;font-weight:600;letter-spacing:-.3px;margin:0 0 4px}
.times-label{font-size:12px;font-weight:600;color:#8e8e93;text-transform:uppercase;letter-spacing:.6px;margin:16px 0 8px}
.time-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.time-pill{min-height:44px;padding:0;border-radius:12px;background:#fff;color:#171717;border:1px solid #e5e5ea;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;transition:background .15s,transform .1s}
.time-pill:hover{background:#171717;color:#fff;border-color:#171717}
.phone-field{display:flex;gap:8px}
.phone-field select{flex:0 0 auto;width:auto;min-width:108px;padding:14px 10px}
.phone-field input{flex:1;min-width:0}
.club-card{position:relative;margin:26px 0 6px;padding:22px 20px;border-radius:22px;color:#f5f4f0;background:radial-gradient(120% 140% at 100% 0%,#3b3d2c 0%,#1a1b17 55%,#111 100%);overflow:hidden}
.club-card::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;background:radial-gradient(#e6ecae33,transparent 70%)}
.club-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2px;color:#e6ecae;border:1px solid #e6ecae55;border-radius:20px;padding:5px 10px}
.club-card h2{color:#fff;margin:12px 0 6px;font-size:22px}
.club-card p{color:#c9cabd;font-size:14px;margin-bottom:16px}
.club-btn{width:100%;background:#e6ecae;color:#171717;border-color:#e6ecae}
.club-btn:disabled{background:#4a4c3c;color:#c9cabd;border-color:#4a4c3c}
.club-code label{color:#e6ecae;margin-top:16px}
.club-code-row{display:flex;gap:8px}
.club-code-row input{flex:1;min-width:0;letter-spacing:6px;font-size:20px;text-align:center}
.club-code-row .btn{background:#f5f4f0;color:#171717;border-color:#f5f4f0}
.club-joined{margin:22px 0 4px;padding:14px 16px;border-radius:14px;background:#ecf0d5;border:1px solid #c9d29a;font-size:14px;font-weight:700;color:#3e4a16}
.review-when{font-weight:700}
@media (min-width:700px){.cromos{grid-template-columns:repeat(2,minmax(0,250px))}.time-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.cal-cell{width:48px;height:48px}}
@media (max-width:359px){.cal-cell{width:36px;height:36px;font-size:15px}.time-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.cromo,.cromo img,.cromo::before{transition:none}}

/* ── Barra «Continuar» al elegir hora ───────────────────────────── */
.time-pill.selected,.time-pill.selected:hover{background:#171717;color:#fff;border-color:#171717;box-shadow:0 6px 16px -8px #000a}
@media (hover:none){.time-pill:hover{background:#fff;color:#171717;border-color:#e5e5ea}}
.continue-bar{position:fixed;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:20;max-width:560px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;border-radius:20px;background:#fffffff2;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid #e5e5ea;box-shadow:0 12px 40px -12px #0004;transform:translateY(20px);opacity:0;transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .2s;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.continue-bar.visible{transform:none;opacity:1}
.continue-info{display:grid;gap:2px;min-width:0}
.continue-info span{font-size:11px;font-weight:600;color:#8e8e93;text-transform:uppercase;letter-spacing:.6px}
.continue-info strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.continue-bar .btn{flex:0 0 auto;min-width:130px;border-radius:14px}
.times{padding-bottom:90px}

/* ── Navegación con iconos ─────────────────────────────────────────── */
nav{gap:6px;padding-top:8px}
nav a{flex:1;max-width:96px;min-height:50px;border-radius:16px;color:#8a8a82;transition:background .2s,color .2s,transform .15s}
nav a svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
nav a.active{background:#171717;color:#fff}
nav a:active{transform:scale(.94)}
.nav-avatar,.nav-initial{width:28px;height:28px;border-radius:50%;object-fit:cover;display:grid;place-items:center;font-size:13px;font-weight:700;background:#dcdad3;color:#171717;box-shadow:0 0 0 2px #f5f4f0}
nav a.active .nav-avatar,nav a.active .nav-initial{box-shadow:0 0 0 2px #fff}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.center{text-align:center}
.section-label{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:28px 0 10px}
/* ── Datos y Club ─────────────────────────────────────────────────── */
.club-perks{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:8px;color:#d9dacf;font-size:14px}
.club-perks li::before{content:"✦";color:#e6ecae;margin-right:10px}
.club-note{font-size:12px!important;color:#9a9b8e!important;margin:10px 0 0!important;text-align:center}
.club-joined{display:flex;align-items:center;gap:12px}
.club-joined div{display:grid;gap:2px}
.club-joined span:not(.club-check){font-weight:400;font-size:13px}
.club-check{flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#4e5b24;color:#fff;font-size:16px}
.club-joined.pop{animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{0%{transform:scale(.92);opacity:0}100%{transform:none;opacity:1}}
.book-btn{margin-top:18px;min-height:56px;font-size:17px;border-radius:16px}
/* ── Mis citas ─────────────────────────────────────────────────────── */
.appts{display:grid;gap:10px}
.appt{display:flex;align-items:center;gap:14px;padding:12px 14px 12px 12px;background:#fff;border:1px solid var(--line);border-radius:20px;text-decoration:none;color:#171717;box-shadow:0 8px 24px -18px #0006;transition:transform .15s}
.appt:active{transform:scale(.985)}
.appt-date{flex:0 0 58px;display:grid;justify-items:center;padding:8px 0;border-radius:14px;background:#171717;color:#fff;line-height:1.05}
.appt-date small{font-size:10px;text-transform:uppercase;letter-spacing:1px;opacity:.75}
.appt-date strong{font-size:24px;margin:2px 0}
.appt-body{flex:1;display:grid;gap:3px;min-width:0}
.appt-body strong{font-size:16px}
.appt-body>span{font-size:13px;color:var(--muted)}
.appt-state{justify-self:start;font-size:11px!important;font-weight:700;border-radius:20px;padding:3px 9px;margin-top:3px}
.st-ok{background:#e3f3e7;color:#1f7a3a!important}
.st-done{background:var(--soft);color:var(--muted)}
.st-cancel{background:#fbe9e7;color:#a62a29!important}
.appt-face{flex:0 0 46px;width:46px;height:46px;border-radius:14px;object-fit:cover}
.appt.is-past{box-shadow:none;background:#faf9f6}
.appt.is-past .appt-date{background:#e5e4de;color:#64645e}
.appt-empty{display:grid;gap:4px;padding:22px;border:1px dashed #ccc9c0;border-radius:20px;text-decoration:none;color:#171717}
.appt-empty span{color:var(--muted);font-size:14px}
.new-appt{margin-top:22px}
.booked-banner{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;background:#171717;color:#fff;margin-bottom:6px;animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
.booked-banner div{display:grid}
.booked-banner span:not(.booked-check){font-size:13px;color:#c9cabd}
.booked-check{flex:0 0 36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#34c759;color:#fff;font-weight:700}
.booked-hero{text-align:center;padding:20px 0 6px}
.booked-hero .booked-check{width:64px;height:64px;font-size:28px;margin:0 auto 6px}
/* ── Perfil Club ───────────────────────────────────────────────────── */
.member-hero{--a:#c58b4c;--b:#5a3a1d;--glow:#f0c08a;position:relative;overflow:hidden;border-radius:28px;padding:20px 20px 18px;color:#fff;background:radial-gradient(120% 90% at 100% 0%,var(--b) 0%,#16130f 62%);box-shadow:0 24px 50px -28px #000c;isolation:isolate}
.member-hero::before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 210deg,transparent 0 60%,color-mix(in srgb,var(--glow) 40%,transparent) 70%,transparent 80%);animation:spin 9s linear infinite;z-index:-1;opacity:.55}
.member-hero::after{content:"";position:absolute;inset:0;border-radius:28px;padding:1px;background:linear-gradient(135deg,var(--glow),#fff2 40%,var(--a));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.lv-plata{--a:#c9ced6;--b:#3d434c;--glow:#e8edf5}
.lv-oro{--a:#e2b53e;--b:#5b4410;--glow:#ffe08a}
.lv-platino{--a:#9fd7e6;--b:#1d4250;--glow:#c9f3ff}
.lv-leyenda{--a:#c49bff;--b:#3a1d63;--glow:#e3cfff}
.mh-top{display:flex;justify-content:space-between;align-items:center}
.mh-brand{font-size:11px;letter-spacing:3px;color:#ffffffb0}
.mh-brand b{color:var(--glow)}
.mh-level{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:6px 11px;border-radius:30px;background:#ffffff14;border:1px solid color-mix(in srgb,var(--glow) 55%,transparent);color:var(--glow);backdrop-filter:blur(6px)}
.mh-main{display:flex;align-items:center;gap:16px;margin:20px 0 8px}
.mh-avatar{position:relative;flex:0 0 84px;height:84px;margin:0;border-radius:50%;cursor:pointer;padding:3px;background:conic-gradient(var(--glow),var(--a),#fff6,var(--glow))}
.mh-avatar img,.mh-avatar>span:first-child{width:100%;height:100%;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#2b2722;font-size:34px;font-weight:700;color:var(--glow);border:3px solid #16130f}
.mh-cam{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#171717;box-shadow:0 4px 10px #0006}
.mh-cam svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.mh-id h1{color:#fff;margin:0 0 4px;font-size:30px}
.mh-id span{font-size:13px;color:#ffffffa8}
.mh-count{display:flex;align-items:flex-end;gap:10px;margin:14px 0 14px}
.mh-count strong{font-size:68px;line-height:.85;letter-spacing:-3px;background:linear-gradient(180deg,#fff,var(--glow));-webkit-background-clip:text;background-clip:text;color:transparent}
.mh-count span{font-size:13px;line-height:1.25;color:#ffffffb8;padding-bottom:4px}
.mh-progress span{display:block;font-size:13px;color:#ffffffc0;margin-top:8px}
.mh-progress b{color:var(--glow)}
.mh-bar{height:8px;border-radius:8px;background:#ffffff1c;overflow:hidden}
.mh-bar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--a),var(--glow));box-shadow:0 0 12px var(--glow);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.mh-bar.small{height:6px;background:var(--soft);margin:8px 0 6px;--a:#7d8944;--glow:#b5c46a}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.stat{display:grid;justify-items:center;gap:2px;padding:14px 6px;background:#fff;border:1px solid var(--line);border-radius:18px;text-decoration:none;color:#171717}
.stat strong{font-size:26px;letter-spacing:-1px}
.stat span{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);font-weight:700}
.medals{display:grid;grid-auto-flow:column;grid-auto-columns:96px;gap:10px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory;scrollbar-width:none}
.medals::-webkit-scrollbar{display:none}
.medal{scroll-snap-align:start;display:grid;justify-items:center;gap:3px;text-align:center;padding:14px 6px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.medal-coin{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:18px;color:#a9a8a0;background:radial-gradient(circle at 30% 30%,#f1f0ea,#d9d8d0);box-shadow:inset 0 -3px 6px #0001}
.medal-coin svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.medal strong{font-size:12px;margin-top:4px}
.medal small{font-size:10px;color:var(--muted)}
.medal.got{background:#171717;border-color:#171717;color:#fff}
.medal.got .medal-coin{color:#5a3a00;background:radial-gradient(circle at 30% 25%,#fff4c2,#f0c24a 45%,#b27a14 100%);box-shadow:0 0 0 3px #f0c24a44,0 6px 16px -4px #f0c24a99,inset 0 -3px 6px #0003}
.medal.got small{color:#d9c48f}
.invite{position:relative;overflow:hidden;margin-top:18px;padding:22px 20px;border-radius:24px;color:#fff;background:radial-gradient(120% 140% at 0% 0%,#4e5b24 0%,#1a1b17 60%)}
.invite h2{color:#fff;font-size:24px;margin:12px 0 6px}
.invite p{color:#d0d2c2;font-size:14px}
.invite-code{display:grid;width:100%;gap:2px;justify-items:center;margin:6px 0 12px;padding:16px;min-height:0;border-radius:16px;background:#ffffff12;border:1px dashed #e6ecae88;color:#e6ecae;font:800 30px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:4px}
.invite-code small{font:600 11px -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.5px;color:#c9cabd}
.invite-actions .btn{width:100%;background:#e6ecae;color:#171717;border-color:#e6ecae}
.invite-meta{font-size:12px!important;color:#9fa192!important;margin:12px 0 0!important;text-align:center}
.profile-links{display:grid;margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.plink{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:14px 16px;min-height:0;border:0;border-radius:0;background:#fff;color:#171717;text-decoration:none;text-align:left;font-weight:700;font-size:15px;border-bottom:1px solid var(--line)}
.plink:last-child{border-bottom:0}
.plink>span{grid-row:1/3;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--soft);font-size:18px}
.plink em{font-style:normal;font-weight:400;font-size:12px;color:var(--muted)}
.pl-ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.settings{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:6px 18px}
.settings[open]{padding-bottom:18px}
#logout{margin-top:14px}
.points-hero{text-align:center;padding:26px 20px;border-radius:26px;color:#fff;background:radial-gradient(120% 120% at 50% 0%,#5b4410 0%,#16130f 65%)}
.points-hero strong{display:block;font-size:72px;letter-spacing:-3px;line-height:1;margin:12px 0 6px;background:linear-gradient(180deg,#fff,#ffe08a);-webkit-background-clip:text;background-clip:text;color:transparent}
.points-hero p{color:#d6cdb5;font-size:13px;margin:0}
.rewards{display:grid;gap:10px}
.reward{display:flex;gap:14px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:20px}
.reward p{font-size:13px;color:var(--muted);margin:2px 0 0}
.reward small{font-size:12px;color:var(--muted)}
.reward-ico{flex:0 0 44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--soft)}
.reward-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7}
.reward.ready{border-color:#c9d29a;background:#f6f8ea}
.reward.ready .reward-ico{background:#4e5b24;color:#fff}
@media (prefers-reduced-motion:reduce){.member-hero::before{animation:none}}
.w0{width:0%}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}.w100{width:100%}

[hidden]{display:none!important}
.mh-avatar input{display:none}
.mh-bar.small i{box-shadow:none}
.more-past{margin-top:10px;border:0;padding:0}
.more-past summary{font-size:14px;color:var(--muted);text-align:center;padding:10px;list-style:none}
.more-past .appts{margin-top:10px}

/* ── Pago ─────────────────────────────────────────────────────────── */
.pay-options{margin-top:8px}
.pay-options .section-label{margin-top:18px}
.book-btn{flex-direction:column;gap:6px;padding:14px 18px}
.pay-main{font-size:17px}
.pay-marks{display:flex;gap:6px;justify-content:center}
.pay-marks b{display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:700;letter-spacing:.3px;padding:3px 8px;border-radius:7px;background:#ffffff1f;border:1px solid #ffffff38}
.pay-marks svg{width:12px;height:12px}
.pay-shop{margin-top:10px;background:#fff;color:#171717;border-color:var(--line)}
.pay-note{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--muted);margin:10px 0 0;text-align:center}
.pay-note svg{flex:0 0 16px;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
.appt-chips{display:flex;flex-wrap:wrap;gap:6px}
.appt-state.st-paid{background:#171717;color:#fff!important}
.st-local{background:#fff5de;color:#8a6510!important}
.booked-banner.warn{background:#fff5de;color:#171717;flex-wrap:wrap}
.booked-banner.warn span:not(.booked-check){color:#6b5a2b}
.booked-banner.warn .booked-check{background:#e0a100}
.booked-banner .btn.small{margin-left:auto;background:#171717;color:#fff}
/* ── Niveles VIP ───────────────────────────────────────────────────── */
.lv-bronce{--a:#c58b4c;--b:#5a3a1d;--glow:#f0c08a}
.lv-plata{--a:#c9ced6;--b:#3d434c;--glow:#eef2f8}
.lv-oro{--a:#e2b53e;--b:#5b4410;--glow:#ffe08a}
.lv-platino{--a:#b9d3df;--b:#24414d;--glow:#dff6ff}
.lv-diamante{--a:#7fe3ff;--b:#0c3a52;--glow:#c8f6ff}
.lv-onix{--a:#d6b46a;--b:#000;--glow:#f3d892}
.lv-elite{--a:#b48cff;--b:#2a1150;--glow:#e6d6ff}
.lv-leyenda{--a:#ff8ad8;--b:#1d0f3a;--glow:#fff1a8}
.member-hero.lv-onix{background:radial-gradient(120% 90% at 100% 0%,#2a2416 0%,#050505 60%)}
.member-hero.lv-diamante::before,.member-hero.lv-leyenda::before{opacity:.8}
.member-hero.lv-leyenda::after{background:linear-gradient(135deg,#ff8ad8,#8ad8ff,#fff1a8,#b48cff);animation:hue 6s linear infinite}
@keyframes hue{to{filter:hue-rotate(360deg)}}
.member-hero.has-cover{background:linear-gradient(180deg,#0000 0%,#000c 75%),url(/assets/club-banner.webp) center/cover}
/* Medallas hexagonales, acabado metal cepillado */
.hex{--m1:#e9e8e3;--m2:#cfcdc6;--m3:#a9a7a0;position:relative;display:grid;place-items:center;width:58px;height:66px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:repeating-linear-gradient(90deg,#ffffff10 0 1px,#0000 1px 3px),linear-gradient(160deg,var(--m1),var(--m2) 50%,var(--m3));color:#9b9992}
.hex::after{content:"";position:absolute;inset:4px;clip-path:inherit;border:0;background:linear-gradient(160deg,#0000,#00000014);box-shadow:inset 0 0 0 1px #ffffff40}
.hex i{position:relative;z-index:1;font:800 17px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.5px}
.hex svg{position:relative;z-index:1;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.medal.got .hex{--m1:#fbfbf8;--m2:#c9c7bf;--m3:#7b7a74;color:#1b1b1a;filter:drop-shadow(0 6px 10px #0006)}
.medal.got .hex.cuts{--m1:#fff3cf;--m2:#e2b53e;--m3:#8a6410;color:#3b2a05}
.medal.got .hex.friends{--m1:#e9f4d4;--m2:#9fb35a;--m3:#4e5b24;color:#1d250a}
.hex.mini{width:28px;height:32px}
.hex.mini i{font-size:9px}
.hex.mini.cuts{--m1:#fff3cf;--m2:#e2b53e;--m3:#8a6410;color:#3b2a05}
.hex.mini.friends{--m1:#e9f4d4;--m2:#9fb35a;--m3:#4e5b24;color:#1d250a}
.medal{grid-auto-rows:auto;padding:14px 6px 10px}
.medal .hex{margin-bottom:4px}
.medal-gift{display:inline-flex;align-items:center;gap:3px;margin-top:4px;font-style:normal;font-size:9.5px;font-weight:700;color:var(--muted);background:var(--soft);border-radius:20px;padding:3px 7px;white-space:nowrap}
.medal-gift svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8}
.medal.got .medal-gift{background:#ffffff1a;color:#f3d892}
.medals{grid-auto-columns:106px}
.mh-medals{display:flex;align-items:center;gap:4px;margin:2px 0 14px}
.mh-medals .hex{filter:drop-shadow(0 3px 6px #0008)}
.mh-more{font-size:12px;font-weight:700;color:var(--glow);margin-left:4px}
/* Escalera de niveles */
.levels-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-top:14px;padding:12px 8px;background:#fff;border:1px solid var(--line);border-radius:18px}
.lv-dot{display:grid;justify-items:center;gap:4px;opacity:.45}
.lv-dot i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;color:#fff;background:linear-gradient(160deg,var(--glow),var(--a) 55%,var(--b))}
.lv-dot small{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);text-align:center;line-height:1.1}
.lv-dot.on{opacity:1}
.lv-dot.now i{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--a),0 4px 12px var(--a)}
.lv-dot.now small{color:#171717}
/* Enlaces del perfil */
.plink.is-soon{position:relative;opacity:.75;cursor:default}
.plink .soon{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#8a6510;background:#fff5de;border-radius:20px;padding:4px 9px}
/* Carnet de socio estilo Wallet */
.pass{position:relative;aspect-ratio:1.586;border-radius:22px;padding:20px 22px;color:#fff;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;background:radial-gradient(130% 120% at 100% 0%,var(--b) 0%,#0d0d0c 62%);box-shadow:0 30px 60px -30px #000d,0 0 0 1px #ffffff14 inset;margin-top:18px}
.pass::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,#0000 35%,#ffffff1c 48%,#0000 60%);pointer-events:none}
.pass-top{display:flex;justify-content:space-between;align-items:center}
.pass-top img{width:62px;filter:invert(1)}
.pass-top span{font-size:11px;letter-spacing:4px;color:var(--glow)}
.pass-mid{align-self:center}
.pass-mid small,.pass-bottom small{display:block;font-size:9px;letter-spacing:2px;color:#ffffff80}
.pass-mid strong{font:700 34px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:4px}
.pass-bottom{display:grid;grid-template-columns:1.6fr 1fr .7fr;gap:10px}
.pass-bottom span{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pass-qr{display:grid;justify-items:center;gap:6px;margin:14px 0;padding:18px;background:#fff;border:1px solid var(--line);border-radius:20px}
.pass-qr img{width:180px;height:180px}
.pass-qr span{font-size:12px;color:var(--muted)}
.wallet-btn{width:100%;min-height:54px;border-radius:14px;background:#000;border-color:#000;color:#fff;gap:10px}
.wallet-btn:disabled{background:#000;color:#fff;border-color:#000;opacity:.55;cursor:default}
.wallet-btn svg{width:26px;height:26px}
.wallet-btn span{display:grid;text-align:left;line-height:1.05;font-size:17px}
.wallet-btn small{font-size:10px;font-weight:400}
/* ── Agenda del equipo ─────────────────────────────────────────────── */
main:has(.ag){max-width:1180px}
.ag{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.ag-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.ag-title h1{font-size:28px;margin:0;letter-spacing:-.8px}
.ag-title span{font-size:13px;color:var(--muted)}
.ag-nav{display:flex;gap:6px}
.ag-nav button{min-height:40px;padding:0 14px;border-radius:12px;background:#fff;color:#171717;border:1px solid var(--line);font-size:14px}
.ag-nav .ag-arrow{width:40px;padding:0;font-size:22px;font-weight:400}
.ag-nav .ag-today.on{background:#171717;color:#fff;border-color:#171717}
.ag-calbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}
.ag-legend{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.lg{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:4px 10px 4px 8px;border-radius:20px;background:#fff;border:1px solid var(--line);white-space:nowrap}
.lg::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--st)}
.st-reserved{--st:#3b8ff0;--st-bg:#e7f1fd;--st-ink:#0f4f9c}
.st-confirmed{--st:#e6a91a;--st-bg:#fdf3dc;--st-ink:#7a5506}
.st-paid{--st:#1f9d55;--st-bg:#e3f5ea;--st-ink:#0f5c31}
.st-absent{--st:#e0453a;--st-bg:#fdebe9;--st-ink:#8f1e16}
.st-canceled{--st:#9a9a93;--st-bg:#f0efea;--st-ink:#64645e}
.ag-board{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 10px 30px -22px #0005}
.ag-people,.ag-body{display:grid;grid-template-columns:54px repeat(var(--cols,1),minmax(220px,1fr))}
.cols-1{--cols:1}.cols-2{--cols:2}.cols-3{--cols:3}.cols-4{--cols:4}.cols-5{--cols:5}
.ag-board{overflow-x:auto}
.ag-people{position:sticky;top:0;z-index:3;background:#fffffff2;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.ag-person{display:flex;align-items:center;gap:10px;padding:12px 14px;border-left:1px solid var(--line)}
.ag-person img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.ag-person strong{font-size:14px;display:block}
.ag-person small{font-size:11px;color:var(--muted)}
.ag-person{display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;column-gap:10px}
.ag-person img{grid-row:1/3}
.ag-times span{display:block;font-size:11px;color:#8e8e93;text-align:right;padding:4px 8px 0 0;font-variant-numeric:tabular-nums;border-top:1px solid #f1f0ec}
.ag-col{position:relative;border-left:1px solid var(--line);cursor:copy;background:repeating-linear-gradient(180deg,#0000 0,#0000 calc(var(--ag-row,56px) - 1px),#f1f0ec calc(var(--ag-row,56px) - 1px),#f1f0ec var(--ag-row,56px))}
.ag-col:hover{background-color:#fcfcfa}
.ag-off,.ag-break,.ag-blocked{position:absolute;left:0;right:0;font-size:11px;color:#8e8e93;padding:6px 10px;cursor:default}
.ag-off{background:#f4f4f1}
.ag-break{background:repeating-linear-gradient(135deg,#eef0f6 0 8px,#fff 8px 16px);border-top:1px solid #e3e5ee;border-bottom:1px solid #e3e5ee}
.ag-blocked{left:4px;right:4px;border-radius:10px;background:repeating-linear-gradient(135deg,#2a2a27 0 7px,#34342f 7px 14px);color:#e6e5de;display:flex;justify-content:space-between;align-items:flex-start;z-index:1}
.ag-blocked svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;vertical-align:-2px}
.ag-unblock{min-height:0;width:24px;height:24px;padding:0;border-radius:50%;background:#ffffff26;border:0;color:#fff;font-size:15px}
.ag-appt{position:absolute;left:4px;right:4px;z-index:2;display:grid;align-content:start;justify-content:stretch;justify-items:start;gap:1px;text-align:left;min-height:0;padding:6px 10px;border:0;border-left:4px solid var(--st);border-radius:10px;background:var(--st-bg);color:var(--st-ink);box-shadow:0 1px 0 #0000000a,0 6px 14px -10px #0006;overflow:hidden;cursor:pointer;transition:transform .12s,box-shadow .12s}
.ag-appt:hover{transform:translateY(-1px);box-shadow:0 10px 20px -12px #0008}
.ag-appt strong{font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-appt span{font-size:12px;font-weight:400;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-appt em{font-style:normal;font-size:11px;font-weight:600;opacity:.7}
.ag-appt.st-paid{background:linear-gradient(135deg,#e3f5ea,#c9edd7)}
.ag-appt.st-absent{text-decoration:line-through;text-decoration-thickness:1px}
.ag-now{position:absolute;left:0;right:0;height:2px;background:#ff3b30;z-index:4;pointer-events:none}
.ag-now::before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:#ff3b30}
/* Hojas (diálogos) */
.sheet{border:0;border-radius:24px;padding:26px 22px 22px;width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 40px);background:#f9f8f5;color:#171717;box-shadow:0 30px 80px -20px #0008;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.sheet.small{width:min(400px,calc(100vw - 24px))}
.sheet::backdrop{background:#0006;backdrop-filter:blur(4px)}
.sheet[open]{animation:sheetin .25s cubic-bezier(.2,.9,.3,1)}
@keyframes sheetin{from{transform:translateY(16px);opacity:0}}
.sheet-x{position:absolute;top:12px;right:12px;min-height:0;width:34px;height:34px;padding:0;border-radius:50%;background:#ecebe6;color:#171717;border:0;font-size:20px;font-weight:400}
.sheet h2{margin:2px 0 14px;font-size:22px;padding-right:30px}
.sheet-kicker{font-size:11px!important;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:0 0 4px!important}
.sheet-actions{display:grid;gap:10px}
.sheet-actions svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.sheet label{margin:8px 0 6px}
.sheet .grid label{margin-top:0}
.nb-results{display:grid;gap:6px}
.nb-hit{justify-content:flex-start;flex-direction:column;align-items:flex-start;gap:2px;min-height:0;padding:10px 12px;background:#fff;color:#171717;border:1px solid var(--line);border-radius:12px;text-align:left}
.nb-hit small{font-weight:400;color:var(--muted);font-size:12px}
.nb-picked{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:12px;background:#e3f5ea;color:#0f5c31;font-weight:700}
.link-btn{min-height:0;padding:0;background:none;border:0;color:#0f5c31;text-decoration:underline;font-size:13px}
.nb-new{display:grid;gap:4px}
#nb-add{justify-self:start}
.appt-sheet .as-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-right:34px}
.as-name{font-size:15px;font-weight:700;color:#171717}
.as-name span{color:var(--muted)}
.appt-sheet h2{font-size:26px;margin:8px 0 2px}
.as-price{font-size:18px;font-weight:700;margin:0 0 14px}
.as-rows{display:grid;background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:16px}
.as-rows>div{display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);font-size:14px}
.as-rows>div:last-child{border-bottom:0}
.as-rows small{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.as-rows a{color:#171717}
.wa-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:20px;background:#25d366;color:#fff!important;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap}
.wa-btn svg{width:16px;height:16px}
.bubbles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:16px}
.bubble{flex-direction:column;gap:6px;min-height:64px;padding:8px 4px;border-radius:14px;background:#fff;color:#171717;border:1px solid var(--line);font-size:11.5px;font-weight:700}
.bubble i{width:22px;height:22px;border-radius:50%;background:var(--st);box-shadow:0 0 0 3px var(--st-bg)}
.bubble.on{background:var(--st-bg);border-color:var(--st);color:var(--st-ink)}
.bubble.st-paid i{background:radial-gradient(circle at 35% 30%,#7be3a4,#1f9d55 60%,#0f5c31);box-shadow:0 0 0 3px #e3f5ea,0 4px 10px -2px #1f9d5599}
.bubble.st-paid.on{background:linear-gradient(135deg,#e3f5ea,#c9edd7)}
.as-foot{display:flex;gap:8px}
.as-foot>*{flex:1}
.mini-cal .cal-grid{margin-bottom:14px}
/* Ficha de cliente */
.ficha-hero{margin-top:8px}
.ficha-hero .mh-avatar{cursor:default}
.stat-row.four{grid-template-columns:repeat(4,1fr)}
.stat.bad strong{color:#e0453a}
.contact-card{display:grid;grid-template-columns:1fr auto;gap:12px 10px;align-items:center;margin-top:14px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:18px}
.contact-card small{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.contact-card a:not(.wa-btn),.contact-card span{font-size:15px;font-weight:700;color:#171717}
.contact-card .full{grid-column:1/-1}
.ficha-list{display:grid;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.ficha-row{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.ficha-row:last-child{border-bottom:0}
.fr-date{font-size:13px;font-weight:700;display:grid}
.fr-date small,.fr-main small{font-weight:400;font-size:12px;color:var(--muted)}
.fr-main{display:grid;min-width:0}
@media (max-width:699px){.ag-people,.ag-body{grid-template-columns:46px repeat(var(--cols,1),minmax(78vw,1fr))}.cols-1 .ag-people,.cols-1 .ag-body{grid-template-columns:46px 1fr}.ag-title h1{font-size:24px}.as-rows>div{grid-template-columns:80px 1fr}.as-rows .wa-btn{grid-column:1/-1;justify-self:start}}

.ag-head{height:auto;max-width:none;margin:0;padding:0;border:0}
/* ── Vista del barbero: resumen, productos y caja ─────────────────── */
nav.five a{max-width:78px}
.bx-chips{display:flex;gap:8px;overflow-x:auto;margin:0 0 14px;padding-bottom:2px}
.chip{flex:0 0 auto;padding:8px 14px;border-radius:30px;border:1px solid var(--line);background:#fff;font-size:13px;font-weight:700;text-decoration:none;color:#171717}
.chip.on{background:#171717;color:#fff;border-color:#171717}
.bx-hero{--a:#8f9b55;--b:#2c3317;--glow:#d7e38f;position:relative;overflow:hidden;border-radius:28px;padding:20px 20px 16px;color:#fff;background:radial-gradient(120% 90% at 100% 0%,var(--b) 0%,#121410 62%);box-shadow:0 24px 50px -28px #000c;isolation:isolate}
.bx-hero::before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 210deg,transparent 0 60%,color-mix(in srgb,var(--glow) 35%,transparent) 70%,transparent 80%);animation:spin 11s linear infinite;z-index:-1;opacity:.5}
.bx-hero::after{content:"";position:absolute;inset:0;border-radius:28px;padding:1px;background:linear-gradient(135deg,var(--glow),#fff2 40%,var(--a));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.bx-role{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:6px 11px;border-radius:30px;background:#ffffff14;border:1px solid color-mix(in srgb,var(--glow) 55%,transparent);color:var(--glow)}
.bx-avatar{cursor:default}
.bx-count{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:12px 0 14px}
.bx-count>div{display:flex;align-items:flex-end;gap:10px}
.bx-count strong{font-size:68px;line-height:.85;letter-spacing:-3px;background:linear-gradient(180deg,#fff,var(--glow));-webkit-background-clip:text;background-clip:text;color:transparent}
.bx-count span{font-size:13px;line-height:1.25;color:#ffffffb8;padding-bottom:4px}
.bx-total{padding-left:16px;border-left:1px solid #ffffff22}
.bx-total strong{font-size:34px;letter-spacing:-1px}
.bx-today{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:#ffffff12;border:1px solid #ffffff1c;color:#fff;text-decoration:none;font-size:14px;font-weight:700}
.bx-today i{width:8px;height:8px;border-radius:50%;background:var(--glow);box-shadow:0 0 10px var(--glow);animation:blink 1.6s ease-in-out infinite}
.bx-today b{margin-left:auto;font-size:20px;color:var(--glow)}
.bx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.bx-stats .stat{padding:16px 8px;text-align:center}
.bx-stats .stat strong{font-size:22px}
.bx-stats .stat span{font-size:10px;line-height:1.3}
.stat.warn strong{color:#c0392b}
.bx-months{display:grid;gap:8px}
.bx-month{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:14px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:18px;animation:pop .35s both}
.bx-month.now{background:#171717;color:#fff;border-color:#171717}
.bm-name strong{display:block;font-size:15px}
.bm-name small,.bm-num small{font-size:12px;color:var(--muted)}
.bx-month.now small{color:#ffffffa0}
.bm-bar{height:8px;border-radius:8px;background:var(--soft);overflow:hidden}
.bx-month.now .bm-bar{background:#ffffff1c}
.bm-bar i{display:block;width:0;height:100%;border-radius:8px;background:linear-gradient(90deg,#8f9b55,#c7d47c);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.bm-num{text-align:right}
.bm-num strong{display:block;font-size:22px;letter-spacing:-.5px}
@keyframes blink{50%{opacity:.35}}
/* Productos */
.pr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pr-card{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;box-shadow:0 14px 30px -26px #0007}
.pr-card.is-out{opacity:.65}
.pr-img{aspect-ratio:1;background:#fff;display:grid;place-items:center;overflow:hidden;padding:18px;border-bottom:1px solid var(--soft)}
.pr-img img{width:100%;height:100%;object-fit:contain;object-position:center;mix-blend-mode:multiply}
.pr-body{padding:14px 16px 16px;display:grid;gap:4px}
.pr-brand{font-size:10px;font-weight:700;letter-spacing:2.5px;color:var(--muted)}
.pr-name{font-size:18px;letter-spacing:-.3px}
.pr-size{font-size:13px;color:var(--muted)}
.pr-row{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:8px 0 12px}
.pr-price{font-size:20px;letter-spacing:-.5px}
.stock{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;padding:6px 10px;border-radius:30px;white-space:nowrap}
.stock i{width:8px;height:8px;border-radius:50%}
.stock.ok{background:#e3f5ea;color:#0f5c31}
.stock.ok i{background:#1f9d55;box-shadow:0 0 0 0 #1f9d5588;animation:pulse-g 1.8s infinite}
.stock.low{background:#fde8e6;color:#9b2318}
.stock.low i{background:#e0392b;box-shadow:0 0 0 0 #e0392b88;animation:pulse-r 1.1s infinite}
.stock.out{background:var(--soft);color:var(--muted)}
.stock.out i{background:#aaa}
@keyframes pulse-g{70%{box-shadow:0 0 0 7px #1f9d5500}100%{box-shadow:0 0 0 0 #1f9d5500}}
@keyframes pulse-r{70%{box-shadow:0 0 0 7px #e0392b00}100%{box-shadow:0 0 0 0 #e0392b00}}
.pr-sell{border-radius:14px}
.pr-restock{margin-top:6px;border:0;background:none;color:var(--muted);font-size:13px;font-weight:700;text-decoration:underline;cursor:pointer}
.pr-today{display:grid;gap:8px}
.pr-sale{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:16px}
.pr-sale small{display:block;font-size:12px;color:var(--muted)}
.pr-qty{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#171717;color:#fff;font-weight:700;font-size:14px}
.pr-undo{border:0;background:var(--soft);border-radius:10px;padding:7px 10px;font-size:12px;font-weight:700;cursor:pointer}
.sell-top{display:flex;align-items:center;gap:14px}
.sell-top img{width:72px;height:90px;object-fit:contain;border-radius:14px;background:#fff;border:1px solid var(--line)}
.sell-top h2{margin:0}
.sell-top small{color:var(--muted)}
.stepper{display:flex;align-items:center;justify-content:center;gap:26px;margin:22px 0 16px}
.stepper button{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:24px;cursor:pointer}
.stepper strong{font-size:44px;min-width:40px;text-align:center;letter-spacing:-1px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:var(--soft);margin-bottom:16px}
.seg button{border:0;border-radius:11px;padding:11px;background:none;font-weight:700;cursor:pointer;color:var(--muted)}
.seg button.on{background:#fff;color:#171717;box-shadow:0 2px 8px -3px #0003}
.center{text-align:center}
.muted.small,.small{font-size:12px}
/* Caja */
.cx-hero{position:relative;overflow:hidden;border-radius:28px;padding:22px 20px 18px;color:#fff;background:radial-gradient(120% 100% at 0% 0%,#24311f 0%,#111310 60%);box-shadow:0 24px 50px -28px #000c}
.cx-label{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:#ffffffa0;font-weight:700}
.cx-amount{display:block;font-size:52px;letter-spacing:-2px;margin:6px 0 16px;background:linear-gradient(180deg,#fff,#cfe59a);-webkit-background-clip:text;background-clip:text;color:transparent}
.cx-amount.neg{background:none;color:#ff8a7a}
.cx-month{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.cx-month div{padding:10px 12px;border-radius:14px;background:#ffffff10;border:1px solid #ffffff18}
.cx-month small{display:block;font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:#ffffff90;font-weight:700}
.cx-month b{font-size:15px}
.cx-month .red b{color:#ff8a7a}
.cx-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cx-actions .btn{border-radius:14px;min-height:50px}
.cx-hero .cx-actions .btn:first-child{background:#e6ecae;color:#171717;border-color:#e6ecae}
.btn.cx-out{background:#fde8e6;color:#9b2318;border-color:#f6c9c3}
.cx-hero .btn.cx-out{background:#ffffff12;color:#ffb3a8;border-color:#ff8a7a55}
.cx-days{display:grid;gap:8px}
.cx-day{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:14px;width:100%;text-align:left;padding:12px 16px 12px 12px;background:#fff;border:1px solid var(--line);border-radius:18px;cursor:pointer;color:#171717;transition:transform .15s}
.cx-day:active{transform:scale(.98)}
.cx-day.has-out{border-color:#f6c9c3}
.cx-date{display:grid;justify-items:center;padding:8px 0;border-radius:14px;background:var(--soft)}
.cx-date strong{font-size:22px;line-height:1}
.cx-date small{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-top:3px}
.cx-mid strong{display:block;font-size:15px}
.cx-mid small{font-size:12px;color:var(--muted)}
.cx-mid em{font-style:normal;color:#c0392b;font-weight:700}
.cx-right{text-align:right}
.cx-right strong{display:block;font-size:18px;letter-spacing:-.3px}
.cx-right small{font-size:12px;color:var(--muted)}
.red,.cx-right small.red{color:#c0392b!important}
.cx-money{display:grid;gap:6px;margin:0;font-size:13px;font-weight:700;color:var(--muted)}
.cx-field{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 16px}
.cx-field input{border:0!important;background:none!important;font-size:26px;font-weight:700;letter-spacing:-.5px;padding:12px 0!important;width:100%;min-width:0;outline:none;box-shadow:none!important;color:#171717}
.cx-field b{font-size:20px;color:var(--muted)}
.cx-field:focus-within{border-color:#171717;box-shadow:0 0 0 3px #17171712}
.cx-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cx-info{display:grid;gap:6px;padding:12px 14px;border-radius:16px;background:var(--soft);font-size:13px}
.cx-info small{color:var(--muted)}
.cx-photo{display:flex!important;align-items:center;gap:14px;padding:12px;border:1px dashed #bdbbb2;border-radius:16px;background:#fff;cursor:pointer;margin:0}
.cx-photo.has{border-style:solid}
.cx-photo img{width:56px;height:56px;border-radius:12px;object-fit:cover}
.cx-cam{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;background:var(--soft)}
.cx-cam svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7}
.cx-photo strong{display:block;font-size:15px;color:#171717}
.cx-photo small{font-size:12px;color:var(--muted);font-weight:400}
.cx-moves{display:grid;gap:6px}
.cx-moves div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:14px}
.cx-moves div.red{background:#fdf0ee;border-color:#f6c9c3}
.cx-moves small{color:var(--muted)}
.cx-mdel{border:0;background:#fff;border-radius:50%;width:26px;height:26px;cursor:pointer;color:#9b2318;font-size:16px}
.cx-total{display:flex;align-items:baseline;justify-content:space-between;padding:16px 18px;border-radius:18px;background:#171717;color:#fff;margin:6px 0}
.cx-total small{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#ffffffa0;font-weight:700}
.cx-total strong{font-size:30px;letter-spacing:-1px}
.cx-calc{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.cx-calc div{padding:10px 12px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.cx-calc small{display:block;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:700}
.cx-calc b{font-size:16px}
.cx-calc .cx-final{background:#e3f5ea;border-color:#bfe5cd}
.cx-calc .cx-final.red{background:#fdf0ee;border-color:#f6c9c3}
.cx-close{padding:14px;border-radius:18px;background:#fff;border:1px solid var(--line);margin:10px 0;display:grid;gap:10px}
.cx-close-h{display:flex;justify-content:space-between;align-items:baseline}
.cx-close-h span{font-size:13px;color:var(--muted)}
.cx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cx-grid div{padding:8px;border-radius:12px;background:var(--soft)}
.cx-grid small{display:block;font-size:10px;text-transform:uppercase;color:var(--muted);font-weight:700}
.cx-grid b{font-size:14px}
.cx-ticket{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:700;font-size:14px}
.cx-ticket img{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid var(--line)}
.cx-close-a{display:flex;gap:8px}
.cx-close-a .btn{flex:1;min-height:42px}
.cx-date-in input{font-size:16px}
@media (max-width:420px){.cx-grid{grid-template-columns:repeat(2,1fr)}.cx-amount{font-size:44px}.bx-count strong{font-size:58px}.bx-month{grid-template-columns:82px 1fr auto;gap:10px}}
@media (max-width:520px){.pr-grid{gap:10px}.pr-body{padding:12px}.pr-name{font-size:16px}.pr-price{font-size:18px}.pr-img{padding:12px}}
.stepper button,.pr-undo,.cx-mdel{color:#171717;-webkit-text-fill-color:currentColor}
.cx-mdel{color:#9b2318}
.stepper button{display:grid;place-items:center;line-height:1}
/* ── Vista owners ─────────────────────────────────────────────────── */
.ow-hero{position:relative;overflow:hidden;isolation:isolate;border-radius:30px;padding:22px 22px 18px;color:#fff;min-height:330px;display:flex;flex-direction:column;background:radial-gradient(130% 100% at 100% 0%,#4a3a1c 0%,#15120c 55%,#0b0a08 100%);background-size:cover;background-position:center;box-shadow:0 30px 60px -30px #000e}
.ow-hero::after{content:"";position:absolute;inset:0;border-radius:30px;padding:1.5px;background:linear-gradient(135deg,#f6dc9a,#8a6a2a 30%,#fff3 50%,#c9a35a 75%,#f6dc9a);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.ow-shine{position:absolute;inset:-50%;z-index:-1;background:conic-gradient(from 200deg,transparent 0 62%,#f6dc9a40 70%,transparent 80%);animation:spin 12s linear infinite;opacity:.6}
.ow-hero.has-photo .ow-shine{opacity:.25}
.ow-brand{font-size:11px;letter-spacing:3.5px;color:#ffffffc0}
.ow-brand b{background:linear-gradient(90deg,#f6dc9a,#c9a35a);-webkit-background-clip:text;background-clip:text;color:transparent}
.ow-cam{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#ffffff1a;border:1px solid #f6dc9a55;cursor:pointer;backdrop-filter:blur(8px)}
.ow-cam svg{width:18px;height:18px;fill:none;stroke:#f6dc9a;stroke-width:1.8}
.ow-main{margin-top:auto;padding-top:40px}
.ow-main h1{margin:0;color:#fff;font-size:34px;letter-spacing:-1px}
.ow-main span{font-size:13px;color:#ffffffa8}
.ow-big{margin:16px 0 14px}
.ow-big small{display:block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#f6dc9ab0;font-weight:700}
.ow-big strong{font-size:48px;letter-spacing:-2px;line-height:1.05;background:linear-gradient(180deg,#fff 20%,#f6dc9a);-webkit-background-clip:text;background-clip:text;color:transparent}
.ow-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding-top:14px;border-top:1px solid #ffffff1f}
.ow-row strong{display:block;font-size:22px;letter-spacing:-.5px}
.ow-row span{font-size:11px;color:#ffffffa0;line-height:1.2}
.ow-team{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.ow-barber{display:grid;gap:10px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:22px;text-decoration:none;color:#171717;box-shadow:0 14px 30px -26px #0007;transition:transform .15s}
.ow-barber:active{transform:scale(.98)}
.owb-top{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:12px}
.owb-top img{width:46px;height:46px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #c9a35a}
.owb-top strong{display:block;font-size:16px}
.owb-top small{font-size:12px;color:#9a7a32;font-weight:700}
.owb-top b{font-size:22px;color:var(--muted)}
.owb-money{font-size:30px;font-weight:700;letter-spacing:-1px}
.owb-bar{height:6px;border-radius:6px;background:var(--soft);overflow:hidden}
.owb-bar i{display:block;width:0;height:100%;border-radius:6px;background:linear-gradient(90deg,#c9a35a,#f6dc9a);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.owb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.owb-grid div{padding:8px 6px;border-radius:12px;background:var(--soft);text-align:center}
.owb-grid b{display:block;font-size:17px}
.owb-grid small{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700}
.owb-grid .red b{color:#c0392b}
/* Agenda: un barbero por pantalla, deslizando */
.ag-tabs{display:flex;gap:8px;margin:0 0 12px;overflow-x:auto}
.ag-tab{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:30px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:14px;cursor:pointer;color:#171717}
.ag-tab img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.ag-tab.on{background:#171717;color:#fff;border-color:#171717}
.ag-pager.multi{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.ag-pager.multi::-webkit-scrollbar{display:none}
.ag-pager.multi .ag-slide{flex:0 0 100%;scroll-snap-align:start;min-width:0}
@media (min-width:1000px){.ag-pager.multi .ag-slide{flex-basis:calc(50% - 7px)}}
.ag-slide .ag-people,.ag-slide .ag-body{grid-template-columns:54px 1fr}
@media (max-width:699px){.ag-slide .ag-people,.ag-slide .ag-body{grid-template-columns:46px 1fr}}
.ag-person{grid-template-columns:36px 1fr auto}
.ag-dayset{grid-row:1/3;grid-column:3;align-self:center;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:12px;border:1px solid var(--line);background:#fff;font-size:12px;font-weight:700;cursor:pointer;color:#171717}
.ag-dayset svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7}
.sc-when{margin:0;font-size:14px;color:var(--muted)}
.sc-when b{color:#9a7a32}
.sc-days{display:flex;gap:6px;margin:4px 0}
.sc-day{flex:1;margin:0!important}
.sc-day input{position:absolute;opacity:0;pointer-events:none}
.sc-day span{display:grid;place-items:center;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:14px;cursor:pointer}
.sc-day input:checked+span{background:#171717;color:#fff;border-color:#171717}
.sc-all{display:flex!important;align-items:center;gap:10px;font-weight:700;font-size:14px;margin:0}
.sc-all input{width:20px;height:20px;accent-color:#171717}
.sc-link{text-align:center;font-size:13px;font-weight:700;color:var(--muted)}
#sc-mode,#sc-range{margin:0 0 4px}
/* Productos admin */
.pr-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.pr-sum div{padding:14px 10px;border-radius:18px;background:#fff;border:1px solid var(--line);text-align:center}
.pr-sum strong{display:block;font-size:22px;letter-spacing:-.5px}
.pr-sum span{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700}
.pr-sum .red strong{color:#c0392b}
.pr-alert{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:18px;background:#fdf0ee;border:1px solid #f6c9c3;margin-bottom:16px;color:#7d1d14}
.pr-alert strong{font-size:15px}
.pr-alert p{margin:4px 0 0;font-size:14px;line-height:1.5}
.pr-alert-dot{flex:0 0 12px;height:12px;margin-top:4px;border-radius:50%;background:#e0392b;animation:pulse-r 1.1s infinite}
.pr-ok{padding:14px 16px;border-radius:18px;background:#e3f5ea;color:#0f5c31;font-weight:700;font-size:14px;margin-bottom:16px}
/* Caja admin */
.chip-face{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px}
.chip-face img{width:26px;height:26px;border-radius:50%;object-fit:cover}
.chip-face small{font-weight:400;color:var(--muted);font-size:12px}
.chip.on small{color:#ffffffb0}
.cx-chips .chip:first-child{padding:8px 14px}
.cx-actions.one{grid-template-columns:1fr}
.cx-mhead{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:28px 2px 10px}
.cx-mhead strong{display:block;font-size:18px}
.cx-mhead small{font-size:12px;color:var(--muted)}
.cx-mhead em{font-style:normal;color:#c0392b;font-weight:700}
.cx-mhead>b{font-size:20px;letter-spacing:-.5px}
@media (max-width:420px){.ow-big strong{font-size:40px}.ow-row strong{font-size:19px}.pr-sum strong{font-size:18px}}
.pr-img{position:relative;padding:0}
.pr-img img{position:absolute;inset:7%;width:86%;height:86%;object-fit:contain;object-position:center}
/* ── Clientes del Club (owners) ─────────────────────────────────── */
.panel-club{position:relative;display:grid;gap:4px;padding:20px 22px;margin:8px 0 18px;border-radius:24px;text-decoration:none;color:#fff;background:radial-gradient(120% 120% at 100% 0%,#4a3a1c 0%,#15120c 60%);box-shadow:0 20px 40px -26px #000d;overflow:hidden}
.panel-club::after{content:"";position:absolute;inset:0;border-radius:24px;padding:1.5px;background:linear-gradient(135deg,#f6dc9a,#8a6a2a 35%,#fff2 55%,#c9a35a);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.panel-club strong{font-size:22px;letter-spacing:-.5px;margin-top:6px}
.panel-club small{color:#ffffffa8;font-size:13px}
.pc-go{position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:28px;color:#f6dc9a}
.cl-hero{position:relative;border-radius:28px;padding:22px;color:#fff;background:radial-gradient(130% 110% at 100% 0%,#4a3a1c 0%,#15120c 55%,#0b0a08);box-shadow:0 24px 50px -30px #000d;overflow:hidden}
.cl-hero::after{content:"";position:absolute;inset:0;border-radius:28px;padding:1.5px;background:linear-gradient(135deg,#f6dc9a,#8a6a2a 30%,#fff3 50%,#c9a35a 75%,#f6dc9a);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.cl-hero h1{color:#fff;margin:10px 0 16px;font-size:30px;letter-spacing:-1px}
.cl-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cl-kpis div{padding:12px 10px;border-radius:16px;background:#ffffff10;border:1px solid #ffffff1a}
.cl-kpis strong{display:block;font-size:26px;letter-spacing:-1px;background:linear-gradient(180deg,#fff 30%,#f6dc9a);-webkit-background-clip:text;background-clip:text;color:transparent}
.cl-kpis span{font-size:11px;color:#ffffffa0;line-height:1.2}
.cl-tools{display:grid;grid-template-columns:1fr auto;gap:8px;margin:16px 0 10px}
.cl-search{display:flex!important;align-items:center;gap:10px;margin:0;padding:0 14px;border:1px solid var(--line);border-radius:16px;background:#fff}
.cl-search svg{flex:0 0 18px;height:18px;fill:none;stroke:#8a8a82;stroke-width:2;stroke-linecap:round}
.cl-search input{border:0!important;box-shadow:none!important;background:none!important;padding:13px 0!important;width:100%;min-width:0;outline:none;font-size:15px}
.cl-tools select{border-radius:16px;margin:0}
.cl-chips{margin-bottom:8px}
.cl-chips .chip{cursor:pointer;font-family:inherit}
.cl-bar{display:flex;justify-content:space-between;align-items:center;margin:4px 2px 10px;font-size:13px;color:var(--muted);font-weight:700}
.cl-csv{color:#171717;text-decoration:none;padding:7px 12px;border-radius:12px;border:1px solid var(--line);background:#fff}
.cl-list{display:grid;gap:8px}
.cl-row{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:14px;padding:12px 16px 12px 12px;background:#fff;border:1px solid var(--line);border-radius:20px;text-decoration:none;color:#171717;transition:transform .15s}
.cl-row:active{transform:scale(.985)}
.cl-av{width:48px;height:48px;border-radius:50%;padding:2px;background:conic-gradient(var(--glow,#f0c08a),var(--a,#c58b4c),#fff6,var(--glow,#f0c08a))}
.cl-av img,.cl-av b{width:100%;height:100%;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#1e1b17;color:var(--glow,#f0c08a);font-size:19px;border:2px solid #fff}
.cl-av.lv-bronce{--a:#c58b4c;--glow:#f0c08a}
.cl-main{min-width:0}
.cl-main strong{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-main strong em{font-style:normal;font-weight:400;font-size:12px;color:var(--muted)}
.cl-main small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-meta{margin-top:3px}
.cl-meta b{color:#1f9d55}
.cl-lv{font-style:normal;font-weight:700;color:#9a7a32;margin-right:6px}
.cl-right{text-align:right}
.cl-right strong{display:block;font-size:15px}
.cl-right small{font-size:12px;color:var(--muted)}
.ficha-actions{display:flex;gap:8px;margin-top:12px}
@media (max-width:520px){.cl-kpis{grid-template-columns:repeat(2,1fr)}.cl-tools{grid-template-columns:1fr}.cl-right{display:none}.cl-row{grid-template-columns:48px 1fr}}
/* Clientes de Garden: niveles bien visibles, barberos y faltones */
.lvp{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 8px;border-radius:30px;border:0;font:inherit;font-size:12px;font-weight:800;letter-spacing:.3px;white-space:nowrap;color:#1a1408;background:linear-gradient(135deg,var(--glow),var(--a));box-shadow:0 4px 14px -6px var(--a),inset 0 1px 0 #fff8;cursor:default}
.lvp i{font-style:normal;font-size:13px}
.lvp.soft{background:var(--soft);color:var(--muted);box-shadow:none;font-weight:700}
.lvp.lv-onix{background:linear-gradient(135deg,#2b2417,#0b0a08);color:#f3d892;box-shadow:0 4px 14px -6px #000,inset 0 0 0 1px #d6b46a88}
.lvp.lv-leyenda{background:linear-gradient(135deg,#e3cfff,#9b6bff 55%,#ffd6a8);color:#24103f}
.lvp.lv-elite{background:linear-gradient(135deg,#e6d6ff,#b48cff);color:#24103f}
.lvp.lv-diamante{background:linear-gradient(135deg,#e9fbff,#7fe3ff);color:#06324a}
.lvp.lv-platino{background:linear-gradient(135deg,#eafaff,#9fd7e6);color:#123a47}
.lvp.lv-oro{background:linear-gradient(135deg,#fff0bf,#e2b53e);color:#3d2c05}
.cl-levels{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.cl-levels .lvp{cursor:pointer;padding:7px 12px 7px 9px;font-size:12px}
.cl-levels .lvp b{margin-left:4px;padding:1px 7px;border-radius:20px;background:#0000002a;font-size:11px}
.cl-levels .lvp.lv-onix b{background:#ffffff22}
.cl-levels .lvp.on{outline:2px solid #fff;outline-offset:2px}
.cl-barbers{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:14px}
.cl-barber{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;border:1px solid var(--line);background:#fff;text-align:left;cursor:pointer;font:inherit;color:#171717}
.cl-barber img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.cl-barber strong{display:block;font-size:15px}
.cl-barber small{font-size:12px;color:var(--muted)}
.cl-barber.on{background:#171717;color:#fff;border-color:#171717}
.cl-barber.on small{color:#ffffffa8}
.chip-bad.on{background:#c0392b;border-color:#c0392b}
.cl-split{display:flex;gap:6px;margin-top:6px}
.cl-split span{font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;background:var(--soft);color:var(--muted)}
.cl-split span.on{background:#171717;color:#fff}
.cl-right{display:grid;justify-items:end;gap:6px}
.cl-row.is-vip{border-color:color-mix(in srgb,var(--a) 55%,var(--line));background:linear-gradient(90deg,color-mix(in srgb,var(--glow) 22%,#fff) 0%,#fff 45%);box-shadow:0 10px 26px -20px var(--a)}
.cl-row.is-vip .cl-av{width:52px;height:52px;padding:3px;box-shadow:0 0 16px -4px var(--glow)}
.cl-row.is-vip.lv-onix{background:linear-gradient(90deg,#f6ecd2 0%,#fff 45%)}
.cl-row.is-bad{border-color:#f6c9c3;background:linear-gradient(90deg,#fdf0ee 0%,#fff 50%)}
.cl-av.lv-plata{--a:#c9ced6;--glow:#e8edf5}.cl-av.lv-oro{--a:#e2b53e;--glow:#ffe08a}.cl-av.lv-platino{--a:#9fd7e6;--glow:#c9f3ff}.cl-av.lv-diamante{--a:#7fe3ff;--glow:#c8f6ff}.cl-av.lv-onix{--a:#d6b46a;--glow:#f3d892}.cl-av.lv-elite{--a:#b48cff;--glow:#e6d6ff}.cl-av.lv-leyenda{--a:#c49bff;--glow:#e3cfff}
@media (max-width:520px){.cl-right{display:grid}.cl-row{grid-template-columns:48px 1fr auto}.cl-right strong{font-size:13px}.cl-right .lvp{font-size:11px;padding:4px 9px 4px 7px}}
/* Alquiler de silla (Facu): separado de Garden */
.cx-sep{align-self:center;flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:0 2px 0 8px;border-left:1px solid var(--line);margin-left:2px}
.chip-rent{border-style:dashed}
.cx-rent-note{padding:12px 16px;border-radius:16px;background:#f2efe6;border:1px dashed #cfc8b4;font-size:13px;line-height:1.45;color:#5a5446;margin-bottom:12px}
.cx-hero.is-rent{background:radial-gradient(120% 100% at 0% 0%,#2b2b2b 0%,#111 60%)}
.cx-hero.is-rent .cx-amount{background:linear-gradient(180deg,#fff,#cfcfcf);-webkit-background-clip:text;background-clip:text;color:transparent}
.ow-rent{display:block;font-style:normal;font-size:12px;color:#ffffff90;margin-top:2px}
.ow-barber.is-rent{background:#f7f6f2;border-style:dashed}
.ow-barber.is-rent .owb-top img{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #bdb8aa;filter:grayscale(.2)}
.ow-barber.is-rent .owb-top small{color:var(--muted)}
.owb-money em{display:block;font-style:normal;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:0}
/* ── Owners 13 oct: mes a mes con resumen, cajas por barbero y clientes más limpios ── */
/* Mes a mes: el dinero manda y cada mes se puede abrir */
.bm-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:28px 2px 10px}
.bm-head .section-label{margin:0}
.bm-head small,.cl-sec small{font-size:12px;color:var(--muted)}
button.bx-month{width:100%;min-height:0;grid-template-columns:92px 1fr auto 14px;justify-content:stretch;text-align:left;font-weight:400;font-size:inherit;color:#171717;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 14px 14px 16px;cursor:pointer;transition:transform .15s,box-shadow .15s}
button.bx-month:hover{box-shadow:0 12px 26px -20px #0007}
button.bx-month.now{background:#171717;color:#fff;border-color:#171717}
.bm-mid{display:grid;gap:7px;min-width:0}
.bm-money{font-size:22px;letter-spacing:-.6px;line-height:1}
.bx-month.now .bm-money{background:linear-gradient(180deg,#fff 30%,#f6dc9a);-webkit-background-clip:text;background-clip:text;color:transparent}
.bm-bar i{background:linear-gradient(90deg,#c9a35a,#f6dc9a)}
.bm-num strong{font-size:17px;letter-spacing:-.3px}
.bm-go{font-size:20px;color:var(--muted);font-weight:400}
.bx-month.now .bm-go{color:#ffffff80}
@media (max-width:420px){button.bx-month{grid-template-columns:74px 1fr auto 10px;gap:10px;padding:12px}.bm-money{font-size:19px}.bm-num strong{font-size:15px}}
/* Pop-up del mes */
.sheet.ms-sheet{width:min(560px,calc(100vw - 24px));padding-top:22px}
.ms-nav{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:8px;margin:0 36px 14px 0;text-align:center}
.ms-nav h2{margin:0;padding:0;font-size:22px}
.ms-arrow{min-height:0;width:40px;height:40px;padding:0;border-radius:50%;background:#fff;color:#171717;border:1px solid var(--line);font-size:22px;font-weight:400}
.ms-arrow:disabled{opacity:.35;background:#fff;border-color:var(--line)}
.ms-hero{position:relative;overflow:hidden;border-radius:22px;padding:18px 20px;color:#fff;background:radial-gradient(130% 120% at 100% 0%,#4a3a1c 0%,#15120c 60%,#0b0a08);box-shadow:0 20px 40px -26px #000d}
.ms-hero::after{content:"";position:absolute;inset:0;border-radius:22px;padding:1.5px;background:linear-gradient(135deg,#f6dc9a,#8a6a2a 30%,#fff3 50%,#c9a35a 75%,#f6dc9a);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.ms-hero small{display:block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#f6dc9ab0;font-weight:700}
.ms-hero strong{display:block;font-size:46px;letter-spacing:-2px;line-height:1.1;background:linear-gradient(180deg,#fff 20%,#f6dc9a);-webkit-background-clip:text;background-clip:text;color:transparent}
.ms-hero em{display:inline-block;font-style:normal;font-size:12px;font-weight:700;padding:3px 9px;border-radius:20px;margin-top:6px}
.ms-hero em.up{background:#1f9d5530;color:#8ee6b1}
.ms-hero em.down{background:#e0392b30;color:#ffb3a8}
.ms-rent{display:block;font-size:12px;color:#ffffff90;margin-top:8px}
.ms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.ms-grid div{padding:12px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.ms-grid small{display:block;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:700;line-height:1.25}
.ms-grid strong{display:block;font-size:24px;letter-spacing:-.6px;margin-top:4px}
.ms-grid span{font-size:12px;color:var(--muted)}
.ms-grid .ms-big{background:#171717;border-color:#171717;color:#fff}
.ms-grid .ms-big small,.ms-grid .ms-big span{color:#ffffffa0}
.ms-grid .bad strong{color:#c0392b}
.ms-team{display:grid;gap:8px}
.ms-barber{display:grid;gap:10px;padding:14px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.ms-barber.is-rent{background:#f7f6f2;border-style:dashed}
.msb-top{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px}
.msb-top img{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #c9a35a}
.ms-barber.is-rent .msb-top img{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #bdb8aa}
.msb-top strong{display:block;font-size:15px}
.msb-top small{font-size:12px;color:var(--muted)}
.msb-top>b{font-size:22px;letter-spacing:-.6px}
.msb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.msb-grid div{padding:7px 4px;border-radius:12px;background:var(--soft);text-align:center}
.msb-grid b{display:block;font-size:16px}
.msb-grid small{font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);font-weight:700}
.msb-grid .bad b{color:#c0392b}
.ms-svcs{display:grid;gap:8px;padding:14px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.ms-svc{display:grid;grid-template-columns:minmax(0,1.3fr) 1fr 34px;align-items:center;gap:10px;font-size:14px}
.ms-svc span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-svc b{text-align:right}
.ms-svc-bar{height:7px;border-radius:7px;background:var(--soft);overflow:hidden}
.ms-svc-bar i{display:block;height:100%;width:0;border-radius:7px;background:linear-gradient(90deg,#c9a35a,#f6dc9a);transition:width .8s cubic-bezier(.2,.8,.2,1)}
@media (max-width:420px){.ms-grid{grid-template-columns:repeat(2,1fr)}.ms-hero strong{font-size:40px}}
/* Caja: una pestaña por barbero (Beleza por defecto) */
.cx-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:0 0 14px}
.cx-tab{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:18px;background:#fff;border:1px solid var(--line);text-decoration:none;color:#171717;transition:transform .15s}
.cx-tab:active{transform:scale(.98)}
.cx-tab.rent{border-style:dashed;background:#f7f6f2}
.cx-tab.on{background:#171717;border-color:#171717;color:#fff;border-style:solid;box-shadow:0 14px 28px -20px #000c}
.cx-tab-av{flex:0 0 40px;width:40px;height:40px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--soft);font-size:16px}
.cx-tab-av img{width:100%;height:100%;object-fit:cover}
.cx-tab-txt strong{display:block;font-size:15px}
.cx-tab-txt small{font-size:12px;color:var(--muted)}
.cx-tab.on small{color:#ffffffa8}
.cx-others{margin-top:-4px}
.cx-others .cx-sep{border-left:0;padding-left:2px}
.cx-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cx-today{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;background:#e0392b26;color:#ffb3a8}
.cx-today i{width:7px;height:7px;border-radius:50%;background:#ff8a7a;animation:blink 1.4s infinite}
.cx-today.ok{background:#1f9d5530;color:#8ee6b1}
.cx-today.ok i{background:#5fd68f;animation:none}
.cx-empty-acc{display:grid;gap:10px;padding:22px;border-radius:24px;background:#fff;border:1px dashed #cfc8b4;text-align:center}
.cx-empty-acc strong{font-size:17px}
.cx-empty-acc p{margin:0;font-size:14px;color:var(--muted);line-height:1.5}
.cx-empty-acc .btn{justify-self:center}
/* Clientes de Garden: más limpio */
.cl-sec{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:24px 2px 10px}
.cl-sec .section-label{margin:0}
.lvt-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
@media (max-width:640px){.lvt-grid{grid-template-columns:repeat(3,1fr)}}
.lvt{position:relative;overflow:hidden;isolation:isolate;display:grid;justify-items:start;align-content:start;gap:0;min-height:0;padding:12px 12px 11px;border-radius:18px;border:0;text-align:left;font-weight:400;font-size:inherit;cursor:pointer;color:var(--ink);background:linear-gradient(145deg,var(--c1),var(--c2));box-shadow:0 12px 24px -16px var(--sh),inset 0 1px 0 #ffffff70;transition:transform .15s,box-shadow .2s}
.lvt::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 35%,#ffffff55 48%,transparent 60%);transform:translateX(-120%);transition:transform .8s}
.lvt:hover::before{transform:translateX(120%)}
.lvt .lvt-ic{font-size:15px;line-height:1;opacity:.85}
.lvt strong{font-size:28px;letter-spacing:-1px;line-height:1.05;margin-top:8px}
.lvt .lvt-name{font-size:13px;font-weight:800;letter-spacing:.2px;white-space:nowrap}
.lvt small{font-size:10.5px;opacity:.7;font-weight:600;white-space:nowrap}
.lvt.on{box-shadow:0 0 0 2.5px #f5f4f0,0 0 0 4.5px #171717,0 14px 26px -16px var(--sh);transform:translateY(-1px)}
.lvt.lv-oro{--c1:#fff2b8;--c2:#e0ad2e;--ink:#3a2a00;--sh:#c9971c}
.lvt.lv-platino{--c1:#f4f8fb;--c2:#a9bccb;--ink:#1d2a33;--sh:#7f97a9}
.lvt.lv-diamante{--c1:#d9fbff;--c2:#33bfe6;--ink:#03283a;--sh:#1aa6d0}
.lvt.lv-onix{--c1:#3a362e;--c2:#0b0a08;--ink:#f3d892;--sh:#000}
.lvt.lv-onix::after{content:"";position:absolute;inset:0;border-radius:18px;padding:1.2px;background:linear-gradient(135deg,#f6dc9a,#8a6a2a 40%,#f6dc9a);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.lvt.lv-elite{--c1:#b28bff;--c2:#5b2bd6;--ink:#fff;--sh:#5b2bd6}
.lvt.lv-leyenda{--c1:#ffb36b;--c2:#d6336c;--ink:#fff;--sh:#d6336c;background:linear-gradient(145deg,#ffc27a 0%,#ff6a5a 45%,#c02f8a 100%)}
/* Pastillas de nivel en la lista, a juego con las tarjetas */
.lvp{font-size:11px;padding:3px 9px 3px 7px;box-shadow:none;cursor:inherit}
.lvp.lv-oro{background:linear-gradient(135deg,#fff2b8,#e0ad2e);color:#3a2a00}
.lvp.lv-platino{background:linear-gradient(135deg,#f4f8fb,#a9bccb);color:#1d2a33}
.lvp.lv-diamante{background:linear-gradient(135deg,#d9fbff,#33bfe6);color:#03283a}
.lvp.lv-onix{background:linear-gradient(135deg,#3a362e,#0b0a08);color:#f3d892;box-shadow:inset 0 0 0 1px #d6b46a88}
.lvp.lv-elite{background:linear-gradient(135deg,#b28bff,#5b2bd6);color:#fff}
.lvp.lv-leyenda{background:linear-gradient(135deg,#ffc27a,#ff6a5a 50%,#c02f8a);color:#fff}
.cl-av.lv-oro{--a:#e0ad2e;--glow:#fff2b8}.cl-av.lv-platino{--a:#a9bccb;--glow:#f4f8fb}.cl-av.lv-diamante{--a:#33bfe6;--glow:#d9fbff}.cl-av.lv-elite{--a:#5b2bd6;--glow:#b28bff}.cl-av.lv-leyenda{--a:#c02f8a;--glow:#ffc27a}
.cl-row.lv-oro{--a:#e0ad2e;--glow:#fff2b8}.cl-row.lv-platino{--a:#a9bccb;--glow:#f4f8fb}.cl-row.lv-diamante{--a:#33bfe6;--glow:#d9fbff}.cl-row.lv-onix{--a:#d6b46a;--glow:#f3d892}.cl-row.lv-elite{--a:#5b2bd6;--glow:#b28bff}.cl-row.lv-leyenda{--a:#c02f8a;--glow:#ffc27a}
/* Barberos */
.cl-barbers{margin-top:0}
.cl-barber{min-height:0;justify-content:flex-start;display:grid;grid-template-columns:44px 1fr auto;font-weight:400;font-size:inherit;padding:12px 14px;border-radius:20px}
.cl-barber img{width:44px;height:44px;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #c9a35a}
.clb-txt{display:grid;gap:3px;min-width:0}
.clb-bar{height:5px;border-radius:5px;background:var(--soft);overflow:hidden;margin-top:3px}
.clb-bar i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,#c9a35a,#f6dc9a);transition:width .8s}
.clb-pct{font-size:20px;letter-spacing:-.5px}
.cl-barber.on .clb-bar{background:#ffffff24}
/* Filtros: una sola línea que se desliza */
.cl-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -2px 8px;padding:2px}
.cl-chips::-webkit-scrollbar{display:none}
.cl-chips .chip{min-height:0;padding:8px 13px;font-weight:700;font-size:13px;background:#fff;color:#171717;border:1px solid var(--line);white-space:nowrap}
.cl-chips .chip.on{background:#171717;color:#fff;border-color:#171717}
.cl-chips .chip-bad{color:#c0392b}
.cl-chips .chip-bad.on{background:#c0392b;border-color:#c0392b;color:#fff}
/* Fila de cliente */
.cl-row{grid-template-columns:48px minmax(0,1fr) auto;gap:14px;padding:12px 14px 12px 12px;border-radius:20px}
.cl-main{display:grid;gap:5px}
.cl-main strong{font-size:15px}
.cl-line{display:flex;align-items:center;gap:8px;min-width:0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden}
.cl-line>span:last-child{overflow:hidden;text-overflow:ellipsis}
.cl-split{display:flex;gap:6px;margin:0;flex-wrap:wrap}
.cl-split span{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 8px 2px 2px;border-radius:20px;background:var(--soft);color:var(--muted)}
.cl-split span img{width:18px;height:18px;border-radius:50%;object-fit:cover}
.cl-split span b{color:#171717}
.cl-split span.on{background:#171717;color:#ffffffc0}
.cl-split span.on b{color:#fff}
.cl-right{display:grid;justify-items:end;align-content:center;gap:2px;text-align:right}
.cl-right strong{font-size:17px;letter-spacing:-.4px}
.cl-right small{font-size:11px;color:var(--muted)}
.cl-tag{display:inline-block;margin-top:4px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap}
.cl-tag.ok{background:#e3f5ea;color:#0f5c31}
.cl-tag.warn{background:#fff3df;color:#8a5a00}
.cl-tag.bad{background:#fdf0ee;color:#c0392b}
.cl-row.is-vip{background:linear-gradient(90deg,color-mix(in srgb,var(--glow) 30%,#fff) 0%,#fff 40%)}
@media (max-width:520px){.cl-row{grid-template-columns:44px minmax(0,1fr) auto;gap:10px}.cl-av{width:44px;height:44px}.cl-row.is-vip .cl-av{width:46px;height:46px}.cl-right strong{font-size:15px}.cl-right .cl-tag{font-size:10px}}
button.bx-month{grid-template-columns:minmax(76px,auto) minmax(0,1fr) auto 12px}
.bm-name strong{font-size:14px}
.bm-num{display:flex;align-items:baseline;gap:4px;white-space:nowrap}
.bm-num strong{display:inline}
@media (max-width:519px){.bm-head small{display:none}}
@media (max-width:519px){.cl-sec small{display:none}}
.cl-barber{grid-template-columns:44px minmax(0,1fr)}
.clb-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.clb-pct{font-size:16px}
.clb-txt small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:700px){.cl-chips{flex-wrap:wrap;overflow:visible}}
/* Accesos del equipo */
.rl-list{display:grid;gap:8px}
.rl-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.rl-row>div{min-width:0}
.rl-row strong{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-row small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-tag{flex:0 0 auto;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;background:#e3f5ea;color:#0f5c31}
.rl-tag.admin{background:#171717;color:#f6dc9a}
/* Código de amigo al unirse al Club y en el perfil */
.ref-box{margin:0 0 14px}
.ref-toggle{display:flex;align-items:center;gap:8px;width:100%;min-height:0;padding:12px 14px;border-radius:14px;background:#ffffff0d;border:1px dashed #e6ecae66;color:#e6ecae;font-size:14px;font-weight:600;justify-content:flex-start;text-align:left}
.ref-toggle b{margin-left:auto;font-size:12px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:#171717;background:#e6ecae;padding:4px 10px;border-radius:20px}
.ref-field{display:none}
.ref-box.open .ref-toggle{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}
.ref-box.open .ref-toggle b{display:none}
.ref-box.open .ref-field{display:block;padding:10px 12px 12px;border:1px dashed #e6ecae66;border-top:0;border-radius:0 0 14px 14px;background:#ffffff0d}
.ref-input{margin:0!important}
.ref-input input{width:100%;margin:0;background:#0000004d!important;border:1px solid #ffffff2a!important;color:#fff!important;border-radius:12px;padding:12px 14px!important;font:800 20px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:3px;text-transform:uppercase}
.ref-input input::placeholder{color:#ffffff4d;letter-spacing:2px;font-weight:600}
.ref-state{margin:8px 2px 0!important;font-size:13px!important;color:#c9cabd!important;min-height:0}
.ref-state:empty{display:none}
.ref-state.ok{color:#cfe59a!important}
.ref-state.ok b{color:#fff}
.ref-state.bad{color:#ffb3a8!important}
.inv-friends{display:grid;gap:6px;margin-top:12px}
.inv-friend{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:12px;background:#ffffff0d;border:1px solid #ffffff14}
.inv-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#ffffff1a;font-weight:800;font-size:13px}
.inv-friend strong{font-size:14px}
.inv-friend em{font-style:normal;font-size:12px;color:#c9cabd}
.inv-friend.came em{color:#cfe59a;font-weight:700}
.inv-friend.came .inv-av{background:#e6ecae;color:#171717}
.inv-by{margin:14px 0 0!important;padding:10px 12px;border-radius:12px;background:#ffffff0d;font-size:13px!important}
.inv-by b{color:#e6ecae}
.inv-claim{margin-top:14px}
.inv-claim label{display:grid;gap:8px;margin:0;font-size:13px;color:#d0d2c2;font-weight:600}
.inv-claim label>div{display:grid;grid-template-columns:1fr auto;gap:8px}
.inv-claim input{margin:0;background:#0000004d!important;border:1px solid #ffffff2a!important;color:#fff!important;border-radius:12px;font:800 16px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:2px;text-transform:uppercase}
.inv-claim .btn{min-height:0;background:#e6ecae;color:#171717;border-color:#e6ecae}
/* ── Medallas nuevas: arte propio por medalla (streetwear industrial) ── */
.mdl{display:block;width:100%;height:100%;overflow:visible}
.mh-medals{gap:6px}
.mdl-mini{display:block;width:38px;height:38px;filter:drop-shadow(0 4px 6px #000a)}
.mdl-mini:nth-child(odd){transform:rotate(-6deg)}
.mdl-mini:nth-child(even){transform:rotate(5deg)}
.md-group{margin:18px 2px 10px;font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.medals2{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.medal2{--g:#c9a35a;position:relative;overflow:hidden;display:grid;justify-items:center;align-content:start;gap:4px;padding:14px 8px 12px;border-radius:20px;text-align:center;background:#fff;border:1px solid var(--line)}
.medal2 .md-art{position:relative;display:block;width:76px;height:76px;margin-bottom:4px;transition:transform .3s cubic-bezier(.2,1.4,.4,1)}
.medal2:nth-child(3n+1) .md-art{transform:rotate(-5deg)}
.medal2:nth-child(3n+2) .md-art{transform:rotate(4deg)}
.medal2:nth-child(3n) .md-art{transform:rotate(-2deg)}
.medal2:hover .md-art{transform:rotate(0) scale(1.06)}
.medal2 .mdl{filter:grayscale(1) contrast(.8) opacity(.38)}
.md-lock{position:absolute;right:-2px;bottom:2px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#171717;color:#fff;box-shadow:0 0 0 3px #fff}
.md-lock svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
.medal2 strong{font-size:13px;letter-spacing:-.2px;line-height:1.15}
.medal2 small{font-size:11px;color:var(--muted)}
.md-bar{display:block;width:72%;height:4px;border-radius:4px;background:var(--soft);overflow:hidden;margin:2px 0}
.md-bar i{display:block;height:100%;width:0;border-radius:4px;background:#171717;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.medal2.got{background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--g) 38%,#1b1b1b) 0%,#141414 62%);border-color:#141414;color:#fff;box-shadow:0 16px 30px -22px var(--g)}
.medal2.got::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,#ffffff06 0 2px,transparent 2px 7px);pointer-events:none}
.medal2.got .mdl{filter:drop-shadow(0 8px 12px #000b)}
.medal2.got .md-ok{color:color-mix(in srgb,var(--g) 70%,#fff);font-weight:800;letter-spacing:.3px}
.medal2 .medal-gift{position:relative;margin-top:4px}
.medal2.got .medal-gift{background:#ffffff14;color:#f3d892}
@media (min-width:700px){.medals2{grid-template-columns:repeat(4,1fr)}.medal2 .md-art{width:88px;height:88px}}
.medal2 .medal-gift{white-space:normal;max-width:100%;line-height:1.25;text-align:center;justify-content:center}
/* Medallas: más grupos (servicios, barberos, premios y Club, próximamente) */
.md-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:22px 2px 10px}
.md-head .md-group{margin:0}
.md-head small{font-size:12px;font-weight:700;color:var(--muted)}
.medal2.soon{background:repeating-linear-gradient(135deg,#fff 0 10px,#f7f6f2 10px 20px);border-style:dashed}
.medal2.soon .mdl{filter:none;opacity:.9}
.md-soon{font-size:10px!important;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#9a7a32!important;background:#f6ecd2;padding:3px 8px;border-radius:20px}
.ficha-actions{flex-wrap:wrap}
.tee-on{color:#0f5c31;border-color:#bfe5cd;background:#e3f5ea}
.md-soon{font-size:8.5px!important;letter-spacing:.4px!important;padding:3px 7px!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.medal2 strong{overflow-wrap:anywhere}
/* ── Mis citas: activa muy visible, realizadas claras ── */
.next-appt{position:relative;overflow:hidden;isolation:isolate;display:grid;gap:14px;padding:18px;border-radius:24px;text-decoration:none;color:#fff;background:radial-gradient(120% 120% at 100% 0%,#2f6b3d 0%,#16301c 45%,#0d1a10 100%);box-shadow:0 22px 44px -24px #1f9d55aa;animation:na-glow 2.4s ease-in-out infinite}
.next-appt::before{content:"";position:absolute;inset:0;border-radius:24px;padding:1.5px;background:linear-gradient(135deg,#7dffb0,#1f9d55 40%,#ffffff30 60%,#7dffb0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.next-appt::after{content:"";position:absolute;inset:0;z-index:-1;background:url(/assets/logo-tile.svg) 0 0/96px 64px repeat;opacity:.06;-webkit-mask-image:linear-gradient(200deg,#000,transparent 70%);mask-image:linear-gradient(200deg,#000,transparent 70%)}
@keyframes na-glow{50%{box-shadow:0 22px 50px -18px #1f9d55}}
.na-top{display:flex;justify-content:space-between;align-items:center}
.na-live{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#9ff0bf}
.na-live i,.live-dot{position:relative;width:9px;height:9px;border-radius:50%;background:#34d27a;box-shadow:0 0 0 0 #34d27a99;animation:live-pulse 1.4s infinite;display:inline-block}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 #34d27aaa}70%{box-shadow:0 0 0 9px #34d27a00}100%{box-shadow:0 0 0 0 #34d27a00}}
.na-when{font-size:13px;font-weight:800;padding:5px 12px;border-radius:20px;background:#34d27a;color:#06240f}
.na-main{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:14px}
.na-date{display:grid;justify-items:center;padding:8px 0;border-radius:16px;background:#ffffff14;border:1px solid #ffffff22;line-height:1.05}
.na-date small{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#ffffffb0}
.na-date strong{font-size:30px;margin:2px 0}
.na-info{display:grid;gap:2px;min-width:0}
.na-time{font-size:30px;letter-spacing:-1px;line-height:1}
.na-info span{font-size:14px;color:#ffffffc8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.na-face{width:58px;height:58px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #0d1a10,0 0 0 4px #34d27a}
.na-foot{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid #ffffff1a;font-size:13px;color:#ffffffb8}
.na-foot b{color:#06240f;background:#e6ecae;padding:9px 14px;border-radius:12px;font-size:14px}
.next-appt+.appts{margin-top:10px}
.appt.is-active{border-color:#bfe5cd;box-shadow:0 10px 24px -18px #1f9d55}
.appt.is-active .appt-date{background:#1f6b3a}
.appt-state.st-ok{display:inline-flex;align-items:center;gap:6px}
.live-dot{width:7px;height:7px}
.appt.is-done .appt-date{position:relative;background:#e9e8e2;color:#64645e}
.appt-done{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#171717;color:#fff;font-size:11px;font-weight:800;box-shadow:0 0 0 2px #faf9f6}
.appt.is-done .st-done{background:#171717;color:#fff}
.appt.is-done .appt-face{filter:grayscale(.6);opacity:.85}
.appt.is-canceled .appt-body strong{text-decoration:line-through;color:var(--muted)}
.appt.is-absent{border-color:#f6c9c3}
/* ── Mosaico del logo en la tarjeta del perfil ── */
.mh-mosaic,.pass-mosaic{position:absolute;inset:-40%;z-index:-1;background:url(/assets/logo-tile.svg) 0 0/96px 64px repeat;opacity:.075;transform:rotate(-12deg);animation:mosaic 70s linear infinite;-webkit-mask-image:radial-gradient(70% 60% at 75% 25%,#000 0%,#0007 45%,transparent 75%);mask-image:radial-gradient(70% 60% at 75% 25%,#000 0%,#0007 45%,transparent 75%);pointer-events:none}
@keyframes mosaic{to{background-position:384px 256px}}
@media (prefers-reduced-motion:reduce){.mh-mosaic,.pass-mosaic,.next-appt,.na-live i,.live-dot,.pass-shine{animation:none}}
/* ── Carnet de socio rediseñado ── */
.pass2{isolation:isolate;padding:20px 22px;background:radial-gradient(120% 120% at 100% 0%,color-mix(in srgb,var(--glow,#c9a35a) 26%,#141414) 0%,#0b0b0a 58%);border:0}
.pass2::before{content:"";position:absolute;inset:0;border-radius:22px;padding:1.5px;background:linear-gradient(135deg,var(--glow,#f6dc9a),#fff3 35%,var(--a,#c9a35a) 70%,var(--glow,#f6dc9a));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2}
.pass2::after{display:none}
.pass2 .pass-mosaic{opacity:.06;-webkit-mask-image:linear-gradient(160deg,#000 0%,transparent 70%);mask-image:linear-gradient(160deg,#000 0%,transparent 70%)}
.pass-mark{position:absolute;right:-18%;bottom:-22%;width:78%;opacity:.07;z-index:-1;transform:rotate(-8deg);pointer-events:none}
.pass-shine{position:absolute;inset:-50%;z-index:1;background:linear-gradient(115deg,transparent 42%,#ffffff22 50%,transparent 58%);transform:translateX(-60%);animation:pass-shine 5s ease-in-out infinite;pointer-events:none}
@keyframes pass-shine{0%,55%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
.pass2 .pass-top{position:relative;z-index:1}
.pass2 .pass-logo{width:74px;filter:none}
.pass-lvl{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:6px 11px;border-radius:30px;background:#ffffff12;border:1px solid color-mix(in srgb,var(--glow,#f6dc9a) 55%,transparent);color:var(--glow,#f6dc9a)}
.pass2 .pass-mid{position:relative;z-index:1}
.pass2 .pass-mid small{letter-spacing:3px;color:#ffffff8c}
.pass2 .pass-mid strong{display:block;font-size:40px;letter-spacing:6px;background:linear-gradient(180deg,#fff 30%,var(--glow,#f6dc9a));-webkit-background-clip:text;background-clip:text;color:transparent}
.pass2 .pass-bottom{position:relative;z-index:1;grid-template-columns:1.7fr .8fr .6fr}
@media (max-width:420px){.pass2 .pass-mid strong{font-size:32px;letter-spacing:4px}.pass2 .pass-logo{width:60px}}
.member-hero .mh-mosaic{opacity:.11}
/* ── Ficha de una cita (cliente): foto del barbero y servicio ── */
.bk-hero{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:3/3.4;max-height:520px;border-radius:26px;background:#141414;box-shadow:0 26px 50px -30px #000c;margin-top:6px}
.bk-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:-2}
.bk-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0000 35%,#000a 68%,#000e 100%)}
.bk-hero::after{content:"";position:absolute;inset:0;border-radius:26px;padding:1.5px;background:linear-gradient(135deg,#ffffff70,#ffffff10 40%,#ffffff40);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.bk-hero.is-active::after{background:linear-gradient(135deg,#7dffb0,#1f9d55 40%,#ffffff30 60%,#7dffb0)}
.bk-stamp{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;padding:7px 12px;border-radius:30px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#000000a0;color:#fff;border:1px solid #ffffff30}
.bk-hero.is-done .bk-stamp{background:#f5f4f0;color:#171717;border-color:#f5f4f0;transform:rotate(-3deg)}
.bk-hero.is-active .bk-stamp{background:#0d1a10cc;color:#9ff0bf;border-color:#34d27a88}
.bk-hero.is-canceled .bk-stamp,.bk-hero.is-absent .bk-stamp{background:#fdebe9;color:#8f1e16;border-color:#f6c9c3}
.bk-hero.is-canceled .bk-photo{filter:grayscale(1)}
.bk-over{position:absolute;left:0;right:0;bottom:0;padding:20px;color:#fff}
.bk-over small{display:block;font-size:12px;color:#ffffffb8;letter-spacing:.3px}
.bk-over h1{color:#fff;margin:4px 0 6px;font-size:30px;letter-spacing:-.8px;line-height:1.05}
.bk-over span{font-size:14px;color:#ffffffd0}
.bk-over b{color:#fff}
.bk-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:12px 0 14px}
.bk-facts div{padding:12px 14px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.bk-facts small{display:block;font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:700}
.bk-facts strong{display:block;font-size:15px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bk-actions .btn{width:100%}
/* ── «¿Qué te hacemos?»: lista de servicios más llamativa ── */
.svc-list{display:grid;gap:10px;margin-top:20px}
.svc{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto 30px;align-items:center;gap:14px;padding:14px 14px 14px 14px;border-radius:22px;background:#fff;border:1px solid var(--line);text-decoration:none;color:#171717;box-shadow:0 10px 26px -22px #000a;animation:svc-in .45s cubic-bezier(.2,.8,.2,1) both;transition:transform .15s,box-shadow .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.svc:nth-child(2){animation-delay:.04s}.svc:nth-child(3){animation-delay:.08s}.svc:nth-child(4){animation-delay:.12s}.svc:nth-child(5){animation-delay:.16s}.svc:nth-child(6){animation-delay:.2s}.svc:nth-child(7){animation-delay:.24s}
@keyframes svc-in{from{opacity:0;transform:translateY(8px)}}
.svc:active{transform:scale(.98);border-color:#171717}
.svc-ic{position:relative;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#171717;color:#e6ecae}
.svc-ic svg{width:24px;height:24px}
.svc-ic em{position:absolute;right:-6px;bottom:-6px;font-style:normal;font-size:10px;font-weight:900;padding:2px 6px;border-radius:10px;background:#e6ecae;color:#171717;box-shadow:0 0 0 2px #fff}
.svc-txt{display:grid;gap:5px;min-width:0}
.svc-txt strong{font-size:16px;line-height:1.2;letter-spacing:-.2px}
.svc-dur{display:inline-flex;align-items:center;gap:5px;justify-self:start;font-size:12px;font-weight:600;color:var(--muted);background:var(--soft);padding:3px 9px 3px 7px;border-radius:20px}
.svc-dur svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.svc-price{font-size:20px;font-weight:900;letter-spacing:-.6px;white-space:nowrap}
.svc-go{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#171717;color:#e6ecae;font-size:20px;line-height:1;padding-bottom:2px}
.svc-packs-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:26px 2px 0}
.svc-packs-head .section-label{margin:0}
.svc-packs-head small{font-size:12px;color:var(--muted)}
.svc-pack{color:#fff;border-color:#1a1b17;background:radial-gradient(130% 140% at 100% 0%,#3b4a20 0%,#1a1b17 55%,#111 100%);box-shadow:0 18px 34px -24px #3b4a20}
.svc-pack::after{content:"";position:absolute;inset:0;border-radius:22px;background:url(/assets/logo-tile.svg) 0 0/96px 64px repeat;opacity:.05;pointer-events:none}
.svc-pack .svc-ic{background:#e6ecae;color:#171717}
.svc-pack .svc-ic em{background:#171717;color:#e6ecae;box-shadow:0 0 0 2px #1a1b17}
.svc-pack .svc-dur{background:#ffffff14;color:#d9dacf}
.svc-save{justify-self:start;font-size:11px;font-weight:800;letter-spacing:.3px;color:#171717;background:#e6ecae;padding:3px 9px;border-radius:20px}
.svc-pack .svc-price{color:#e6ecae}
.svc-pack .svc-go{background:#e6ecae;color:#171717}
@media (max-width:340px){.svc{grid-template-columns:42px minmax(0,1fr) auto;gap:11px}.svc-ic{width:42px;height:42px}.svc-go{display:none}.svc-price{font-size:18px}}
@media (prefers-reduced-motion:reduce){.svc{animation:none}}
/* ── Pack: elegir 4 días ── */
.pack-tray{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0}
.pk-slot{position:relative;display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:8px;min-height:0;padding:10px 12px;border-radius:14px;border:1px dashed #c9c6bc;background:#fff;color:var(--muted);font-size:13px;font-weight:600;text-align:left}
.pk-slot b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:#171717;font-size:12px}
.pk-slot.on{border-style:solid;border-color:#171717;background:#171717;color:#fff;justify-content:stretch}
.pk-slot.on b{background:#e6ecae}
.pk-slot.on strong{font-size:14px}
.pk-slot i{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#171717;font-style:normal;font-size:14px;box-shadow:0 2px 6px #0004}
.cal-cell.has-pick{position:relative;background:#e6ecae!important;color:#171717!important;font-weight:800}
.cal-cell.has-pick::after{content:attr(data-n);position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:#171717;color:#e6ecae;font-size:10px;display:grid;place-items:center}
.pack-sum{display:grid;gap:8px}
.pack-list{list-style:none;margin:0;padding:6px;display:grid;gap:4px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.pack-list li{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;font-size:14px}
.pack-list li:nth-child(odd){background:var(--soft)}
.pack-list b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#171717;color:#e6ecae;font-size:12px}
.appt-state.st-pack{background:#e6ecae;color:#3e4a16!important}
.continue-bar .btn:disabled{opacity:.6}
@media (max-width:420px){.svc{gap:11px;padding:13px 12px}.svc-price{font-size:18px}.svc-go{width:26px;height:26px;font-size:18px}.svc{grid-template-columns:44px minmax(0,1fr) auto 26px}.svc-ic{width:44px;height:44px}}
/* ── Extra «Lavado de pelo +2 €» ── */
.continue-bar.has-extras{flex-direction:column;align-items:stretch;gap:8px;padding:10px}
.continue-bar.has-extras .cb-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-left:8px}
.cb-row{display:contents}
.continue-bar.has-extras .cb-row{display:flex}
.xtra{position:relative;display:grid!important;grid-template-columns:34px minmax(0,1fr) auto 38px;align-items:center;gap:10px;margin:0!important;padding:9px 10px;border-radius:14px;background:#f4f3ee;border:1px solid var(--line);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s,border-color .2s}
.xtra input{position:absolute;opacity:0;pointer-events:none}
.xt-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#fff;color:#3b8ff0}
.xt-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.xt-txt{display:grid;gap:1px;min-width:0}
.xt-txt strong{font-size:14px;color:#171717}
.xt-txt small{font-size:11.5px;color:var(--muted);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xtra>b{font-size:15px;font-weight:900;color:#171717;white-space:nowrap}
.xtra>b small{font-size:10px;font-weight:600;color:var(--muted)}
.xt-sw{position:relative;width:38px;height:23px;border-radius:20px;background:#d9d7cf;transition:background .2s}
.xt-sw::after{content:"";position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0004;transition:transform .2s cubic-bezier(.2,.9,.3,1.2)}
.xtra.on{background:#e7f1fd;border-color:#9cc6f5}
.xtra.on .xt-ic{background:#3b8ff0;color:#fff}
.xtra.on .xt-sw{background:#3b8ff0}
.xtra.on .xt-sw::after{transform:translateX(15px)}
.xtra:has(input:focus-visible){outline:2px solid #171717;outline-offset:2px}
.xtra-details{margin:10px 0 4px}
.appt-state.st-extra{background:#e7f1fd;color:#0f4f9c!important}
.as-extra{display:inline-flex;align-items:center;gap:6px;margin:0 0 6px;padding:5px 11px;border-radius:20px;background:#e7f1fd;color:#0f4f9c;font-size:13px;font-weight:700}
.as-extra svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.ag-x{font-weight:800;color:#0f4f9c}
#app:has(.continue-bar.has-extras){padding-bottom:250px}
.na-extra{display:inline-flex;align-items:center;gap:6px;justify-self:start;font-size:12px;font-weight:700;padding:5px 11px;border-radius:20px;background:#3b8ff033;color:#cfe4ff}
.na-extra svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
/* ── Páginas legales y enlaces discretos ── */
.legal-page{font-size:14.5px;line-height:1.65;color:#2a2a28;background:#fff;border:1px solid var(--line);border-radius:20px;padding:6px 20px 14px}
.legal-page p{margin:12px 0}
.legal-page h2{font-size:18px;margin:22px 0 4px;scroll-margin-top:90px}
.legal-page a{color:#171717;font-weight:700}
.lg-list{padding-left:18px;margin:10px 0}
.lg-list li{margin:3px 0}
.legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;margin:26px 0 8px;font-size:12px;color:var(--muted)}
.legal-links a{color:var(--muted);text-decoration:none}
.legal-links a:hover{text-decoration:underline}
.check a,.club-note a{color:inherit;font-weight:700}
.rl-row{width:100%;min-height:0;text-align:left;font-weight:400;font-size:inherit;color:#171717;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto 22px;gap:10px}
.rl-row:active{transform:scale(.99)}
.rl-go{display:grid;place-items:center;color:var(--muted)}
.rl-go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.is-hidden{display:none!important}
/* ── Antes de abrir reservas online: aviso con AgendaPro ── */
.pre-launch{position:relative;overflow:hidden;display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px 12px;align-items:start;margin:18px 0 4px;padding:16px;border-radius:20px;color:#fff;background:radial-gradient(130% 140% at 100% 0%,#3b4a20 0%,#1a1b17 55%,#111 100%);box-shadow:0 18px 34px -24px #3b4a20}
.pl-dot{width:10px;height:10px;margin-top:5px;border-radius:50%;background:#e6ecae;box-shadow:0 0 0 0 #e6ecaeaa;animation:live-pulse 1.6s infinite}
.pl-txt{display:grid;gap:4px}
.pl-txt strong{font-size:16px;letter-spacing:-.2px}
.pl-txt span{font-size:13px;line-height:1.45;color:#d9dacf}
.pl-btn{grid-column:1/-1;min-height:46px;background:#e6ecae;color:#171717;border-color:#e6ecae;border-radius:14px;font-size:15px}
.pre-launch-mini{display:block;margin:6px 0 2px;padding:10px 14px;border-radius:14px;background:#f2f4e1;border:1px solid #d9dfa9;color:#3e4a16;font-size:13px;text-decoration:none}
.pre-launch-mini b{text-decoration:underline}
/* ── Revisión móvil (26 oct): zonas de toque cómodas y nada debajo de la barra ── */
.back-link{display:inline-flex;align-items:center;min-height:40px;padding:8px 10px 8px 0}
.socials a{display:inline-flex;align-items:center;min-height:40px;padding:8px 10px}
.legal-links{position:static}
.legal-links a{display:inline-flex;align-items:center;min-height:36px;padding:6px 2px}
/* Móviles pequeños (≤360 px): tira de niveles sin salirse y barra de continuar más compacta */
@media (max-width:360px){
  .levels-strip{overflow:hidden}
  .levels-strip small{font-size:7.5px;letter-spacing:0}
  .xt-txt small{display:none}
  .xtra{padding:7px 9px;grid-template-columns:30px minmax(0,1fr) auto 36px;gap:8px}
  .xt-ic{width:30px;height:30px}
  .continue-bar .btn{min-width:110px}
}
.levels-strip{grid-template-columns:repeat(8,minmax(0,1fr))}.lv-dot small{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.as-name{display:inline-flex;align-items:center;min-height:36px}
.wa-btn{min-height:38px;padding-top:8px;padding-bottom:8px}
.sc-link{display:block;padding:10px 0;min-height:38px}
.cl-main strong{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25;word-break:break-word}
.cl-csv{display:inline-flex;align-items:center;min-height:38px}
/* ── Faltones (3+ faltas): bien visibles para el equipo ── */
.ag-appt.is-falton{box-shadow:inset 0 0 0 2px #e0392b,0 6px 14px -10px #e0392b}
.ag-falton{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;margin-bottom:2px;padding:2px 7px;border-radius:20px;background:#e0392b;color:#fff;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.2px;white-space:nowrap;animation:falton-blink 1.8s ease-in-out infinite}
@keyframes falton-blink{50%{opacity:.75}}
.as-falton{display:grid;gap:2px;margin:6px 0 8px;padding:10px 12px;border-radius:14px;background:#fdebe9;border:1px solid #f6c9c3;color:#8f1e16}
.as-falton b{font-size:15px}
.as-falton span{font-size:13px}
.falton{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:20px;background:#e0392b;color:#fff;font-size:11px;font-weight:800;white-space:nowrap}
.falton.small{font-size:10px;padding:1px 6px}
@media (prefers-reduced-motion:reduce){.ag-falton{animation:none}}
.ag-falton{position:absolute;top:5px;right:7px;margin:0;z-index:1}
.ag-appt.is-falton strong{padding-right:120px}