body{margin:0;background:#050308;color:#f8f4ff;font-family:Inter,Arial,sans-serif}
.top{display:flex;align-items:center;gap:16px;padding:16px 5%;border-bottom:1px solid #211a29;flex-wrap:wrap}
.top #userEmail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
@media(max-width:600px){.top{gap:8px;padding:12px 12px}.top #userEmail{display:none}.top .logo{font-size:17px}}
.logo{font-weight:800;font-size:20px;color:#fff;text-decoration:none;margin-right:auto}
.logo span{color:#b957ff}
main{max-width:900px;margin:auto;padding:32px 20px 80px}
main.wide{max-width:1200px}
.card.narrow{max-width:520px;margin:0 auto}
.layout{display:grid;grid-template-columns:250px 1fr;gap:20px;align-items:start}
.side{position:sticky;top:16px;background:#0c0810;border:1px solid #2a2034;border-radius:18px;padding:16px}
.side select{margin:0 0 8px}
.side .ghost{width:100%}
.sidenav{display:grid;gap:6px;margin:14px 0}
.sidenav button{background:none;color:#b7acbf;border:1px solid transparent;border-radius:10px;padding:10px 12px;cursor:pointer;text-align:left;font-size:14px}
.sidenav button.on{color:#fff;background:#21102f;border-color:#7440a0}
.side .share{font-size:12px;word-break:break-all}
.side .share a{color:#c765ff}
.calhead{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.calhead b{margin-left:auto;color:#c765ff}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:14px}
.month{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:14px}
.month .dow{font-size:10px;text-transform:uppercase;color:#857b8e;text-align:center;padding:4px}
.month .day{background:#15101d;color:#b7acbf;border:1px solid #2a2034;border-radius:12px;padding:8px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:52px}
.month .day b{font-size:15px}
.month .day small{font-size:10px;color:#e0b3ff}
.month .day.busy{background:linear-gradient(135deg,#3d1470,#6b1fa0);border-color:#a855f7;color:#fff}
.month .day.sel{outline:2px solid #c765ff;outline-offset:1px}
.month .day.today{border-color:#c765ff}
.week>p{grid-column:1/-1}
.week button{background:#15101d;color:#b7acbf;border:1px solid #2a2034;border-radius:12px;padding:8px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.week button small{font-size:10px;text-transform:uppercase}
.week button b{font-size:17px}
.week button.on{background:linear-gradient(135deg,#7629ff,#c653ff);color:#fff;border-color:transparent}
.week button.today{border-color:#c765ff}
@media(max-width:900px){
.layout{grid-template-columns:1fr}
.side{position:static}
.sidenav{grid-template-columns:repeat(4,1fr);display:grid}
.sidenav button{font-size:12px;padding:8px 6px;text-align:center;overflow-wrap:anywhere}
.item,.card{overflow-wrap:anywhere}
}
.card{background:#0c0810;border:1px solid #2a2034;border-radius:18px;padding:24px;margin-bottom:20px}
.muted{color:#9e95aa}.error{color:#ff7b9c;min-height:1.2em}
.hidden{display:none!important}
section.collapsed>:not(h2){display:none!important}
/* RBAC: modo solo lectura para empleados (sin gestión) */
#appView.ro #svcForm, #appView.ro #staffForm,
#appView.ro #saveHours, #appView.ro #inviteCard,
#appView.ro label[for$="Input"], #appView.ro input.filepick,
#appView.ro #coverBtn, #appView.ro #coverSelect,
#appView.ro [data-edit], #appView.ro [data-del],
#appView.ro [data-toggle], #appView.ro [data-photo],
#appView.ro [data-stphoto], #appView.ro [data-cover],
#appView.ro [data-delphoto] { display:none !important; }
.filepick{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.primary{background:linear-gradient(135deg,#7629ff,#c653ff);color:#fff;border:0;border-radius:999px;padding:12px 20px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block}
.ghost{background:none;color:#eee;border:1px solid #3a3044;border-radius:999px;padding:10px 18px;cursor:pointer;text-decoration:none;display:inline-block}
.sm{padding:8px 14px;font-size:13px}
input,select,textarea{display:block;width:100%;margin:8px 0;padding:12px;border-radius:12px;border:1px solid #2a2034;background:#15101d;color:#fff;font-size:14px;box-sizing:border-box}
textarea{min-height:70px;resize:vertical}
.card label{font-size:12px;color:#9e95aa}
.card label input,.card label select,.card label textarea{margin-top:4px}
.tabs{display:flex;gap:8px;margin:16px 0}
.tabs button,.dashnav button{background:#15101d;color:#aaa;border:1px solid #2a2034;border-radius:999px;padding:10px 18px;cursor:pointer}
.tabs button.on,.dashnav button.on{color:#fff;border-color:#7440a0;background:#21102f}
.dashnav{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.bizbar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.bizbar select{margin:0;flex:1;min-width:160px}
.share{color:#9e95aa}.share a{color:#c765ff}
.row{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}.row input{margin:0;flex:1;min-width:140px}
.item{display:flex;align-items:center;gap:10px;background:#0c0810;border:1px solid #2a2034;border-radius:14px;padding:12px 14px;margin:8px 0;flex-wrap:wrap}
.item .grow{flex:1;min-width:160px}.item small{color:#857b8e;display:block}
.item .time{color:#c765ff;font-weight:700}
.badge{font-size:11px;border:1px solid #3a3044;border-radius:20px;padding:4px 10px;color:#b7acbf}
.badge.confirmed{color:#7dffb2;border-color:#2c6b45}.badge.cancelled{color:#ff8fa5;border-color:#6b2c3a}
.badge.completed{color:#9ecbff;border-color:#2c4a6b}.badge.no_show{color:#ffd27d;border-color:#6b522c}
.item button{background:#15101d;color:#ddd;border:1px solid #3a3044;border-radius:8px;padding:6px 10px;cursor:pointer;font-size:12px}
form.inline{display:flex;gap:8px;flex-wrap:wrap}form.inline input{flex:1;min-width:140px;margin:0}
.hrow{display:grid;grid-template-columns:110px 1fr 1fr auto;gap:8px;align-items:center;margin:8px 0}
.hrow input{margin:0}
.hrow2{display:grid;grid-template-columns:110px 1fr 1fr 1fr 1fr;gap:8px;align-items:center;margin:8px 0}
.hrow2 input{margin:0}
.ap-am{color:#7dd3fc;font-weight:800}
.ap-pm{color:#fbbf24;font-weight:800}
@media(max-width:600px){
.hrow2{grid-template-columns:1fr 1fr}
.hrow2 label{grid-column:1/-1}
.sidenav{grid-template-columns:repeat(2,1fr)}
.month .day{min-height:44px;font-size:12px}
.month .day b{font-size:13px}
.slotgrid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
.svc .meta{gap:8px}
.photogrid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
}
.notice{background:#1d1206;border:1px solid #6b522c;color:#ffd27d;border-radius:14px;padding:12px 14px}
.notice.ok{background:#0a1d12;border-color:#2c6b45;color:#7dffb2}
.notice a{color:#fff}
.card.collapsed > :not(h2){display:none}
.card h2 .sectoggle{margin-right:10px}
.photogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:12px 0}
.photogrid figure{margin:0;position:relative}
.photogrid img,.photogrid video{width:100%;height:110px;object-fit:cover;border-radius:12px;border:1px solid #2a2034;display:block}
.photogrid button{position:absolute;top:6px;right:6px;background:#000a;color:#fff;border:1px solid #555;border-radius:8px;padding:4px 8px;cursor:pointer}
#logoBox img{width:120px;height:120px;object-fit:cover;border-radius:50%;border:2px solid #7440a0;display:block;margin-bottom:10px}
.bizhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bizhead img{width:64px;height:64px;object-fit:cover;border-radius:50%;border:2px solid #7440a0}
@media(max-width:600px){.bizhead img{width:52px;height:52px}.bizhead h1{font-size:22px!important}}
.galstrip{display:flex;gap:8px;overflow-x:auto;margin:12px 0}
.galstrip img{height:90px;border-radius:10px;border:1px solid #2a2034}
#receipt{border:1px dashed #7440a0;border-radius:14px;padding:18px;margin-bottom:14px}
#receipt h1{margin:6px 0 14px}
.rrow{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid #211a29;font-size:14px}
.rrow span{color:#9e95aa}.rrow b{text-align:right}
@media print{
body{background:#fff;color:#000}
.top,.steps,#loadCard,#bookBox,.no-print,#revCard,#bookOpen,.stickycta,.bizline,.hero-grid,.sideinfo,.bizcols>div:first-child{display:none!important}
main{padding:0}
.card{border:0}
#doneCard{display:block!important}
#receipt{border:2px dashed #000;color:#000}
#receipt .muted,.rrow span{color:#333}
}
#langFab{position:fixed;top:84px;right:12px;left:auto;bottom:auto;z-index:90;background:#0c0810;color:#fff;border:1px solid #7440a0;border-radius:50%;width:42px;height:42px;padding:0;font-size:19px;cursor:pointer;box-shadow:0 10px 30px #000a;display:grid;place-items:center}
#langMenu{position:fixed;top:134px;right:12px;left:auto;bottom:auto;z-index:90;background:#0c0810;border:1px solid #7440a0;border-radius:14px;padding:8px;display:grid;gap:2px;max-height:50vh;overflow-y:auto;min-width:150px}
#langMenu.hidden{display:none}
#langMenu button{background:none;color:#ddd;border:0;border-radius:8px;padding:9px 12px;text-align:left;font-size:13px;cursor:pointer}
.slotgrid button:disabled{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.slotgrid button.on{background:linear-gradient(135deg,#7629ff,#c653ff);color:#fff;border-color:transparent}
.chatbox{max-height:220px;overflow-y:auto;display:grid;gap:6px;margin:8px 0}
.chatbox p{margin:0;max-width:88%;font-size:14px}
.chatbox .me{justify-self:end;background:#2a1a3a;border-radius:12px 12px 4px 12px;padding:8px 12px}
.chatbox .them{justify-self:start;background:#15101d;border:1px solid #2a2034;border-radius:12px 12px 12px 4px;padding:8px 12px}
.chatbox small{display:block;font-size:10px;color:#857b8e;margin-top:2px}
#langMenu button:hover{background:#21102f}
#langMenu button.on{color:#c765ff;font-weight:800}