/* Estilos del área negocio (datos reales): WhatsApp, Reservas y Pendientes. */

/* ---------- Piezas compartidas ---------- */
.ng-sk{display:block;height:11px;border-radius:7px;background:linear-gradient(90deg,var(--sunken) 0%,color-mix(in srgb,var(--sunken) 55%,var(--surface)) 50%,var(--sunken) 100%);background-size:200% 100%;animation:ngShimmer 1.3s ease-in-out infinite}
@keyframes ngShimmer{from{background-position:100% 0}to{background-position:-100% 0}}
.ng-sk.sq{width:44px;height:44px;border-radius:12px;flex:none}
.ng-sk.circ{width:22px;height:22px;border-radius:50%;flex:none}
.ng-skel-list{display:grid;gap:4px}
.ng-skel-row{display:flex;align-items:center;gap:14px;padding:12px 0}
.ng-skel-lines{flex:1;display:grid;gap:8px}
.ng-empty,.ng-error{display:grid;justify-items:center;gap:6px;padding:36px 20px;text-align:center;color:var(--ink-3)}
.ng-empty b,.ng-error b{color:var(--ink);font:600 15.5px var(--display);letter-spacing:-.01em}
.ng-empty small,.ng-error small{font-size:13px;max-width:380px;line-height:1.5}
.ng-empty.sm{padding:28px 16px}
.ng-empty-ico{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;background:var(--accent-wash);color:var(--accent);margin-bottom:6px}
.ng-empty-ico svg{width:24px;height:24px}
.ng-empty-ico.good{background:var(--good-wash);color:var(--good)}
.ng-error .ng-empty-ico{background:var(--bad-wash);color:var(--bad)}
.ng-error .btn{margin-top:8px}
.ng-empty .btn,.ng-error .btn{color:var(--ink)}
.tc-pill{font:600 11.5px/1 var(--body);background:var(--accent-wash);color:var(--accent);padding:4px 8px;border-radius:9px}
.tc-pill.muted{background:var(--sunken);color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.ng-sk{animation:none}}

