/* RG Barbershop · app del equipo. Estilo claro y limpio (como Perceny) con el logo de RG. */
:root{
  --bg:#F5F7FA; --card:#FFFFFF; --soft:#F3F5F8; --line:#E5E8EE; --line-2:#D9DEE6;
  --ink:#0B1B3F; --text:#1F2937; --muted:#6B7280; --faint:#9CA3AF;
  --blue:#2563EB; --blue-soft:#EAF1FE; --green:#22A55B; --green-2:#4CC46F; --orange:#F2762E; --red:#DC3B30; --purple:#6D4AFF;
  --r:16px; --shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;overflow-x:hidden;overscroll-behavior-x:none}
body{background:var(--bg);color:var(--text);font:14px/1.45 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3{color:var(--ink);margin:0;letter-spacing:-.02em}

/* barra superior */
.tb{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top,0px));background:#fff;border-bottom:1px solid var(--line)}
.tb-btn{width:42px;height:42px;border:0;background:none;border-radius:12px;display:grid;place-items:center;color:var(--ink)}
.tb-btn svg{width:24px;height:24px}
.tb-btn:active{background:var(--soft)}
.tb-space{flex:1}
.biz{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:99px;padding:4px 10px 4px 4px;box-shadow:var(--shadow)}
.biz img{width:42px;height:42px;border-radius:50%;object-fit:cover;background:#fff;border:1px solid var(--line)}
.biz svg{width:16px;height:16px;color:var(--muted)}
.biz-list{position:absolute;left:62px;top:calc(100% - 4px);min-width:280px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -12px rgba(16,24,40,.25);padding:6px}
.biz-list button{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:10px;border-radius:10px;text-align:left;font-weight:600;color:var(--ink)}
.biz-list button[aria-selected="true"]{background:var(--soft)}
.biz-list img,.logo-dot{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);flex:none}
.biz-list small{display:block;font-weight:400;color:var(--muted)}
.tb-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--line)}
.test-bar{padding:8px 16px;background:#FFF7E6;color:#8A5A00;font-size:13.5px;font-weight:600;border-bottom:1px solid #F5E2BC;text-align:center}
.toast{position:fixed;left:16px;right:16px;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:60;max-width:480px;margin:0 auto;padding:12px 16px;border-radius:14px;background:var(--ink);color:#fff;font-weight:600;box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
.toast.bad{background:var(--red)}

/* menú lateral */
.drawer{position:fixed;inset:0 auto 0 0;z-index:50;width:min(86vw,340px);background:#F7F8FA;border-radius:0 26px 26px 0;box-shadow:20px 0 50px -20px rgba(16,24,40,.35);display:flex;flex-direction:column;animation:slideIn .18s ease-out;padding-top:env(safe-area-inset-top,0px)}
@keyframes slideIn{from{transform:translateX(-30px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.drawer,.sheet{animation:none!important}}
.drawer-logo{display:grid;place-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.drawer-logo img{height:92px;width:auto}
.drawer nav{display:grid;gap:4px;padding:16px 14px;overflow-y:auto}
.drawer nav button,.drawer nav a{display:flex;align-items:center;gap:12px;border:0;background:none;padding:11px 12px;border-radius:14px;font-size:14.5px;font-weight:500;color:#4B5563;text-align:left;text-decoration:none}
.drawer nav svg{width:20px;height:20px;flex:none}
.drawer nav button[aria-current="page"]{background:var(--blue-soft);color:var(--blue);font-weight:700}
.drawer nav button:disabled{opacity:.55;cursor:default}
.drawer hr{border:0;border-top:1px solid var(--line);margin:8px 4px}
.soon{margin-left:auto;font-size:11.5px;font-weight:700;color:#fff;background:#F59E8B;border-radius:8px;padding:3px 8px}
.scrim{position:fixed;inset:0;z-index:45;background:rgba(16,24,40,.35)}

/* páginas */
#main{padding-bottom:110px}
.page{max-width:760px;margin:0 auto;padding:26px 16px 0}
.page-h h1{font-size:22px;font-weight:800}
.page-h p{margin:4px 0 18px;color:var(--muted);font-size:13px}
.nav-as{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:12px;color:var(--muted);font-size:13.5px}
.nav-as img{width:36px;height:36px;border-radius:50%;border:1px solid var(--line)}
.nav-as b{color:var(--blue);font-weight:700}
.nav-as select{flex:1;min-width:0;border:0;background:none;color:var(--blue);font-weight:700;font-size:16px;appearance:none;-webkit-appearance:none}
.nav-as svg{width:18px;height:18px;margin-left:auto;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.card+.card{margin-top:14px}
.card-h{display:flex;align-items:center;gap:12px;padding:16px}
.card-h .ic{width:40px;height:40px;border-radius:12px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center}
.card-h .ic svg{width:20px;height:20px}
.card-h h2{font-size:15.5px;font-weight:700;flex:1}
.hint{color:var(--muted);font-size:12.5px;margin:0}

/* ganancias */
.earn{padding:20px 22px 18px}
.earn small{display:block;font-size:13.5px;color:var(--text)}
.earn-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.earn b{font-size:24px;font-weight:800;color:#111;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.delta{font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.delta.up{color:var(--green)} .delta.down{color:var(--red)} .delta.flat{color:var(--muted)}
.delta svg{width:16px;height:16px;stroke-width:2.2}
.earn-more{display:block;width:100%;border:0;border-top:1px solid var(--line);background:var(--soft);padding:12px 18px;text-align:left;font-size:13.5px;color:var(--ink)}
.sum{padding:4px 22px 16px;background:var(--soft)}
.sum-sec{margin:14px 0 6px;font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.06em;display:flex;align-items:center;gap:10px}
.sum-sec::after{content:"";flex:1;height:1px;background:var(--line-2)}
.sum-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.sum-row b{color:var(--ink);font-variant-numeric:tabular-nums}
.sum-row span{font-weight:600;color:var(--ink)}
.who{display:flex;align-items:center;gap:10px}
.av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;background:var(--c,#2563EB)}

/* calendario */
.week{display:grid;grid-template-columns:repeat(7,1fr);background:#fff;border-bottom:1px solid var(--line);padding:8px 4px 10px;position:sticky;top:calc(65px + env(safe-area-inset-top,0px));z-index:15}
.week button{border:0;background:none;display:grid;justify-items:center;gap:3px;color:var(--muted);font-size:11.5px;font-weight:500}
.week b{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--text);font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}
.week button[aria-pressed="true"] b{background:var(--blue);color:#fff;font-weight:600}
.week button.today:not([aria-pressed="true"]) b{box-shadow:inset 0 0 0 2px var(--blue)}
.cal-wrap{overflow:auto;-webkit-overflow-scrolling:touch;height:calc(100dvh - 140px - env(safe-area-inset-top,0px));overscroll-behavior:contain}
.grid{display:grid;grid-template-columns:40px repeat(var(--n),minmax(138px,1fr));min-width:calc(40px + var(--n) * 138px);position:relative;background:#F8F9FB}
.g-corner,.g-head{position:sticky;top:0;z-index:6;background:#fff;border-bottom:2px solid var(--line)}
.g-corner{left:0;z-index:7;border-right:1px solid var(--line)}
.g-head{display:flex;align-items:center;gap:7px;padding:7px 7px;border-left:1px solid var(--line);min-width:0}
.g-head .av{width:30px;height:30px;font-size:11px;position:relative}
.g-head .av::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:var(--faint);border:2px solid #fff}
.g-head .nm{flex:1;min-width:0;font-weight:600;color:var(--ink);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-money{width:40px;height:40px;flex:none;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-content:center;text-align:center;font-weight:700;font-size:10px;line-height:1.1}
.g-money i{display:block;width:24px;height:1px;background:rgba(255,255,255,.7);margin:2px auto;font-style:normal}
.g-times{position:sticky;left:0;z-index:5;background:#fff;border-right:1px solid var(--line)}
.g-t{position:absolute;right:4px;transform:translateY(-50%);font-size:9.5px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.g-t.h{font-size:11px;color:var(--muted);font-weight:500}
.g-cols{grid-column:2/-1;display:grid;grid-template-columns:repeat(var(--n),minmax(138px,1fr));position:relative;
  background-image:repeating-linear-gradient(to bottom,#E3E7ED 0 1px,transparent 1px 24px);background-color:#F8F9FB}
.g-col{position:relative;border-left:1px solid var(--line);cursor:pointer}
.g-off{position:absolute;left:0;right:0;pointer-events:none;background:repeating-linear-gradient(135deg,#E6E9EE 0 6px,#DADEE5 6px 8px)}
.appt{position:absolute;left:2px;right:8px;border:0;border-radius:5px;padding:2px 6px;text-align:left;overflow:hidden;color:#fff;background:var(--c);display:flex;flex-direction:column;gap:0;font-size:11px;line-height:1.25;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.appt .t{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appt .t b{font-weight:700}
.appt .s{opacity:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appt .paid{position:absolute;right:6px;top:4px;width:15px;height:15px;border-radius:50%;background:var(--green-2);color:#fff;font-size:9px;font-weight:700;display:grid;place-items:center}
.appt.st-arrived{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c)}
.appt.st-completed{opacity:.72}
.appt.st-no_show{background:#9CA3AF;text-decoration:line-through}
.appt.test::after{content:"prueba";position:absolute;right:6px;bottom:3px;font-size:10px;font-weight:700;background:rgba(255,255,255,.85);color:#8A5A00;border-radius:5px;padding:0 4px}
.blk{position:absolute;left:2px;right:8px;border:0;border-radius:5px;background:repeating-linear-gradient(135deg,#1F2937 0 6px,#111827 6px 9px);color:#fff;font-size:11px;text-align:left;padding:2px 6px}
.now{position:absolute;left:0;right:0;height:2px;background:var(--red);z-index:4;pointer-events:none}
.now::before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--red)}
.cal-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;gap:4px;padding:8px 10px;border-radius:99px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:0 10px 30px -10px rgba(16,24,40,.35);width:max-content;max-width:calc(100% - 20px)}
.cb-btn{width:44px;height:44px;border:0;background:none;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.cb-btn svg{width:24px;height:24px}
.cb-btn:active{background:var(--soft)}
.cb-sep{width:1px;height:30px;background:var(--line)}
.cb-date{position:relative;display:flex;align-items:center;gap:6px;padding:0 6px;font-size:15px;font-weight:500;color:var(--ink);white-space:nowrap}
.cb-date svg{width:18px;height:18px}
.cb-date input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}

/* lista y ajustes */
.row{display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;border:0;border-top:1px solid var(--line);background:#fff;text-align:left}
.row .grow{flex:1;min-width:0}
.row .grow b{display:block;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .grow small{display:block;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .tm{font-weight:600;min-width:72px;color:var(--ink);font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;font-size:12px;font-weight:600;border-radius:99px;padding:3px 10px;white-space:nowrap;background:var(--soft);color:var(--muted)}
.pill.ok{background:#E6F6EC;color:#18794E} .pill.blue{background:var(--blue-soft);color:var(--blue)} .pill.bad{background:#FDECEA;color:#B42318} .pill.warn{background:#FFF4DE;color:#8A5A00}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.stat b{display:block;font-size:21px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.stat small{color:var(--muted)}
.inp,.sel{border:1px solid var(--line-2);background:#fff;border-radius:10px;padding:10px 12px;font-size:16px;min-width:0}
.inp:focus,.sel:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.edit{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line)}
.edit .grow{flex:1;min-width:140px}
.edit .grow b{display:block;color:var(--ink);font-weight:600}
.edit .grow small{color:var(--muted);font-size:12px}
.num{display:flex;align-items:center;gap:4px;color:var(--muted)}
.num .inp{width:76px;text-align:right}
.switch{position:relative;width:48px;height:28px;flex:none;display:inline-block}
.switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;background:#D1D5DB;border-radius:99px;transition:.2s}
.switch span::after{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch input:checked+span{background:var(--blue)}
.switch input:checked+span::after{transform:translateX(20px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line-2);background:#fff;color:var(--ink);border-radius:10px;padding:9px 14px;font-weight:600;font-size:13.5px;text-decoration:none}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.green{background:linear-gradient(180deg,var(--green-2),var(--green));border-color:var(--green);color:#fff}
.btn.danger{color:var(--red)}
.btn:disabled{opacity:.5}
.btns{display:flex;flex-wrap:wrap;gap:8px}
.btns .btn{flex:1 1 40%}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}

/* hoja inferior */
.sheet-bg{position:fixed;inset:0;background:rgba(16,24,40,.4);z-index:70}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:71;max-height:90dvh;display:flex;flex-direction:column;background:#fff;border-radius:24px 24px 0 0;box-shadow:0 -20px 50px rgba(16,24,40,.2);animation:sheetUp .18s ease-out;padding-bottom:env(safe-area-inset-bottom,0px)}
@keyframes sheetUp{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:720px){.sheet{left:50%;right:auto;bottom:50%;transform:translate(-50%,50%);width:560px;border-radius:24px;animation:none}}
.sheet-h{display:flex;align-items:center;gap:10px;padding:18px 18px 8px}
.sheet-h h2{flex:1;font-size:18px;font-weight:800}
.x{border:0;background:var(--soft);width:36px;height:36px;border-radius:50%;font-size:20px;color:var(--muted)}
.sheet-b{overflow-y:auto;padding:6px 18px 22px;display:grid;gap:12px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px;border-radius:14px;background:var(--soft)}
.facts small{display:block;color:var(--muted);font-size:12.5px}
.facts b{color:var(--ink);font-weight:600}
.field{display:grid;gap:6px}
.field>span{font-size:13px;color:var(--muted);font-weight:600}
.field .inp,.field .sel{width:100%}
.sub{margin:6px 0 -4px;font-size:13px;color:var(--muted);font-weight:700}
.svc{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.svc input{width:20px;height:20px;accent-color:var(--blue);flex:none}
.svc .grow{flex:1;min-width:0;color:var(--ink);font-weight:500}
.svc small{color:var(--muted);white-space:nowrap}
.svc:has(input:checked){border-color:var(--blue);background:var(--blue-soft)}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line-2);background:#fff;border-radius:10px;padding:9px 12px;font-weight:600;font-size:14px;color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.big{padding:13px;font-size:15px;border-radius:12px;width:100%}
textarea.sql{width:100%;font:12px/1.4 ui-monospace,Menlo,monospace}
body.sheet-open .cal-bar{display:none}

/* seleccionar tiempo en el calendario */
.g-head .nm small.exc{display:block;font-size:11px;font-weight:700;color:var(--purple);line-height:1.2}
.sel-box{position:absolute;left:2px;right:12px;z-index:3;border:2px solid var(--blue);border-radius:8px;background:rgba(37,99,235,.14);color:var(--blue);text-align:left;padding:3px 8px;font-size:12.5px;font-weight:700;display:flex;flex-direction:column;overflow:visible;box-shadow:0 6px 18px -8px rgba(37,99,235,.6)}
.sel-box .sel-tip{font-weight:500;font-size:11.5px;opacity:.85}
.sel-h{position:absolute;left:50%;bottom:-11px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:#fff;border:3px solid var(--blue);touch-action:none;cursor:ns-resize;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.sel-h::before{content:"";position:absolute;inset:-12px} /* área de toque más grande */

/* hojas de crear y cobrar */
.sheet-f{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-top:1px solid var(--line);background:#fff;border-radius:0 0 24px 24px}
.sheet-f>span small{display:block;color:var(--muted);font-size:12.5px}
.sheet-f>span b{font-size:19px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.sheet-f .btn{min-width:140px;padding:12px 16px;font-size:14.5px}
.sheet-f .btn:first-child:not(:only-child){min-width:0}
.seg{display:flex;gap:4px;padding:4px;background:var(--soft);border-radius:12px}
.seg button{flex:1;border:0;background:none;border-radius:9px;padding:10px 6px;font-weight:600;font-size:14px;color:var(--muted);line-height:1.2}
.seg button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.seg.sm button{padding:8px 6px}
.pk{display:grid;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips .chip{padding:7px 12px;border-radius:99px;font-size:13px}
.its{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.it{display:flex;align-items:center;gap:10px;padding:12px;border-top:1px solid var(--line);cursor:pointer;-webkit-user-select:none;user-select:none}
.it:active{background:#F1F5FF}
.it:first-child{border-top:0}
.it.on{background:var(--blue-soft)}
.it .grow{flex:1;min-width:0}
.it .grow b{display:block;font-weight:600;color:var(--ink);font-size:14.5px;line-height:1.3}
.it .grow small{color:var(--muted);font-size:12.5px}
.step{display:flex;align-items:center;gap:6px}
.step button{width:38px;height:38px;touch-action:manipulation;border-radius:50%;border:1px solid var(--line-2);background:#fff;font-size:18px;line-height:1;color:var(--ink);display:grid;place-items:center}
.step button:disabled{opacity:.35}
.step b{min-width:16px;text-align:center;font-variant-numeric:tabular-nums}
.pr{min-width:62px;text-align:right;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:flex-end;gap:2px}
.pr .inp{width:70px;padding:6px 8px;text-align:right}
.pr.wide{justify-content:flex-start;gap:6px;color:var(--muted)}
.pr.wide .inp{width:100%;text-align:left}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.client-row{display:flex;gap:8px}
.client-row .inp{flex:1}
.client-chip{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.client-chip .grow{flex:1;min-width:0}
.client-chip .grow b{display:block;color:var(--ink)}
.client-chip .grow small{color:var(--muted)}
.res{display:grid}
.res .row{border:1px solid var(--line);border-radius:10px;margin-top:6px;padding:9px 12px}
.res .av{width:30px;height:30px;font-size:12px}
.link{border:0;background:none;color:var(--blue);font-weight:600;padding:4px 0;justify-self:start}
.warn{margin:0;padding:10px 12px;border-radius:10px;background:#FFF4DE;color:#8A5A00;font-size:13.5px;font-weight:500}
.kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kind{border:1px solid var(--line-2);background:#fff;border-radius:12px;padding:12px 8px;text-align:center;display:grid;gap:2px}
.kind b{color:var(--ink);font-size:14.5px}
.kind small{color:var(--muted);font-size:12px;line-height:1.25}
.kind[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-soft);box-shadow:inset 0 0 0 1px var(--blue)}
.steps{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:4px}
.steps span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--muted);font-weight:700;font-size:13px}
.steps span.on{background:var(--ink);color:#fff}
.steps span.ok{background:var(--green-2);color:#fff}
.steps small{color:var(--muted);font-size:12.5px;font-weight:600}
.steps i{width:34px;height:2px;background:var(--line-2)}
.pay{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.paym{border:1px solid var(--line-2);background:#fff;border-radius:14px;padding:14px 6px;display:grid;justify-items:center;gap:6px;font-weight:600;font-size:13.5px;color:var(--ink);position:relative}
.paym .pi{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--soft);font-size:20px;font-weight:800;color:var(--green)}
.paym[aria-pressed="true"]{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green);background:#F0FBF4}
.paym[aria-pressed="true"]::after{content:"✓";position:absolute;top:6px;right:8px;width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;font-size:11px;display:grid;place-items:center}
.sum-box{border:1px solid var(--line);border-radius:12px;padding:2px 14px;background:var(--soft)}
.sum-box .sum-row:last-child{border-bottom:0}
.paid-ok{display:grid;justify-items:center;gap:6px;padding:18px 0}
.paid-ok span{width:64px;height:64px;border-radius:50%;background:var(--green-2);color:#fff;font-size:32px;display:grid;place-items:center}
.paid-ok b{font-size:32px;font-weight:800;color:var(--ink)}
.paid-ok small{color:var(--muted)}

/* página tickets */
.tk-today{display:flex;align-items:center;gap:12px;margin:16px;padding:16px;border-radius:14px;background:var(--soft)}
.tk-today .ic{width:36px;height:36px;border-radius:50%;background:#E6F6EC;color:var(--green);display:grid;place-items:center}
.tk-today .ic svg{width:18px;height:18px}
.tk-today small{flex:1;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.tk-today b{font-size:22px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.tk-acts{display:grid;gap:10px;padding:0 16px 16px}
.tk-acts svg{width:20px;height:20px}
.row .tm small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.row .amt{text-align:right}
.row .amt b{display:block;color:var(--ink);font-variant-numeric:tabular-nums}
.row .amt small{color:var(--muted);font-size:12.5px}

/* notificaciones */
.bell{position:relative}
.bell i{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--red);color:#fff;font:700 11px/18px Inter,system-ui,sans-serif;font-style:normal;text-align:center;box-shadow:0 0 0 2px #fff}
.nh{display:flex;align-items:center;gap:14px}
.nh .ic{width:48px;height:48px;border-radius:14px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;flex:none}
.nh .ic svg{width:24px;height:24px}
.nh p{margin:2px 0 0}
.page-h.nh{margin-bottom:18px}
.n-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.n-bar .grow{flex:1;color:var(--muted);font-size:14px}
.n-count{min-width:30px;height:24px;padding:0 8px;border-radius:99px;background:var(--blue);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center}
.sq{width:36px;height:36px;border:1px solid var(--line-2);border-radius:10px;background:#fff;display:grid;place-items:center;color:var(--muted)}
.sq svg{width:18px;height:18px}
.sq.bad{color:var(--red)}
.sq:disabled{opacity:.4}
.n-card{display:flex;gap:12px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:8px;box-shadow:var(--shadow)}
.n-card.new{border-color:#C9D9FB}
.n-ic{position:relative;width:38px;height:38px;flex:none;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center}
.n-ic svg{width:18px;height:18px}
.n-ic i{position:absolute;left:-4px;top:-2px;width:9px;height:9px;border-radius:50%;background:var(--blue)}
.n-card b{color:var(--ink);font-size:13.5px}
.n-card p{margin:2px 0 4px;color:var(--text);font-size:13.5px;line-height:1.4}
.n-card small{color:var(--muted);font-size:12.5px}
.g-cols{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.dragging,body.dragging *{cursor:grabbing!important}
body.dragging .sel-box{box-shadow:0 12px 28px -8px rgba(37,99,235,.75);background:rgba(37,99,235,.22)}
.sel-box{cursor:grab}

/* fotos */
.thumb{position:relative;width:64px;height:64px;flex:none;border-radius:12px;border:1.5px dashed var(--line-2);background:var(--soft);color:var(--muted);display:grid;place-items:center;align-content:center;gap:0;overflow:hidden;padding:0}
.thumb svg{width:22px;height:22px}
.thumb small{font-size:11px;font-weight:600}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb:has(img){border-style:solid}
.thumb.round{width:48px;height:48px;border-radius:50%;border:0;background:var(--c,#2563EB);color:#fff}
.thumb.round b{font-size:15px}
.thumb.round i{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.thumb.round i svg{width:12px;height:12px}
.av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ph-big{width:100%;max-height:50vh;object-fit:cover;border-radius:14px}

/* menú con grupos (como Perceny) */
.drawer nav{gap:2px}
.drawer nav span{flex:1;min-width:0}
.grp-h .chev{width:16px!important;height:16px!important;transition:transform .15s;color:var(--faint)}
.grp.open>.grp-h{background:var(--soft);font-weight:600;color:var(--ink)}
.grp.open>.grp-h .chev{transform:rotate(180deg)}
.grp-b{display:none;padding:2px 0 4px 32px}
.grp.open>.grp-b{display:grid;gap:1px}
.grp-b button{font-size:13.5px!important;padding:9px 12px!important}
.grp-b .soon{font-style:normal;margin-left:auto}
.soon{font-size:10.5px;padding:2px 7px}

/* entrar con PIN */
body.login-mode #menuBtn,body.login-mode #bizBtn,body.login-mode #bellBtn,body.login-mode #refreshBtn,body.login-mode #tbAvatar{visibility:hidden}
.login{max-width:380px;margin:0 auto;padding:28px 16px 40px;text-align:center;display:grid;gap:12px;justify-items:center}
.login-logo{width:120px}
.login h1{font-size:22px}
.login>p{margin:0;color:var(--muted)}
.l-shops{justify-content:center}
.l-staff{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;margin-top:6px}
.l-staff button{display:grid;justify-items:center;gap:6px;padding:12px 6px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:12.5px;font-weight:600;color:var(--ink);box-shadow:var(--shadow)}
.l-staff .av{width:48px;height:48px;font-size:15px}
.pin-dots{display:flex;gap:14px;margin:6px 0}
.pin-dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink)}
.pin-dots i.on{background:var(--ink)}
.pad{display:grid;grid-template-columns:repeat(3,72px);gap:12px}
.pad button{height:64px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:24px;font-weight:600;color:var(--ink);box-shadow:var(--shadow)}
.pad button:active{background:var(--soft)}
.pad .ok{border-radius:16px;font-size:14px;background:var(--ink);color:#fff}
.pad .ok:disabled{opacity:.35}
.login .owner{margin-top:14px;color:var(--muted)}

/* tablas (Miembros y Servicios, como Perceny) */
.page.wide{max-width:980px}
.tabs{display:flex;gap:18px;border-bottom:1px solid var(--line);margin-bottom:14px}
.tabs button{border:0;background:none;padding:10px 2px;font-weight:600;font-size:13.5px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--blue);border-bottom-color:var(--blue)}
.tabs em{font-style:normal;font-size:11.5px;background:var(--soft);border-radius:99px;padding:1px 7px;margin-left:2px}
.tabs.in{padding:0 14px;margin:0}
.tbl-h{display:flex;align-items:center;gap:10px;padding:14px}
.tbl-h .ic{width:34px;height:34px;border-radius:10px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center}
.tbl-h .ic svg{width:18px;height:18px}
.tbl-h h2{flex:1;font-size:15px}
.tbl-tools{display:flex;justify-content:flex-end;gap:8px;padding:0 14px 12px}
.tbl-tools .inp{flex:1}
.btn.sm{padding:6px 10px;font-size:12.5px}
.btn svg{width:16px;height:16px}
.btn.green{background:linear-gradient(180deg,var(--green-2),var(--green));border-color:var(--green);color:#fff}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--line)}
.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
.tbl th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;padding:10px 12px;background:#FAFBFC;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.tbl td b{color:var(--ink);font-weight:600}
.tbl tr.off td{opacity:.55}
.tbl .empty{white-space:normal}
.tbl-foot{margin:0;padding:10px 14px;font-size:12px;color:var(--muted)}
.thumb.sm{width:40px;height:40px;border-radius:10px}
.thumb.sm svg{width:18px;height:18px}
.thumb.round.sm{width:36px;height:36px;border-radius:50%}
.thumb.round.sm b{font-size:12px}
.thumb.wide{width:100%;height:150px;border-radius:14px;gap:4px}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:12px 0 14px}
@media (min-width:720px){.tiles{grid-template-columns:repeat(6,1fr)}}
.tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow)}
.tile small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tile b{font-size:20px;color:var(--ink)}
.tile.blue small{color:var(--blue)}.tile.green small{color:var(--green)}.tile.purple small{color:var(--purple)}.tile.orange small{color:var(--orange)}.tile.red small{color:var(--red)}
.top-acts{margin-bottom:4px}
.top-acts .btn{flex:0 0 auto}
.two-k{grid-template-columns:1fr 1fr}
.mem-top,.prof-top{display:flex;align-items:center;gap:14px}
.mem-top b{display:block;font-size:16px;color:var(--ink)}
.mem-top .link,.prof .link{display:inline-flex;align-items:center;gap:6px}
.mem-top .link svg{width:16px;height:16px}
.av.xl{width:64px;height:64px;font-size:20px}
.av.xxl{width:84px;height:84px;font-size:26px}
.prof-top{padding:18px 16px 6px}
.prof-top h2{font-size:18px}
.prof-top p{margin:4px 0 0;color:var(--muted);font-size:13px}
.link.danger{color:var(--red)}
pre.share{white-space:pre-wrap;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:12px;font:13px/1.5 Inter,system-ui,sans-serif;margin:0}
.tb-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.tb-avatar{overflow:hidden}
.earn-sub{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.biz:disabled svg{display:none}
.biz:disabled{cursor:default}
.thumb.cover{display:grid;width:calc(100% - 32px);height:170px;margin:0 16px 10px;border-radius:14px;gap:4px}

.lang-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lang-opt{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:15px;color:var(--ink)}
.lang-opt span{font-size:22px}
.lang-opt b{flex:1;text-align:left}
.lang-opt i{font-style:normal;color:var(--blue);font-weight:800}
.lang-opt[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-soft)}
.lang-link{margin-top:2px;color:var(--muted)}
#langBtn svg{width:22px;height:22px}

/* cabecera del barbero (se toca para ver opciones) */
button.g-head{font:inherit;text-align:left;cursor:pointer;border-top:0;border-right:0;border-bottom:2px solid var(--line);border-left:1px solid var(--line)}
button.g-head:active{background:var(--soft)}
.g-head .av.in::after{background:#22C55E}
.menu-list{gap:6px}
.menu-opt{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:14.5px;font-weight:600;color:var(--ink);text-align:left}
.menu-opt svg{width:20px;height:20px;color:var(--muted)}
.menu-opt:active{background:var(--soft)}
.sheet-h .mem-top h2{font-size:17px}
.sheet-h .mem-top{flex:1}
.av.sm{width:26px;height:26px;font-size:10px}

/* resumen de ganancias */
.ov-big{margin:0 0 10px}
.ov-big b{display:block;font-size:34px;font-weight:800;color:#111;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ov-big small{color:var(--muted);font-size:12.5px}
.ov-time{cursor:pointer;font-weight:600;color:var(--ink)}
.ov-time span{flex:1;text-align:left}
.ov-time svg:first-child{width:18px;height:18px;color:var(--muted)}
.ov-card{margin-bottom:12px}
.ov-ch{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.ov-ch .ic{width:30px;height:30px;border-radius:9px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center}
.ov-ch .ic svg{width:16px;height:16px}
.ov-ch b{flex:1;color:var(--ink)}
.ov-sec{padding:0 14px}
.ov-sh{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:12px 0 8px;font-size:12px;font-weight:700;letter-spacing:.07em;color:var(--muted)}
.ov-sh::after{content:"";flex:1;height:1px;background:var(--line-2);order:1}
.ov-sh svg{width:16px;height:16px;order:2;transition:transform .15s}
.ov-sh[aria-expanded="true"] svg{transform:rotate(180deg)}
.ov-sb{padding-bottom:8px}
.ov-sb .sum-row span{font-weight:600}
.ov-sb .sum-row b small{color:var(--muted);font-weight:500}
.as-btn{width:100%;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;font:inherit}
.balance{display:flex;align-items:center;justify-content:space-between;margin:12px 0;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow)}
.balance span{font-weight:600;color:var(--muted)}
.balance b{font-size:26px;font-weight:800;color:var(--green);font-variant-numeric:tabular-nums}
.balance b.neg{color:var(--red)}
.ov-h2{margin:18px 0 8px}
.ov-h2 h2{font-size:17px}
.ov-h2 p{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.bk{display:grid;gap:2px;width:100%;padding:12px 14px;text-align:left;font:inherit;color:var(--text);margin-bottom:8px}
.bk b{color:var(--ink);font-size:14px;margin-bottom:4px}
.bk span{font-size:12.5px;color:var(--muted)}
.bk em{font-style:normal;font-weight:700;color:var(--ink)}
.card+.bk,.bk+.bk{margin-top:0}
.bars{display:grid;gap:8px;padding:14px}
.bar-row{display:grid;grid-template-columns:minmax(80px,38%) 1fr auto;align-items:center;gap:10px;font-size:12.5px}
.bar-row span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-row i{height:14px;border-radius:4px;background:linear-gradient(90deg,var(--blue),#60A5FA);width:var(--w);min-width:2px}
.bar-row b{font-variant-numeric:tabular-nums;color:var(--ink)}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.chips.scroll .chip{flex:none}

/* asistencia */
.clock-box{display:grid;justify-items:start;gap:4px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.clock-box b{color:var(--ink);font-size:15px}
.clock-box small{color:var(--muted)}
.row.att{cursor:default}
.row.att .who .av{width:36px;height:36px;font-size:12px}

/* editar miembro */
.sec-t{margin:8px 0 -2px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.palette{display:flex;flex-wrap:wrap;gap:8px}
.sw{width:30px;height:30px;border-radius:8px;border:2px solid #fff;background:var(--c);box-shadow:0 0 0 1px var(--line-2);padding:0}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.sw.custom{position:relative;overflow:hidden;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red)}
.sw.custom input{position:absolute;inset:-6px;width:44px;height:44px;opacity:0;cursor:pointer}

/* tarjetas rápidas de ganancias */
.quick{display:flex;gap:8px;overflow-x:auto;margin:0 -16px 12px;padding:2px 16px 4px;-webkit-overflow-scrolling:touch}
.qc{flex:none;min-width:138px;display:grid;gap:2px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow);font:inherit}
.qc small{color:var(--muted);font-size:12px}
.qc b{font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
.qc .delta{font-size:11.5px}
.qc.on{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
/* balances de barberos */
.net{display:flex;align-items:center;justify-content:space-between;margin:12px 14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px}
.net span{font-weight:600;color:var(--muted)}
.net b{font-size:22px;color:var(--green);font-variant-numeric:tabular-nums}
.bal-card{display:flex;gap:10px;margin:0 14px 10px;padding:12px;border:1px solid var(--line);border-radius:12px}
.bal-l{flex:1;min-width:0;display:grid;gap:1px}
.bal-l b{color:var(--ink);font-size:14px;margin-bottom:2px}
.bal-l small{color:var(--muted);font-size:12px}
.bal-r{display:grid;justify-items:end;align-content:center;gap:4px;text-align:right}
.bal-r b{font-size:17px;color:var(--green);font-variant-numeric:tabular-nums}
.bal-r b.neg{color:var(--red)}
.bal-r small{font-size:11px;color:var(--muted)}
.bal-tot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 14px 14px;padding:10px 12px;border-radius:12px;background:#ECFDF3}
.bal-tot b{color:var(--green)}
/* gráfica de líneas */
.lc-wrap{padding:10px 8px 12px}
.lc{width:100%;height:auto;display:block}
.lc .gl{stroke:var(--line);stroke-width:1}
.lc .yl{font-size:9px;fill:var(--muted);text-anchor:end}
.lc .xl{font-size:9.5px;fill:var(--muted)}
.lc .hit{fill:transparent;cursor:pointer}
.lg{display:flex;flex-wrap:wrap;gap:6px 12px;padding:6px 8px 0;font-size:11.5px;color:var(--muted)}
.lg i,.tip i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:4px;vertical-align:middle}
.tip{display:grid;gap:2px;margin:10px 8px 0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow);font-size:12.5px}
.tip>b{color:var(--ink)}
.per-nav{display:flex;gap:6px}
.per-nav .btn{flex:1}
.bk-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bk .link{justify-self:start;margin-top:4px;font-size:12.5px}
.bk{cursor:default}
/* recordatorios */
.msg-prev{padding:10px 12px;border-radius:12px;background:#E7F8EE;border:1px solid #CBEFD8}
.msg-prev small{display:block;font-size:11px;font-weight:700;color:#15803D;text-transform:uppercase;letter-spacing:.05em}
.msg-prev p{margin:4px 0 0;font-size:13.5px;color:var(--text)}
.lc{stroke:none}
.lc text{stroke:none}
.client-row .inp{min-width:0}
.client-row .btn{flex:none}
.inv-form{display:grid;gap:12px;width:100%;text-align:left}
.login .inv-form .hint{text-align:center}
/* detalle de cita */
.ad-top{display:flex;flex-wrap:wrap;gap:6px}
.pill.st-booked{background:var(--blue-soft);color:var(--blue)} .pill.st-arrived{background:#EEE8FD;color:#6D28D9} .pill.st-completed{background:#E6F6EC;color:#18794E} .pill.st-cancelled{background:#FDECEA;color:#B42318} .pill.st-no_show{background:#FFF4DE;color:#8A5A00}
.facts b{overflow-wrap:anywhere}
.ad-svcs{border:1px solid var(--line);border-radius:14px;padding:4px 14px}
.ad-svcs>div{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink)}
.ad-svcs>div span:last-child{color:var(--muted);white-space:nowrap}
.ad-svcs>.tot{border-bottom:0;font-weight:600}
.ad-pay{display:grid;gap:2px;padding:12px 14px;border-radius:14px;background:var(--soft)}
.ad-pay small{color:var(--muted);font-size:12.5px}
.pay{font-size:14px;color:var(--ink)} .pay.p-ok{color:#18794E} .pay.p-warn{color:#8A5A00}
.x.back{font-size:24px;line-height:1}
.sheet-h .x.back+h2{flex:1}
.svc .grow small{display:block;white-space:normal;font-weight:400;font-size:12px}
button.n-card{width:100%;text-align:left;font:inherit;cursor:pointer;align-items:center}
.n-card.link:hover{border-color:#C9D9FB}
.n-card>div{flex:1;min-width:0}
.n-card u{display:block;margin-top:4px;font-size:12.5px;color:var(--blue);text-decoration:none;font-weight:600}
.n-card .chev{color:var(--muted);font-size:22px}
/* ticket directo */
.tk-direct{display:grid;gap:8px;padding:12px 14px;border:1px solid #C9D9FB;background:var(--blue-soft);border-radius:14px}
.tk-direct .hint{margin:0}
.tk-direct .chips{margin-bottom:2px}
.tk-when{margin:0;padding:8px 12px;border-radius:10px;background:var(--blue-soft);color:var(--blue);font-weight:600;font-size:13px}
/* foto arreglada por la IA */
.ai-ph{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ai-ph figure{margin:0;display:grid;gap:6px;text-align:center}
.ai-ph img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;border:1px solid var(--line);background:var(--soft)}
.ai-ph figure:first-child img{border:2px solid var(--blue)}
.ai-ph figcaption{font-size:12.5px;color:var(--muted);font-weight:600}
.field small.hint{font-size:12px;margin-top:2px}
/* Stripe */
.st-via{margin-top:2px}
.pay-wait{text-align:center;justify-items:center}
.pay-amt{font-size:30px;font-weight:800;color:var(--ink)}
.qr{background:#fff;padding:10px;border-radius:16px;border:1px solid var(--line);line-height:0}
.qr svg{width:220px;height:220px}
.pay-reader{font-size:56px;line-height:1}
.pay-st{display:flex;align-items:center;gap:8px;justify-content:center;color:var(--muted);font-weight:600;font-size:13.5px}
.bad-t{color:#B42318}
.spin{width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.steps-l{margin:8px 0 10px;padding-left:20px;display:grid;gap:6px;font-size:13.5px;color:var(--text)}
.steps-l code,.hint code{background:var(--soft);padding:1px 5px;border-radius:5px;font-size:12px}
.qr svg,.qr svg *{stroke:none!important}.qr svg path{fill:#000!important}.qr svg rect{fill:#fff!important}
/* pagos al banco */
.btn.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.dark:disabled{opacity:.45}
.po-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.po-h b{font-size:15px}
.po-cards{display:grid;gap:8px;margin-bottom:8px}
@media (min-width:700px){.po-cards{grid-template-columns:repeat(4,1fr)}}
.po-c{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:2px}
.po-c small{font-size:11px;letter-spacing:.06em;color:var(--muted);font-weight:600}
.po-c b{font-size:20px;color:var(--ink)}
.po-c p{margin:0;font-size:12px;color:var(--muted)}
.po-c.main{background:var(--blue-soft);border-color:#C9D9FB}.po-c.main b{color:var(--blue)}
/* cobro como Perceny: propina y pantallas de pago */
.tipg{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.tipg .tipb{grid-column:span 2}.tipg .tipb.wide{grid-column:span 3}
.tipb{border:1px solid var(--line);background:var(--soft);border-radius:12px;padding:12px 6px;display:grid;gap:2px;justify-items:center;font:inherit;cursor:pointer;color:var(--ink)}
.tipb b{font-size:16px}.tipb small{font-size:12px;color:var(--muted)}
.tipb.wide{padding:14px 6px}
.tipb[aria-pressed="true"]{background:#fff;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.tipg.big .tipb{padding:18px 6px}.tipg.big .tipb b{font-size:20px}
.handoff{padding:12px 14px;border-radius:12px;background:var(--blue-soft);color:var(--blue);font-weight:600;font-size:13.5px}
.tip-total{margin:4px 0;text-align:center;font-size:28px;font-weight:800;color:var(--ink)}
.pay-full{min-height:62vh;align-content:center;text-align:center;justify-items:center}
.pf{display:grid;gap:8px;justify-items:center;max-width:340px}
.pf h3{margin:6px 0 0;font-size:18px;color:var(--ink)}.pf p{margin:0;color:var(--muted);font-size:13.5px}
.pf small{color:var(--muted);font-size:12.5px}
.pf-ic{width:64px;height:64px;color:var(--blue)}.pf-ic svg{width:100%;height:100%;stroke-width:1.6}
.pf-ic.sm{width:34px;height:34px;color:var(--muted)}
.pf-amt{font-size:40px;font-weight:800;color:var(--ink);line-height:1.1}
.pf-cta{color:var(--blue);font-weight:600}
.spin.big{width:26px;height:26px;border-width:3px}
.btn.red{background:#E5484D;border-color:#E5484D;color:#fff}
.pay-full .btn.big{width:100%;max-width:360px}
.app-ver{display:block;padding:10px 16px 4px;color:var(--muted);font-size:11px}
.login-logo.app{width:88px;height:88px;border-radius:22px;box-shadow:0 8px 24px rgba(11,27,63,.25)}
.nav-as .av{width:36px;height:36px;font-size:13px;flex:none;border:1px solid var(--line)}.nav-as .av img{width:100%;height:100%;border:0;border-radius:50%;object-fit:cover}
/* publicidad */
.adp{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff}
.adp-ph{position:relative;aspect-ratio:16/7;background:linear-gradient(135deg,var(--ac),#000);display:grid;place-items:center;font-size:40px}
.adp-ph img{width:100%;height:100%;object-fit:cover}
.adp-ph em{position:absolute;left:10px;bottom:8px;font-style:normal;font-size:12px;font-weight:700;color:#fff;background:rgba(0,0,0,.55);padding:3px 9px;border-radius:99px}
.adp-b{padding:10px 12px 12px;display:grid;gap:4px}
.adp-b b{font-size:15px;color:var(--ink)}.adp-b p{margin:0;font-size:12.5px;color:var(--muted)}
.adp-cta{justify-self:start;margin-top:4px;padding:7px 12px;border-radius:10px;background:var(--ac);color:#fff;font-size:12.5px;font-weight:700}
.ad-row{width:100%;text-align:left;align-items:center}
.ad-th{width:52px;height:52px;flex:none;border-radius:12px;object-fit:cover;display:grid;place-items:center;font-size:22px}
.ad-row .grow small{display:block}
.ad-row .grow b,.ad-row .grow small{white-space:normal;overflow:visible;text-overflow:clip}.ad-row .pill{flex:none;align-self:flex-start}
/* jalar para refrescar */
.ptr{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:90;width:38px;height:38px;margin-top:-46px;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(11,27,63,.25);display:grid;place-items:center;color:var(--muted);opacity:0;transform:translate(-50%,0);pointer-events:none;transition:opacity .15s}
.ptr svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ptr.ready{color:var(--blue)}
.ptr.spin svg{animation:spin .7s linear infinite}
body{overscroll-behavior-y:contain}
@media (pointer:coarse){#refreshBtn{display:none}}
/* detalle por periodo: tocar para ver tickets */
.bk.tap{cursor:pointer;transition:border-color .15s}
.bk.tap:active{transform:scale(.995)}
.bk-go{display:block;margin-top:6px;color:var(--blue);font-weight:600;font-size:13px}
b.void{color:#B42318;font-size:12.5px}
.appt .paid{width:17px;height:17px;font-size:10px;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.appt .paid.ok{background:#16A34A}
.appt .paid.due{background:#E5484D}
.sum-row.ok-t span,.sum-row.ok-t b{color:#18794E}

/* ---------- periodo (como Perceny): pestañas, lista, calendario de rango ---------- */
.per-tabs{margin-bottom:12px}
.per-tabs button{font-size:12.5px}
.per-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:4px;flex-shrink:0}
.per-opt:first-child{border-radius:13px 13px 0 0}.per-opt:last-child{border-radius:0 0 13px 13px}
.per-opt{display:flex;align-items:center;gap:12px;padding:11px 14px;border:0;border-bottom:1px solid var(--line);background:#fff;text-align:left;font:inherit;cursor:pointer}
.per-opt:last-child{border-bottom:0}
.per-opt i{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2);flex:none}
.per-opt[aria-pressed="true"]{background:#F0FBF4}
.per-opt[aria-pressed="true"] i{border:5px solid var(--green)}
.per-opt b{display:block;font-size:13.5px;color:var(--ink)}
.per-opt small{color:var(--muted);font-size:12px}
.per-sel{display:flex;flex-direction:column;align-items:center;gap:2px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--soft);margin-bottom:10px;text-align:center}
.per-sel small{color:var(--muted);font-size:12px}
.per-sel b{font-size:20px;color:var(--ink)}
.per-sel span{font-size:12.5px;color:var(--muted)}
.per-nav{display:flex;gap:8px;margin-bottom:12px}
.per-nav .btn{flex:1}
.per-sum{margin:6px 0 0}
.sheet-f.per-f .btn{flex:1;min-width:0}
.rcal{border:1px solid var(--line);border-radius:14px;padding:10px;margin-bottom:12px}
.rcal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.rcal-h b{font-size:14px;color:var(--ink)}
.rcal-h .sq{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:#fff;font-size:18px}
.rcal-h .sq:disabled{opacity:.35}
.rcal-w,.rcal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.rcal-w span{font-size:11px;color:var(--muted);font-weight:700;padding:4px 0}
.rcal-g button{aspect-ratio:1;max-height:42px;border:0;border-radius:10px;background:none;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer}
.rcal-g button:disabled{color:var(--faint);cursor:default}
.rcal-g button.td{box-shadow:inset 0 0 0 1.5px var(--line-2);font-weight:700}
.rcal-g button.in{background:#EAF7EF;border-radius:0}
.rcal-g button.st{background:var(--green);color:#fff;font-weight:700}
.rcal-g button.en{background:var(--red);color:#fff;font-weight:700}
.rcal-l{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.rcal-l i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.rcal-l i.st{background:var(--green)} .rcal-l i.en{background:var(--red)}
.rcal-l b{color:var(--ink)}

/* ---------- detalle del periodo: tabla de tickets ---------- */
.sum-row.tot span,.sum-row.tot b{font-weight:800}
.tk-bar{display:flex;align-items:center;justify-content:space-between;margin:16px 0 8px}
.tk-bar b{font-size:15px;color:var(--ink)} .tk-bar small{color:var(--muted);font-weight:600}
.tk-fil{margin-bottom:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.tk-fil .chip{white-space:nowrap}
.tk-tbl{padding:0;overflow:hidden}
.pd{min-width:0}
.pd .ov-sb{padding:2px 14px 8px}
.tk-tr small .av{display:inline-grid}
.pd .ov-sb .sum-row:last-child{border-bottom:0}
.pd .balance{margin:6px 0 0}
.tk-tr{display:grid;grid-template-columns:70px 1fr 88px 78px;gap:8px;align-items:center;width:100%;padding:10px 12px;border:0;border-bottom:1px solid var(--line);background:#fff;text-align:left;font:inherit;font-size:13px;color:var(--text);cursor:pointer}
.tk-tr:last-child{border-bottom:0}
button.tk-tr:not(.tk-thead):hover{background:var(--soft)}
.tk-thead{background:var(--soft);cursor:default;padding:6px 12px}
.tk-thead .th{border:0;background:none;padding:4px 0;font:inherit;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;text-align:left;cursor:pointer}
.tk-thead .th.on{color:var(--ink)}
.tk-tr .r,.tk-thead .th.r{text-align:right}
.tk-tr small{display:block;color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-tr .c-time{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.tk-tr .c-who{min-width:0}
.tk-tr .c-who b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.tk-tr .c-who small .av{vertical-align:-4px;margin-right:4px}
.tk-tr .c-pay{font-size:12.5px;display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden;white-space:nowrap}
.tk-tr .r b{color:var(--ink);font-variant-numeric:tabular-nums}
.tk-tr .void b{color:var(--red);font-size:12px}
.m-dot{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none}
.m-cash{background:var(--green)} .m-card,.m-apple{background:var(--blue)} .m-zelle{background:var(--purple)} .m-cashapp{background:#00C244}
.av.xs{width:18px;height:18px;font-size:8px}
.pager{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0;font-size:12.5px;color:var(--muted)}
@media (max-width:520px){.tk-tr{grid-template-columns:64px 1fr 74px}.tk-tr .c-pay{display:none}}

/* ---------- editar ticket: interruptores y diferencia ---------- */
.tg-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);margin-top:10px;cursor:pointer}
.tg-row .grow>b{display:block;font-size:13.5px;color:var(--ink)}
.tg-row small b{color:var(--ink)}
.tg-row small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.tk-direct .chips{margin:6px 0}
.tk-diff{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:12px;background:#fff}
.tk-diff.neg{border-color:#F3C7C3;background:#FEF6F5}
.tk-diff.pos{border-color:#BFE6CD;background:#F2FBF5}
.tk-diff-n{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--muted)}
.tk-diff-n b{display:block;font-size:15px;color:var(--ink)}
.tk-diff .tg-row{border-top-color:rgba(0,0,0,.06)}
.sheet-f.tk-f .btn{min-width:0;flex:none;padding:12px 18px}
.sheet-f.tk-f>span{flex:1}
.tk-tr .r small{white-space:normal;overflow:visible}

/* ---------- menú de perfil (arriba a la derecha) ---------- */
button.tb-avatar{border:0;padding:0;cursor:pointer;font:inherit;font-weight:700}
.tb-avatar.owner svg,.av.owner svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2}
.me-menu{position:absolute;right:10px;top:calc(100% - 4px);min-width:250px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px -12px rgba(16,24,40,.25);padding:6px;z-index:60}
.me-h{display:flex;align-items:center;gap:12px;padding:10px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.me-h b{display:block;color:var(--ink);font-size:14px}
.me-h small{color:var(--muted);font-size:12px}
.av.lg{width:44px;height:44px;font-size:15px}
.av.owner{background:var(--ink);display:grid;place-items:center}
.me-menu>button,.me-menu>a{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:10px;border-radius:10px;text-align:left;font:inherit;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;cursor:pointer}
.me-menu>button:hover,.me-menu>a:hover{background:var(--soft)}
.me-menu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none;color:var(--muted)}
.me-menu em{font-style:normal;color:var(--muted);font-weight:500;margin-left:4px}
.me-menu .bad{color:var(--red)} .me-menu .bad svg{color:var(--red)}
.me-ai img,.ai-link img{width:22px;height:22px;border-radius:6px;flex:none}
.ai-link span small{display:block;font-size:11.5px;font-weight:500;color:var(--muted)}
.av.xxl.owner svg{width:40px;height:40px}
.me-pic{position:relative;border:0;background:none;padding:0;cursor:pointer;flex:none}
.me-pic i{position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;border-radius:50%;background:var(--blue);display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
.me-pic i svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2}
.av.lg img,.av.xxl img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* ---------- menú de exportar ---------- */
.ex-menu{position:absolute;z-index:80;min-width:220px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -12px rgba(16,24,40,.28);padding:5px}
.ex-menu button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:10px;border-radius:8px;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);text-align:left;cursor:pointer}
.ex-menu button:hover{background:var(--soft)}
.ex-menu svg{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:1.8}
#ovExport .chev{width:14px;height:14px;margin-left:2px}

/* ---------- asistente IA ---------- */
.ai-fab{position:fixed;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:45;width:50px;height:50px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  background:linear-gradient(135deg,#6366F1,#7C3AED);box-shadow:0 10px 24px -8px rgba(99,102,241,.75),0 0 0 3px rgba(255,255,255,.9)}
.ai-fab svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.ai-fab:active{transform:scale(.94)}
body.sheet-open .ai-fab{display:none}
.ai-h{display:flex;align-items:center;gap:10px}.ai-h small{color:var(--muted);font-size:12px}
.ai-dot{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#6366F1,#7C3AED);flex:none}
.ai-dot svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linejoin:round}
.ai-b{display:flex!important;flex-direction:column;gap:8px;min-height:40dvh;max-height:58dvh}
.ai-m{max-width:86%;padding:10px 12px;border-radius:14px;font-size:13.5px;line-height:1.45}
.ai-m.bot{align-self:flex-start;background:var(--soft);color:var(--text);border-bottom-left-radius:4px}
.ai-m.me{align-self:flex-end;background:#6D4AFF;color:#fff;border-bottom-right-radius:4px}
.ai-m .n{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#E0E7FF;color:#4338CA;font-style:normal;font-size:11px;font-weight:700;margin-right:2px}
.ai-m.typing{display:flex;gap:4px}.ai-m.typing i{width:6px;height:6px;border-radius:50%;background:#9CA3AF;animation:aiDot 1s infinite}.ai-m.typing i:nth-child(2){animation-delay:.15s}.ai-m.typing i:nth-child(3){animation-delay:.3s}
@keyframes aiDot{0%,80%,100%{opacity:.3}40%{opacity:1}}
.ai-tips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ai-f{display:flex;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.ai-f .inp{flex:1}.ai-f .btn{min-width:0;padding:0 14px}.ai-f .btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}

/* ---------- opiniones ---------- */
.stars{display:inline-flex;gap:1px;color:#D1D5DB;font-size:14px;letter-spacing:0;line-height:1.15}
.stars i{font-style:normal;line-height:1.15;display:inline-block}.stars i.on{color:#F59E0B}
.stars.big{font-size:22px}
.rv-sum{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:16px}
.rv-avg{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:120px}
.rv-avg .stars{display:flex;position:static}
.rv-avg b{font-size:40px;font-weight:800;color:var(--ink);line-height:1}
.rv-avg small{color:var(--muted);font-size:11.5px;text-align:center;max-width:150px}
.rv-bars{display:grid;gap:5px}
.rv-bars div{display:grid;grid-template-columns:28px 1fr 26px;gap:8px;align-items:center;font-size:12px;color:var(--muted)}
.rv-bars i{height:8px;border-radius:99px;background:var(--soft);position:relative;overflow:hidden}
.rv-bars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:#F59E0B;border-radius:99px}
.rv-bars em{font-style:normal;text-align:right}
.rv-it{padding:12px 14px;border-bottom:1px solid var(--line)}
.rv-it:last-child{border-bottom:0}
.rv-it.low{background:#FFF7F6}
.rv-ih{display:flex;justify-content:space-between;align-items:center}.rv-ih small{color:var(--muted);font-size:12px}
.rv-who{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
.rv-tg{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}.rv-tg span{font-size:11.5px;background:var(--soft);border-radius:99px;padding:3px 9px;color:var(--text)}
.rv-c{margin:6px 0 0;font-size:13.5px;color:var(--text)}
@media (max-width:420px){.rv-sum{grid-template-columns:1fr}}
.btn.rv-send{width:100%;margin:4px 0 10px;border-color:#FCD34D;background:#FFFBEB;color:#92400E}
/* aviso de sin conexión */
.net-bar{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:90;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 10px 16px;border-radius:14px;background:#1F2937;color:#fff;font-size:13.5px;font-weight:600;box-shadow:0 12px 30px -10px rgba(0,0,0,.5)}
.net-bar button{border:0;border-radius:10px;background:#fff;color:#111;font:inherit;font-weight:700;padding:8px 12px;cursor:pointer}
.net-empty{display:grid;justify-items:center;gap:6px}.net-empty p{margin:0;color:var(--muted)}
.pi-row{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:10px 0;border-bottom:1px solid var(--line)}
.pi-row small{grid-column:1/-1;color:var(--muted);font-size:12.5px}
.pi-log{white-space:pre-wrap;font-size:11px;background:var(--soft);padding:8px;border-radius:8px;max-height:200px;overflow:auto}

/* buzón */
.ib-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--red);color:#fff;font-size:11px;margin-left:4px}
.ib-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.ib-st{display:grid;justify-items:center;gap:2px;padding:12px 6px;border:1px solid var(--line);border-radius:14px;background:#fff;font:inherit;cursor:pointer}
.ib-st span{font-size:20px}.ib-st b{font-size:20px;color:var(--ink)}.ib-st small{font-size:11.5px;color:var(--muted);text-align:center}
.ib-st[aria-pressed="true"]{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.ib-it{padding:14px;border-bottom:1px solid var(--line)}.ib-it:last-child{border-bottom:0}
.ib-it.new{background:#F5F8FF}.ib-it.done{opacity:.6}
.ib-h{display:flex;justify-content:space-between;align-items:center;gap:8px}.ib-h small{color:var(--muted);font-size:12px}
.ib-t{margin:8px 0 4px;font-size:14px;color:var(--text);white-space:pre-wrap}
.ib-who{margin:0 0 8px;font-size:12.5px;color:var(--muted)}
.ib-a{display:flex;gap:8px;flex-wrap:wrap}
.pill.warn{background:#FFF4DE;color:#8A5A00}
.pi-ver{margin:4px 0 8px}.pi-ver summary{cursor:pointer;list-style:none;padding:4px 0}.pi-ver summary::-webkit-details-marker{display:none}
.pill.warn{background:#FEF3C7;color:#92400E}
.pi-tbl{font-size:12px;width:100%}.pi-tbl td,.pi-tbl th{padding:5px 6px;text-align:right;white-space:nowrap}.pi-tbl td:first-child,.pi-tbl th:first-child{text-align:left}
.pi-tbl tr.bad td{color:#B91C1C;font-weight:600}.pi-tbl tr.sub td{color:var(--muted);font-size:11px;text-align:left}
.btn.ai{background:linear-gradient(135deg,#7C3AED,#A855F7);color:#fff;border-color:transparent}.btn.ai svg{fill:currentColor;stroke:none}
.btn.full{width:100%;justify-content:center;margin:8px 0 4px}
.svcai-row{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}.svcai-row .thumb{grid-row:span 2}.svcai-row small{color:var(--muted);font-size:12px}

/* La hoja de abajo: lo de adentro se mueve, la página de atrás se queda quieta */
.sheet-b{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheet-b{grid-auto-rows:max-content;align-content:start}
body.sheet-lock{position:fixed;left:0;right:0;overflow:hidden}
/* ---------- Ver ganancias de (como Perceny) ---------- */
.per-h{align-items:flex-start;padding-bottom:10px;border-bottom:1px solid var(--line)}
.per-h>div{flex:1;min-width:0}.per-h h2{font-size:16px;margin:0}.per-h small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.per-b{gap:10px;padding-top:12px}
.per-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:0 18px 2px;-webkit-overflow-scrolling:touch}
.per-chips::-webkit-scrollbar{display:none}
.pchip{flex:none;border:1px solid var(--line);background:#fff;border-radius:99px;padding:8px 13px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;cursor:pointer}
.pchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.per-step{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;padding:3px;border:1px solid var(--line);border-radius:12px;background:#fff}
.per-step button{border:0;background:none;border-radius:9px;padding:8px 4px;font:inherit;font-size:11.5px;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap}
.per-step button.mid.on{background:var(--blue);color:#fff}
.per-step button:disabled{color:var(--faint);cursor:default}
.per-fld{display:flex;flex-direction:column;align-items:stretch;gap:4px;border:0;background:none;padding:0;text-align:left;font:inherit;cursor:pointer}
.per-fld small{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.per-fld span{border:1px solid var(--line-2);border-radius:10px;padding:11px 12px;font-size:14px;color:var(--ink);background:#fff}
.per-fld.on span{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.per-pickhint{margin:-2px 0 0;font-size:12px}
.per-b .rcal{border:0;padding:4px 0 0;margin:0}
.per-b .rcal-h .sq{width:30px;height:30px;border-radius:50%;font-size:16px}
.per-b .rcal-w,.per-b .rcal-g{gap:4px 0}
.per-b .rcal-w span{font-size:11px;font-weight:600}
.per-b .rcal-g button{aspect-ratio:auto;height:38px;max-height:none;width:38px;margin:0 auto;border-radius:50%;font-size:13px}
.per-b .rcal-g button.ot{color:var(--faint)}
.per-b .rcal-g button.in{background:#EEF0F4;border-radius:50%}
.per-b .rcal-g button.st{background:#10B981;color:#fff}
.per-b .rcal-g button.en{background:#EF4444;color:#fff}
.per-b .rcal-g button.td{box-shadow:none;font-weight:800;position:relative}
.per-b .rcal-g button.td::after{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.per-split small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.sheet-f.per-f{padding:12px 18px}.sheet-f.per-f .btn{flex:1;padding:13px;font-size:15px}
/* Resumen como Perceny: filas que se abren, caja por forma de pago, ganancia neta y total que se debe */
.sum-row.drill{width:100%;border-left:0;border-right:0;border-top:0;background:none;font:inherit;cursor:pointer;text-align:left}
.sum-row.drill b{display:inline-flex;align-items:center;gap:6px}
.sum-row.drill svg{width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2;transition:transform .15s}
.sum-row.drill[aria-expanded="true"] svg{transform:rotate(180deg)}
.drill-b{padding:2px 0 4px 12px;border-left:2px solid var(--line);margin:4px 0 6px}
.sum-row.sub{font-size:12.5px;padding:6px 0}.sum-row.sub span{font-weight:500;color:var(--muted)}
.sum-row.pm span{display:inline-flex;align-items:center;gap:8px}
.sum-row.pm svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sum-row.pm-card span,.sum-row.pm-card b{color:var(--blue)}
.sum-row.pm-cash span,.sum-row.pm-cash b{color:#059669}
.net-box{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 14px 10px;padding:16px;border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 18px -10px rgba(16,24,40,.25)}
.net-box span{font-size:14px;font-weight:600;color:var(--ink)}
.net-box b{font-size:24px;font-weight:800;color:#059669;font-variant-numeric:tabular-nums}
.btn.outline.ov-all{display:block;width:calc(100% - 28px);margin:0 14px 14px;background:#fff;border:1.5px solid var(--ink);color:var(--ink);font-weight:800;letter-spacing:.02em}
.due-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:10px 14px;padding:9px 12px;border:1px solid #A7F3D0;border-radius:12px;background:#ECFDF5;font-size:13px}
.due-top b{color:#059669}
.btn.ov-more{margin-top:4px;padding:9px 16px;font-size:13px}

/* Botón de IA que se puede arrastrar */
.ai-fab{touch-action:none;-webkit-user-select:none;user-select:none}
.ai-fab.drag{transform:scale(1.08);box-shadow:0 14px 30px -6px rgba(109,40,217,.55);transition:none}
.ai-fab.placed{right:auto;bottom:auto}
.bk-days{display:flex;flex-wrap:wrap;gap:6px}
/* Pantalla cargando (responde al instante al tocar el menú) */
.card.sk{background:linear-gradient(90deg,#EEF1F5 0%,#F7F9FB 40%,#EEF1F5 80%);background-size:200% 100%;animation:skm 1.1s linear infinite;border-color:transparent;box-shadow:none;margin-bottom:12px}
@keyframes skm{from{background-position:200% 0}to{background-position:-200% 0}}
.loading-row{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;margin:6px 0 12px}
.spin-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--blue);animation:spin .7s linear infinite}
/* "Viendo:" con la foto de cada barbero (como Perceny) */
.nav-wrap{position:relative;margin-bottom:12px}
.nav-btn{margin-bottom:0;cursor:pointer;font:inherit;font-size:13.5px;text-align:left}
.nav-btn b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.nav-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -12px rgba(16,24,40,.35);max-height:min(60vh,440px);overflow-y:auto;overscroll-behavior:contain;padding:6px 0}
.nav-opt{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:9px 14px;font:inherit;font-size:14px;color:var(--ink);text-align:left;cursor:pointer}
.nav-opt.on{background:#F1F4F9}
.nav-opt img,.nav-opt .av{width:36px;height:36px;border-radius:50%;flex:none;font-size:12px}
.nav-opt .av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.nav-opt b{font-weight:700}
.nav-sec{display:block;padding:10px 14px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted);border-top:1px solid var(--line);margin-top:4px}
/* Tickets anulados en rojo y anulaciones por aprobar */
.row.tk-void{background:#FEF2F2}.row.tk-void b,.row.tk-void .tm{color:#B91C1C}.row.tk-void .amt b{text-decoration:line-through}
.row.tk-pend{background:#FFFBEB}
.stat.bad b,.stat.bad small{color:#B91C1C}
.sum-row.bad span,.sum-row.bad b{color:#DC2626}
.void-box{border:1px solid #FECACA;background:#FEF2F2;color:#991B1B;border-radius:12px;padding:10px 12px;font-size:13px}
.void-box.pend{border-color:#FDE68A;background:#FFFBEB;color:#92400E}.void-box .btns{margin-top:8px}
.vr-card{border-color:#FDE68A;background:#FFFBEB;margin-bottom:12px}
.vr-h{padding:12px 14px 6px;font-size:14px;color:#92400E}
.vr-row{display:flex;align-items:center;gap:8px;padding:8px 14px;border-top:1px solid #FDE68A}
.vr-row .grow{flex:1;min-width:0}.vr-row small{display:block;color:var(--muted);font-size:12px}
/* Lista de clientes */
.cl-sort{padding:0 14px 8px;display:flex;flex-wrap:wrap;gap:6px}
.cl-row .av{width:36px;height:36px;font-size:12px;flex:none}
.cl-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px}.cl-nav small{color:var(--muted)}
/* membresías */
.mb-ck{display:flex;align-items:center;gap:10px;margin-top:8px;padding:10px 12px;border-radius:12px;background:#F5F0FF;border:1px solid #DDD0FB}
.mb-ck.on{background:#ECFDF3;border-color:#A6E9C1}
.mb-ck b{display:block;font-size:13.5px;color:var(--ink)}
.mb-ck small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.mb-ck .btn{flex:none}
.pl-svcs{max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:2px 10px}
.row .grow>b>.pill{font-size:11px;padding:2px 8px;line-height:1.3;vertical-align:1px;margin-left:4px}
.pr-ck{background:#FFF7ED;border-color:#FED7AA}.pr-ck.used{background:#F3F4F6;border-color:#E5E7EB}
/* fila del quiosco */
.q-card .card-h h2{display:flex;align-items:center;gap:8px}
.q-called{background:#ECFDF3}
.q-row .sel.sm{margin-top:6px;max-width:240px;padding:6px 8px;font-size:13px}
.k-link{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.k-link .grow{flex:1;min-width:0}.k-link .btn{flex:none}.k-link+.k-link+.link{white-space:normal;text-align:left;margin-top:8px}
.k-link b{display:block;font-size:14px;color:var(--ink)}
.k-link small{display:block;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-how p{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:var(--ink)}
.k-link{min-width:0;max-width:100%}.sheet-b>.link{white-space:normal;text-align:left;min-width:0}
/* citas en verde (como pidió el dueño); "no vino" sigue en gris */
.g-col .appt{--c:#16A34A;background:#16A34A}
.g-col .appt.st-no_show{background:#9CA3AF}
.appt .paid.ok{background:#fff;color:#15803D}
.cal-flt{display:flex;align-items:center;gap:10px;padding:6px 12px 8px}.cal-flt small{color:var(--muted);font-size:12px}.chip.sm{padding:6px 10px;font-size:12.5px}
.cal-flt{background:#fff;border-bottom:1px solid var(--line)}
.k-qrs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.k-qr{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border:1px solid var(--line);border-radius:14px;background:#fff;text-align:center}
.k-qr .q{width:100%;max-width:150px;aspect-ratio:1}
.k-qr .q svg,.k-big .q svg{width:100%;height:100%;display:block}
.k-qr b{font-size:13.5px;color:var(--ink)}
.k-qr small{font-size:11.5px;color:var(--muted)}
.k-big .q{width:min(320px,80vw);aspect-ratio:1;margin:4px auto 10px;padding:10px;background:#fff;border-radius:14px;border:1px solid var(--line)}
.k-steps{margin:0 0 8px;padding-left:20px;font-size:14px;line-height:1.55;color:var(--ink)}
.k-qr .q svg,.k-qr .q svg *,.k-big .q svg,.k-big .q svg *{stroke:none!important}.k-qr .q svg path,.k-big .q svg path{fill:#000!important}.k-qr .q svg rect,.k-big .q svg rect{fill:#fff!important}
/* todas las barberías juntas */
.biz-h{margin:6px 10px 2px;font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.biz-all{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;background:#EEE8FD;color:#5B21B6;font-weight:800;font-size:13px}
.biz{position:relative}
.biz-tag{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);padding:1px 7px;border-radius:99px;background:#5B21B6;color:#fff;font:700 10px/1.4 inherit;font-style:normal;white-space:nowrap}
.grp-pick b{color:var(--ink)}

/* ⏱ Tiempo con el cliente */
.ses-card{padding:12px 14px}
.ses-card.on{border:1px solid rgba(34,197,94,.45);background:linear-gradient(180deg,rgba(34,197,94,.08),transparent)}
.ses-start{width:100%}
.ses-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.ses-h small{color:var(--muted);font-size:12px}
.ses-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line)}
.ses-row .grow{flex:1;display:flex;flex-direction:column;min-width:0}
.ses-row small{color:var(--muted);font-size:12px}
.ses-run{display:flex;align-items:center;gap:10px}
.ses-run .grow{flex:1;display:flex;flex-direction:column;min-width:0}
.ses-run small{color:var(--muted);font-size:12px}
.ses-run b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ses-dot{width:10px;height:10px;border-radius:50%;background:#22C55E;flex:none;animation:sesP 1.4s infinite}
@keyframes sesP{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.ses-t{font-variant-numeric:tabular-nums;font-weight:800;font-size:14px}
.ses-t.ses-big{flex:none;font-size:24px;letter-spacing:.5px}
.ses-btns{display:flex;gap:8px;margin-top:10px}
.ses-btns .btn.big{flex:1}
.ses-opt{width:100%;text-align:left;margin-bottom:6px}
.ses-opt .grow{flex:1;display:flex;flex-direction:column;min-width:0}
.ses-opt small{color:var(--muted);font-size:12px}
.t-sub{margin:-2px 14px 8px!important;font-size:11.5px}

/* ⏱ Reloj del barbero */
.clk-pg{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:14px}
.clk-who{display:flex;gap:6px;overflow-x:auto;max-width:100%;padding:2px 2px 6px;scrollbar-width:none;align-self:stretch}
.clk-who::-webkit-scrollbar{display:none}
.clk-who .chip{flex:none;display:flex;align-items:center;gap:6px;font-size:13px;padding:7px 11px}
.clk-bd{width:8px;height:8px;border-radius:50%;background:#EF4444;display:inline-block}
.clk-name{margin:2px 0 0;font-size:15px;font-weight:700;color:var(--ink)}
.clk{position:relative;width:min(82vw,330px);aspect-ratio:1;border:0;padding:0;background:none;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.clk:active{transform:scale(.97)}
.clk svg{width:100%;height:100%;display:block;filter:drop-shadow(0 14px 30px rgba(20,40,110,.35))}
.clk .face{fill:#13235B}
.clk.run .face{fill:#0F2A1D}
.clk .ticks line{stroke:rgba(255,255,255,.28);stroke-width:1.4;stroke-linecap:round}
.clk .ticks line.h{stroke:rgba(255,255,255,.7);stroke-width:3}
.clk .trk{fill:none;stroke:rgba(255,255,255,.1);stroke-width:12}
.clk .arc{fill:none;stroke:#22C55E;stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.clk-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:4px;pointer-events:none}
.clk-in small{font-size:13px;opacity:.75;font-weight:600}
.clk-in .clk-big{font-size:clamp(40px,13vw,56px);font-weight:800;letter-spacing:.5px;font-variant-numeric:tabular-nums;line-height:1.05}
.clk-in em{font-style:normal;font-size:13px;font-weight:700;padding:5px 12px;border-radius:99px;background:rgba(255,255,255,.14);margin-top:6px}
.clk.run .clk-in em{background:rgba(239,68,68,.9)}
.clk:not(.run) .clk-in em{background:#2563EB;animation:clkP 2s infinite}
@keyframes clkP{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.6)}60%{box-shadow:0 0 0 10px rgba(37,99,235,0)}}
.clk-x{border:0;background:none;color:var(--muted);font-size:12.5px;text-decoration:underline;padding:4px}
.clk-done{align-self:stretch;padding:14px;text-align:center}
.clk-done b{font-size:16px;color:var(--green)}
.clk-done .btns{display:flex;gap:8px;margin-top:10px}
.clk-done .btns .btn{flex:1}
.clk-stats{display:flex;gap:10px;align-self:stretch}
.clk-stats>div{flex:1;background:var(--card,#fff);border:1px solid var(--line);border-radius:14px;padding:10px;text-align:center}
.clk-stats b{display:block;font-size:20px;color:var(--ink)}
.clk-stats small{color:var(--muted);font-size:12px}
.clk-pg .ses-card{align-self:stretch}

.clk-tk{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 12px;background:transparent!important;border:0!important;box-shadow:none!important}
.clk.sm{width:min(66vw,250px)}
.clk.sm .clk-in .clk-big{font-size:clamp(34px,11vw,46px)}
.clk-tk .clk-done{margin-top:4px}

.stat.lf{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;position:relative}
.stat.lf::after{content:"›";position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--faint)}
.stat.lf[aria-pressed="true"]{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.lf-bar{display:flex;align-items:center;justify-content:space-between;margin:0 2px 8px;font-size:13.5px;color:var(--muted)}
.lf-bar b{color:var(--ink)}
.lf-by{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}

/* 📷 Escanear membresía + tarjeta */
.sc-cam{position:relative;overflow:hidden;background:#000;aspect-ratio:3/4;max-height:62vh;border:0}
.sc-cam video{width:100%;height:100%;object-fit:cover;display:block}
.sc-frame{position:absolute;inset:18% 14%;border:3px solid rgba(255,255,255,.9);border-radius:22px;box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.sc-msg{position:absolute;left:0;right:0;bottom:10px;margin:0;text-align:center;color:#fff;font-weight:700;font-size:14px;text-shadow:0 1px 4px rgba(0,0,0,.7);padding:0 14px}
.mcard{--t1:#3A3F4B;--t2:#15171C;--tc:#E5E7EB;position:relative;border-radius:20px;padding:18px;margin-bottom:12px;color:#fff;background:linear-gradient(135deg,var(--t1),var(--t2));box-shadow:0 18px 40px -18px rgba(0,0,0,.7);display:grid;gap:14px;overflow:hidden}
.mcard::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%)}
.mcard.t-silver{--t1:#9CA3AF;--t2:#4B5563;--tc:#F3F4F6}
.mcard.t-gold{--t1:#D4A94C;--t2:#7A5A1C;--tc:#FFF4D6}
.mcard.t-platinum{--t1:#4B5563;--t2:#0B0D12;--tc:#E0E7FF}
.mc-top{display:flex;justify-content:space-between;align-items:center;font-weight:800;letter-spacing:.12em;font-size:12px}
.mc-tier{padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.18);color:var(--tc);letter-spacing:.08em}
.mc-who{display:flex;align-items:center;gap:12px}
.mc-who img,.mc-av{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.7);flex:none}
.mc-av{display:grid;place-items:center;background:rgba(255,255,255,.15);font-weight:800;font-size:20px}
.mc-who b{display:block;font-size:19px;color:#fff}
.mc-who small{font-family:ui-monospace,Menlo,monospace;opacity:.85;font-size:12.5px;letter-spacing:.06em}
.mcard .pill{justify-self:start}
.mc-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px}
.mc-nums div{background:var(--soft);border-radius:12px;padding:10px 6px;text-align:center}
.mc-nums b{display:block;font-size:22px;color:var(--ink)}
.mc-nums small{color:var(--muted);font-size:11.5px}
.mc-nums .zero b{color:var(--red)}
.sc-ph{display:flex;margin:8px 0;width:100%}
.paid-ok-line{margin:0 0 10px;color:var(--green);font-weight:700;text-align:center}
.tierdot{width:12px;height:12px;border-radius:50%;flex:none;background:#6B7280;display:inline-block}
.tierdot.t-silver{background:linear-gradient(135deg,#E5E7EB,#9CA3AF)}
.tierdot.t-gold{background:linear-gradient(135deg,#F5D27A,#B8862B)}
.tierdot.t-platinum{background:linear-gradient(135deg,#A5B4FC,#1F2937)}
.tierchip{display:inline-flex;align-items:center;gap:6px}
.mb-f{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none}
.mb-f .chip{flex:none;font-size:13px;padding:7px 11px}
.mb-row .grow small+small{margin-top:1px}

.drawer-logo img{height:auto;width:150px}
.login-logo.cz{width:200px;height:auto;border-radius:0;box-shadow:none;background:none}
/* Reloj · estilo A (minimal claro): círculo blanco, línea dorada que avanza, números negros y botón abajo */
.clk svg{filter:drop-shadow(0 12px 28px rgba(16,24,40,.16))}
.clk .face,.clk.run .face{fill:#fff;stroke:none}
.clk .trk{fill:none;stroke:#EFEDE8;stroke-width:10}
.clk .arc{stroke:#B88A2E;stroke-width:10}
.clk-in{color:#111;gap:0}
.clk-in .clk-big{font-size:clamp(46px,14vw,62px);font-weight:800;letter-spacing:-.02em;color:#111}
.clk.sm .clk-in .clk-big{font-size:clamp(38px,12vw,50px)}
.clk-in small{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9CA3AF;opacity:1}
.clk-act{width:min(82vw,330px);padding:15px;border:0;border-radius:14px;background:#111;color:#fff;font:inherit;font-weight:800;font-size:16px;cursor:pointer}
.clk.sm+.clk-act,.clk-tk .clk-act{width:min(66vw,250px)}
.clk-act.stop{background:#111}
.clk-act:active{transform:scale(.98)}

/* Marca Cutzen (logo nuevo: Z blanca en azul marino) */
.cz-brand{display:inline-flex;align-items:center;gap:12px}
.cz-brand img{width:46px;height:46px;border-radius:12px;display:block}
.cz-brand b{font-size:21px;font-weight:800;letter-spacing:.2em;color:#04132F}
.cz-brand.big{flex-direction:column;gap:12px;margin-bottom:6px}
.cz-brand.big img{width:84px;height:84px;border-radius:20px;box-shadow:0 12px 28px -12px rgba(4,19,47,.55)}
.cz-brand.big b{font-size:24px}
html.dk .cz-brand b{color:#F3F4F6}

.vz-step{display:grid;gap:6px;padding:12px 0;border-top:1px solid var(--line)}
.vz-step>b{font-size:15px}
.vz-step ol{margin:0;padding-left:20px;display:grid;gap:8px;font-size:14px;color:var(--text)}
.vz-step code{display:block;word-break:break-all;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:9px 10px;font:600 13px ui-monospace,Menlo,monospace;margin:4px 0}
.vz-step .btn.sm{justify-self:start;margin-bottom:4px}
.q-take{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;background:transparent}
.q-take:active{background:var(--soft)}
.q-wait{opacity:.6}
.q-lock{font-size:11px;font-weight:600;color:var(--muted,#6b7280);background:var(--soft,#f3f4f6);border-radius:999px;padding:4px 9px;white-space:nowrap}
.q-go{font-weight:700;color:var(--blue);font-size:13.5px;white-space:nowrap}
.q-pick{width:100%;margin-bottom:8px;justify-content:center}

.as-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 12px;background:#04132F;color:#fff;font-size:13px}.as-bar .btn{background:#fff;color:#04132F;border:0}
/* ----- barra de botones abajo (teléfono) ----- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line,#E5E7EB);box-shadow:0 -6px 20px -14px rgba(4,19,47,.35)}
.tabbar[hidden]{display:none}
.tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 2px;border:0;background:none;font:inherit;font-size:10.5px;font-weight:600;color:#6B7280;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tabbar button[hidden]{display:none}
.tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabbar button[aria-current="page"]{color:#04132F}
.tabbar button[aria-current="page"] svg{stroke-width:2.3}
.tabbar .tab-pay i{display:grid;place-items:center;width:46px;height:46px;margin-top:-20px;border-radius:50%;background:#16A34A;box-shadow:0 8px 18px -8px rgba(22,163,74,.8);border:3px solid #fff}
.tabbar .tab-pay svg{stroke:#fff;width:22px;height:22px}
.tabbar .tab-pay{color:#15803D}
body.has-tabbar main{padding-bottom:84px}
body.has-tabbar .ai-fab{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
body.has-tabbar .cal-bar{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
body.has-tabbar .toast,body.has-tabbar .net-bar{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
@media (min-width:1000px){.tabbar{display:none!important}body.has-tabbar main{padding-bottom:0}}
/* ----- usuario y contraseña ----- */
.lu-form{display:grid;gap:12px;width:100%;max-width:340px;margin:8px auto 4px;text-align:left}
.lu-form .btn{width:100%}
.pw-wrap{position:relative;display:block}
.pw-wrap .inp{width:100%;padding-right:42px}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:none;font-size:16px;padding:6px 8px;cursor:pointer;opacity:.7}
.warn-box{margin:4px 0;padding:10px 12px;border-radius:12px;background:#FFF7E6;color:#8A5A00;font-size:12.5px;line-height:1.4}
.cred-box{margin:6px 0 12px;padding:12px;border-radius:14px;background:var(--soft,#F3F4F6)}
.cred{display:grid;grid-template-columns:1fr 1.3fr;gap:12px;align-items:center}
.cred small{display:block;font-size:11px;color:#6B7280;margin-bottom:3px}
.cred b{font-size:14px}
.cred-edit{margin-top:10px}.cred-edit summary{cursor:pointer;font-size:13px;font-weight:600;color:#2563EB}
.cred-edit .two{margin-top:8px}
.cred-list{display:grid;gap:8px}
.cred-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--soft,#F3F4F6)}
.cred-row .grow{flex:1;min-width:0}.cred-row small{display:block;font-size:12px;color:#6B7280}
.cred-row .pw-wrap{width:130px}
.btn.apple{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#000;color:#fff;border-color:#000;text-decoration:none}
.btn.apple svg{width:18px;height:18px;fill:#fff;stroke:none}
.login .btn.apple{width:100%;max-width:340px;margin:0 auto 6px}
.login .or{display:flex;align-items:center;gap:10px;width:100%;max-width:340px;margin:6px auto;color:#9CA3AF;font-size:12px}.login .or::before,.login .or::after{content:'';flex:1;height:1px;background:#E5E7EB}
.ca-prog{padding:14px 16px}.ca-prog b{font-size:14px}
.ca-bar{height:8px;border-radius:9px;background:var(--soft,#F3F4F6);overflow:hidden;margin-bottom:8px}.ca-bar i{display:block;height:100%;background:#16A34A;border-radius:9px}
.ca-logo{display:flex;align-items:center;gap:14px;margin-bottom:12px}.ca-logo small{display:block;margin:2px 0 8px}
.ca-ic{flex:none;width:76px;height:76px;border-radius:18px;overflow:hidden;display:grid;place-items:center;font-size:30px;box-shadow:0 6px 16px -8px rgba(0,0,0,.4)}.ca-ic img{width:100%;height:100%;object-fit:cover}
.plan-bar{position:sticky;top:0;z-index:61;display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 12px;background:#B45309;color:#fff;font-size:13px}.plan-bar .btn{background:#fff;color:#B45309;border:0}
.plan-card{padding:16px}.plan-top{display:flex;align-items:center;justify-content:space-between}.plan-top small{display:block;font-size:11px;color:#6B7280;letter-spacing:.08em}.plan-top b{font-size:18px}
.plan-price{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.plan-price>div{padding:12px;border-radius:12px;background:var(--soft,#F3F4F6)}.plan-price small{display:block;font-size:11.5px;color:#6B7280}.plan-price b{font-size:20px}.plan-price b span{font-size:12px;color:#6B7280;font-weight:600}
.plan-inc{margin:0 0 14px;padding-left:18px;font-size:13.5px;line-height:1.7}
.plan-card .btn.big{width:100%;margin-bottom:8px}
.tab-card .tab-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.tab-acts{flex-basis:100%;display:flex;justify-content:flex-end;gap:6px}
.tab-row .grow{flex:1;min-width:0}
.tab-no{flex:none;min-width:44px;font-weight:900;font-size:17px;color:#04132F}
.tab-tot{white-space:nowrap}
.tab-svcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-bottom:14px}
.tab-svc{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px;border-radius:12px;border:1.5px solid var(--line,#E5E7EB);background:#fff;font:inherit;text-align:left;cursor:pointer}
.tab-svc small{color:#6B7280}
.tab-svc[aria-pressed="true"]{border-color:#04132F;background:#EEF2FF;box-shadow:inset 0 0 0 1px #04132F}
.clk-done .btns{flex-wrap:wrap}.clk-done .btns .btn[data-clktab]{flex:1 1 100%}
.prn-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}.prn-row .grow{flex:1;min-width:0}
.prn-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#D1D5DB}.prn-dot.on{background:#16A34A}
.prn-new{padding:16px;border:2px solid #16A34A}
.prn-new h2{font-size:16px;margin:0 0 4px}
.prn-url{display:flex;gap:8px;align-items:center;margin:8px 0}
.prn-url code{flex:1;min-width:0;overflow-wrap:anywhere;font-size:12px;padding:10px;border-radius:10px;background:var(--soft,#F3F4F6)}
.prn-steps{margin:10px 0 0;padding-left:20px;font-size:13.5px;line-height:1.6}
.plan-pick{display:grid;gap:10px;margin:12px 0}
.plan-opt{display:grid;gap:2px;text-align:left;padding:14px;border-radius:14px;border:1.5px solid var(--line,#E5E7EB);background:#fff;font:inherit;cursor:pointer}
.plan-opt b{font-size:15px}.plan-opt span{font-weight:800;font-size:18px;color:#04132F}.plan-opt small{color:#6B7280;font-size:12.5px}
.plan-opt[aria-pressed="true"]{border-color:#04132F;background:#EEF2FF;box-shadow:inset 0 0 0 1px #04132F}
.plan-name{margin:10px 0 0;font-weight:800}
/* ===== Tema oscuro (generado). Se quita borrando la clase "dk" del <html>. ===== */
html.dk{color-scheme:dark;--bg:#0B0D12;--card:#14171E;--soft:#1B1F28;--line:#242833;--line-2:#303541;--ink:#F3F4F6;--text:#E5E7EB;--muted:#9CA3AF;--faint:#6B7280;--blue-soft:rgba(37,99,235,.18);--shadow:0 1px 0 rgba(255,255,255,.03),0 6px 18px -10px rgba(0,0,0,.8)}
html.dk .btn.primary,html.dk .btn.dark,html.dk .pad .ok,html.dk .steps span.on,html.dk .pchip.on{background:var(--blue);border-color:var(--blue);color:#fff}
html.dk .tb-avatar,html.dk .av.owner{background:#2A2F3B;color:#fff}
html.dk .pin-dots i.on{background:#fff}
html.dk .tipb[aria-pressed="true"]{background:rgba(37,99,235,.16);border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
html.dk .seg button[aria-selected="true"],html.dk .chip[aria-pressed="true"]{background:var(--blue);color:#fff;border-color:var(--blue)}
html.dk .g-grid,html.dk .g-col{background-color:#11141A!important;background-image:repeating-linear-gradient(to bottom,#1D212A 0 1px,transparent 1px 24px)!important}
html.dk .g-off{background:repeating-linear-gradient(135deg,#1A1D24 0 6px,#20242C 6px 8px)}
html.dk .blk{background:repeating-linear-gradient(135deg,#2B303B 0 6px,#232731 6px 9px)}
html.dk .appt.test::after{background:rgba(0,0,0,.55);color:#FCD34D}
html.dk .appt .paid{box-shadow:0 0 0 2px #14171E}
html.dk .tb,html.dk .cal-bar{background:rgba(14,16,22,.92)!important;border-color:var(--line)!important}
html.dk .drawer,html.dk .sheet,html.dk .me-menu,html.dk .biz-list,html.dk .nav-menu,html.dk .ex-menu{background:var(--card);color:var(--text)}
html.dk .sheet-bg,html.dk .drawer-bg{background:rgba(0,0,0,.6)}
html.dk .drawer-logo img{filter:none}
html.dk .toast{background:#F3F4F6;color:#0B0D12}
html.dk input::placeholder,html.dk textarea::placeholder{color:#6B7280}
html.dk select option{background:#14171E;color:#E5E7EB}
html.dk .net-bar button{background:#F3F4F6;color:#0B0D12}
:where(html.dk) .tb{background:var(--card)}
:where(html.dk) .biz{background:var(--card)}
:where(html.dk) .biz-list{background:var(--card)}
:where(html.dk) .test-bar{background:rgba(245,158,11,.13);color:#FCD34D;border-bottom:1px solid var(--line-2)}
:where(html.dk) .drawer{background:var(--soft)}
:where(html.dk) .nav-as{background:var(--card)}
:where(html.dk) .earn b{color:var(--text)}
:where(html.dk) .week{background:var(--card)}
:where(html.dk) .grid{background:var(--soft)}
:where(html.dk) .g-corner,:where(html.dk) .g-head{background:var(--card)}
:where(html.dk) .g-times{background:var(--card)}
:where(html.dk) .g-cols{background-color:var(--soft)}
:where(html.dk) .appt.test::after{background:rgba(20,23,30,.9);color:#FCD34D}
:where(html.dk) .cal-bar{background:rgba(20,23,30,.9)}
:where(html.dk) .row{background:var(--card)}
:where(html.dk) .pill.ok{background:rgba(34,197,94,.13);color:#4ADE80}
:where(html.dk) .pill.bad{background:rgba(239,68,68,.13);color:#F87171}
:where(html.dk) .pill.warn{background:rgba(245,158,11,.13);color:#FCD34D}
:where(html.dk) .stat{background:var(--card)}
:where(html.dk) .inp,:where(html.dk) .sel{background:var(--card)}
:where(html.dk) .btn{background:var(--card)}
:where(html.dk) .sheet{background:var(--card)}
:where(html.dk) .chip{background:var(--card)}
:where(html.dk) .sel-h{background:var(--card)}
:where(html.dk) .sheet-f{background:var(--card)}
:where(html.dk) .seg button[aria-selected="true"]{background:var(--card)}
:where(html.dk) .it:active{background:rgba(37,99,235,.16)}
:where(html.dk) .step button{background:var(--card)}
:where(html.dk) .warn{background:rgba(245,158,11,.13);color:#FCD34D}
:where(html.dk) .kind{background:var(--card)}
:where(html.dk) .paym{background:var(--card)}
:where(html.dk) .paym[aria-pressed="true"]{background:rgba(34,197,94,.13)}
:where(html.dk) .tk-today .ic{background:rgba(34,197,94,.13)}
:where(html.dk) .n-bar{background:var(--card)}
:where(html.dk) .sq{background:var(--card)}
:where(html.dk) .n-card{background:var(--card)}
:where(html.dk) .n-card.new{border-color:var(--line-2)}
:where(html.dk) .l-staff button{background:var(--card)}
:where(html.dk) .pad button{background:var(--card)}
:where(html.dk) .tbl th{background:var(--soft)}
:where(html.dk) .tile{background:var(--card)}
:where(html.dk) .lang-opt{background:var(--card)}
:where(html.dk) .menu-opt{background:var(--card)}
:where(html.dk) .ov-big b{color:var(--text)}
:where(html.dk) .balance{background:var(--card)}
:where(html.dk) .qc{background:var(--card)}
:where(html.dk) .bal-tot{background:rgba(34,197,94,.13)}
:where(html.dk) .tip{background:var(--card)}
:where(html.dk) .msg-prev small{color:#4ADE80}
:where(html.dk) .pill.st-arrived{background:rgba(109,74,255,.18)}
:where(html.dk) .pill.st-completed{background:rgba(34,197,94,.13);color:#4ADE80}
:where(html.dk) .pill.st-cancelled{background:rgba(239,68,68,.13);color:#F87171}
:where(html.dk) .pill.st-no_show{background:rgba(245,158,11,.13);color:#FCD34D}
:where(html.dk) .pay.p-ok{color:#4ADE80}
:where(html.dk) .pay.p-warn{color:#FCD34D}
:where(html.dk) .n-card.link:hover{border-color:var(--line-2)}
:where(html.dk) .tk-direct{border:1px solid var(--line-2)}
:where(html.dk) .bad-t{color:#F87171}
:where(html.dk) .po-c{background:var(--card)}
:where(html.dk) .po-c.main{border-color:var(--line-2)}
:where(html.dk) .tipb[aria-pressed="true"]{background:var(--card)}
:where(html.dk) .adp{background:var(--card)}
:where(html.dk) .ptr{background:var(--card)}
:where(html.dk) b.void{color:#F87171}
:where(html.dk) .sum-row.ok-t span,:where(html.dk) .sum-row.ok-t b{color:#4ADE80}
:where(html.dk) .per-opt{background:var(--card)}
:where(html.dk) .per-opt[aria-pressed="true"]{background:rgba(34,197,94,.13)}
:where(html.dk) .rcal-h .sq{background:var(--card)}
:where(html.dk) .tk-tr{background:var(--card)}
:where(html.dk) .tk-diff{background:var(--card)}
:where(html.dk) .tk-diff.neg{border-color:var(--line-2);background:rgba(239,68,68,.13)}
:where(html.dk) .tk-diff.pos{background:rgba(34,197,94,.13)}
:where(html.dk) .me-menu{background:var(--card)}
:where(html.dk) .ex-menu{background:var(--card)}
:where(html.dk) .rv-it.low{background:rgba(239,68,68,.13)}
:where(html.dk) .btn.rv-send{background:rgba(245,158,11,.13);color:#FCD34D}
:where(html.dk) .net-bar button{background:var(--card);color:var(--text)}
:where(html.dk) .ib-st{background:var(--card)}
:where(html.dk) .ib-it.new{background:rgba(37,99,235,.16)}
:where(html.dk) .pill.warn{background:rgba(245,158,11,.13);color:#FCD34D}
:where(html.dk) .pill.warn{background:rgba(245,158,11,.13);color:#FCD34D}
:where(html.dk) .pi-tbl tr.bad td{color:#F87171}
:where(html.dk) .pchip{background:var(--card)}
:where(html.dk) .per-step{background:var(--card)}
:where(html.dk) .per-fld span{background:var(--card)}
:where(html.dk) .per-b .rcal-g button.in{background:var(--soft)}
:where(html.dk) .btn.outline.ov-all{background:var(--card)}
:where(html.dk) .nav-menu{background:var(--card)}
:where(html.dk) .nav-opt.on{background:var(--soft)}
:where(html.dk) .row.tk-void{background:rgba(239,68,68,.13)}
:where(html.dk) .row.tk-void b,:where(html.dk) .row.tk-void .tm{color:#F87171}
:where(html.dk) .row.tk-pend{background:rgba(245,158,11,.13)}
:where(html.dk) .stat.bad b,:where(html.dk) .stat.bad small{color:#F87171}
:where(html.dk) .void-box{border:1px solid var(--line-2);background:rgba(239,68,68,.13);color:#F87171}
:where(html.dk) .void-box.pend{border-color:var(--line-2);background:rgba(245,158,11,.13);color:#FCD34D}
:where(html.dk) .vr-card{border-color:var(--line-2);background:rgba(245,158,11,.13)}
:where(html.dk) .vr-h{color:#FCD34D}
:where(html.dk) .vr-row{border-top:1px solid var(--line-2)}
:where(html.dk) .mb-ck{background:rgba(109,74,255,.18)}
:where(html.dk) .mb-ck.on{background:rgba(34,197,94,.13);border-color:var(--line-2)}
:where(html.dk) .pr-ck{background:rgba(245,158,11,.13);border-color:var(--line-2)}
:where(html.dk) .pr-ck.used{background:var(--soft);border-color:var(--line-2)}
:where(html.dk) .q-called{background:rgba(34,197,94,.13)}
:where(html.dk) .cal-flt{background:var(--card)}
:where(html.dk) .biz-all{background:rgba(109,74,255,.18);color:#C4B5FD}