:root{
  --cream:#F8F1E7;
  --ivory:#FDFAF4;
  --sand:#EEE2CF;
  --line:#E6D8C1;
  --taupe:#6B5C47;
  --ink:#34241C;
  --ink-soft:#4A3D32;
  --bronze:#7B4B2A;
  --gold:#B8925A;
  --gold-d:#5E4524;
  --gold-l:#DCC596;
  --ok:#45683F;
  --warn:#8A5A12;
  --bad:#A4503F;
  --shadow:0 1px 2px rgba(60,40,15,.04),0 10px 30px rgba(60,40,15,.07);
  --r:18px;
  --serif:'Playfair Display','Cormorant Garamond',Georgia,serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --goldgrad:linear-gradient(135deg,#E9D3A4 0%,#C49C5E 50%,#A57B3E 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-weight:400;background:var(--cream);color:var(--ink);line-height:1.5;min-height:100vh;
  background-image:radial-gradient(1000px 520px at 90% -8%,rgba(226,203,162,.45),transparent 60%),radial-gradient(800px 500px at -10% 110%,rgba(226,203,162,.3),transparent 60%);
  background-attachment:fixed}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;text-align:inherit}
a{color:inherit;text-decoration:none}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.display{font-family:var(--serif);font-weight:500;letter-spacing:0;line-height:1.08;font-size:clamp(2.1rem,5vw,3.2rem)}
.display em{font-style:italic;color:var(--bronze)}
.eyebrow{font-size:.76rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-d);font-weight:500;margin-bottom:.5rem}
.muted{color:var(--taupe)}