/* ---------- WhatsApp ---------- */
.wa-real{grid-template-columns:340px minmax(0,1fr) 0;position:relative;transition:grid-template-columns .28s var(--ease-out)}
.wa-real.show-info{grid-template-columns:340px minmax(0,1fr) 300px}
.wa-search{position:relative}
.wa-search input{flex:1;min-width:0}
.wa-clear{width:22px;height:22px;border-radius:50%;border:0;background:var(--sunken);color:var(--ink-3);display:grid;place-items:center;padding:0;flex:none}
.wa-clear svg{width:12px;height:12px}
.wa-clear[hidden]{display:none}
.wa-real .chip.warn .cc{background:var(--warn-wash);color:var(--warn)}
.wa-real .chip.warn[aria-pressed="true"]{background:var(--warn);border-color:var(--warn);color:#fff}
.wa-real .chip.warn[aria-pressed="true"] .cc{background:rgba(255,255,255,.25);color:#fff}
.wa-av{--av:var(--accent);width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;font:650 15px var(--display);color:var(--av);background:color-mix(in srgb,var(--av) 14%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--av) 18%,transparent)}
.wa-av.lg{width:68px;height:68px;font-size:24px}
.wa-conv-head .wa-av{width:40px;height:40px;font-size:14px}
.wa-real .wa-item{align-items:center;padding:10px;transition:background-color .15s ease}
.wa-real .wa-top small{font-variant-numeric:tabular-nums}
.wa-real .wa-item.unread .wa-top small{color:var(--accent)}
.wa-tick{display:inline-grid;color:var(--accent);flex:none}
.wa-tick svg{width:14px;height:14px}
.wa-count{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:#fff;font:650 11px/20px var(--body);text-align:center;flex:none}
.wa-wdot{width:9px;height:9px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 3px var(--warn-wash);flex:none;margin-right:4px}
.wa-skel{pointer-events:none}
.wa-skel .wa-mid{gap:8px}
.wa-who{min-width:0}
.wa-who b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-state{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:550}
.wa-state i{width:7px;height:7px;border-radius:50%;background:currentColor}
.wa-state.good{color:var(--good)} .wa-state.warn{color:var(--warn)}
.wa-bot-btn svg{width:15px;height:15px}
.wa-bot-btn.warn{background:var(--warn-wash);border-color:transparent;color:var(--warn)}
.wa-bot-btn.full{width:100%}
.wa-conv-head [aria-pressed="true"]{background:var(--accent-wash);color:var(--accent)}
.wa-real .bubble small{display:inline-flex;align-items:center;gap:3px}
.wa-real .bubble small svg{width:12px;height:12px}
.bubble.wa-in{animation:waIn .38s var(--ease-out) both}
.bubble.me.wa-in{transform-origin:100% 100%}
.bubble.them.wa-in{transform-origin:0 100%}
@keyframes waIn{from{opacity:0;transform:translateY(8px) scale(.96)}}
.wa-thread-skel{display:flex;flex-direction:column;gap:12px;padding-top:12px}
.wa-thread-skel .ng-sk{height:36px;border-radius:14px;max-width:280px}
.wa-thread-skel .me{align-self:flex-end}
.wa-compose-wrap{background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.wa-compose-wrap .wa-compose{padding:12px 16px}
.wa-compose textarea:disabled{opacity:.6}
.wa-compose .btn.busy svg{animation:spin 1s linear infinite}
.wa-send-err{margin:-4px 16px 10px;color:var(--bad);font-size:12.5px;font-weight:550}
.wa-send-err:empty{display:none}
.wa-info{min-width:0;overflow:hidden auto;border-left:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:18px;padding:0}
.wa-real.show-info .wa-info{padding:22px 18px}
.wa-real:not(.show-info) .wa-info{border-left:0}
.wa-info-x{position:absolute;top:10px;right:10px;display:none}
.wa-info-id{display:grid;justify-items:center;gap:8px;text-align:center}
.wa-info-id > b{font:650 17px var(--display);letter-spacing:-.01em;margin-top:4px}
.wa-info-tel{display:inline-flex;align-items:center;gap:2px;color:var(--ink-3);font-size:13px;font-variant-numeric:tabular-nums}
.wa-info-sec{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:16px}
.wa-info-sec.grow{flex:1;align-content:start}
.wa-info-lab{display:flex;align-items:center;gap:6px;font:600 10.5px/1 var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.wa-info-lab svg{width:13px;height:13px}
.wa-kv{grid-template-columns:minmax(0,1fr)}
.wa-kv .kvi{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:8px 11px}
.wa-kv .kvi small{margin:0}
.wa-kv .kvi b{font-size:13px;text-align:right}
.wa-info textarea{width:100%;min-height:140px;resize:vertical;border:1px solid var(--line);border-radius:13px;padding:10px 12px;background:var(--surface-2);color:var(--ink);font:13px/1.5 var(--body);outline:0}
.wa-info textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-wash);background:var(--surface)}
.wa-info textarea:disabled{opacity:.65}
.wa-note-st{font-size:12px;color:var(--ink-3);min-height:16px}
.wa-note-st.bad{color:var(--bad)}
@media (max-width:1280px){
  .wa-real,.wa-real.show-info{grid-template-columns:320px minmax(0,1fr)}
  .wa-real .wa-info{position:absolute;top:0;right:0;bottom:0;width:min(340px,100%);z-index:3;box-shadow:var(--shadow);transform:translateX(105%);transition:transform .28s var(--ease-out);padding:22px 18px}
  .wa-real.show-info .wa-info{transform:none}
  .wa-info-x{display:inline-flex}
}
@media (max-width:900px){
  .wa-real,.wa-real.show-info{grid-template-columns:minmax(0,1fr)}
  .wa.wa-real{height:calc(100dvh - var(--top-h) - 210px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:380px}
  .content:has(.wa-real.has-open) > .page-head{display:none}
  .wa.wa-real.has-open{height:calc(100dvh - var(--top-h) - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  .wa-state{font-size:11.5px}
  .wa-real .wa-info{width:100%;border-left:0}
  .wa-bot-btn span{display:none}
  .wa-conv-head .wa-bot-btn{width:38px;padding:0}
  .wa-conv-head{padding:10px 10px 10px 6px;gap:8px}
}
@media (prefers-reduced-motion:reduce){.bubble.wa-in{animation:none}.wa-real,.wa-real .wa-info{transition:none}}

/* ---------- Reservas ---------- */
.rs-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.rs-col,.rs-side{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media (max-width:1180px){.rs-layout{grid-template-columns:minmax(0,1fr)}.rs-side{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
.rs-main{padding-bottom:6px}
.rs-main .card-head{margin-bottom:4px;padding-top:18px}
.rs-empty{padding:34px 24px 40px}
.rs-empty-sched{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:8px 13px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);font-size:12.5px;font-weight:500;text-align:left}
.rs-empty-sched svg{width:15px;height:15px;color:var(--accent);flex:none}
.rs-empty-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.rs-days{display:grid;padding:0 20px 12px}
.rs-day{padding:8px 0 4px;scroll-margin-top:calc(var(--top-h) + 12px);border-radius:14px}
.rs-day.flash{animation:rsFlash 1.2s var(--ease-out)}
@keyframes rsFlash{from{background:var(--accent-wash)}}
.rs-day-h{display:flex;align-items:baseline;gap:8px;padding:8px 0}
.rs-day-h b{font:650 14px var(--display)}
.rs-day-h small{color:var(--ink-3);font-size:12.5px}
.rs-day-h .grow{flex:1}
.rs-item{display:grid;grid-template-columns:62px minmax(0,1fr);gap:14px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2);margin-bottom:8px}
.rs-item.live{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.rs-time{display:grid;align-content:start;justify-items:center;padding:6px 0;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-variant-numeric:tabular-nums}
.rs-time b{font:650 16px var(--display)}
.rs-time small{color:var(--ink-3);font-size:11.5px}
.rs-body{display:grid;gap:4px;min-width:0}
.rs-who{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rs-who b{font-weight:600;font-size:14.5px}
.rs-tel{display:inline-flex;align-items:center;gap:5px;color:var(--ink-3);font-size:12.5px;font-variant-numeric:tabular-nums}
.rs-tel svg{width:13px;height:13px}
.rs-notes{margin:4px 0 0;font-size:13px;color:var(--ink-2);line-height:1.5}
.rs-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rs-acts svg{width:14px;height:14px}
.rs-ok{color:var(--good)}
.rs-hist-toggle,.pd-done-toggle{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:16px 20px;color:var(--ink);text-align:left;font:inherit}
.rs-hist-toggle b,.pd-done-toggle b{font:650 15px var(--display)}
.rs-hist-toggle .grow,.pd-done-toggle .grow{flex:1}
.rs-chev,.pd-chev{display:grid;color:var(--ink-3);transition:transform .2s var(--ease-out)}
.rs-chev svg,.pd-chev svg{width:18px;height:18px}
[aria-expanded="true"] > .rs-chev,[aria-expanded="true"] > .pd-chev{transform:rotate(180deg)}
.rs-hist{display:grid;padding:0 20px 12px}
.rs-hrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:13px}
.rs-hdate{color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.rs-hname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.rs-cal-card .card-head{margin-bottom:10px}
.rs-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;text-align:center}
.rs-dow{font:600 10.5px/1 var(--body);color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;padding:4px 0 8px}
.rs-cd{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:10px;font-size:12.5px;font-weight:500;color:var(--ink-3);border:0;background:none;padding:0;font-variant-numeric:tabular-nums}
.rs-cd.open{background:var(--accent-wash);color:var(--accent-deep)}
[data-theme="dark"] .rs-cd.open{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rs-cd.open{color:var(--ink)}}
.rs-cd.past{opacity:.45}
.rs-cd.today{box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent);font-weight:700}
.rs-cd.has{background:var(--accent);color:#fff;font-weight:650;cursor:pointer}
.rs-cd.has i{position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:#fff}
@media (hover:hover) and (pointer:fine){.rs-cd.has:hover{filter:brightness(1.08)}}
.rs-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--ink-3)}
.rs-legend span{display:inline-flex;align-items:center;gap:6px}
.rs-legend i{width:11px;height:11px;border-radius:4px}
.lg-open{background:var(--accent-wash);box-shadow:inset 0 0 0 1px var(--accent-soft)} .lg-has{background:var(--accent)}
.rs-sched .card-head{margin-bottom:8px}
.rs-week{display:grid}
.rs-wrow{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:10px;font-size:13px;color:var(--ink-2)}
.rs-wrow b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.rs-wrow.off b{color:var(--ink-3);font-weight:500}
.rs-wrow.now{background:var(--surface-2)}
.rs-wrow.now span::after{content:" · hoy";color:var(--accent);font-weight:600}
.rs-dur-note{display:flex;align-items:center;gap:7px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.rs-dur-note svg{width:14px;height:14px;flex:none}
.page-head .btn.spin svg{animation:spin .8s linear infinite}
/* Editor del horario */
.rs-intro{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--accent-wash);color:var(--ink-2);font-size:13px;line-height:1.5}
.rs-intro svg{width:18px;height:18px;color:var(--accent);flex:none;margin-top:1px}
.rs-week-edit{display:grid;gap:6px}
.rs-day-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);min-height:52px}
.rs-day-row.on{background:var(--surface)}
.rs-switch{display:flex;align-items:center;gap:10px;width:140px;cursor:pointer;position:relative}
.rs-switch input{position:absolute;opacity:0;width:36px;height:22px;margin:0;cursor:pointer}
.rs-switch i{width:36px;height:22px;border-radius:11px;background:var(--line-strong);position:relative;flex:none;transition:background-color .18s ease}
.rs-switch i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s var(--ease-out)}
.rs-switch input:checked + i{background:var(--accent)}
.rs-switch input:checked + i::after{transform:translateX(14px)}
.rs-switch input:focus-visible + i{outline:2px solid var(--accent);outline-offset:2px}
.rs-switch b{font-weight:600;font-size:13.5px}
.rs-times{display:flex;align-items:center;gap:8px}
.rs-times span{color:var(--ink-3);font-size:12.5px}
.rs-times input,.rs-dur input{height:36px;border:1px solid var(--line);border-radius:10px;padding:0 10px;background:var(--surface);color:var(--ink);font:500 13.5px var(--body);font-variant-numeric:tabular-nums}
.rs-times input:focus,.rs-dur input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.rs-day-row:not(.on) .rs-times{display:none}
.rs-closed{color:var(--ink-3);font-size:12.5px}
.rs-day-row.on .rs-closed{display:none}
.rs-dur{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;font-weight:550;color:var(--ink-2)}
.rs-dur input{width:80px}
.modal .err:empty{display:none}
.modal .err{color:var(--bad);font-size:12.5px;font-weight:550;margin:0}
@media (max-width:560px){
  .rs-days{padding:0 14px 10px}
  .rs-item{grid-template-columns:52px minmax(0,1fr);gap:11px;padding:12px}
  .rs-switch{width:auto;flex:1}
  .rs-day-row{gap:8px}
}

/* ---------- Pendientes ---------- */
.pd-wrap{max-width:900px;width:100%}
.pd-quick{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:18px;transition:box-shadow .2s ease,border-color .2s ease}
.pd-quick:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-wash)}
.pd-quick-ico{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent-wash);color:var(--accent);flex:none}
.pd-quick-ico svg{width:16px;height:16px}
.pd-quick-fields{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:8px}
.pd-quick input{min-width:0;height:40px;border:0;background:none;color:var(--ink);font:500 14.5px var(--body);outline:0;padding:0 4px}
.pd-quick input + input{border-left:1px solid var(--line);padding-left:14px;font-weight:400;font-size:13.5px;color:var(--ink-2)}
.pd-quick input::placeholder{color:var(--ink-3)}
.pd-quick .btn{flex:none}
.pd-quick .btn svg{width:16px;height:16px}
.pd-qerr{margin:6px 4px 0;color:var(--bad);font-size:12.5px}
.pd-qerr:empty{display:none}
.pd-progress{display:flex;align-items:center;gap:10px}
.pd-progress .progress{width:120px;height:6px}
.pd-progress small{color:var(--ink-3);font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.pd-card .card-head{margin-bottom:4px;padding-top:16px}
.pd-list{list-style:none;margin:0;padding:0 10px 10px;display:grid}
.pd-list[hidden]{display:none}
.pd-item{display:flex;align-items:flex-start;gap:12px;padding:10px 10px;border-radius:14px;transition:background-color .15s ease}
.pd-item + .pd-item{box-shadow:0 -1px 0 var(--line)}
.pd-item.flash{animation:pdFlash 1.1s var(--ease-out)}
@keyframes pdFlash{from{background:var(--accent-wash)}}
@media (hover:hover) and (pointer:fine){.pd-item:hover{background:var(--surface-2)}.pd-item .pd-del{opacity:0}.pd-item:hover .pd-del,.pd-item .pd-del:focus-visible{opacity:1}}
.pd-check{width:24px;height:24px;margin-top:1px;border-radius:50%;border:1.8px solid var(--line-strong);background:var(--surface);color:transparent;display:grid;place-items:center;padding:0;flex:none;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .12s ease}
.pd-check svg{width:14px;height:14px;stroke-width:2.6}
.pd-check:active{transform:scale(.9)}
@media (hover:hover) and (pointer:fine){.pd-check:hover{border-color:var(--accent);color:color-mix(in srgb,var(--accent) 45%,transparent)}}
.pd-item.done .pd-check{background:var(--good);border-color:var(--good);color:#fff}
.pd-item.done .pd-check svg{animation:pdTick .3s var(--ease-out)}
@keyframes pdTick{from{transform:scale(.4);opacity:0}}
.pd-text{flex:1;min-width:0;display:grid;gap:2px;border:0;background:none;padding:2px 0;text-align:left;color:inherit;font:inherit;cursor:pointer}
.pd-text b{font-weight:550;font-size:14.5px;line-height:1.4;overflow-wrap:anywhere}
.pd-det{color:var(--ink-2);font-size:13px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-line}
.pd-meta{color:var(--ink-3);font-size:11.5px;margin-top:2px}
.pd-item.done .pd-text b{text-decoration:line-through;text-decoration-color:var(--ink-3);color:var(--ink-3);font-weight:500}
.pd-item.done .pd-det{color:var(--ink-3)}
.pd-del{color:var(--ink-3);flex:none}
@media (hover:hover) and (pointer:fine){.pd-del:hover{color:var(--bad)}}
.pd-empty{padding:26px 20px 34px}
.pd-state{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--surface-2);text-align:left;color:inherit;font:inherit}
.pd-state b{display:block;font-weight:600}
.pd-state small{color:var(--ink-3);font-size:12.5px}
.pd-box{width:26px;height:26px;border-radius:50%;border:1.8px solid var(--line-strong);display:grid;place-items:center;color:transparent;flex:none;background:var(--surface)}
.pd-box svg{width:15px;height:15px;stroke-width:2.6}
.pd-state.done{background:var(--good-wash);border-color:transparent}
.pd-state.done .pd-box{background:var(--good);border-color:var(--good);color:#fff}
.sheet-actions .grow{flex:1}
.sheet .form input[type=text],.sheet .form textarea{width:100%}
@media (max-width:640px){
  .pd-quick{flex-wrap:wrap;padding:10px 10px 10px 14px}
  .pd-quick-fields{grid-template-columns:minmax(0,1fr);gap:0;flex-basis:calc(100% - 44px)}
  .pd-quick input + input{border-left:0;border-top:1px solid var(--line);padding-left:4px}
  .pd-quick .btn{width:100%}
  .pd-list{padding:0 4px 8px}
  .pd-progress .progress{display:none}
}
@media (prefers-reduced-motion:reduce){.pd-item.flash,.rs-day.flash,.pd-item.done .pd-check svg{animation:none}}