/* Marca */
.star{width:34px;height:34px;fill:url(#gGold);flex:none}
.brand{display:flex;align-items:center;gap:.8rem}
.brand-name{font-family:var(--serif);font-size:1.45rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;line-height:1}
.brand-sub{font-size:.76rem;letter-spacing:.3em;text-transform:uppercase;color:var(--taupe);margin-top:.35rem}

/* Entrada */
.landing{min-height:100vh;min-height:100dvh;color:#F1DDBF;position:relative;overflow:hidden;background:#2A1421}
.landing::before,.landing::after{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,520px);pointer-events:none}
.landing::before{top:52px;background:url(img/landing-bg.jpg) center bottom/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 80px);mask-image:linear-gradient(180deg,transparent 0,#000 80px)}
.landing::after{background:linear-gradient(180deg,rgba(20,8,14,.45) 0%,rgba(20,8,14,0) 32%,rgba(20,8,14,0) 70%,rgba(20,8,14,.75) 100%);transition:background .5s}
.landing[data-step=name]::after,.landing[data-step=hello]::after{background:rgba(20,8,14,.82)}
.l-step{position:relative;z-index:1;min-height:100vh;min-height:100dvh;max-width:520px;margin:0 auto;padding:44px 24px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;animation:rise .7s ease both}
.l-step.center{justify-content:center;align-items:center;text-align:center}
.l-top{text-align:left}
.l-eyebrow{font-size:.76rem;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-l);margin-bottom:.9rem}
.l-rule{display:block;width:44px;height:1px;background:var(--gold);margin-bottom:1.3rem}
.l-title{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,7.4vw,2.6rem);line-height:1.08;background:linear-gradient(180deg,#FBEBCB,#D9AE78);-webkit-background-clip:text;background-clip:text;color:transparent}
.l-title.sm{font-size:clamp(1.9rem,7vw,2.4rem)}
.l-title em{font-style:italic}
.l-sub{margin-top:.8rem;color:#E4D4BC;font-weight:300;font-size:1rem;max-width:30ch}
.l-art{width:100%;max-width:440px;margin:auto;padding-top:16px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.l-bottom{margin-top:auto;padding-top:24px}
.l-star{width:54px;height:54px;fill:url(#gGold);margin-bottom:1rem}
.l-star.big{width:84px;height:84px;margin-bottom:1.6rem}
.l-form{width:100%;max-width:380px;margin-top:2rem;display:flex;flex-direction:column;gap:1.2rem;text-align:left}
.l-field{display:flex;flex-direction:column;gap:.5rem}
.l-field span{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l)}
.l-field input{background:#FDFAF4;border:1px solid var(--gold-l);color:#1F1510;border-radius:14px;padding:.95rem 1.1rem;font-size:1.05rem}
.l-field input::placeholder{color:#7D6E5A}
.l-field input:focus{border-color:var(--gold-l);box-shadow:0 0 0 3px rgba(220,197,150,.18)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Layout */
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:36px 24px 28px;display:flex;flex-direction:column;border-right:1px solid var(--line);background:rgba(253,250,244,.65);backdrop-filter:blur(8px)}
.nav{display:flex;flex-direction:column;gap:6px;margin-top:44px}
.nav button{display:flex;align-items:center;gap:.9rem;padding:.8rem 1rem;border-radius:14px;color:var(--ink-soft);transition:.2s;letter-spacing:.04em}
.nav button:hover{background:var(--sand)}
.nav button.active{background:var(--ink);color:var(--ivory)}
.nav button.active .ic{color:var(--gold-l)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.link{display:flex;align-items:center;gap:.8rem;padding:.55rem 1rem;color:var(--taupe);font-size:.86rem;border-radius:10px;cursor:pointer;transition:.2s}
.link:hover{color:var(--ink);background:var(--sand)}
.main{padding:44px clamp(20px,4vw,56px) 80px;max-width:1100px;width:100%}
.topbar{display:none}
.tabbar,.fab{display:none}
.view{display:none}
.view.active{display:block;animation:rise .45s ease both}

/* Inicio */
.hero{position:relative;isolation:isolate;margin-bottom:1rem;min-height:150px}
.hero::before{content:"";position:absolute;z-index:-1;top:-70px;right:calc(-1 * clamp(18px,4vw,56px));left:-18px;height:400px;pointer-events:none;
  background:linear-gradient(90deg,rgba(248,241,231,.92) 0,rgba(248,241,231,.55) 38%,rgba(248,241,231,0) 62%),url(img/home-bg.jpg) right top/125% auto no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
@media (min-width:861px){.hero::before{left:auto;width:520px;background-size:100% auto;-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%),linear-gradient(90deg,transparent 0,#000 35%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 50%,transparent 100%),linear-gradient(90deg,transparent 0,#000 35%);mask-composite:intersect}}
.hero-date{font-size:.95rem;color:var(--ink-soft);margin-top:.6rem;order:3;position:relative}
.hero{display:flex;flex-direction:column}
.hero .display{order:1;font-size:clamp(2rem,8vw,3rem);position:relative}
.hero .display span{color:var(--bronze)}
.hero-date{order:2}
.section-head{display:flex;justify-content:space-between;align-items:baseline;margin:1.4rem 0 .6rem}
.section-head h3{font-family:var(--serif);font-size:1.35rem;font-weight:500}
.link-sm{font-size:.86rem;color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-l);text-underline-offset:4px;padding:.2rem 0;display:inline-flex;gap:.3rem;align-items:center}
.stack{display:flex;flex-direction:column;gap:10px}

.sum-card{position:relative;overflow:hidden;border-radius:20px;padding:16px 18px 14px;color:#F5E6CC;background:linear-gradient(145deg,#3E2B22,#2A1B15);box-shadow:0 14px 32px rgba(52,36,28,.3)}
.sum-card::before{content:"";position:absolute;inset:6px;border-radius:15px;border:1px solid rgba(220,197,150,.25);pointer-events:none}
.sum-card h3{font-family:var(--serif);font-weight:500;font-size:1.3rem;line-height:1.1;position:relative;z-index:1}
.sum-card h3 em{color:#EBD3A0}
.sum-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:.8rem;position:relative;z-index:1}
.sum-grid button{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;padding:0 10px;border-left:1px solid rgba(220,197,150,.3);min-width:0}
.sum-grid button:first-child{border-left:0;padding-left:0}
.sum-grid b{font-family:var(--serif);font-size:clamp(1.15rem,5vw,1.6rem);font-weight:500;line-height:1.1;color:#FFF3DA;white-space:nowrap}
.sum-grid small{font-size:.8rem;color:#E6D6BA;line-height:1.2}

.quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}
.quick button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:16px;background:var(--ivory);border:1px solid var(--line);font-size:.82rem;color:var(--ink);transition:.2s;text-align:center;line-height:1.15}
.quick button:hover{border-color:var(--gold)}
.quick .q-ic{width:40px;height:40px;border-radius:50%;background:var(--sand);display:grid;place-items:center;color:var(--ink)}
.quick .q-ic .ic{width:20px;height:20px}

/* Alertas */
.alerts{background:var(--ivory);border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:var(--r);padding:12px 16px;box-shadow:var(--shadow);margin-top:14px}
.alerts.bad{border-left-color:var(--bad)}
.alerts.calm{border-left-color:var(--ok)}
.alerts-title{display:flex;align-items:center;gap:.6rem;font-weight:500;margin-bottom:.4rem;font-size:.95rem}
.alerts-title .ic{color:var(--warn)}
.alerts.bad .alerts-title .ic{color:var(--bad)}
.alerts.calm .alerts-title .ic{color:var(--ok)}
.alerts.calm .alerts-title{margin:0}
.alert-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:.45rem 0;border-top:1px solid var(--line);font-size:.92rem}
.alert-row>div{min-width:0}
.alert-row b{display:block;font-weight:500;line-height:1.25}
.alert-row .badge{flex:none;font-size:.8rem}
.alert-more{font-size:.85rem;color:var(--ink-soft);padding-top:.4rem;border-top:1px solid var(--line)}
.alert-row:first-of-type{border-top:0}
.alert-row b{font-weight:500}
.alert-row small{display:block;color:var(--taupe);font-size:.8rem}

/* Línea de semana */
.timeline{background:var(--ivory);border:1px solid var(--line);border-radius:var(--r);padding:2px 14px;box-shadow:var(--shadow)}
.tl-row{width:100%;display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);position:relative}
.tl-row:first-child{border-top:0}
.tl-time{width:64px;flex:none}
.tl-time small{display:block;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.tl-time b{font-weight:600;font-size:1rem}
.tl-main{flex:1;min-width:0}
.tl-main h4{font-weight:500;font-size:1rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tl-main p{font-size:.88rem;color:var(--ink-soft);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chev{width:28px;height:28px;border-radius:50%;border:1px solid var(--gold-l);display:grid;place-items:center;color:var(--gold-d);flex:none;font-style:normal}
.chev .ic{width:14px;height:14px}

/* Avatares */
.avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;background:var(--goldgrad);color:#fff;display:inline-grid;place-items:center;font-family:var(--serif);font-size:1.05rem;flex:none}
.avatar.sq{width:44px;height:44px;border-radius:50%}
.avatar.md{width:58px;height:58px;font-size:1.25rem}
.avatar.lg{width:112px;height:112px;font-size:2.2rem;border:3px solid var(--ivory);box-shadow:0 0 0 1px var(--gold-l)}

.tip{margin-top:1.6rem;padding:16px 18px;border-radius:var(--r);background:rgba(220,197,150,.22);border:1px dashed var(--gold-l);font-size:.9rem;color:var(--ink-soft);display:flex;gap:.8rem}
.tip .ic{color:var(--gold-d);margin-top:2px}

/* Tarjetas */
.card{background:var(--ivory);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);display:flex;gap:14px;align-items:center;width:100%}
.card-main{flex:1;min-width:0}
.card-main h4{font-weight:500;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-main p{color:var(--taupe);font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-actions{display:flex;gap:2px;align-items:center}
.icon-btn{width:38px;height:38px;border-radius:50%;display:inline-grid;place-items:center;color:var(--taupe);transition:.2s;position:relative;flex:none}
.icon-btn:hover{background:var(--sand);color:var(--ink)}
.icon-btn.danger:hover{color:var(--bad)}
.dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--bad);border:2px solid var(--cream)}

/* Páginas */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:1.6rem;flex-wrap:wrap}
.toolbar{display:flex;flex-direction:column;gap:14px;margin-bottom:1.4rem}
.search{flex:1;display:flex;align-items:center;gap:.7rem;background:var(--ivory);border:1px solid var(--gold-l);border-radius:999px;padding:.7rem 1.2rem;color:var(--ink-soft);box-shadow:var(--shadow)}
.search input{border:0!important;background:none!important;outline:0;flex:1;color:var(--ink);min-width:0;padding:0!important;box-shadow:none!important;border-radius:0!important}
.search-row{display:flex;gap:12px;align-items:center;margin-bottom:1.4rem}
.round-add{width:52px;height:52px;border-radius:50%;background:var(--goldgrad);color:#fff;display:grid;place-items:center;box-shadow:0 8px 22px rgba(140,109,60,.4);flex:none}
.round-add .ic{width:24px;height:24px;stroke-width:1.6}
.center-head{text-align:center;justify-content:center}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:.45rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--ivory);font-size:.84rem;letter-spacing:.03em;color:var(--ink-soft);transition:.2s}
.chip:hover{border-color:var(--gold)}
.chip.active{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr));gap:14px}

/* Producto */
.prod{background:var(--ivory);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
.prod-top{display:flex;justify-content:space-between;gap:10px}
.prod h4{font-family:var(--serif);font-size:1.25rem;font-weight:500;line-height:1.15}
.prod .brand-line{color:var(--taupe);font-size:.84rem}
.tag{display:inline-block;max-width:48%;white-space:normal;text-align:center;line-height:1.3;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d);border:1px solid var(--gold-l);border-radius:999px;padding:.15rem .7rem;align-self:flex-start}
.badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:500;letter-spacing:.04em}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.badge.ok{color:var(--ok)} .badge.soon{color:var(--warn)} .badge.expired{color:var(--bad)} .badge.none{color:var(--taupe)}
.meter{height:4px;border-radius:4px;background:var(--sand);overflow:hidden}
.meter i{display:block;height:100%;border-radius:4px;background:var(--ok)}
.meter.soon i{background:var(--warn)} .meter.expired i{background:var(--bad)}
.prod-meta{display:flex;justify-content:space-between;font-size:.8rem;color:var(--taupe);gap:8px;flex-wrap:wrap}
.prod-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:10px}
.mini-btn{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-d);display:inline-flex;align-items:center;gap:.4rem;padding:.3rem 0}
.mini-btn .ic{width:16px;height:16px}

/* Agenda */
.day-group{margin-bottom:1.8rem}
.day-title{font-family:var(--serif);font-size:1.3rem;margin-bottom:.7rem;display:flex;gap:.8rem;align-items:baseline}
.day-title small{font-family:var(--sans);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-d)}
.time-badge{flex:none;min-width:58px;text-align:center;font-family:var(--serif);font-size:1.25rem;font-weight:500;border-right:1px solid var(--line);padding-right:14px}

/* Clientes */
.cli-card{cursor:pointer;transition:.2s}
.cli-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.cli-card h4{font-family:var(--serif);font-size:1.2rem;font-weight:500}
.cli-card p{display:flex;align-items:center;gap:.4rem}
.cli-card p .ic{width:14px;height:14px}
.profile{display:flex;gap:18px;align-items:center;background:var(--ivory);border:1px solid var(--gold-l);border-radius:20px;padding:18px;margin-bottom:16px}
.profile h4{font-family:var(--serif);font-size:1.6rem;font-weight:500;line-height:1.1}
.profile .ph{display:flex;align-items:center;gap:.5rem;color:var(--ink-soft);margin:.3rem 0 .8rem}
.profile .ph .ic{width:17px;height:17px}
.profile-body{flex:1;min-width:0}
.profile-body .btn+.btn{margin-top:10px}
.panel{background:var(--ivory);border:1px solid var(--line);border-radius:20px;padding:20px 20px 18px;margin-bottom:14px}
.panel h5{font-family:var(--serif);font-size:1.5rem;font-weight:500;margin-bottom:.9rem;position:relative;padding-bottom:.8rem}
.panel h5::after{content:"";position:absolute;left:0;bottom:0;width:36px;height:2px;background:var(--gold)}
.frow{display:grid;grid-template-columns:40px 1fr 1.2fr;gap:12px;align-items:center;padding:.7rem 0;border-top:1px solid var(--line);font-size:.95rem}
.frow:first-of-type{border-top:0}
.frow .fi{width:36px;height:36px;border-radius:50%;background:var(--sand);display:grid;place-items:center;color:var(--ink-soft)}
.frow .fi .ic{width:18px;height:18px}
.frow b{font-weight:400;color:var(--ink-soft)}
.frow span{color:var(--ink)}
.last-att{display:flex;align-items:center;gap:14px;background:var(--ivory);border:1px solid var(--line);border-radius:20px;padding:16px 18px;margin-bottom:14px}
.last-att .fi{width:48px;height:48px;border-radius:50%;background:var(--sand);display:grid;place-items:center;flex:none}
.last-att h5{font-family:var(--serif);font-size:1.25rem;font-weight:500}
.last-att p{font-size:.88rem;color:var(--taupe)}
.last-att>div{flex:1;min-width:0}
.btn.sm{padding:.55rem 1.1rem;font-size:.85rem}
.detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.detail-actions .btn{flex:1;min-width:140px}
.text-danger{color:var(--bad);font-size:.85rem;padding:.8rem;width:100%;text-align:center;margin-top:6px}
.hist-item{display:flex;justify-content:space-between;gap:12px;padding:.8rem 0;border-top:1px solid var(--line)}
.hist-item:first-child{border-top:0}
.hist-item small{display:block;color:var(--taupe);font-size:.8rem}
.hist-note{margin-top:4px;font-size:.88rem;color:var(--ink-soft);white-space:pre-line;overflow-wrap:anywhere}
.photo-pick{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:1.2rem}
.photo-circle{width:120px;height:120px;border-radius:50%;border:1px solid var(--gold);background:var(--sand);display:grid;place-items:center;overflow:hidden;position:relative;color:var(--ink-soft)}
.photo-circle img{width:100%;height:100%;object-fit:cover}
.photo-circle .ph-in{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.82rem}
.photo-circle .ph-in .ic{width:30px;height:30px;stroke-width:1.2}
.photo-del{font-size:.8rem;color:var(--taupe);text-decoration:underline}
.sec-title{grid-column:1/-1;display:flex;align-items:center;gap:14px;font-family:var(--serif);font-size:1.5rem;font-weight:500;color:var(--bronze);margin-top:.6rem}
.sec-title::before,.sec-title::after{content:"";flex:1;height:1px;background:var(--gold-l)}
.btn.wa{background:var(--ink);color:#fff}

/* Tarjetas de resumen y fechas (compartidas) */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:1.4rem}
.stats.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat{background:var(--ivory);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.stat small{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe)}
.stat b{display:block;overflow-wrap:anywhere;font-family:var(--serif);font-size:clamp(1.4rem,6.2vw,1.9rem);font-weight:500;line-height:1.2;margin-top:.2rem}
.stat.dark{background:linear-gradient(145deg,#3E2B22,#2A1B15);color:#F5E6CC;border-color:transparent}
.stat.dark small{color:var(--gold-l)}
.sale-amt{text-align:right;flex:none}
.sale-amt b{display:block;font-family:var(--serif);font-size:1.25rem;font-weight:500}
.date-badge{flex:none;width:50px;text-align:center;border-right:1px solid var(--line);padding-right:12px}
.date-badge b{display:block;font-family:var(--serif);font-size:1.6rem;font-weight:500;line-height:1}
.date-badge small{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-d)}
.sale-wrap{background:var(--ivory);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.sale-wrap .card{box-shadow:none;border:0;border-radius:0}
.sale-wrap .card-main h4{white-space:normal;line-height:1.25}
.sale-wrap .card-main p.svc{white-space:normal;color:var(--ink);font-weight:500;font-size:.95rem;line-height:1.3;margin-top:2px}
.sale-wrap .card-main p.note{white-space:normal;font-size:.85rem;color:var(--ink-soft);margin-top:2px}
.wa-link{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:.3rem .9rem .3rem .7rem;border:1px solid var(--line);border-radius:999px;background:var(--cream);font-size:.9rem;color:var(--ink);transition:.2s;min-width:0}
.wa-link:hover{border-color:var(--ok)}
.wa-link .ic{color:var(--ok);width:19px;height:19px}
.wa-link span{white-space:nowrap}
.sale-foot{flex-wrap:wrap;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:6px 12px 6px 18px;gap:8px}

/* Vacío */
.empty{text-align:center;padding:48px 24px;border:1px dashed var(--gold-l);border-radius:var(--r);color:var(--taupe);background:rgba(253,250,244,.6);width:100%}
.empty .ic{width:34px;height:34px;color:var(--gold);margin-bottom:.6rem}
.empty p{margin-bottom:1rem}

/* Botones y campos */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.8rem 1.5rem;border-radius:999px;letter-spacing:.05em;font-weight:500;transition:.2s;border:1px solid transparent;text-align:center}
.btn.primary{background:var(--ink);color:var(--ivory)}
.btn.primary:hover{background:#463329}
.btn.gold{background:var(--goldgrad);color:#2A1B15;font-family:var(--serif);font-size:1rem;letter-spacing:.02em;padding:.95rem 1rem;box-shadow:0 10px 26px rgba(140,109,60,.35)}
.btn.ghost{border-color:var(--gold-l);color:var(--ink-soft);background:var(--ivory)}
.btn.ghost:hover{border-color:var(--gold)}
.btn.block{width:100%}
.field{display:flex;flex-direction:column;gap:.4rem}
.field>span{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe)}
.field small{font-size:.78rem;color:var(--taupe)}
input[type=text],input[type=date],input[type=time],input[type=number],input[type=tel],input[type=email],input[type=password],input[type=search],textarea,select{
  width:100%;background:var(--ivory);border:1px solid var(--gold-l);border-radius:12px;padding:.8rem 1rem;outline:0;transition:.2s;font-size:1rem}
select{appearance:none;-webkit-appearance:none;padding-right:2.4rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C7B66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.500l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;background-size:20px}
input:focus,textarea:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,146,90,.18)}
textarea{resize:vertical;min-height:70px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field,.xwrap,.xin{min-width:0}
.form-grid .full{grid-column:1/-1}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--sand);border-radius:12px;padding:4px}
.seg button{padding:.65rem;border-radius:9px;color:var(--ink-soft);transition:.2s;text-align:center}
.seg button.on{background:var(--ink);color:var(--ivory)}
.type-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:-6px}
.type-chips button{font-size:.78rem;padding:.25rem .75rem;border-radius:999px;border:1px solid var(--line);color:var(--ink-soft);background:var(--ivory)}
.type-chips button:hover{border-color:var(--gold);color:var(--gold-d)}
.preview{grid-column:1/-1;padding:14px 16px;border-radius:12px;background:rgba(220,197,150,.2);border:1px dashed var(--gold-l);font-size:.9rem;color:var(--ink-soft)}
.form-actions{display:flex;gap:10px;margin-top:22px}
.form-actions .btn{flex:1}

/* Controles propios: selector, fecha, hora */
.xwrap{width:100%}
.xtrig{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--ivory);border:1px solid var(--gold-l);border-radius:12px;padding:.8rem 1rem;font-size:1rem;color:var(--ink);transition:.2s;text-align:left}
.xtrig:hover{border-color:var(--gold)}
.xtrig.ph .xval{color:#7D6E5A}
.xval{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xic{display:grid;color:var(--taupe);transition:transform .25s}
.xic .ic{width:18px;height:18px}
.xopen .xtrig{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,146,90,.18)}
.xopen .xic.xic{color:var(--gold-d)}
.xpanel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease,margin .3s ease}
.xclip{overflow:hidden;min-height:0}
.xopen .xpanel{grid-template-rows:1fr;margin-top:8px}
.xin{background:var(--ivory);border:1px solid var(--gold-l);border-radius:14px;padding:10px;box-shadow:var(--shadow)}
.xsearch{display:flex;align-items:center;gap:.6rem;border:1px solid var(--line);border-radius:10px;padding:.2rem .8rem;margin-bottom:6px;background:var(--cream);color:var(--ink-soft)}
.xsearch:focus-within{border-color:var(--gold)}
.xsearch .ic{width:18px;height:18px}
.xsearch input{border:0!important;box-shadow:none!important;background:none!important;padding:.55rem 0!important;border-radius:0!important;font-size:1rem;min-width:0}
.xempty{padding:.8rem;color:var(--taupe);font-size:.92rem}
.xlist{max-height:250px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.xopt{display:flex;justify-content:space-between;align-items:center;width:100%;padding:.7rem .8rem;border-radius:10px;color:var(--ink-soft)}
.xopt:hover{background:var(--sand)}
.xopt.on{color:var(--ink);font-weight:500;background:rgba(220,197,150,.25)}
.xopt.none{color:var(--taupe)}
.xopt .ic{color:var(--gold-d);width:18px;height:18px}
.xcal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.xcal-title{font-family:var(--serif);font-size:1.2rem;padding:.3rem .7rem;border-radius:10px;color:var(--ink)}
button.xcal-title:hover{background:var(--sand)}
.xcal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;text-align:center}
.xcal-grid .wd{font-size:.76rem;letter-spacing:.1em;color:var(--taupe);padding:6px 0}
.xcal-grid button{aspect-ratio:1;border-radius:50%;font-size:.92rem;display:grid;place-items:center;text-align:center;transition:background .15s}
.xcal-grid button:hover{background:var(--sand)}
.xcal-grid button.today{box-shadow:inset 0 0 0 1px var(--gold)}
.xcal-grid button.sel{background:var(--ink);color:var(--ivory)}
.xmonths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:4px 0}
.xmonths button,.xgrid button{padding:.6rem 0;border-radius:10px;border:1px solid var(--line);background:var(--ivory);text-align:center;transition:.15s}
.xmonths button:hover,.xgrid button:hover{border-color:var(--gold)}
.xmonths button.on,.xgrid button.on{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.xgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.xlab{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe);margin:4px 2px 8px}
.xlab:not(:first-child){margin-top:12px}
.xfoot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.xhint{font-size:.85rem;color:var(--taupe)}
.xsug{display:flex;gap:6px;overflow-x:auto;padding:2px 0 4px;margin-top:2px;scrollbar-width:none}
.xsug::-webkit-scrollbar{display:none}
.xsug button{flex:none;font-size:.78rem;padding:.28rem .8rem;border-radius:999px;border:1px solid var(--line);background:var(--ivory);color:var(--ink-soft)}
.xsug button:hover{border-color:var(--gold);color:var(--gold-d)}

/* Diálogos propios */
.dlg{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px}
.dlg-back{position:absolute;inset:0;background:rgba(42,28,20,.55);backdrop-filter:blur(3px);animation:fade .2s both}
.dlg-card{position:relative;width:100%;max-width:360px;background:var(--cream);border:1px solid var(--gold-l);border-radius:22px;padding:24px;box-shadow:0 30px 80px rgba(30,20,5,.4);animation:rise .25s both}
.dlg-card h4{font-family:var(--serif);font-size:1.5rem;font-weight:500;margin-bottom:.4rem}
.dlg-card p{color:var(--ink-soft);font-size:.95rem;margin-bottom:1rem}
.dlg-card input{margin-bottom:1rem}
.dlg-actions{display:flex;gap:10px}
.dlg-actions .btn{flex:1;padding:.75rem 1rem}
.btn.danger{background:var(--bad);color:#fff}

/* Modal */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px}
.modal-backdrop{position:absolute;inset:0;background:rgba(42,28,20,.5);backdrop-filter:blur(3px);animation:fade .25s both}
.sheet{position:relative;width:100%;max-width:580px;max-height:92vh;overflow:auto;background:var(--cream);border-radius:26px;padding:26px 28px 28px;box-shadow:0 30px 80px rgba(30,20,5,.35);animation:rise .3s both}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.3rem}
.sheet-head h3{font-family:var(--serif);font-size:1.9rem;font-weight:500}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* Toasts */
.toasts{position:fixed;top:20px;right:20px;z-index:80;display:flex;flex-direction:column;gap:10px;max-width:340px}
.toast{background:var(--ink);color:var(--ivory);padding:14px 18px;border-radius:14px;box-shadow:0 12px 36px rgba(0,0,0,.25);font-size:.9rem;animation:rise .35s both;display:flex;gap:.7rem;align-items:flex-start}
.toast .ic{color:var(--gold-l);margin-top:1px}

/* Móvil */
@media (max-width:860px){
  .app{display:block}
  .sidebar{display:none}
  .topbar{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:20;padding:14px 20px;background:rgba(248,241,231,.88);backdrop-filter:blur(10px)}
  body:not([data-page]) .topbar,body[data-page=home] .topbar{background:transparent;backdrop-filter:none}
  body:not([data-page]) .topbar .icon-btn,body[data-page=home] .topbar .icon-btn{background:rgba(253,250,244,.75);color:var(--ink)}
  .mobile-brand .brand-name{font-size:1.2rem;letter-spacing:.38em}
  .main{padding:8px 18px 130px}
  .tabbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(253,250,244,.97);border-top:1px solid var(--line);padding:8px 8px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(60,40,15,.08)}
  .tabbar button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:.45rem .1rem;border-radius:18px;color:var(--ink-soft);font-size:.72rem;letter-spacing:0;min-width:0}
  .tabbar button.active{background:var(--ink);color:var(--ivory)}
  .tabbar button.active .ic{color:var(--gold-l)}
  .fab{display:grid;place-items:center;position:fixed;right:18px;bottom:calc(92px + env(safe-area-inset-bottom));width:54px;height:54px;border-radius:50%;background:var(--goldgrad);color:#fff;box-shadow:0 10px 28px rgba(140,109,60,.5);z-index:31}
  .fab .ic{width:24px;height:24px;stroke-width:1.6}
  body[data-page=clients] .fab,body[data-page=cash] .fab,body[data-page=home] .fab,body:not([data-page]) .fab{display:none}
  .sale-wrap .avatar{display:none}
  .sale-wrap .card-main p{white-space:normal}
  .page-head .btn{display:none}
  .cards{grid-template-columns:minmax(0,1fr)}
 .sum-grid b{font-size:1.45rem}
  .modal{align-items:end;padding:0}
  .sheet{max-width:none;border-radius:26px 26px 0 0;max-height:94vh;padding:22px 20px calc(24px + env(safe-area-inset-bottom))}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .toasts{left:12px;right:12px;max-width:none}
  .frow{grid-template-columns:40px 1fr;row-gap:0}
  .frow span{grid-column:2}
  .profile{flex-direction:column;text-align:center}
  .profile .ph{justify-content:center}
  .profile-body{width:100%}
}
@media (min-width:861px){.mobile-only{display:none}}

.cli-card h4,.cli-card p{white-space:normal;overflow-wrap:anywhere}
.cli-card h4{line-height:1.2}
.prod-top>div:first-child{min-width:0}
.prod h4{overflow-wrap:anywhere}

/* Caja */
.cash-search{margin:14px 0 10px}
#cashPeriod .chips{margin-bottom:12px}
.pnav{display:flex;align-items:center;justify-content:space-between;background:var(--ivory);border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:12px}
.pnav b{font-family:var(--serif);font-weight:500;font-size:1.15rem;text-align:center;padding:0 8px}
.range{margin-bottom:12px}
.cash-card{position:relative;border-radius:20px;padding:18px 20px;color:#F5E6CC;background:linear-gradient(145deg,#3E2B22,#2A1B15);box-shadow:0 14px 32px rgba(52,36,28,.3)}
.cash-card::before{content:"";position:absolute;inset:6px;border-radius:15px;border:1px solid rgba(220,197,150,.25);pointer-events:none}
.cc-label{display:block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:#E6D6BA;position:relative}
.cc-bal{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(2rem,9vw,2.8rem);line-height:1.1;color:#FFF3DA;margin:.2rem 0 .8rem;overflow-wrap:anywhere;position:relative}
.cc-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border-top:1px solid rgba(220,197,150,.3);padding-top:.8rem;position:relative}
.cc-split small{display:block;font-size:.8rem;color:#E6D6BA}
.cc-split b{font-family:var(--serif);font-weight:500;font-size:clamp(1.15rem,5vw,1.5rem);overflow-wrap:anywhere}
.cc-split .in{color:#C6E6B5}
.cc-split .out{color:#F7BFB1}
.cc-cmp{font-size:.88rem;color:#E6D6BA;margin-top:.7rem;position:relative}
.goal{margin-top:.9rem;border-top:1px solid rgba(220,197,150,.3);padding-top:.7rem;position:relative}
.goal-top{display:flex;justify-content:space-between;gap:8px;font-size:.88rem;color:#F5E6CC}
.goal-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.18);margin:.4rem 0;overflow:hidden}
.goal-bar i{display:block;height:100%;background:var(--goldgrad);border-radius:6px}
.goal-edit{position:relative;font-size:.85rem;color:#F1DDBF;text-decoration:underline;text-underline-offset:4px;padding:.4rem 0;margin-top:.3rem;display:inline-block}
.cash-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.cash-actions .btn{padding:.75rem .6rem}
.trend{background:var(--ivory);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow)}
.trend-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:.92rem}
.trend-head b{font-weight:500}
.legend{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--ink-soft)}
.legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.legend i+i,.legend i:nth-of-type(2){margin-left:6px}
i.in{background:var(--ok)}
i.out{background:var(--bad)}
.trend-bars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:10px}
.tbar{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;border-radius:12px;font-size:.8rem;color:var(--ink-soft);transition:.2s}
.tbar:hover{background:rgba(238,226,207,.6)}
.tbar.sel{background:var(--sand);color:var(--ink);font-weight:500}
.tbar .bars{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:64px;width:100%}
.tbar .bars i{width:10px;border-radius:4px 4px 0 0}
.seg3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--sand);border-radius:12px;padding:4px;margin-bottom:10px}
.seg3 button{padding:.6rem;border-radius:9px;color:var(--ink-soft);text-align:center;transition:.2s}
.seg3 button.on{background:var(--ink);color:var(--ivory)}
.fold{background:var(--ivory);border:1px solid var(--line);border-radius:14px;padding:0 14px;margin-bottom:10px}
.fold summary{list-style:none;cursor:pointer;padding:.75rem 0;font-weight:500;display:flex;align-items:center;gap:.5rem}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--taupe);border-bottom:2px solid var(--taupe);transform:rotate(45deg);transition:transform .2s;margin-top:-4px}
.fold[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.fold[open]{padding-bottom:14px}
.cnt{font-style:normal;background:var(--ink);color:var(--ivory);border-radius:999px;font-size:.78rem;padding:0 .55rem;line-height:1.6}
.clear{margin:0 0 10px;display:inline-block}
.list-meta{display:flex;justify-content:space-between;align-items:center;margin:6px 2px 10px;font-size:.9rem;color:var(--ink-soft)}
.list-meta .link-sm{display:inline-flex;gap:.4rem;align-items:center}
.list-meta .ic{width:16px;height:16px}
.mv-list{background:var(--ivory);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.mv{width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line);text-align:left;transition:background .15s}
.mv:first-child{border-top:0}
.mv:hover{background:rgba(238,226,207,.5)}
.mv-mark{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:1.3rem;flex:none;line-height:1}
.mv-mark.in{background:rgba(69,104,63,.14);color:var(--ok)}
.mv-mark.out{background:rgba(164,80,63,.13);color:var(--bad)}
.mv-main{flex:1;min-width:0;display:flex;flex-direction:column}
.mv-main b{font-weight:500;font-size:.98rem;line-height:1.25;overflow-wrap:anywhere}
.mv-main small{font-size:.82rem;color:var(--ink-soft);line-height:1.3}
.mv-amt{font-family:var(--serif);font-size:1.1rem;font-weight:500;flex:none;white-space:nowrap}
.mv-amt.in,.day-net.in{color:var(--ok)}
.mv-amt.out,.day-net.out{color:var(--bad)}
.day-net{margin-left:auto;font-family:var(--serif);font-size:1rem;font-weight:500}
.brk h5{font-family:var(--serif);font-size:1.1rem;font-weight:500;margin:.2rem 0 .6rem}
.brk+.brk{margin-top:.8rem}
.brk{padding-bottom:6px}
.brk-row{margin-bottom:.6rem}
.brk-top{display:flex;justify-content:space-between;gap:8px;font-size:.9rem}
.brk-top b{font-weight:500}
.brk-top small{color:var(--ink-soft);font-size:.8rem}
.brk-bar{height:5px;border-radius:5px;background:var(--sand);margin-top:3px;overflow:hidden}
.brk-bar i{display:block;height:100%;border-radius:5px;background:var(--ok)}
.brk-bar.out i{background:var(--bad)}
.empty-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.amount{display:flex;flex-direction:column;gap:.3rem;margin:14px 0 16px;align-items:center}
.amount span{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe)}
.amount input{text-align:center;font-family:var(--serif);font-size:2.2rem;padding:.6rem;max-width:320px}
.mv-hero{text-align:center;padding:18px 10px 16px;border-radius:18px;margin-bottom:14px;background:var(--ivory);border:1px solid var(--line)}
.mv-hero b{display:block;font-family:var(--serif);font-size:2.2rem;font-weight:500;overflow-wrap:anywhere}
.mv-hero.in b{color:var(--ok)}
.mv-hero.out b{color:var(--bad)}
.mv-hero span{color:var(--ink-soft)}
.tbar small{font-size:.78rem}

.xopt.xnew{margin-bottom:4px;border:1px dashed var(--gold-l);border-radius:10px;color:var(--ink);font-weight:500}
.xopt.xnew .ic{color:var(--ink-soft)}

/* Entrada: la foto ocupa el espacio entre el texto y el botón, sin taparlos */
.landing[data-step=intro]::before,.landing[data-step=intro]::after{display:none}
.l-photo{flex:1;min-height:220px;margin:6px -24px 0;background:url(img/landing-bg.jpg) center 54%/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.l-bottom{padding-top:8px}
/* ---------- Reservas en línea ---------- */
.head-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.bk-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--bad);color:#fff;font-size:.72rem;font-weight:600}
.bk-reqs{background:var(--ivory);border:1px solid var(--gold-l);border-radius:var(--r);padding:14px 16px;margin-bottom:1.4rem;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.bk-req{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.bk-req-main{display:flex;flex-direction:column;min-width:0}
.bk-req-main strong{font-weight:500;overflow-wrap:anywhere}
.bk-req-main span,.bk-req-main small{color:var(--taupe);font-size:.86rem;overflow-wrap:anywhere}
.bk-req-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bk-svc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--ivory);margin-bottom:10px}
.bk-svc-row .full{grid-column:1/-1}
.bk-del{grid-column:1/-1;justify-self:start}
.bk-days-edit{display:flex;flex-direction:column;gap:8px}
.bk-day-row{display:flex;flex-direction:column;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:12px}
.bk-open{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;font-weight:500;min-height:34px}
.bk-open small{font-size:.8rem;font-weight:400;color:var(--taupe)}
.bk-open.on small{color:var(--ok)}
.bk-range{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}
.bk-range[hidden]{display:none}
.bk-link code{display:block;padding:.7rem .9rem;background:var(--sand);border-radius:12px;font-size:.84rem;overflow-wrap:anywhere;color:var(--ink)}
.bk-link-act{display:flex;gap:8px;margin-top:8px}
.bk-home{margin:14px 0;padding:12px 14px;border-radius:16px;background:var(--sand);min-width:0}
.bk-home-t{display:flex;align-items:center;gap:6px;font-weight:600;font-size:.86rem;color:var(--ink)}
.bk-home-t svg{width:16px;height:16px;flex:none}
.bk-home code{display:block;margin-top:8px;font-size:.8rem;overflow-wrap:anywhere;color:var(--ink)}
.bk-home p{margin:6px 0 0;font-size:.82rem}
#bkErr{color:var(--bad);font-size:.88rem;grid-column:1/-1}
@media (max-width:860px){.page-head .head-actions .btn.primary{display:none}.page-head .head-actions .btn.ghost{display:inline-flex}}

.svc-sum{color:var(--taupe);font-size:.9rem;margin-top:.3rem}
.svc-price{font-family:var(--serif);font-size:1.15rem;white-space:nowrap;align-self:flex-start}
.svc-web{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--taupe);padding:.3rem 0;min-height:34px}
.svc-web.on{color:var(--ok)}
.svc-sug{margin-top:1.4rem}
.svc-sug p{font-size:.86rem;color:var(--taupe);margin-bottom:.6rem}
.bk-sv-note{font-size:.88rem;color:var(--taupe);margin:.2rem 0 .6rem}
.svc-side{display:flex;flex-direction:column;align-items:flex-end;gap:0;flex:none}
.svc-side .icon-btn{width:30px;height:30px}
.svc-side .icon-btn .ic{width:16px;height:16px}
.svc .svc-web{padding:0;min-height:28px}

.tl-item{border-top:1px solid var(--line)}
.tl-item:first-child{border-top:0}
.tl-item .tl-row{border-top:0}
.tl-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 0 12px}
.tl-acts .btn{justify-content:center;min-width:0}
.tl-acts .cancel-btn{grid-column:1/-1;color:var(--bad);border-color:var(--bad)}
.done-tag.off{background:rgba(164,80,63,.13);color:var(--bad)}
.done-tag{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;background:rgba(69,104,63,.14);color:var(--ok);font-size:.7rem;font-weight:500;vertical-align:middle}

/* Tira semanal */
.agweek{margin-bottom:14px}
.wk-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;font-size:1rem;color:var(--ink)}
.wk-nav{width:40px;height:40px;border-radius:50%;border:1px solid var(--gold-l);background:var(--ivory);display:grid;place-items:center;color:var(--ink);flex:none}
.wk-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.wk-days button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0 8px;border-radius:12px;border:1px solid var(--line);background:var(--ivory);min-width:0;text-align:center}
.wk-days small{font-size:.66rem;letter-spacing:.04em;color:var(--taupe)}
.wk-days b{font-weight:400;font-size:1.1rem;line-height:1.1}
.wk-days button.today{border-color:var(--gold)}
.wk-days button.has::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);position:absolute;bottom:3px}
.wk-days button.sel{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.wk-days button.sel small{color:var(--ivory);opacity:.8}
.wk-days button.sel.has::after{background:var(--ivory)}

/* Calendario de agenda */
.agcal{background:var(--ivory);border:1px solid var(--line);border-radius:var(--r);padding:12px 12px 10px;margin-bottom:14px;box-shadow:var(--shadow)}
.agcal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;text-align:center}
.agcal-grid .wd{font-size:.76rem;letter-spacing:.1em;color:var(--taupe);padding:6px 0}
.agcal-grid button{position:relative;aspect-ratio:1;border-radius:12px;display:grid;place-items:center;font-size:.95rem;transition:background .15s}
.agcal-grid button:hover{background:var(--sand)}
.agcal-grid button.today{box-shadow:inset 0 0 0 1px var(--gold)}
.agcal-grid button.sel{background:var(--ink);color:var(--ivory)}
.agcal-grid b{font-weight:400}
.agcal-grid button.has b{margin-top:-7px}
.agcal-grid em{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);min-width:14px;height:14px;padding:0 3px;border-radius:999px;background:var(--gold);color:#fff;font-style:normal;font-size:.62rem;line-height:14px}
.agcal-grid button.sel em{background:var(--ivory);color:var(--ink)}

/* Rueda de hora */
.wheel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);gap:4px;height:200px}
.wheel-bar{position:absolute;left:0;right:0;top:80px;height:40px;border-radius:10px;background:var(--sand);pointer-events:none}
.wheel-col{position:relative;overflow-y:auto;scroll-snap-type:y mandatory;padding:80px 0;scrollbar-width:none;overscroll-behavior:contain;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);outline:0}
.wheel-col::-webkit-scrollbar{display:none}
.wheel-col button{display:block;width:100%;height:40px;scroll-snap-align:center;text-align:center;font-size:1.15rem;color:var(--taupe);transition:color .15s}
.wheel-col button.on{color:var(--ink);font-weight:500}
.wheel-col:focus-visible{box-shadow:0 0 0 2px var(--gold-l);border-radius:10px}

/* Modo oscuro */
.top-act{display:flex;gap:8px;align-items:center}
html[data-tema=dark]{color-scheme:dark;
  --cream:#17120F;--ivory:#221B16;--sand:#2D241D;--line:#3A2F26;--taupe:#B3A38C;--ink:#F3E8D6;--ink-soft:#D8C9B1;
  --bronze:#D9A877;--gold:#C9A468;--gold-d:#DCC596;--gold-l:#5A4630;--ok:#8FBF85;--warn:#E0B060;--bad:#E58A77;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35)}
html[data-tema=dark] body{background-image:radial-gradient(1000px 520px at 90% -8%,rgba(120,90,50,.18),transparent 60%),radial-gradient(800px 500px at -10% 110%,rgba(120,90,50,.12),transparent 60%)}
html[data-tema=dark] .sidebar{background:rgba(34,27,22,.7)}
html[data-tema=dark] .hero::before{background:linear-gradient(90deg,rgba(23,18,15,.92) 0,rgba(23,18,15,.55) 38%,rgba(23,18,15,0) 62%),url(img/home-bg.jpg) right top/125% auto no-repeat;filter:brightness(.7)}
html[data-tema=dark] .empty{background:rgba(34,27,22,.6)}
html[data-tema=dark] .btn.wa{color:var(--ivory)}
html[data-tema=dark] .btn.primary:hover{background:#fff}
html[data-tema=dark] .tbar:hover,html[data-tema=dark] .mv:hover{background:rgba(45,36,29,.7)}
html[data-tema=dark] .sum-card,html[data-tema=dark] .cash-card,html[data-tema=dark] .stat.dark{border:1px solid var(--line)}
@media (max-width:860px){
  html[data-tema=dark] .topbar{background:rgba(23,18,15,.88)}
  html[data-tema=dark] body:not([data-page]) .topbar,html[data-tema=dark] body[data-page=home] .topbar{background:transparent}
  html[data-tema=dark] body:not([data-page]) .topbar .icon-btn,html[data-tema=dark] body[data-page=home] .topbar .icon-btn{background:rgba(34,27,22,.8);color:var(--ink)}
  html[data-tema=dark] .tabbar{background:rgba(34,27,22,.97)}
}

.field.allergy>span{color:var(--bad);font-weight:600;display:flex;align-items:center;gap:6px}
.field.allergy>span .ic{width:16px;height:16px}
.field.allergy input{border-color:var(--bad)}
.allergy-warn{display:flex;gap:8px;align-items:flex-start;padding:.6rem .8rem;border:1px solid var(--bad);border-radius:12px;color:var(--bad);font-size:.88rem;overflow-wrap:anywhere}
.allergy-warn[hidden]{display:none}
.allergy-warn .ic{width:18px;height:18px;flex:none}
.frow.warn b,.frow.warn span,.frow.warn .fi{color:var(--bad)}

.pwa-steps{margin:0;padding-left:1.2rem;display:grid;gap:8px;font-size:.95rem;color:var(--ink)}

.pick-wrap{position:relative;display:block}
.pick-wrap input{width:100%;padding-right:52px}
.pick-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--bronze);background:var(--sand)}
.pick-btn .ic{width:18px;height:18px}
.pick-card{max-height:80vh;display:flex;flex-direction:column;gap:10px}
.pick-q{width:100%;padding:.7rem .9rem;border:1px solid var(--line);border-radius:12px;background:var(--ivory);color:var(--ink)}
.pick-list{overflow:auto;display:grid;gap:6px;min-height:0;max-height:48vh}
.pick-list button{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;padding:.7rem .9rem;border:1px solid var(--line);border-radius:12px;background:var(--ivory);color:var(--ink)}
.pick-list b{font-weight:500;overflow-wrap:anywhere}
.pick-list small{color:var(--taupe);flex:none}

/* Acceso: bloqueo, activación y barra de prueba */
.acc-lock,.acc-modal{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:rgba(30,19,24,.88);backdrop-filter:blur(6px)}
.acc-lock{z-index:300}.acc-modal{z-index:310}
.acc-lock,.acc-modal{overflow-y:auto;align-items:start}.acc-lock .acc-card,.acc-modal .acc-card{margin:auto}
.acc-card{width:min(420px,100%);background:var(--cream);color:var(--ink);border:1px solid var(--gold);border-radius:22px;padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.acc-card h1,.acc-card h2{font-family:var(--serif);font-weight:500;font-size:1.6rem;margin:0 0 8px;color:var(--bronze)}
.acc-card p{color:var(--ink-soft);margin:0 0 16px;line-height:1.45}
.acc-card input{width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:12px;background:var(--ivory);color:var(--ink);font-size:1.15rem;letter-spacing:.08em;text-align:center}
.acc-msg{min-height:22px;margin-top:8px;font-size:.88rem;color:var(--bad)}.acc-msg.ok{color:var(--ok)}
.acc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.acc-actions .btn{flex:1;min-width:130px}
.trial-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;padding:.5rem .8rem;border:1px solid var(--line);border-radius:14px;background:var(--ivory);font-size:.88rem;color:var(--ink-soft)}
.trial-bar span{min-width:0;overflow-wrap:anywhere}
.trial-bar .btn.sm{padding:.45rem .9rem;font-size:.8rem;flex:none}
.trial-bar.warn7{border-color:var(--gold);color:var(--bronze)}
.trial-bar.warn3,.trial-bar.last{border-color:var(--bad);color:var(--bad)}

/* Reservas en línea: pasos, servicios en línea y borrador */
.bk-intro{font-size:.92rem;color:var(--ink-soft);margin:0}
.bk-intro b{display:block;font-weight:500;color:var(--bronze);margin-top:4px;font-size:.84rem}
.bk-draft{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:.55rem .8rem;border:1px solid var(--gold);border-radius:12px;background:var(--sand);font-size:.86rem}
.bk-draft button{color:var(--bronze);text-decoration:underline;flex:none}
.bk-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.bk-steps li{text-align:center;font-size:.8rem;padding:.4rem .3rem;border:1px solid var(--line);border-radius:999px;color:var(--taupe);overflow-wrap:anywhere}
.bk-steps li.ok{color:var(--ok);border-color:var(--ok)}
.bk-steps li.ok::after{content:' ✓'}
.bk-help{font-size:.88rem;color:var(--taupe);margin:.1rem 0 .6rem}
.bk-svc-list{display:grid;gap:8px;margin-bottom:10px}
.bk-svc{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:.6rem .8rem;border:1px solid var(--line);border-radius:12px;background:var(--ivory)}
.bk-svc b{font-weight:500;overflow-wrap:anywhere}.bk-svc small{display:block;color:var(--taupe)}
.bk-tog{flex:none;padding:.35rem .9rem;border-radius:999px;border:1px solid var(--line);font-size:.82rem;color:var(--taupe);background:var(--cream)}
.bk-tog.on{color:var(--ok);border-color:var(--ok)}
.bk-empty{font-size:.88rem;color:var(--taupe);margin:0 0 8px}
.bk-add{display:grid;gap:8px;padding:.8rem;border:1px dashed var(--gold);border-radius:14px}
.bk-add>b{font-weight:500;color:var(--bronze)}
.bk-add input{width:100%;padding:.7rem .9rem;border:1px solid var(--line);border-radius:12px;background:var(--ivory);color:var(--ink)}
.bk-add-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.bk-add .chips{display:flex;flex-wrap:wrap;gap:6px}

.bk-intro-card{max-width:400px;max-height:88vh;overflow:auto}
.bk-intro-card h4{font-family:var(--serif);font-weight:500;font-size:1.4rem;color:var(--bronze);margin:0 0 10px}
.bk-intro-card p{margin:0 0 10px;color:var(--ink-soft);line-height:1.45;font-size:.95rem}
.bk-intro-card p b{color:var(--ink);font-weight:500}
.bk-intro-card .dlg-actions{margin-top:14px}
.bk-intro-card .btn{width:100%}

/* Lector de código de barras */
.scan-btn{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--bronze);background:var(--sand)}
.scan-btn .ic{width:18px;height:18px}
.scan-card{max-width:420px;display:flex;flex-direction:column;gap:12px}
.scan-card h4{margin:0}
.scan-view{position:relative;border-radius:16px;overflow:hidden;background:#1E1318;aspect-ratio:4/3}
.scan-view video{width:100%;height:100%;object-fit:cover;display:block}
.scan-frame{position:absolute;left:10%;right:10%;top:30%;bottom:30%;border:2px solid var(--gold);border-radius:12px;box-shadow:0 0 0 999px rgba(30,19,24,.45);pointer-events:none}
.scan-msg{margin:0;font-size:.9rem;color:var(--ink-soft)}.scan-msg.bad{color:var(--bad)}

/* Copia en la nube */
.cloud-chip{display:inline-flex;align-items:center;gap:8px;margin:10px 0 0;padding:.4rem .9rem;border-radius:999px;background:var(--sand);color:var(--ink-soft);font-size:.82rem;max-width:100%}
.cloud-chip .ic{width:16px;height:16px;flex:none;color:var(--ok)}
.cloud-chip.bad .ic{color:var(--bad)}
.cloud-chip span{overflow-wrap:anywhere;text-align:left}

@media (max-width:360px){
  .topbar{padding-left:14px;padding-right:14px;gap:8px}.topbar>*:first-child{min-width:0}
  .top-act{gap:5px;flex-shrink:0}.top-act .icon-btn{width:36px;height:36px}
}
.acc-lock,.acc-modal{grid-template-columns:minmax(0,1fr)}
.pw-wrap{position:relative;display:block}.pw-wrap input{padding-right:46px}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:grid;place-items:center;color:var(--ink-soft);border-radius:10px}
.pw-eye:hover,.pw-eye[aria-pressed=true]{color:var(--ink)}
input[type=password]:not(:placeholder-shown){font-family:Arial,Helvetica,sans-serif;font-size:1.5rem;letter-spacing:.12em}
.pw-warn{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 14px;border:1.5px solid var(--warn);border-left-width:5px;border-radius:12px;background:rgba(138,90,18,.12);color:var(--ink)}
.pw-warn .ic{width:22px;height:22px;flex:none;color:var(--warn);margin-top:1px}
.pw-warn p{margin:0;font-size:15px;line-height:1.45}.pw-warn b{font-weight:700}