:root{
  --bg:#07070b; --fg:#ececf2; --muted:rgba(236,236,242,.55); --faint:rgba(236,236,242,.35);
  --violet:#7c3aed; --lilac:#a78bfa; --card:rgba(20,18,30,.55); --line:rgba(167,139,250,.25);
  --line-strong:rgba(167,139,250,.45); --glow:rgba(124,58,237,.28);
  --good:#34d399; --bad:#f87171; --warn:#fbbf24;
  --ink:255 255 255; --ink2:236 236 242; --soft-lilac:#c4b5fd; --panel:#181527; --navbg:rgba(7,7,11,.82); --halo:rgba(76,29,149,.30);
  --survey:#d6d1e6; --shadow:rgba(0,0,0,.45);
  color-scheme:dark;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{-webkit-user-select:none;user-select:none}   /* por defecto no se selecciona texto; sí en los campos */
input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text}
html,body{margin:0;min-height:100%}
body{min-height:100vh;min-height:100lvh}   /* iOS: con páginas cortas la barra fija de abajo subía ~1 cm */
body{background:var(--bg);color:var(--fg);font:16px/1.5 'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background-image:radial-gradient(900px 500px at 20% -10%,var(--halo),transparent 60%),
                   radial-gradient(700px 400px at 110% 10%,rgba(124,58,237,.12),transparent 60%);
  background-attachment:fixed}
main{max-width:560px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 20px) 16px calc(env(safe-area-inset-bottom) + 96px)}
/* Contenedor único (cliente y profesional, todas las vistas): desde 1024 px, 1180 de contenido centrado; logo y cabecera
   van dentro de main, así que comparten borde. Las columnas internas colapsan con container queries */
@media (min-width:1024px){main{max-width:1228px;padding-left:24px;padding-right:24px}}
main{container:app/inline-size}[data-cdp]{container:cdp/inline-size}
@container app (min-width:960px){#v-capture>*{max-width:640px;margin-inline:auto}}   /* la cámara y sus controles no se estiran */
h1{font-size:26px;font-weight:700;margin:4px 0 2px;letter-spacing:-.02em}
h2{font-size:18px;font-weight:600;margin:0 0 10px}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.brand svg{color:var(--lilac)}
.sub{color:var(--muted);font-size:14px;margin:0 0 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin:14px 0;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 30px var(--shadow)}
.card.accent{border-color:var(--line-strong);box-shadow:0 0 0 1px rgba(167,139,250,.10),0 10px 40px var(--glow)}
.muted{color:var(--muted);font-size:14px}.err{color:var(--bad);font-size:14px}
.mono{font-family:var(--mono)}
[hidden]{display:none!important}
input,select,textarea,button{font:inherit;font-size:16px;color:var(--fg)}
input,select,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:rgb(var(--ink) / .04);margin-top:8px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--lilac)}
select option{background:var(--panel)}
.btn{display:block;width:100%;padding:13px 16px;border-radius:12px;border:0;margin-top:10px;font-weight:600;cursor:pointer;
  background:linear-gradient(135deg,var(--violet),#8352f0);color:#fff;box-shadow:0 6px 20px rgba(124,58,237,.35)}
.btn:disabled{opacity:.4;box-shadow:none}
.btn.ghost{background:transparent;color:var(--lilac);border:1px solid var(--line-strong);box-shadow:none}
.btn.danger{background:transparent;color:var(--bad);border:1px solid rgba(248,113,113,.4);box-shadow:none}
.row{display:flex;gap:10px;align-items:center}.row>*{flex:1}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font:500 12px var(--mono);
  border:1px solid var(--line-strong);background:rgba(124,58,237,.12);color:var(--lilac)}
.pill.good{color:var(--good);border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.08)}
.pill.bad{color:var(--bad);border-color:rgba(248,113,113,.4);background:rgba(248,113,113,.08)}
.pill.warn{color:var(--warn);border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.08)}
.pill.flat{color:var(--muted);border-color:rgb(var(--ink2) / .2);background:rgb(var(--ink) / .04)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:rgb(var(--ink) / .03);cursor:pointer;font-size:14px}
.chip.on{border-color:var(--lilac);background:rgba(124,58,237,.22);color:var(--fg)}
.chip.new{border-color:var(--warn);color:var(--warn);background:rgba(251,191,36,.10);font-weight:600}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(167,139,250,.10)}
.list li:last-child{border-bottom:0}
.x{background:none;border:0;color:var(--faint);font-size:20px;cursor:pointer;padding:0 6px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{padding:12px;border-radius:12px;border:1px solid var(--line);background:rgb(var(--ink) / .02);cursor:pointer}
.tile.sel{border-color:var(--lilac);box-shadow:0 0 0 1px var(--lilac) inset}
.tile .k{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .v{font:600 22px var(--mono);margin:2px 0 4px}
.progress{height:6px;border-radius:99px;background:rgb(var(--ink) / .06);overflow:hidden;margin-top:8px}
.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--lilac))}

/* barra inferior */
nav.tabs{position:fixed;left:0;right:0;bottom:0;transform:translateZ(0);display:flex;justify-content:center;z-index:20;
  padding:8px 8px calc(env(safe-area-inset-bottom) + 8px);background:var(--navbg);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line)}
nav.tabs .in{display:flex;max-width:560px;width:100%}
nav.tabs button{flex:1;background:none;border:0;color:var(--faint);font-size:11px;padding:6px 0;display:flex;
  flex-direction:column;align-items:center;gap:3px;cursor:pointer}
nav.tabs button.on{color:var(--lilac)}
nav.tabs button[hidden]{display:none}
nav.tabs svg{width:22px;height:22px}
nav.tabs button{min-height:48px;justify-content:center}

/* cámara */
.cam{position:relative;width:min(100%,calc(58svh * 3 / 4));margin-inline:auto;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:#000;
  border:1px solid var(--line-strong)}
.cam video,.cam img.ghost{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cam img.ghost{opacity:.28;pointer-events:none}
.cam.rear video,.cam.rear img.ghost{transform:none}
.cam .flip{position:absolute;top:10px;right:10px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(7,7,11,.55);font-size:20px;z-index:2;cursor:pointer}
.cam svg.oval{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* el aviso va dentro del visor, arriba: junto a la lente, se lee sin apartar la mirada de la cámara (antes iba debajo
   y costaba leerlo mientras se cuadraba la cara). Fondo oscuro fijo en los dos temas: va sobre el vídeo */
#camroot .hint{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:1;width:calc(100% - 20px);max-width:520px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;min-height:44px;text-align:center;padding:8px 14px;border-radius:14px;
  background:rgba(12,9,24,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:16.5px;font-weight:700;line-height:1.25;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.5)}
#camroot .cam:has(.flip) .hint{width:calc(100% - 76px);left:10px;transform:none}
.cam.scanning video{filter:brightness(.7) saturate(.8)}.cam.scanning svg.oval{opacity:0}
.cam svg.mesh{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;animation:ppIn .4s ease}
.mesh-l{fill:none;stroke:#c4b5fd;stroke-width:.18;opacity:.45}
.mesh-p circle{fill:#c4b5fd;opacity:.35;animation:meshDot 2.4s ease-in-out infinite}
.mesh-s{animation:meshScan 2.4s linear infinite}
@keyframes meshScan{from{transform:translateY(0)}to{transform:translateY(140px)}}
@keyframes meshDot{0%,70%,100%{opacity:.3;r:.7}80%{opacity:1;r:1.2}}
@media (prefers-reduced-motion:reduce){.mesh-s,.mesh-p circle{animation:none}}
.checks{display:flex;gap:6px;justify-content:center;margin-top:10px;flex-wrap:wrap}

/* comparativa */
.cmp{position:relative;width:min(100%,calc(72dvh * 3 / 4));margin-inline:auto;aspect-ratio:3/4;touch-action:pan-y;border-radius:16px;overflow:hidden;border:1px solid var(--line-strong);background:#000}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp .after{clip-path:inset(0 0 0 50%)}
.cmp .bar{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--lilac);box-shadow:0 0 12px var(--lilac)}
.cmp img{pointer-events:none;-webkit-user-drag:none}
.cmp .lbl{position:absolute;top:10px;font:500 12px var(--mono);padding:3px 8px;border-radius:8px;background:rgba(7,7,11,.7);color:#ecebf3}
input[type=range]{accent-color:var(--violet);padding:0;border:0;background:none}
.side{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;touch-action:pan-y}
.side .zp{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:12px;border:1px solid var(--line);background:#000}
.side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.cmp .lay{position:absolute;inset:0;overflow:hidden}
.zi{transform-origin:50% 50%}   /* sin will-change: si no, al ampliar se estira la imagen a 1× (letras y piel borrosas) */
.z1{position:absolute;right:10px;bottom:10px;z-index:2;font:500 12px var(--mono);padding:6px 10px;border-radius:10px;border:1px solid var(--line-strong);background:rgba(7,7,11,.75);color:#ecebf3;cursor:pointer}
.zhint{text-align:center;font-size:12px;margin:8px 0 0}
table{width:100%;border-collapse:collapse;font-size:14px}
td{padding:7px 0;border-bottom:1px solid rgba(167,139,250,.10)} td.n{text-align:right;font-family:var(--mono)}
.consent li{margin:6px 0}
input[type=date]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%;min-height:48px;text-align:left}
input[type=date]::-webkit-date-and-time-value{text-align:left}
.prod{border-top:1px solid var(--line);padding:10px 0}
.prod summary{display:flex;justify-content:space-between;gap:10px;cursor:pointer;list-style:none}
.prod summary::-webkit-details-marker{display:none}
.prod[open] summary b{color:var(--lilac)}
.prod .pbody{display:grid;gap:8px;margin-top:10px}
.prod .pbody input,.prod .pbody textarea{margin:0}
.prod .row .btn{margin:0}

/* Profesional en escritorio: ancho de clínica, filtros a la izquierda y lista tipo tabla */
@container app (min-width:900px){

  body.pro #e-grid{grid-template-columns:repeat(4,1fr)}
  body.pro #v-clients .card [style*="height:220px"]{height:320px!important}
}
.cnav{flex:0;margin:0 0 0 6px;padding:8px 14px}.cnav:first-child{margin-left:0}.cnav:disabled{opacity:.3;cursor:default}

.skinage .big{font:700 40px/1.1 var(--mono);letter-spacing:-.02em}
.skinage .big small{font-size:15px;font-weight:500;color:var(--muted)}
/* Calendario de constancia */
.calnav{margin:10px 0 6px;align-items:center}.calnav .btn{flex:0 0 44px;margin:0;padding:6px 0}.calnav b{flex:1;text-align:center}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center}
.cal>span{font:600 11px var(--mono);color:var(--muted);padding:2px 0}
.cd{position:relative;aspect-ratio:1;border-radius:12px;border:1.5px solid transparent;background:rgb(var(--ink) / .02);color:var(--muted);font:500 13px var(--mono);cursor:pointer;padding:0}
.cd.one{border-color:rgba(167,139,250,.7);color:var(--fg)}
.cd.both{background:rgba(124,58,237,.2);border-color:rgba(167,139,250,.35);color:var(--fg)}
.cd.today{color:var(--lilac);font-weight:800}
.cd.sel{box-shadow:0 0 0 2px var(--violet,#7c3aed);border-color:transparent}
.cd.future{opacity:.3;cursor:default}
.cd .ph,.callegend .ph{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--good)}
.callegend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:12px}
.callegend span{display:inline-flex;align-items:center;gap:6px;position:relative}
.callegend .sw{width:12px;height:12px;border-radius:4px;border:1px solid}
.callegend .sw.one{border:1.5px solid rgba(167,139,250,.7)}.callegend .sw.both{background:rgba(124,58,237,.2);border-color:rgba(167,139,250,.35)}
.callegend .ph{position:static;transform:none}
.x.sure{padding:2px 8px;color:var(--bad);border:1px solid var(--bad);border-radius:8px;font-size:12px}

.tdic{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;font-size:16px;flex:0 0 auto;
  background:rgba(124,58,237,.14);border:1px solid rgba(167,139,250,.35)}
.tdic.rev{background:rgba(251,191,36,.14);border-color:rgba(251,191,36,.4)}
.tdic.att{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.4)}
.tdic.away{background:rgba(148,163,184,.14);border-color:rgba(148,163,184,.4)}
.tdic.bono{background:rgba(167,139,250,.14);border-color:rgba(167,139,250,.45)}
.dayh{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.dayh .cnt{margin-left:auto;font:600 13px var(--mono);padding:2px 10px;border-radius:99px;background:rgba(124,58,237,.16);color:var(--lilac)}
.dsub{margin:0 0 10px 42px;font-size:13px}
.dsub::first-letter{text-transform:uppercase}

.fnote[class*=" t-"]{font-size:15px}

.hdone{flex:0 0 auto;width:auto;margin:0;padding:4px 12px;font-size:13px}

.fnote{margin:12px 0 0;font-size:14px;background:rgba(124,58,237,.14);border-radius:12px;padding:10px 14px}

.mom{width:16px;height:16px;vertical-align:-3px;flex:none}
.mom.am{fill:var(--warn);stroke:var(--warn);stroke-width:2;stroke-linecap:round}.mom.am circle{stroke:none}
.mom.pm{fill:var(--muted)}
.zi{position:absolute;inset:0}
.zi>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);pointer-events:none;-webkit-user-drag:none}
.cmp .lay.tags{pointer-events:none}
.ztag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(calc(1 / var(--z, 1)));font:600 11px var(--mono);
  padding:3px 8px;border-radius:99px;background:rgba(7,7,11,.78);border:1px solid rgba(255,255,255,.25);color:#ecebf3;white-space:nowrap;pointer-events:none}
.ztag b{font-weight:700}.ztag.good{color:#34d399;border-color:#34d399}.ztag.bad{color:#fb7185;border-color:#fb7185}
#c-zm{margin-top:8px}
.zleg{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:6px;font-size:13px}
.zleg i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:-6px;background:var(--muted)}
.zleg i.good{background:var(--good)}.zleg i.bad{background:var(--bad)}
.ztl{color:var(--lilac);font-weight:600}

/* Historial de la ficha */
.tl{list-style:none;margin:12px 0 0;padding:0}
.unote{color:var(--soft-lilac);font-style:italic}
.calgrp-box{border:1px solid var(--line-strong);border-radius:14px;padding:8px 12px;margin:10px 0}
.calgrp-box[data-mo]{-webkit-touch-callout:none}
.calgrp-h{margin:0 0 4px;font-weight:700;color:var(--soft-lilac);display:flex;align-items:center;gap:6px}
.calgrp-box summary{cursor:pointer;padding:4px 0}
.echart{position:relative;width:100%;aspect-ratio:4/3}@media (min-width:720px){.echart{aspect-ratio:auto;height:300px}}
.emark{margin-top:8px;font-size:13px;min-height:1.3em}
.esknote{margin:6px 0 0;font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.cmsg{padding:8px 0;border-top:1px solid var(--line, rgba(124,58,237,.2))}.cmsg:first-of-type{border-top:0}.cmsg.new{border-left:3px solid var(--lilac);padding-left:10px}.cmsg.old{opacity:.55}   /* leídos o respondidos: más apagados; los nuevos, destacados */
[data-tab].dot{position:relative}[data-tab].dot::after{content:"";position:absolute;top:6px;left:calc(50% + 8px);width:8px;height:8px;border-radius:50%;background:var(--lilac);box-shadow:0 0 0 2px var(--bg)}

.creply{margin-top:6px;font-size:13px;color:var(--lilac)}.cdoubt{display:grid;gap:6px;margin-top:8px}.cdoubt textarea{margin:0}
.toast{-webkit-touch-callout:none;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom));width:min(92vw,440px);z-index:50;background:linear-gradient(135deg,#2e1065,#4c1d95);color:#f5f3ff;border:1px solid #8b5cf6;border-radius:16px;padding:14px 16px;box-shadow:0 10px 30px rgba(0,0,0,.45);line-height:1.4;animation:toastIn .35s ease;transition:opacity .4s}
.toast.out{opacity:0}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
.prephoto{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}.prephoto span{font-size:14px}
.cwrite{grid-column:1/-1;display:grid;gap:8px;margin-top:10px;scroll-margin:16px 0 calc(env(safe-area-inset-bottom) + 96px)}.cwrite textarea{margin:0;width:100%;min-width:0}.cwrite .row{gap:8px;flex-wrap:wrap;align-items:stretch}.cwrite .row>.btn{flex:1 1 140px}.cwrite .err:empty{display:none}
body.composing .clfab{display:none}
.cwrite{scroll-margin-top:calc(env(safe-area-inset-top) + 12px)}.cwlab{font-size:13px;font-weight:600;color:var(--muted)}.cwlab:focus{outline:none}.cwlab:focus-visible{outline:2px solid var(--lilac);outline-offset:2px}
.cwrite textarea{resize:none}.cwrite .cwhint{display:block;margin-top:-4px;font-size:13px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--muted)}
body.kbd nav.tabs{visibility:hidden}
.clsent{margin:8px 0 0;font-size:14px;font-weight:600;color:var(--fg)}.clsent:focus{outline:none}
@media (min-width:1024px){.cwrite{scroll-margin-bottom:16px}}
details.pgroup{border-top:1px solid var(--line);padding:4px 0}
details.pgroup>summary{cursor:pointer;padding:10px 0;list-style:none}
details.pgroup>summary::before{content:'▸ ';color:var(--lilac)}
details.pgroup[open]>summary::before{content:'▾ '}
.empty-hero{text-align:center}
.demo-chart{width:100%;max-width:420px;display:block;margin:0 auto}
.demo-chart .db{fill:color-mix(in srgb,var(--violet) 14%,transparent);stroke:color-mix(in srgb,var(--violet) 45%,transparent);stroke-dasharray:4 4}
.demo-chart .dbl{stroke:color-mix(in srgb,var(--violet) 45%,transparent);stroke-dasharray:3 4}
.demo-chart .dt{fill:var(--muted);font-size:12px;font-weight:600}
.demo-chart .dl{stroke:var(--violet);stroke-dasharray:420;stroke-dashoffset:420;animation:dDraw 1.6s ease forwards .2s}
.demo-chart .dp{fill:color-mix(in srgb,var(--violet) 55%,transparent)}
.demo-chart .dpe{fill:var(--good);stroke:var(--card);stroke-width:2}
.demo-chart .dv{fill:var(--good)}
@keyframes dDraw{to{stroke-dashoffset:0}}@keyframes dIn{to{opacity:1}}
.esteps{display:flex;gap:8px;margin:14px 0;counter-reset:es}
.esteps b::before{counter-increment:es;content:counter(es) ". "}.esteps small{text-align:center;line-height:1.3}
.esteps span{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:rgba(167,139,250,.08);border:1px solid var(--line);border-radius:12px;padding:10px 4px}
.esteps em{font-style:normal;font-size:22px}.esteps b{font-size:14px}.esteps small{font-size:12px;color:var(--muted)}
.demo-cmp{position:relative;width:min(70%,220px);aspect-ratio:3/4;margin:0 auto;border-radius:14px;overflow:hidden;border:1px solid var(--line-strong)}
.demo-cmp svg{position:absolute;inset:0;width:100%;height:100%}
.demo-cmp .dc-after{position:absolute;inset:0;clip-path:inset(0 0 0 50%);animation:dSlide 4s ease-in-out infinite alternate}
.demo-cmp i{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 6px #a78bfa;animation:dBar 4s ease-in-out infinite alternate}
@keyframes dSlide{from{clip-path:inset(0 0 0 22%)}to{clip-path:inset(0 0 0 78%)}}
@keyframes dBar{from{left:22%}to{left:78%}}
@media (prefers-reduced-motion:reduce){.demo-chart *,.demo-cmp *{animation:none!important;opacity:1!important;stroke-dashoffset:0!important}}
.hello{color:var(--lilac);font-weight:700;font-size:1.15em}
.hl-input{border:2px solid var(--lilac)!important;background:rgba(124,58,237,.14)!important;box-shadow:0 0 0 4px rgba(167,139,250,.15)}
.hl-input::placeholder{color:rgb(var(--ink2) / .6)}
/* lista previa a la foto y opciones de la cámara */
.ckl{display:flex;align-items:center;gap:10px;margin:6px 0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(167,139,250,.06);cursor:pointer;transition:background .2s,border-color .2s}
.ckl em{font-style:normal;font-size:16px;flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:rgba(124,58,237,.14);border:1px solid rgba(167,139,250,.3)}
.ckl span{flex:1;color:var(--fg);font-size:14.5px;line-height:1.35}
.ckl.off{opacity:.5;cursor:default;pointer-events:none}.bkno{margin:0 0 8px;padding:0 4px}
.ckl small{display:block;color:var(--muted);font-size:12.5px}
.ckl input{appearance:none;-webkit-appearance:none;flex:0 0 26px;width:26px;height:26px;margin:0;padding:0;border-radius:50%;border:2px solid var(--line-strong);background:transparent;display:grid;place-items:center;cursor:pointer}
.ckl input:checked{background:var(--violet);border-color:var(--lilac)}
.ckl input:checked::after{content:"✓";color:#fff;font-size:15px;font-weight:700}
.ckl input:focus-visible{outline:3px solid var(--lilac);outline-offset:2px}
.ckl:has(input:checked){border-color:var(--lilac);background:rgba(124,58,237,.16)}
.ckl.sw{margin-top:12px}
.ckl.sw input{flex:0 0 46px;width:46px;height:28px;border-radius:999px;border:0;background:rgb(var(--ink2) / .18);position:relative;display:block}
.ckl.sw input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .2s}
.ckl.sw input:checked{background:var(--violet)}
.ckl.sw input:checked::after{content:"";left:21px}
.ckl.sw:has(input:checked){border-color:var(--line);background:rgba(167,139,250,.06)}
.ckl.off{opacity:.5;cursor:default}
.camlock{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;margin:6px auto 0;padding:26px 16px;border:1.5px dashed var(--line-strong);border-radius:18px;color:var(--muted)}
.camlock em{font-style:normal;font-size:28px}.camlock b{color:var(--fg)}
/* Ajustes */
.prof{display:flex;align-items:center;gap:14px}
.avatar{flex:0 0 52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--violet),#a78bfa);position:relative;cursor:pointer;box-shadow:0 0 0 3px rgba(167,139,250,.25)}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.avatar>i{position:absolute;right:-4px;bottom:-4px;font-style:normal;font-size:13px;background:var(--violet);color:#fff;border:2px solid var(--card);border-radius:50%;width:22px;height:22px;display:grid;place-items:center}
/* foto de perfil pequeña (lista, ficha, agenda) */
.avs{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:8px;flex:0 0 auto}
.avs.ini{font-size:13px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--violet),#a78bfa);opacity:.85}
.avs.big{width:40px;height:40px;font-size:17px;margin-right:12px}
.aglink .avs{width:22px;height:22px;font-size:11px;margin-right:6px}
.srow{display:flex;align-items:center;gap:10px;width:100%;padding:12px 0;border:0;border-top:1px solid var(--line);background:none;color:var(--fg);text-align:left;text-decoration:none;cursor:pointer;font:inherit;margin:0;border-radius:0}
.card h2+.srow{border-top:0}
.srow em{font-style:normal;font-size:16px;flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:rgba(124,58,237,.14);border:1px solid rgba(167,139,250,.3)}
.srow span{flex:1;font-size:15px}.srow small{display:block;color:var(--muted);font-size:12.5px}
.srow i{font-style:normal;color:var(--muted);font-size:20px}
.srow input{flex:0 0 96px;width:96px;margin:0;text-align:center}
.smsgs>summary{list-style:none}.smsgs>summary::-webkit-details-marker{display:none}
.smsgs[open]>summary i{transform:rotate(90deg)}
.srow .pill{flex:0 0 auto}

.ckl.lock{cursor:default}.ckl.lock input{opacity:.55}
.cd .nt,.callegend .nt{position:absolute;top:4px;right:5px;width:5px;height:5px;border-radius:50%;background:var(--warn)}
.callegend .nt{position:static}
.rtm{padding:10px 0;border-top:1px solid var(--line)}.card h2+p+.rtm{border-top:0}
.rtsug{margin:0 0 14px;padding:12px;border:1px solid var(--lilac);border-radius:12px;background:rgba(124,58,237,.12)}
.rtsug .row{margin-top:8px}
.prephoto-ov{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(7,7,11,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:ppIn .3s ease;transition:opacity .35s}
@keyframes ppIn{from{opacity:0}to{opacity:1}}
.prephoto-ov.gone{opacity:0}
.prephoto-ov .prephoto{width:min(100%,420px);margin:0;position:relative;overflow:hidden;gap:8px}
.prephoto-ov .prephoto span{font-size:15px}
.prephoto-ov .btn{margin-top:8px}
.pp-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--lilac);transform-origin:left;animation:ppBar 12s linear forwards}
@keyframes ppBar{to{transform:scaleX(0)}}
.prephoto-ov{-webkit-touch-callout:none}

.fgh{margin:12px 0 0;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

.btn.sm{width:auto;margin:0;padding:6px 12px;font-size:13.5px;white-space:nowrap}
.rform{flex-basis:100%;width:100%;margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:12px;background:rgba(167,139,250,.06)}
.imgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.imcell{display:flex;flex-direction:column;gap:6px}.imcell img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;border:1px solid var(--line-strong);transform:scaleX(-1)}
.imcell input{margin:0;padding:6px 8px;font-size:13px}.imcell .btn{margin:0;white-space:normal;line-height:1.25}

/* Agenda: tira de la semana */
.agweek{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px}
.agd{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;border-radius:12px;border:1px solid var(--line);background:rgb(var(--ink) / .03);color:inherit;font:inherit;cursor:pointer}
.agd small{font-size:11px;color:var(--muted)}
.agd i{font-style:normal;font-size:11px;color:var(--lilac);min-height:14px}
.agd.today b{color:var(--lilac)}
.agd.on{background:var(--violet,#7c3aed);border-color:transparent}
.agd.out{opacity:.35}
.agd.on small,.agd.on i,.agd.on.today b{color:#fff}

/* Hoja de reserva del cliente */
.sheet-bg{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:560px;max-height:88vh;overflow-y:auto;margin:0;border-radius:20px 20px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom));background:var(--bg)}
@media (min-width:720px){.sheet-bg{align-items:center}.sheet{border-radius:20px;padding-bottom:20px;max-width:480px;border-color:rgba(167,139,250,.4)}}
.agtag{display:inline-block;white-space:nowrap;padding:1px 8px;border-radius:999px;font:600 11px var(--mono);color:var(--lilac);background:rgba(167,139,250,.14);vertical-align:1px}.agtag.off{color:var(--bad);background:rgba(248,113,113,.12)}
.aglink{color:var(--lilac);text-decoration:none;font-weight:600}.aglink:hover{text-decoration:underline}
.smsgs[data-sk][open]{padding-bottom:12px}

.agx{flex:0 0 auto;margin-left:8px;padding:4px 12px;border-radius:999px;border:1px solid rgba(248,113,113,.45);background:transparent;color:var(--bad);font:600 12.5px var(--sans,inherit);cursor:pointer}
.agx:hover{background:rgba(248,113,113,.10)}.agx.ok{border-color:var(--line,rgba(167,139,250,.3));color:var(--muted)}.agx.sure{background:var(--bad);color:#fff;border-color:var(--bad)}
.agtag.now{color:var(--good);background:rgba(52,211,153,.14)}.ceap.now{background:rgba(52,211,153,.08);box-shadow:inset 3px 0 0 var(--good);border-radius:10px;padding-inline:10px!important;margin-inline:-10px}
.rtfold>summary{list-style:none;cursor:pointer}.rtfold>summary::-webkit-details-marker{display:none}.rtfold .aglink{font-size:13px;font-weight:500}
.daymenu{position:absolute;z-index:50;background:var(--panel);border:1px solid rgba(167,139,250,.4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:14px;padding:8px;box-shadow:0 14px 40px rgba(0,0,0,.7);display:grid;gap:4px}
.daymenu p{margin:2px 6px 4px;font-size:12.5px}
.daymenu button{text-align:left;background:transparent;border:0;color:var(--fg,#ecebf3);font:inherit;font-size:14.5px;padding:10px;border-radius:10px;cursor:pointer}
.daymenu button:hover:not(:disabled){background:rgba(124,58,237,.14)}.daymenu button:disabled{color:var(--muted);cursor:default}
.cd,.agd{-webkit-touch-callout:none}

.agtag.ok{color:var(--good);background:rgba(52,211,153,.14)}

/* Tema claro: el ajuste «Sistema» (por defecto) sigue al móvil; la cámara y las fotos siguen en oscuro */
:root[data-theme=light]{
  --bg:#f6f4fb; --fg:#1d1830; --muted:rgba(29,24,48,.62); --faint:rgba(29,24,48,.42);
  --violet:#7c3aed; --lilac:#6d28d9; --card:rgba(255,255,255,.78); --line:rgba(109,40,217,.18);
  --line-strong:rgba(109,40,217,.38); --glow:rgba(124,58,237,.16);
  --good:#059669; --bad:#dc2626; --warn:#b45309;
  --ink:40 20 80; --ink2:29 24 48; --soft-lilac:#6d28d9; --panel:#ffffff; --navbg:rgba(250,249,255,.88); --halo:rgba(167,139,250,.28);
  --survey:#4c4566; --shadow:rgba(60,40,110,.10); --ctl:#8a7fb5;
  color-scheme:light;
}

.pbar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}.pbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--violet,#7c3aed),var(--lilac))}
.brand h1{margin:0;line-height:0}.brand .wordmark{height:30px;width:auto;color:var(--fg)}
/* móvil: letra un poco más grande (todo escala igual); la cámara no, para no descuadrar el encuadre */
@media (max-width:600px){main>section:not(#v-capture):not(:has(video)){zoom:1.1}}
/* Tu piel, en perspectiva: cifras y chips por medida */
.pstiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 0}
.pstile{display:flex;align-items:center;gap:8px;cursor:default;padding:10px}
.pstile .tdic{width:28px;height:28px;font-size:14px}.pstile .v{font-size:20px;margin:0;line-height:1.1}.pstile .k{font-size:12px}
.pstile.good .v{color:var(--good)}.pstile.att .v{color:var(--bad)}
.pstile .tdic{font-weight:700;font-size:16px}.pstile .tdic.good{background:rgba(52,211,153,.14);border-color:rgba(52,211,153,.45);color:var(--good)}
.pstile .tdic.att{color:var(--bad)}.pstile .tdic.away{color:var(--muted)}
.pchips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.pchip{padding:5px 12px;border-radius:99px;font-size:13px;cursor:pointer;border:1px solid}
.pchip.good{color:var(--good);border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.08)}
.pchip.bad{color:var(--bad);border-color:rgba(248,113,113,.4);background:rgba(248,113,113,.08)}
.pfoot{margin:12px 0 0;font-size:12.5px}
.pstile{flex-direction:column;justify-content:center;gap:6px;text-align:center}
/* detalle del día: tarjeta por momento */
.calday-h{margin:14px 0 6px}.calday-h b::first-letter{text-transform:uppercase}
.calgrid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.calgrid2 .calgrp-box{margin:0}
@media (max-width:420px){.calgrid2{grid-template-columns:1fr}}
.calgrp-box.empty{border-style:dashed}.calgrp-box.empty .calgrp-h{margin:0;color:var(--muted)}
.calgrp-h .calok,.calgrp-h .calpend{margin-left:auto;font:600 12px var(--mono)}.calok{color:var(--good)}.calpend{color:var(--warn)}
.calprods{margin:2px 0 0}.calprods li{padding:5px 0;font-size:14px}
.calhint{margin:10px 0 0;font-size:12.5px}
/* Comparar: Antes → Después, tira de fechas, ⓘ y controles */
.cibtn{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--lilac);font:600 16px inherit;cursor:pointer}.cibtn.on{background:rgba(124,58,237,.18)}
.cinfo{margin:8px 0 0;padding:10px 12px;border-radius:12px;background:rgb(var(--ink) / .03);font-size:12.5px;line-height:1.55}
.cinfo i:not(.li){display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 4px 0 6px;background:var(--muted)}.cinfo i.good{background:var(--good)}.cinfo i.bad{background:var(--bad)}
.seg{display:inline-flex;padding:3px;border-radius:12px;border:1px solid var(--line);background:rgb(var(--ink) / .03)}
.seg button{border:0;background:none;color:var(--muted);font:inherit;font-size:13.5px;padding:6px 12px;border-radius:9px;cursor:pointer}
.seg button.on{background:rgba(124,58,237,.25);color:var(--fg);font-weight:600}
.ctog{border:1px solid var(--line);background:none;color:var(--muted);font:inherit;font-size:13.5px;padding:7px 12px;border-radius:99px;cursor:pointer}
.ctog.on{border-color:var(--lilac);color:var(--fg);background:rgba(124,58,237,.18)}
.ctog.on::before{content:"✓ "}
/* Ajustes: cabecera de perfil, grupos, contadores y pie */
.prof .avatar{flex-basis:64px;height:64px;font-size:26px}
.cpill{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;line-height:18px;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.35);color:var(--good)}
.cpill i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.sstats{margin:-4px 0 14px}
#v-settings .card>h2,#v-settings .card>summary>h2{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.sbadge{flex:0 0 auto;min-width:22px;height:22px;padding:0 6px;border-radius:99px;display:grid;place-items:center;font:700 12px var(--mono);color:#fff;background:var(--violet,#7c3aed)}
.sdanger{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.sdanger p{margin:0 0 4px;font-size:13px}
.slogout{display:block;width:100%;margin:4px 0 0}
.sfoot{text-align:center;color:var(--muted);font-size:12px;margin:14px 0 6px;opacity:.7}
.calsteps{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.calsteps li{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.35}.calsteps .tdic{width:30px;height:30px;font-size:14px}
/* Evolución: leyenda de la gráfica y tarjetas de medidas con el color de su veredicto */
.lg-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#a78bfa}
.lg-line{display:inline-block;width:14px;height:3px;border-radius:2px;background:#7c3aed}
.lg-band{display:inline-block;width:14px;height:9px;border-radius:2px;background:rgba(139,92,246,.22);border-block:1px dashed rgba(139,92,246,.5)}
.lg-vm{display:inline-block;width:0;height:12px;border-left:1.5px solid #F59E0B}.lg-vm.start{border-left:1.5px dashed #8B5CF6}
.lg-bar{display:inline-block;width:14px;height:4px;border-radius:2px;background:rgba(251,191,36,.45)}
.einfo{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:0 0 8px 42px}
.ebig{font:700 28px var(--mono);letter-spacing:-.5px}
.edelta{font:600 14px var(--mono);color:var(--muted)}
.edelta.good{color:var(--good)}.edelta.bad{color:var(--bad)}
.einote-t{cursor:pointer;color:var(--faint)}
.einote{flex-basis:100%;font-size:13px}
.einote[hidden]{display:none}   /* .einote{display:block} lo dejaba siempre abierto */
.einl{margin:4px 0 6px;padding-left:18px}.einl li{margin:2px 0}
.etile{position:relative;overflow:hidden}.etile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line)}
.etile.good::before{background:var(--good)}.etile.bad::before{background:var(--bad)}
.etile .pill{font-size:11px;padding:2px 8px}
.etile .erow{display:flex;align-items:center;gap:8px}.etile .erow .v{flex:1;display:flex;align-items:baseline;gap:6px}
.etile .edelta{font-size:12px}
.espark{width:52px;height:20px;flex:0 0 auto;overflow:visible}
.espark polyline{fill:none;stroke:#a78bfa;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.espark.good polyline{stroke:var(--good)}.espark.bad polyline{stroke:var(--bad)}

.callegend,.calday-h,.cal,.calgrp-h,.calhint{-webkit-touch-callout:none}
/* Ajustes → Mi rutina: lista numerada en orden de aplicación, se ordena arrastrando ⠿ */
.rtl{list-style:none;margin:6px 0 0;padding:0;counter-reset:rt}
.rti{display:flex;align-items:center;gap:10px;padding:8px 6px 8px 12px;margin-top:6px;border:1px solid var(--line);border-radius:12px;background:rgb(var(--ink) / .03)}
.rti::before{counter-increment:rt;content:counter(rt);color:var(--lilac);font-weight:700;min-width:1em}
.rti .rth{margin-left:auto;padding:2px 8px;font-style:normal;font-size:18px;color:var(--muted);cursor:grab;touch-action:none}
.rti.drag{border-color:var(--lilac);background:rgba(124,58,237,.22)}
.rti.drag .rth{cursor:grabbing}
.calprods.num{counter-reset:rt}.calprods.num li::before{counter-increment:rt;content:counter(rt);color:var(--lilac);font-weight:700;min-width:1.2em}
.calprods.num li{justify-content:flex-start;gap:6px}.calprods.num li .x{margin-left:auto}
/* menús (filas de Ajustes, títulos de tarjeta, listas de la rutina): no se selecciona el texto al tocar o mantener */
.srow,.card h2,.rtl,.rtm b{-webkit-touch-callout:none}
.rti.hold{border-color:var(--lilac);transition:background 1s;background:rgba(124,58,237,.14)}
.calprods.num li.cab::before{content:"";counter-increment:none;min-width:0}
details.more{margin:10px 0 4px}details.more>summary{cursor:pointer;padding:6px 0;font-size:14px}
/* paso del ratón (solo con ratón o trackpad): lo que se toca se ilumina con borde lila y halo, como los accesos de Homer */
@media (hover:hover){
  .tile:not(.pstile),.cfc,.cslot,.chip,.btn.ghost,.srow{transition:border-color .18s,box-shadow .18s,transform .18s,background-color .18s,border-radius .18s}
  .tile:not(.pstile):hover,.cfc:hover,.cslot:hover{border-color:var(--lilac);box-shadow:0 0 0 1px rgba(167,139,250,.6),0 8px 30px rgba(124,58,237,.4);transform:translateY(-2px)}

  .chip:hover,.btn.ghost:hover{border-color:var(--lilac);box-shadow:0 0 0 1px rgba(167,139,250,.5),0 0 18px rgba(124,58,237,.35)}
  .agd,.agx,.prod,details.card{transition:border-color .18s,box-shadow .18s,transform .18s,background-color .18s,border-radius .18s}
  .agd:hover{border-color:var(--lilac);box-shadow:0 0 0 1px rgba(167,139,250,.6),0 6px 22px rgba(124,58,237,.4);transform:translateY(-2px)}
  .prod:hover{background:rgba(124,58,237,.12);border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--lilac),0 8px 30px rgba(124,58,237,.35)}
  .agx:hover{box-shadow:0 0 14px currentColor}
  details.card:not([open]):hover{border-color:var(--lilac);box-shadow:0 0 0 1px rgba(167,139,250,.5),0 8px 30px rgba(124,58,237,.3)}
  .srow:hover{background:rgba(124,58,237,.1);border-radius:12px}
  .srow em{transition:box-shadow .18s}.srow:hover em{box-shadow:0 0 16px rgba(124,58,237,.55)}
}

#cl-list>.card{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}

.tchev{color:var(--lilac);font-size:20px;font-weight:600;line-height:1;text-align:right}
/* iconos de línea en Mi centro: el color dice el motivo (como las cifras) */
.tdic svg{width:18px;height:18px}.tdic{color:var(--lilac)}
.tdic.cita,.tdic.book,.tdic.ok{color:var(--lilac)}.tdic.duda{color:var(--warn)}.tdic.rev{color:var(--warn)}.tdic.att{color:var(--bad)}.tdic.away{color:var(--muted)}.tdic.bono{color:var(--lilac)}

/* iconos de línea dentro de un texto o un botón: del tamaño de la letra y su color */
i.li{display:inline-flex;font-style:normal;vertical-align:-.15em}i.li svg{width:1.1em;height:1.1em}
.tdic svg{width:18px;height:18px}

/* iconos de línea en las filas de Ajustes: lila, como el resto del portal */
.srow em i.li,.ckl em i.li{color:var(--lilac)}.srow em i.li svg,.ckl em i.li svg{width:20px;height:20px}
.pstile .tdic svg{width:16px;height:16px}
/* app del cliente: iconos de línea en los pasos de calibración, avisos y botones */
.calsteps .tdic svg{width:16px;height:16px}.esteps em i.li svg{width:22px;height:22px}.esteps em{color:var(--lilac)}
.camlock em i.li svg{width:34px;height:34px}.camlock em{color:var(--lilac)}
.ckl em>svg{width:20px;height:20px;color:var(--lilac)}
/* interruptor dentro de una lista de Ajustes: misma línea y mismo margen que las filas (iconos alineados) */
.ckl.flush{margin:0;padding:12px;border:0;border-radius:0;background:none}

.cinfo i.li{color:var(--lilac);margin:0 2px 0 4px}
/* «Nueva cita»: días grandes en una tira que se desliza (6 semanas); cerrados, apagados */
.anstrip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px;margin:6px 0 8px;scroll-snap-type:x proximity}.anstrip::-webkit-scrollbar{display:none}
.anday{flex:0 0 64px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 0;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--fg);cursor:pointer;font:inherit;scroll-snap-align:start}
.anday small{font-size:11.5px;color:var(--muted)}.anday b{font-size:20px;line-height:1.2}
.anday.on{background:var(--violet);border-color:var(--violet)}.anday.on small{color:rgba(255,255,255,.8)}
.anday.shut{opacity:.35}
@media (hover:hover){.anday:hover{border-color:var(--lilac)}}
/* desplegables: el mismo alto y estilo que las cajas de texto (Safari ignoraba el relleno), con flecha lila */
select{-webkit-appearance:none;appearance:none;padding-right:40px;min-height:48px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.ilist li{justify-content:flex-start;gap:10px}.ilist li i.li{color:var(--lilac)}
/* botones pequeños junto a chips (p. ej. el logo): misma medida que «Centro / Clínica» */
.btn.pillb{width:auto;margin:0;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:6px}
/* iconos de fila: color fijo por tipo (violeta por defecto) */
.srow em,.ckl em{--ic:167,139,250;background:rgba(var(--ic),.12);border-color:rgba(var(--ic),.35)}
.srow em:has(.k-cal),.ckl em:has(.k-cal),.srow em:has(.k-clock),.ckl em:has(.k-clock),.srow em:has(.k-hour),.ckl em:has(.k-hour),.srow em:has(.k-globe),.ckl em:has(.k-globe),.srow em:has(.k-sort),.ckl em:has(.k-sort){--ic:45,212,191}
.srow em:has(.k-sun),.ckl em:has(.k-sun),.srow em:has(.k-bulb),.ckl em:has(.k-bulb),.srow em:has(.k-star),.ckl em:has(.k-star),.srow em:has(.k-cake),.ckl em:has(.k-cake),.srow em:has(.k-tag),.ckl em:has(.k-tag),.srow em:has(.k-bono),.ckl em:has(.k-bono),.srow em:has(.k-ticket),.ckl em:has(.k-ticket),.srow em:has(.k-spark),.ckl em:has(.k-spark),.srow em:has(.k-party),.ckl em:has(.k-party){--ic:251,191,36}
.srow em:has(.k-dna),.ckl em:has(.k-dna),.srow em:has(.k-spa),.ckl em:has(.k-spa),.srow em:has(.k-user),.ckl em:has(.k-user),.srow em:has(.k-eye),.ckl em:has(.k-eye),.srow em:has(.k-clap),.ckl em:has(.k-clap),.srow em:has(.k-flame),.ckl em:has(.k-flame),.srow em:has(.k-thumb),.ckl em:has(.k-thumb){--ic:244,114,182}
.srow em:has(.k-mail),.ckl em:has(.k-mail),.srow em:has(.k-chat),.ckl em:has(.k-chat),.srow em:has(.k-phone),.ckl em:has(.k-phone),.srow em:has(.k-tel),.ckl em:has(.k-tel),.srow em:has(.k-bell),.ckl em:has(.k-bell),.srow em:has(.k-belloff),.ckl em:has(.k-belloff),.srow em:has(.k-note),.ckl em:has(.k-note),.srow em:has(.k-drop),.ckl em:has(.k-drop),.srow em:has(.k-moon),.ckl em:has(.k-moon),.srow em:has(.k-glasses),.ckl em:has(.k-glasses){--ic:96,165,250}
.srow em:has(.k-bottle),.ckl em:has(.k-bottle),.srow em:has(.k-folder),.ckl em:has(.k-folder),.srow em:has(.k-box),.ckl em:has(.k-box),.srow em:has(.k-ok),.ckl em:has(.k-ok),.srow em:has(.k-image),.ckl em:has(.k-image),.srow em:has(.k-cam),.ckl em:has(.k-cam),.srow em:has(.k-doc),.ckl em:has(.k-doc),.srow em:has(.k-copy),.ckl em:has(.k-copy){--ic:74,222,128}
.srow em i.li,.ckl em i.li{color:rgb(var(--ic))}
.srow:hover em{box-shadow:0 0 16px rgba(var(--ic),.45)}
/* edad de la piel destacada */
.sahd{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--fg)}
.tdic.sa{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,rgba(124,58,237,.35),rgba(236,72,153,.3));border:1px solid rgba(236,72,153,.5);color:#f9a8d4;box-shadow:0 0 18px rgba(236,72,153,.3)}
.tdic.sa svg{width:22px;height:22px}
:root[data-theme=light] .tdic.sa{background:linear-gradient(135deg,#ede9fe,#fce7f3);border:1px solid #f5c2dc;color:#be185d;box-shadow:none}
:root[data-theme=light] .sahd{white-space:nowrap}
.srow{padding-inline:12px}
@media (max-width:640px){
  .row:has(>#cl-back){flex-wrap:wrap}.row>#cl-more{margin-left:auto}
  .fnote.row{flex-wrap:wrap;justify-content:flex-end;gap:8px}.fnote.row>span:first-child{flex:1 1 100%!important}.fnote.row>.hdone{flex:0 0 auto;margin:0}

}
.warnbox{font-size:14px;padding:10px 12px;border-radius:12px;border:1px solid rgba(251,191,36,.4);background:rgba(251,191,36,.08)}
.prod{padding-inline:14px}.prod[open]{padding-bottom:14px}

/* Mi centro: lista por prioridad (responde, clínico, revisión, fotos, pausa). El rojo, solo en Clínico */
:root{--g-reply:#c4b5fd;--g-reply-bg:rgba(167,139,250,.16);--g-clinical:#fca5a5;--g-clinical-bg:rgba(248,113,113,.15);
  --g-review:#fcd34d;--g-review-bg:rgba(251,191,36,.14);--g-photos:#93c5fd;--g-photos-bg:rgba(96,165,250,.15);--g-paused:#c9c7d9;--g-paused-bg:rgba(201,199,217,.12)}
:root[data-theme=light]{--g-reply:#4b27b8;--g-reply-bg:#efe9fd;--g-clinical:#a32219;--g-clinical-bg:#fdecea;
  --g-review:#7a4200;--g-review-bg:#fff1d6;--g-photos:#1f4fa8;--g-photos-bg:#e6eefd;--g-paused:#4a4866;--g-paused-bg:#eeedf4}
.cetop{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:-6px 0 10px}
.cecn{display:flex;align-items:center;gap:12px;min-width:0;font-size:17px}.cecn b{overflow-wrap:anywhere}.cetitle{display:flex;flex-direction:column;gap:2px;min-width:0}.cetitle .cedate{font-size:13.5px}
.mycn{display:flex;align-items:center;gap:14px;margin-bottom:10px}.mycn h2{margin:0}.mycn b{display:block;font-size:15px;overflow-wrap:anywhere}.cedate{color:var(--muted);font-size:14px}.cedate::first-letter{text-transform:uppercase}
.cechips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px;margin:0}.cechips::-webkit-scrollbar{display:none}
.cechip{flex:0 0 auto;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--fg);font:600 14px inherit;font-family:inherit;cursor:pointer;white-space:nowrap}
.cechip.reply{color:var(--g-reply)}.cechip.clinical{color:var(--g-clinical)}.cechip.review{color:var(--g-review)}.cechip.photos{color:var(--g-photos)}.cechip.paused{color:var(--g-paused)}
.cechip.on{background:var(--violet);border-color:var(--violet);color:#fff}
.ceagb{display:flex;align-items:center;gap:10px;width:100%;margin:12px 0 0;min-height:48px;padding:6px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--fg);font:500 14px inherit;font-family:inherit;text-align:left;cursor:pointer}
.ceagb>span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ceagb .tchev{font-size:13.5px;white-space:nowrap}
.ceic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;flex:0 0 auto}.ceic svg{width:20px;height:20px}
.ceic.ag,.ceic.ok{width:32px;height:32px;border-radius:10px;background:var(--g-reply-bg);color:var(--g-reply)}.ceic.ag svg{width:16px;height:16px}
.ceic.reply,.cetag.reply{background:var(--g-reply-bg);color:var(--g-reply)}.ceic.clinical,.cetag.clinical{background:var(--g-clinical-bg);color:var(--g-clinical)}
.ceic.review,.cetag.review{background:var(--g-review-bg);color:var(--g-review)}.ceic.photos,.cetag.photos{background:var(--g-photos-bg);color:var(--g-photos)}
.ceic.paused,.cetag.paused{background:var(--g-paused-bg);color:var(--g-paused)}
.cegrp{border-radius:18px;padding:14px 16px}.cegrp h2{display:flex;align-items:center;justify-content:space-between;margin:0 0 4px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cegrp.reply h2{color:var(--g-reply)}.cegrp.clinical h2{color:var(--g-clinical)}.cegrp.review h2{color:var(--g-review)}.cegrp.photos h2{color:var(--g-photos)}.cegrp.paused h2{color:var(--g-paused)}
.cecnt{font-size:12.5px;min-width:28px;height:22px;padding:0 8px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center}
.cegrp.reply .cecnt{background:var(--g-reply-bg)}.cegrp.clinical .cecnt{background:var(--g-clinical-bg)}.cegrp.review .cecnt{background:var(--g-review-bg)}.cegrp.photos .cecnt{background:var(--g-photos-bg)}.cegrp.paused .cecnt{background:var(--g-paused-bg)}
.cegrp .list{margin:0}.cerow{display:flex;align-items:center;gap:12px;padding:12px 0;cursor:pointer}.cerow+.cerow{border-top:1px solid var(--line)}.cerow:has(.cwrite){flex-wrap:wrap;cursor:default}.cerow .cwrite{flex:1 1 100%;margin-top:0;cursor:auto}@media (min-width:480px){.cerow .cwrite{margin-left:52px}}
.cetxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.cename{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.cename b{font-size:15.5px}
.cetag{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
.cewhy{color:var(--muted);font-size:13.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ceact{flex:0 0 auto;width:auto;min-height:44px;margin:0;padding:0 14px;white-space:nowrap}
.cemore{display:block;width:100%;min-height:44px;margin:4px 0 0;border:0;border-top:1px solid var(--line);background:none;color:var(--lilac);font:600 14px inherit;font-family:inherit;cursor:pointer}
.ceempty{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}.ceempty p{margin:0 0 6px}
.cemonth{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 2px 0;font-size:13px;color:var(--muted)}.cemonth b{color:var(--fg)}.cemonth .link,.cestat .link{cursor:pointer;text-decoration:underline dotted}
.ceside{display:none}.cesh{margin:0 0 6px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.cebig{display:block;font-size:19px;margin-bottom:6px}
.cestat{display:grid;grid-template-columns:1fr auto;gap:10px;margin:0;align-items:baseline}.cestat dd{margin:0;font:700 20px var(--mono)}.cestat dd small{font-size:13px;color:var(--muted)}.cestat dd.warn{color:var(--g-review)}
.ceacts{display:flex;flex-wrap:wrap;gap:8px;flex:0 1 auto;min-width:0;align-items:center}
/* acciones de la fila: por debajo de 480 px (y en «Pospuestos», con dos botones largos, por debajo de 768) van en su propia
   línea bajo el texto y se reparten el ancho; envuelven a dos filas si no caben. El reloj de «Recordármelo» no se estira */
@media (max-width:479.98px){.cerow{flex-wrap:wrap}.cetxt{flex-basis:calc(100% - 52px)}
  .ceacts{flex:1 1 calc(100% - 52px);margin-left:52px}.ceacts .ceact{flex:1 1 140px;min-width:0;margin-left:0;white-space:normal;min-height:44px;line-height:1.2;padding-block:6px}
  .ceacts .cesnz{flex:0 0 auto}}
@media (max-width:767.98px){.cegrp.later .cerow{flex-wrap:wrap}.cegrp.later .cetxt{flex-basis:calc(100% - 52px)}
  .cegrp.later .ceacts{flex:1 1 calc(100% - 52px);margin-left:52px}.cegrp.later .ceact{flex:1 1 140px;min-width:0;white-space:normal;min-height:44px;line-height:1.2;padding-block:6px}}
.cename b,.cewhy,.cectx{overflow-wrap:anywhere}.cetag.ceback{white-space:normal}
.cegrp.later .ceic{align-self:flex-start}
.cenotep{display:flex;gap:6px;align-items:flex-start;color:var(--fg)}
@media (max-width:429.98px){.cegrp .cewhy{-webkit-line-clamp:3}}
.cesnz{display:inline-flex;align-items:center;gap:6px;min-width:44px;padding:0 12px;justify-content:center}.cesnzt{display:none}
.cectx{color:var(--muted);font-size:12.5px;line-height:1.35}
.cetag.ceback{background:var(--panel);color:var(--lilac);border:1px solid currentColor}
.cegrp.later h2{color:var(--lilac)}.cegrp.later .cecnt{background:var(--panel2,var(--line))}.cechip.later{color:var(--lilac)}.cechip.later.on{color:#fff}
.cenote{margin:-4px 0 4px;font-size:13px}
.ceprep{margin:12px 2px 0;font-size:14px;color:var(--muted);overflow-wrap:anywhere}.ceprep a{color:var(--lilac);font-weight:600;text-underline-offset:3px}
.clcita{display:flex;gap:6px;align-items:center;margin:8px 0 0;font-size:14px;font-weight:600;color:var(--fg)}.clcita svg{flex:none}
.snzl{display:flex;flex-direction:column;gap:4px;margin:10px 0 0;font-size:14px;color:var(--muted)}.snzl input,.snzl textarea{margin:0;color:var(--fg)}
@media (min-width:768px){.cesnzt{display:inline}}
@media (max-width:420px){.cerow>.ceact{margin-left:52px}}
@container app (min-width:960px){
  .cegrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start;margin-top:14px}
  .cegrid .card{margin-top:0}.cemain{display:flex;flex-direction:column;gap:14px}.cemain .cemonth{display:none}
  .ceside{display:flex;flex-direction:column;gap:14px;position:sticky;top:16px}.ceside .card{margin:0}.ceside .btn{margin:10px 0 0}
  .ceagb{display:none}.cechips{margin:0;padding-inline:2px}
}
/* insignias de la barra */
nav.tabs button{position:relative}
.nbadge{position:absolute;top:0;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--violet);color:#fff;font:700 11px/18px inherit;font-family:inherit;text-align:center}

/* Clientes: lista compacta por prioridad (mismos grupos y colores que Mi centro) y detalle al tocar */
:root{--g-good:#86efac;--g-good-bg:rgba(52,211,153,.14);--g-noapp:#a9a7b8;--g-noapp-bg:rgba(201,199,217,.08)}
:root[data-theme=light]{--g-good:#1d6b3a;--g-good-bg:#e7f6ec;--g-noapp:#5f5d77;--g-noapp-bg:#f4f3f8}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.clhead{display:flex;align-items:center;justify-content:space-between;gap:12px}.clhead h1{margin:0;font-size:26px}
.clnew{display:inline-flex;align-items:center;gap:6px;width:auto;margin:0;padding:0 18px;min-height:44px}.clnew .li svg{width:16px;height:16px}
.clsum{margin:4px 0 12px;color:var(--muted);font-size:14px}
.clq input{margin:0}
.cltools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 8px;margin:0 0 12px}
.cltools .clq{flex:1 1 100%}.cltools .cechips{flex:1 1 calc(100% + 32px);min-width:0}
.clmorebtn{display:inline-flex;align-items:center}
.clfdlg{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;height:90vh;max-height:90vh;border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;background:var(--panel);color:var(--fg);padding:16px 16px calc(env(safe-area-inset-bottom) + 16px);flex-direction:column}
.clfdlg[open]{display:flex}.clfdlg::backdrop{background:rgba(10,6,25,.5)}
.clsheet-l{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-content:flex-start;flex:1;overflow-y:auto}
.clfdlg .btn{margin:12px 0 0;min-height:48px}
.clsort{display:flex;align-items:center;gap:8px;margin:0 0 0 auto;font-size:14px;color:var(--muted)}.clsort select{width:auto;margin:0;min-height:40px}
.cllist{margin:0;display:flex;flex-direction:column;gap:8px}
.cllist .clr,.cllist .clr:last-child{display:block;padding:12px 14px;border-bottom:1.5px solid var(--line)}.cllist .clr.sel,.cllist .clr.open{border-bottom-color:#5b31c9}.clr{background:var(--panel);border:1.5px solid var(--line);border-radius:18px;padding:12px 14px;cursor:pointer}.clr:focus-visible{outline:3px solid var(--lilac);outline-offset:2px}
.clr.sel,.clr.open{background:#ece7fb;border-color:#5b31c9}
:root:not([data-theme=light]) .clr.sel,:root:not([data-theme=light]) .clr.open{background:rgba(124,58,237,.18)}
.clrm{display:flex;align-items:center;gap:12px}.clrm .cename b{white-space:normal;overflow-wrap:anywhere}.clrm .ceact{margin-left:auto;flex:none;min-width:104px;justify-content:center}
.clav{width:44px;height:44px;min-width:44px;border-radius:50%;flex:none;object-fit:cover;box-shadow:0 0 0 2px var(--line)}
.clav.ini{display:inline-flex;align-items:center;justify-content:center;font-weight:700;background:var(--g-reply-bg);color:var(--g-reply)}
.clav.clinical{box-shadow:0 0 0 2px var(--g-clinical)}.clav.review{box-shadow:0 0 0 2px var(--g-review)}.clav.photos{box-shadow:0 0 0 2px var(--g-photos)}
.clav.paused{box-shadow:0 0 0 2px var(--g-paused)}.clav.reply{box-shadow:0 0 0 2px var(--g-reply)}.clav.noapp{box-shadow:0 0 0 2px var(--g-noapp)}
.clav.ini.clinical{background:var(--g-clinical-bg);color:var(--g-clinical)}.clav.ini.review{background:var(--g-review-bg);color:var(--g-review)}.clav.ini.photos{background:var(--g-photos-bg);color:var(--g-photos)}
.clav.ini.paused{background:var(--g-paused-bg);color:var(--g-paused)}.clav.ini.noapp{background:var(--g-noapp-bg);color:var(--g-noapp)}
.clav.big{width:56px;height:56px;font-size:22px}
.cetag.noapp{background:var(--g-noapp-bg);color:var(--g-noapp)}
.mgood{color:var(--g-good);font-weight:600}.mbad{color:var(--g-clinical);font-weight:600}
.clrx{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);cursor:default}
.clboxes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.clboxes.four{grid-template-columns:repeat(2,1fr)}
.clbox{border:1px solid var(--line);border-radius:12px;padding:8px 10px;min-width:0}.clbox small{display:block;font-size:12px;color:var(--muted)}.clbox b{font-size:14px;overflow-wrap:normal;hyphens:none}
.clchips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.clm{font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--g-paused-bg);color:var(--fg)}.clm.good{background:var(--g-good-bg);color:var(--g-good)}.clm.bad{background:var(--g-clinical-bg);color:var(--g-clinical)}
.cltodo{border-radius:14px;padding:10px 12px;font-size:14px;background:var(--g-paused-bg);margin:10px 0}.cltodo small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
.cltodo.clinical{background:var(--g-clinical-bg)}.cltodo.clinical small{color:var(--g-clinical)}.cltodo.review{background:var(--g-review-bg)}.cltodo.review small{color:var(--g-review)}
.cltodo.photos{background:var(--g-photos-bg)}.cltodo.photos small{color:var(--g-photos)}.cltodo.reply{background:var(--g-reply-bg)}.cltodo.reply small{color:var(--g-reply)}.cltodo.noapp{background:var(--g-noapp-bg)}
/* botonera de «Qué hacer»: columnas iguales, misma altura y radio; uno suelto ocupa su columna */
.clacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;align-items:start;margin:10px 0 0}.clcol{display:flex;flex-direction:column;min-width:0}.clcol .clhint{margin-top:4px}.clacts .btn{width:100%;margin:0;min-height:44px;padding:6px 12px;line-height:1.25;white-space:normal}
.clph{display:flex;align-items:center;gap:14px}.clphn{flex:1 1 auto;min-width:0}.clphl{cursor:pointer}h2.clphl:hover{text-decoration:underline}.clfull{flex:none;width:auto;margin:0;padding:0 14px;min-height:44px;white-space:nowrap}.clph h2{margin:0;font-size:20px}.clph p{margin:2px 0 0;font-size:13.5px}
.clzones{margin:0}.clzones li{display:flex;justify-content:space-between;gap:10px;padding:8px 0}
.clfab{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom) + 84px);z-index:25;width:56px;height:56px;border-radius:50%;border:0;background:var(--violet);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(91,49,201,.45);cursor:pointer}
.clfab{transition:transform .2s,opacity .2s}.clfab.hide{transform:translateY(24px);opacity:0;pointer-events:none}
.clr.open .clrm .ceact{display:none}
.clfab svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2}
.cldlg{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 40px);top:calc(env(safe-area-inset-top) + 12px);bottom:calc(env(safe-area-inset-bottom) + 12px);border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--fg);padding:16px}
.cldlg::backdrop{background:rgba(10,6,25,.5)}
.cl-pane:empty{display:none}
@container app (min-width:960px){
  .cl-split{display:grid;grid-template-columns:minmax(340px,440px) minmax(0,1fr);gap:20px;align-items:start}
  .cl-pane{position:sticky;top:16px}.cl-pane .card{margin:0}
  .cltools .clq{flex:1 1 260px;min-width:260px}.cltools .cechips{flex:0 1 auto;flex-wrap:wrap;overflow:visible;margin:0;padding:0}
  .cltools .cechip,.clmorebtn{flex:none;white-space:nowrap}.clsort{margin:0}
  .clfdlg{inset:0;margin:auto;width:min(460px,calc(100vw - 32px));height:auto;max-height:80vh;border-radius:18px;border-bottom:1px solid var(--line);padding:16px}
  .cl-pane{max-height:calc(100vh - 112px - env(safe-area-inset-bottom));overflow-y:auto}
}
/* Ficha: cabecera, columna de lo de hoy a la izquierda y pestañas en una línea */
.fhead2{display:flex;align-items:center;gap:12px;margin:4px 0 12px}.fhead2 .cnav{min-width:44px;min-height:44px}
.fhn{flex:1;min-width:0}.fhn h1{margin:0;font-size:22px;overflow-wrap:anywhere}.fhn p{margin:2px 0 0;font-size:13.5px}
.fhb{display:flex;gap:4px;flex:0 0 auto}
.fgrid .card{margin:0 0 12px}.ftodo{width:100%;min-width:0;box-sizing:border-box;white-space:normal}.ftodo p{margin:2px 0 0;overflow-wrap:anywhere}
.fenc summary{cursor:pointer;min-height:28px}
.ftabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 12px;padding:2px}.ftabs::-webkit-scrollbar{display:none}
.ftab{flex:0 0 auto;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--fg);font:600 14px inherit;font-family:inherit;cursor:pointer;white-space:nowrap;touch-action:pan-x}
.ftab.on{background:var(--violet);border-color:var(--violet);color:#fff}.ftab.drag{opacity:.6}
.sabtn{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.sabtn .big{display:block}.skinage h2{margin:0 0 8px}.skinage .pstiles{margin-top:14px}
.ezones{margin:0}.ezrow{display:grid;grid-template-columns:minmax(0,1fr) fit-content(40%);align-items:center;column-gap:12px;width:100%;min-height:44px;padding:6px 4px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:10px}
.ezrow .pill{font-size:12px}.ezrow.sel{background:rgba(124,58,237,.12)}
/* fila de medida: nombre y «desde X» a la izquierda; valor (cifras tabulares, ancho fijo) y estado a la derecha */
.ezn,.ezv{display:flex;flex-direction:column;min-width:0;gap:1px}.ezv{align-items:flex-end;text-align:right}
.ezn small{font-size:12.5px}.ezn>span{overflow-wrap:break-word}.ezv .pill{white-space:normal;text-align:right}.ezv b{font-variant-numeric:tabular-nums;min-width:3.6ch;text-align:right;font-size:17px}
.pill.soft{font-weight:500!important;opacity:.78}   /* «posible…»: más suave que la mejora real o «a vigilar» */
@container app (min-width:960px){
  .fgrid{display:grid;grid-template-columns:minmax(320px,380px) minmax(0,1fr);gap:20px;align-items:start}
  .fleft{position:sticky;top:16px}.ftabs{margin:0 0 12px;padding-inline:2px}
}

/* Agenda: lista por día (preparar cada cita), huecos para recuperar clientes y calendario por tramos del horario */
:root{--g-ok:#86efac;--g-ok-bg:rgba(52,211,153,.14)}:root[data-theme=light]{--g-ok:#1d6b3a;--g-ok-bg:#e7f6ec}
.aghead{display:flex;align-items:center;gap:8px}.aghead .agnav{margin-left:auto}.aghead .agnewb{margin:0}.aghead h1{margin:0;font-size:26px}
.agnewb{display:none;width:auto;margin:0;padding:0 18px;min-height:44px}.agnewb .li svg{width:16px;height:16px}
.agnav{display:flex;gap:4px;margin-left:auto}.agnav .cnav{min-width:44px;min-height:44px;margin:0}
.agnav .agtoday{flex:none;width:auto;padding:0 16px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center}
.agst{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px}.agst.ok{background:var(--g-ok-bg);color:var(--g-ok)}
.agst.wait{background:var(--g-review-bg);color:var(--g-review)}.agst.no{background:var(--g-paused-bg);color:var(--g-paused)}
.agempty{margin:0 0 8px;color:var(--muted);font-size:14px}
.aprov{background:var(--g-review-bg);border-color:transparent;margin:12px 0 0}.aprov .cesh{color:var(--g-review)}
.aprow{display:flex;align-items:center;gap:12px;padding:8px 0}.aprow+.aprow{border-top:1px solid var(--line)}
.agsd{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:56px;padding:6px 0;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--fg);font:inherit;cursor:pointer}
.agsd small{font-size:11px;color:var(--muted)}.agsd i{font-style:normal;color:var(--lilac);line-height:1;min-height:12px}.agsd.today b{color:var(--lilac)}
.agsd.on{background:var(--violet);border-color:var(--violet)}.agsd.on b,.agsd.on small,.agsd.on i{color:#fff}
.aglegend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:10px 0 0;font-size:12.5px;color:var(--muted)}
@container app (min-width:960px){
  .agnewb{display:inline-flex;align-items:center;gap:6px}
  .agside{display:flex;flex-direction:column;gap:14px;position:sticky;top:16px}.agside .card,.agside .aprov{margin:0}
}
@media (min-width:1024px){
  .cechips.fadeR{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
  .cechips.fadeL{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px);mask-image:linear-gradient(90deg,transparent,#000 56px)}
  .cechips.fadeL.fadeR{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
}
@media (max-width:1023px){#v-clients{padding-bottom:64px}#v-agenda{padding-bottom:160px}}   /* el botón flotante no tapa el último elemento */
/* móvil: la fila de filtros se funde por la derecha (se ve que sigue) y «Más filtros» y el orden comparten fila */
@media (max-width:1023px){
  .cechips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);padding-right:48px}
  .clsortl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .clsort select{min-height:44px;max-width:190px}
}
/* móvil: en la ficha, ← y ‹ › ⋯ arriba y la foto con el nombre debajo, a todo el ancho; las pestañas se funden por la derecha */
@media (max-width:719px){
  .fhead2{flex-wrap:wrap}.fhead2 .cnav{width:44px;padding:0;flex:none}
  .fhb{order:1;margin-left:auto}.fhead2>.clav{order:2}.fhn{order:3;flex:1 1 calc(100% - 72px)}
}
@media (max-width:1023px){
  .ftabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);padding-right:48px}
}
/* Ajustes del profesional: tarjeta del centro, aviso «Completa tu centro» y 5 secciones */
:root{--st-amb-bg:rgba(251,191,36,.12);--st-amb-line:rgba(251,191,36,.3);--st-amb-ctl:rgba(251,191,36,.62);--st-amb-t:#fcd34d;--st-sub:var(--muted);--st-line:var(--line)}
:root[data-theme=light]{--st-amb-bg:#fff8ec;--st-amb-line:#f3e3c3;--st-amb-ctl:#b26b00;--st-amb-t:#7a4200;--st-sub:#5b5878;--st-line:#e6e0f7}
.sttop{display:grid;gap:12px;margin-bottom:12px}.sttop .card{margin:0}#st-tasks:empty{display:none}
.stcenter{display:flex;align-items:center;gap:14px}
.stlogo{flex:none;width:56px;height:56px;border-radius:14px;display:grid;place-items:center;font:700 22px inherit;font-family:inherit;background:var(--g-reply-bg);color:var(--lilac);overflow:hidden;position:relative}
.stlogo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:inherit}
/* con logo: borde fino del tema y la imagen siguiendo el redondeo; transparente, sobre baldosa contraria a su tono */
.stlogo.img{background:var(--card)}
.stlogo.img>span{visibility:hidden}
.stlogo.cover img{object-fit:cover}
.stlogo.tr{background:#F4F1FC}.stlogo.tr.lt{background:#2B2640}
.stlogo.tr img{inset:7px;width:calc(100% - 14px);height:calc(100% - 14px);border-radius:0}
.stlogo.img::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.stcn{flex:1;min-width:0}.stcn h2{margin:0;font-size:19px;overflow-wrap:anywhere;cursor:pointer}.stcn p{margin:2px 0 0;font-size:13px;color:var(--st-sub)}.stcn input{margin:0}
.stedit{flex:none;width:44px;height:44px;min-height:44px;padding:0;margin:0;display:grid;place-items:center}
.sttask{background:var(--st-amb-bg);border:1px solid var(--st-amb-line)}.sttask h2{color:var(--st-amb-t);margin:0 0 4px;font-size:16px}.sttask p{margin:0 0 4px;font-size:14px}
.sttask .btn{width:auto;margin:8px 0 0;min-height:44px;padding:0 18px}
#st-tasks .sttask{position:relative}#st-tasks .sttask h2{padding-right:40px}.cdinci{position:relative}.cdinci>p{padding-right:44px}
.sttx{position:absolute;top:4px;right:4px;width:44px;height:44px;min-height:44px;margin:0;padding:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:12px;background:none;box-shadow:none;color:var(--st-amb-t);cursor:pointer}
.sttx:hover{background:var(--st-amb-bg)}.sttx svg{width:20px;height:20px}
.sttask.gone{opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s}
@media (prefers-reduced-motion:reduce){.sttask.gone{transition:none}}
.stgrid,.stcol{display:flex;flex-direction:column;gap:12px}.stsec{margin:0;padding:6px 16px;border-radius:18px;border:1px solid var(--st-line)}
.sttl{margin:12px 0 2px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--st-sub)}
.stwrap{display:contents}
.stl .srow,.stl .strow{min-height:56px;padding:10px 0;border-top:1px solid var(--st-line)}
.stl>:first-child,.stl>:first-child>.smsgs:first-child>.srow,.stl>.smsgs:first-child>.srow{border-top:0}
.stl .smsgs{border-top:0}.stl .stwrap>.smsgs+.smsgs>.srow,.stl>*+*>.srow{border-top:1px solid var(--st-line)}
.stl .srow>span{font-size:15px;font-weight:600;min-width:0}.stl .srow small{font-size:13px;font-weight:400;color:var(--st-sub);margin-top:2px}
.sttrunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stok{display:inline-flex;align-items:center;gap:4px;color:var(--g-good);font-weight:600}.stok svg{width:14px;height:14px}
.stwarn{color:var(--st-amb-t)}.sttag{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:700;background:var(--st-amb-bg);color:var(--st-amb-t);border:1px solid var(--st-amb-ctl)}
.strow{display:flex;align-items:center;width:100%;background:none;border:0;color:var(--fg);font:inherit;text-align:left;cursor:pointer;margin:0;border-radius:0}
.stl .ckl.strow{margin:0;padding:10px 0;border-radius:0;border-left:0;border-right:0;border-bottom:0;background:none}.stl .ckl.strow span{font-weight:600;font-size:15px}.stl .ckl.strow small{font-weight:400;font-size:13px;color:var(--st-sub)}
.stout{justify-content:center;color:var(--lilac);font-weight:600}.stout span{flex:none}
.stquit{justify-content:center;color:var(--st-sub);font-size:14px;font-weight:400}
.stqdlg{box-sizing:border-box;overflow-y:auto;overflow-x:hidden;position:fixed;inset:0;width:auto;max-width:560px;height:100%;max-height:100%;margin:0 auto;border:0;background:var(--bg);color:var(--fg);padding:calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 24px)}
.stqdlg::backdrop{background:rgba(10,6,25,.6)}.stqhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}.stqhead h2{margin:0}.stqdlg .x{flex:none;min-width:44px;min-height:44px}.stqdlg .x{font-size:28px;color:var(--fg)}.stqdlg p,.stqdlg li{overflow-wrap:anywhere}.stqdlg input{width:100%;box-sizing:border-box}.stqlist{padding-left:20px;margin:0 0 12px}.stqlist li{margin:4px 0}
.stqdlg label{display:block;margin:16px 0 6px}.stqdlg .btn.danger{margin-top:12px;min-height:48px;background:#b91c1c;color:#fff;border:0}.stqdlg .btn.danger:disabled{opacity:.45}
.sfoot{text-align:center;font-size:12px;color:var(--st-sub)}
@media (min-width:720px){.stqdlg{height:fit-content;max-height:90vh;margin:auto;border-radius:20px;border:1px solid var(--line)}}
/* Ajustes desde 900 px: tarjeta y aviso en una fila; dos columnas independientes; resumen a la derecha o, si no cabe, debajo */
@container app (min-width:840px){
  .sttop{grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:20px;margin-bottom:20px}
  .stgrid{flex-direction:row;align-items:flex-start;gap:20px}.stcol{flex:1 1 0;min-width:0;gap:20px}
  .stl .srow>span{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:16px}
  .stl .srow>span>small{flex:0 1 auto;margin:0 0 0 auto;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
}
.prnoinci{margin:4px 0 8px;display:inline-flex;align-items:center;gap:6px}
/* tarjeta de cita: botones a su medida, a la izquierda; huecos libres entre las citas, en su hora */
/* Agenda: el día elegido (línea de tiempo) y el mes compacto */
.aghead{justify-content:space-between;align-items:flex-start;margin-bottom:12px}.aghead .clsum{margin:4px 0 0}
.agmbtn{display:grid;place-items:center;width:44px;padding:0}.agmbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
.agdaycard{margin:0 0 12px}.agdh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.agdh h2{margin:0;font-size:19px}.agdh p{margin:2px 0 0;font-size:13.5px}.agdh .agnav{flex:none}
.tlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tl{display:flex;gap:12px;align-items:flex-start}.tlt{flex:0 0 52px;display:flex;flex-direction:column;padding-top:12px}
.tlt b{font:700 16px var(--mono)}.tlt small{font-size:12px;color:var(--muted)}
.tlc{flex:1;min-width:0;border-radius:14px}
.tl.appt .tlc{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--violet);padding:12px 14px}
.tl.appt .cename{gap:6px}.tl.appt .muted{font-size:13.5px;margin:2px 0 0}.tl.appt .cltodo{margin:8px 0 0}
.tl.appt.past .tlc{opacity:.75;background:rgb(var(--ink) / .04);border-left-color:var(--line-strong)}
.tlh{display:flex;align-items:baseline;gap:6px;margin-bottom:2px}.tlh b{font:700 15px var(--mono)}.tlh small{font-size:12px;color:var(--muted)}
.tlacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.tlacts .btn{width:auto;flex:none;margin:0;min-height:44px;padding:0 18px}
.tlfree{display:block;width:100%;min-height:48px;padding:12px 14px;text-align:left;border:1.5px dashed var(--line-strong);background:none;color:var(--lilac);font:600 14px inherit;font-family:inherit;cursor:pointer}
.tlshut{padding:8px 14px;font-size:13px;color:var(--muted);background:repeating-linear-gradient(135deg,var(--g-paused-bg) 0 6px,transparent 6px 12px)}
.tl.shut .tlt{padding-top:8px}
.agstrip2{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 12px;padding:2px}.agstrip2::-webkit-scrollbar{display:none}
.agstrip2 .agsd{flex:0 0 52px;min-height:64px}.agsd.today{border:2px solid var(--violet)}.agsd.past:not(.on) b{color:var(--muted)}
.agmonth{margin:0}.agmh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.agmh b{font-size:16px}
.agmg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.agmw{font-size:12px;font-weight:700;color:var(--muted);padding:2px 0 4px}
.agmd{position:relative;min-height:44px;border:2px solid transparent;border-radius:10px;background:none;color:var(--fg);font:600 14px inherit;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.agmd i{font-style:normal;color:var(--lilac);font-size:12px;line-height:.6;min-height:7px}
.agmd.past{color:var(--muted)}.agmd.out{color:var(--faint);opacity:.55}.agmd.today{border-color:var(--violet)}
.agmd.on{background:var(--violet);border-color:var(--violet);color:#fff}.agmd.on i{color:#fff}
.agmdlg{padding:12px}.agmdlg .agmonth{border:0;box-shadow:none;background:none;padding:0}
@media (max-width:1023px){.tlacts .btn{flex:1 1 0}.agdh .agnav .agtoday{display:inline-flex}}
@container app (min-width:960px){.aggrid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);gap:24px;align-items:start}}
.agmd.shut:not(.on){opacity:.6}
.agmbtn{height:44px;border:1px solid var(--line-strong)}
/* «Aprovecha los huecos»: el nombre en una línea (elipsis solo en él), el detalle entero debajo; si no cabe, «Proponer» baja a su fila */
.aprow{flex-wrap:wrap}.aprow .cetxt{flex:999 1 200px}.aprow .cetxt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aprow .cetxt .cewhy{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aprow .ceact{flex:1 0 auto;min-height:44px}
/* Clientes en el móvil: casillas con el dato corto (2 columnas si no caben) y filas plegadas de una línea, todas iguales */
@media (max-width:1023px){
  .clrx .clboxes{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
  .clrm .ceact{min-width:0;padding:0 14px}
  .clrm .cename{min-width:0}.clrm .cename b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
  .clrm .cewhy{display:block;overflow:visible;white-space:normal;overflow-wrap:break-word}   /* entero, en varias líneas: nunca «…» */
  .clrm .cewhy .cetag{display:inline;white-space:normal;box-decoration-break:clone;-webkit-box-decoration-break:clone}
}
/* Comparar: atajos, tira de miniaturas por día, visor y diferencias al lado (escritorio) o debajo (móvil) */
.side .lbl{position:absolute;top:10px;z-index:3;font:500 12px var(--mono);padding:3px 8px;border-radius:8px;background:rgba(7,7,11,.7);color:#ecebf3;pointer-events:none}
.cdiff h2{margin:0}.cdiff #c-ds{margin:2px 0 10px;font-size:13px}
.cdl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.cdr{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:6px 10px;border:1px solid var(--line);border-radius:12px;background:none;color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.cdr span{font-size:13.5px;min-width:0}.cdr small{display:block;font-size:11.5px;color:var(--muted)}.cdr b{flex:none;font-size:13.5px}
.cdr.bad b{color:var(--g-clinical)}.cdr.good b{color:var(--g-good)}.cdr.flat b{color:var(--muted)}
.cdr.bad{border-color:color-mix(in srgb,var(--g-clinical) 40%,transparent)}.cdr.good{border-color:color-mix(in srgb,var(--g-good) 40%,transparent)}
.cdr.on{background:var(--g-reply-bg);border-color:var(--violet)}.cdr:disabled{cursor:default}
.cacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.cacts .btn{width:auto;margin:0;min-height:44px;padding:0 16px;display:inline-flex;align-items:center;text-decoration:none}
/* las diferencias a la derecha solo si caben dos fotos de ~380 px y el panel (en la ficha, con su columna izquierda, van debajo) */
.cwrap{container-type:inline-size}
@container (min-width:1100px){
  .cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,360px);gap:20px;align-items:start}.cgrid .card{margin-top:0}.cdl{grid-template-columns:1fr}
}
.cgrid .side{max-width:776px;margin:0 auto}
.cdh{margin:12px 0 6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.cdh.bad{color:var(--g-clinical)}.cdh.good{color:var(--g-good)}
.cdg>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer;min-height:44px}.cdg>summary::-webkit-details-marker{display:none}
.cdg>summary{justify-content:flex-start;gap:12px}.cdg>summary .cdh{margin:0;white-space:nowrap}.cdg>summary .cemore{margin:0;padding:0;border:0;width:auto;min-height:0;font-size:13px;line-height:1.2}.cdg[open]>summary .cemore{display:none}
.cdr.flat b{font:500 12.5px inherit;font-family:inherit}.ctr{font-style:normal;font-weight:600}.ctr.good{color:var(--g-good)}.ctr.bad{color:var(--g-clinical)}
/* Evolución del cliente: «a vigilar» en ámbar (el rojo solo en el centro) */
:root{--vig:#fbbf24;--vig-bg:rgba(251,191,36,.12);--vig-line:rgba(251,191,36,.4)}
:root[data-theme=light]{--vig:#9A4A00;--vig-bg:#FFF8F0;--vig-line:#f1d3ae}
.pill.warn,.edelta.warn{color:var(--vig);background:var(--vig-bg);border-color:var(--vig-line)}
.etile.warn{border-color:var(--vig-line)}
.evhead{display:flex;align-items:center;gap:12px;margin:4px 0 12px}.evhead h1{margin:0;flex:1}
.evmsg{position:relative;width:44px;height:44px;min-height:44px;margin:0;padding:0;display:grid;place-items:center;flex:0 0 auto}
.evbadge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#5B31C9;color:#fff;font:700 12px/20px var(--mono);box-sizing:border-box}
.evnote{display:flex;align-items:center;gap:6px;margin:0 0 12px;padding:4px 4px 4px 12px;border:1px solid var(--vig-line);background:var(--vig-bg);border-radius:14px}
.evnote-t{flex:1;min-width:0;min-height:44px;display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;color:var(--fg);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.evnote-t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evnote .x{width:44px;height:44px;flex:0 0 auto}
.evper{flex-wrap:wrap;gap:6px;margin:0 0 12px}.evper .chip{flex:1 1 auto;padding:8px 10px;min-height:44px;white-space:nowrap;font:inherit;font-size:14px;color:var(--fg)}
/* «Tu piel en perspectiva»: tarjeta como las demás; número en el violeta de marca y «años de piel» en su línea base */
.evhero .evlbl{display:block;color:var(--muted70);font-size:13px;font-weight:600;white-space:nowrap;overflow-wrap:normal}
.evage{display:flex;align-items:baseline;gap:8px;flex-wrap:nowrap;margin:6px 0 10px;font-size:16px;color:var(--fg)}.evage b{font:700 44px/1 var(--mono);letter-spacing:-.02em;color:var(--lilac)}.evage span{white-space:nowrap}
.sanote{display:block;font-size:12px;font-weight:400;margin-top:2px}.evhero .sanote{margin:-6px 0 10px}
.evdelta{display:inline-flex;align-items:center;gap:6px;margin:0;padding:5px 12px;border-radius:999px;border:1px solid;font-size:14px;font-weight:600;line-height:1.3}
.evdelta svg{width:16px;height:16px;flex:none}
.evdelta.good{color:var(--good-ink);background:color-mix(in srgb,var(--good) 10%,transparent);border-color:color-mix(in srgb,var(--good) 40%,transparent)}
.evdelta.warn{color:var(--vig);background:var(--vig-bg);border-color:var(--vig-line)}
.evdelta.flat{color:var(--fg);background:transparent;border-color:var(--line-strong,var(--line))}
:root{--good-ink:#34d399;--muted70:rgba(236,236,242,.7)}:root[data-theme=light]{--good-ink:#047857;--muted70:rgba(29,24,48,.7)}   /* gris con margen AA (≥ 6:1) */
.evfoot{display:flex;flex-wrap:wrap;gap:2px 14px;margin:12px 0 0;font-size:13.5px;color:var(--muted70)}.evfoot span{white-space:nowrap}.evfoot span:empty{display:none}
.evstep{background:var(--vig-bg);border-color:var(--vig-line)}.evstep small{color:var(--vig);font-weight:700;font-size:13px}
.evstep p{margin:6px 0 10px;color:var(--fg)}.evstep.ok p{margin-bottom:0}.evstep .btn{width:auto;min-height:44px;margin:0}
.evh2{margin:18px 4px 10px;font-size:17px}
.evtop{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}.evtop .etile{cursor:pointer;min-height:44px}
.evexp{font-size:13px;margin:8px 0 0}
.evall>summary{cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center}.evall>summary::-webkit-details-marker{display:none}
.evall>summary h2{margin:0}.evall>summary::after{content:"›";margin-left:auto;font-size:20px;color:var(--muted);transition:transform .2s}.evall[open]>summary::after{transform:rotate(90deg)}
@container app (min-width:840px){.evtop{grid-template-columns:repeat(4,1fr)}}
/* Evolución del cliente desde 960 px de contenido: resumen, siguiente paso y contadores a la izquierda;
   lo que más ha cambiado, la gráfica y todas las medidas a la derecha. En el móvil, una columna en el mismo orden */
@container app (min-width:960px){
  .evcols{display:grid;grid-template-columns:minmax(340px,400px) minmax(0,1fr);gap:20px;align-items:start}
  .evl>:first-child,.evr>:first-child{margin-top:0}.evr{container:evr/inline-size}
}
@container evr (max-width:719px){.evtop{grid-template-columns:1fr 1fr}}
/* «Complementos de hoy» en pantalla ancha: etiqueta y control juntos, sin hueco entre ellos */
@container app (min-width:960px){.supday .supl{flex:0 1 auto}.supday .mseg{flex:0 1 280px}}
/* Ajustes: icono en caja de 36 px con el color de su sección (no del icono), en las dos apps */
:root{--sc-centro:#c4b5fd;--sc-centro-bg:rgba(167,139,250,.16);--sc-agenda:#5eead4;--sc-agenda-bg:rgba(45,212,191,.14);--sc-carta:#86efac;--sc-carta-bg:rgba(52,211,153,.14);
  --sc-seg:#93c5fd;--sc-seg-bg:rgba(96,165,250,.16);--sc-gris:#c9c7d9;--sc-gris-bg:rgba(201,199,217,.1);--sc-datos:#fcd34d;--sc-datos-bg:rgba(251,191,36,.14)}
:root[data-theme=light]{--sc-centro:#5B31C9;--sc-centro-bg:#ECE7FB;--sc-agenda:#0F6B6B;--sc-agenda-bg:#E2F4F4;--sc-carta:#1D6B3A;--sc-carta-bg:#E7F6EC;
  --sc-seg:#1F4FA8;--sc-seg-bg:#E6EEFD;--sc-gris:#4A4866;--sc-gris-bg:#EEEDF4;--sc-datos:#7A4200;--sc-datos-bg:#FFF1D6}
.sec-centro{--sc:var(--sc-centro);--sc-bg:var(--sc-centro-bg)}.sec-agenda{--sc:var(--sc-agenda);--sc-bg:var(--sc-agenda-bg)}
.sec-carta,.sec-rutina{--sc:var(--sc-carta);--sc-bg:var(--sc-carta-bg)}.sec-seg{--sc:var(--sc-seg);--sc-bg:var(--sc-seg-bg)}
.sec-cuenta,.sec-priv{--sc:var(--sc-gris);--sc-bg:var(--sc-gris-bg)}.sec-datos{--sc:var(--sc-datos);--sc-bg:var(--sc-datos-bg)}
.secic .srow em,.secic .ckl em{flex:0 0 36px;width:36px;height:36px;border-radius:10px;background:var(--sc-bg);border:0;box-shadow:none}
.secic .srow em i.li,.secic .ckl em i.li{color:var(--sc)}
.secic .srow:hover em{box-shadow:none}
.stl .srow,.stl .ckl.strow{gap:12px}
.sec-priv h2{margin-bottom:4px}.sec-priv .stout{min-height:48px;margin-top:4px;border-top:1px solid var(--line)}.sec-priv .stquit{min-height:44px}
.sbook{width:100%;margin:4px 0 10px;min-height:44px}
.scgrid .card{margin:0}
.stpers{display:grid;gap:14px;margin:0 0 20px}.stpers>:empty{display:none}.stpers .card{margin:0}.stpersh{display:flex;align-items:center;gap:8px;margin:0;font-size:17px}
@container app (min-width:840px){.stpers{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}.stpers>.stpersh,.stpers>.sstats{grid-column:1/-1}}
/* Comparar del cliente: cabecera, atajos en una fila, ayuda de fotos y «a vigilar» en ámbar */
.chead{margin-bottom:10px}.chead p{margin:2px 0 0;font-size:14px}
.ctips ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}.ctips li{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--fg)}
.ctips li span{flex:0 0 22px;color:var(--lilac)}.ctips li svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.cdr.warn b,.cdh.warn,.ctr.warn{color:var(--vig)}.cdr.warn{border-color:var(--vig-line)}.ztag.warn{color:var(--vig);border-color:var(--vig)}
#c-ds a{color:var(--lilac);font-weight:600}
#c-save{min-height:44px}
/* Mi rutina: cabecera, «Hoy» con dos interruptores, calendario con estados sin depender del color y detalle del día */
html{background:var(--bg)}   /* sin destello claro al rebotar el desplazamiento */
:root{--rt-on:#7c4dff;--dot-ph:#7aa7ff;--dot-nt:#f5b041}:root[data-theme=light]{--rt-on:#5B31C9;--dot-ph:#1F4FA8;--dot-nt:#C47A00}
.rtgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}.rtgrid>.card{margin:0}
.rthead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 0}.rthead h1{margin:0}
.rthead .btn{width:auto;margin:0;min-height:44px;padding:0 14px;display:inline-flex;align-items:center;gap:6px}
.rthh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}.rthh h2{margin:0}
.rtstk{color:var(--good);font-weight:700;font-size:14px}
.rtbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 8px}
.rtb{min-height:72px;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:1.5px solid var(--line-strong);background:var(--panel);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.rtb b{display:block;font-size:17px}.rtb small{display:block;font-size:13px;color:var(--muted)}
.rtbi svg{width:28px;height:28px}.rtb.on{background:var(--rt-on);border-color:var(--rt-on);color:#fff}.rtb.on small{color:#fff}.rtb.on .mom{stroke:#fff;color:#fff}
.rtb:disabled{opacity:.6}
.rtquick{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.rtq{min-height:40px;max-width:100%;padding:0 14px 0 10px;border-radius:12px;border:1px solid var(--line-strong);background:transparent;color:var(--fg);font:inherit;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.rtq span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rtq svg{width:15px;height:15px;flex:none}
.rtq.on{background:color-mix(in srgb,var(--rt-on) 18%,transparent);border-color:color-mix(in srgb,var(--rt-on) 55%,transparent)}.rtq.on svg{color:var(--lilac)}
.rtqx{border-style:dashed;color:var(--lilac)}.rtq:disabled{opacity:.6}
.xlist{list-style:none;margin:0 0 10px;padding:0}.xlist li[hidden]{display:none}
.xrow{width:100%;min-height:48px;display:flex;align-items:center;gap:10px;padding:8px 4px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.xrow .xn{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.xrow .xn small{display:block;font-size:12.5px;color:var(--muted)}
.xrow .xs{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center}.xrow .xs svg{width:15px;height:15px}
.xrow.on .xs{background:var(--rt-on);border-color:var(--rt-on);color:#fff}.xnew{color:var(--lilac);border-bottom:0}.xnew svg{width:18px;height:18px}
.cal .cd{border:1.5px solid var(--line-strong);background:transparent;color:var(--fg)}
.cal .cd.both{background:var(--rt-on);border-color:var(--rt-on);color:#fff}
.cal .cd.one{background:linear-gradient(135deg,color-mix(in srgb,var(--rt-on) 38%,transparent) 50%,transparent 50%);border-color:var(--rt-on)}
.cal .cd.pre,.cal .cd.future{border-color:transparent;background:none;color:var(--faint)}
.cal .cd.sel{background:var(--rt-on);border-color:var(--rt-on);color:#fff;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--rt-on)}
.cal .cd.today{font-weight:800}
.cdots{position:absolute;bottom:3px;left:0;right:0;display:flex;justify-content:center;gap:3px}
.cd .cdots i.ph,.cd .cdots i.nt{position:static;transform:none;width:7px;height:7px;border-radius:50%}
.cd .cdots .ph,.callegend .ph{background:var(--dot-ph)}.cd .cdots .nt,.callegend .nt{background:var(--dot-nt)}
.callegend .ph,.callegend .nt{width:7px;height:7px;border-radius:50%;display:inline-block}
.cdsw{display:inline-block;width:14px;height:14px;border-radius:4px;border:1.5px solid var(--line-strong)}
.cdsw.both{background:var(--rt-on);border-color:var(--rt-on)}.cdsw.one{background:linear-gradient(135deg,color-mix(in srgb,var(--rt-on) 38%,transparent) 50%,transparent 50%);border-color:var(--rt-on)}
.caldh{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:0 0 10px}.caldh h3{margin:0;font-size:18px}.caldh p{margin:2px 0 0;font-size:13.5px}
.caldh .btn{width:auto;margin:0;min-height:44px;padding:0 16px}
.rtday .calgrid2{grid-template-columns:1fr}
.rtday .calgrp-box{padding:0 12px}.rtday .calgrp-h{min-height:44px;margin:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.rtday .calgrp-h::-webkit-details-marker{display:none}
.calprods li{align-items:flex-start}.calpn{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rtpunt{display:inline-block;margin-left:4px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:700;color:var(--vig);background:var(--vig-bg);border:1px solid var(--vig-line)}
.calap{width:100%;min-height:44px;margin:4px 0 10px}.rtextra{width:100%;min-height:44px;margin:10px 0 0;border-style:dashed}
.calprods .x{min-width:44px;min-height:44px}
.daymenu .pmclose{color:var(--muted);text-align:center}
.toastb{width:auto;margin:0 0 0 8px;padding:4px 12px;min-height:36px}
.rtsees{text-align:center;font-size:12px;margin:14px 0 4px}
@container app (min-width:960px){
  .rtgrid{grid-template-columns:minmax(0,1fr) 360px;align-items:start}
  .rtgrid>*{grid-column:1}.rtgrid>.rthead{grid-column:1/-1}.rtgrid>.rtcal{grid-column:2;grid-row:2/span 6;position:sticky;top:16px}
  .rtbtns{grid-template-columns:1fr 1fr}
  .rtday .calgrid2{grid-template-columns:1fr 1fr}
  .rtday .calprods.num{columns:1}
}
/* Comparar del cliente: tarjetas en tres líneas, «Estable» como lista y, en escritorio, foto ~60 % y Diferencias fija */
.cdr.cdc{display:grid;grid-template-columns:1fr;align-content:start;gap:2px;min-height:44px;padding:10px 12px}
.cdc .cdn{font-size:14px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cdc .cdv{font-size:13px;color:var(--muted)}.cdc .cdt{font-size:13px;font-weight:600}.cdc.good .cdt{color:var(--g-good)}.cdc.warn .cdt{color:var(--vig)}
.cdc small{font-size:11.5px;color:var(--muted)}
.cflat{list-style:none;margin:4px 0 0;padding:0}.cflat li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.cflat li b{flex:none;font-weight:500;color:var(--muted)}
@container (min-width:900px){
  .cwrap.cli .cdl{grid-template-columns:1fr}
}
/* retoques: «Hoy» en dos líneas a 360 px, ✓ en la línea del título, «Estable» con botón */
@media (max-width:480px){.rtb{padding:10px;gap:8px}.rtbi svg{width:22px;height:22px}.rtb b{font-size:16px}.rtb small{font-size:12.5px;line-height:1.35}}
.rtday .calgrp-h{flex-wrap:wrap;row-gap:0}.calgt{flex:1 1 auto}.rtday .calgrp-h .calok,.rtday .calgrp-h .calpend{margin-left:0}
.cflh{display:flex;align-items:center;gap:12px;margin-top:12px}.cflh .cdh{margin:0}
.cflatc .cemore{min-height:44px;padding:0 4px;border:0;background:none;color:var(--lilac);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.cflat li b small{font-size:12px;color:var(--faint)}
@media (max-width:420px){.rthead h1{font-size:26px}.rthead .btn{white-space:nowrap;padding:0 12px;font-size:14px}}
.cflh .cdh{white-space:nowrap}.cwrap.cli .cdl{grid-template-columns:1fr}
/* «Toca para apuntar» en una línea y, a 380 px o menos, «✓ apuntada» debajo del título en las dos secciones */
@media (max-width:380px){.rtday .calgrp-h .calok,.rtday .calgrp-h .calpend{flex-basis:100%}}
.rtday .calgt{font-size:16px}.rtday .calgrp-h .calok,.rtday .calgrp-h .calpend{font-size:11.5px}.rtday .calpend{color:var(--vig)}
@media (max-width:480px){.rtday.card{padding-left:14px;padding-right:14px}.rtday .calgrp-box{padding:0 10px}}
.rtbtns{grid-template-columns:repeat(2,minmax(0,1fr))}.rtb{min-width:0}
@media (max-width:380px){.rtbtns{gap:8px}.rthoy.card{padding-left:14px;padding-right:14px}}
/* «Hoy»: texto que puede pasar a dos líneas (también con letra del sistema grande), con aire a los lados */
.rtb>span:last-child{min-width:0}
/* Diferencias (cliente): dos columnas; una tarjeta sola o la última impar, a ancho completo con valores y cambio en una línea */
.cwrap.cli .cdl{grid-template-columns:repeat(2,minmax(0,1fr))}
.cwrap.cli .cdc:last-child:nth-child(odd){grid-column:1/-1;grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
.cwrap.cli .cdc:last-child:nth-child(odd) .cdn,.cwrap.cli .cdc:last-child:nth-child(odd) small{grid-column:1/-1}
.cwrap.cli .cdc:last-child:nth-child(odd) .cdt{grid-row:2;grid-column:1}
.cwrap.cli .cdc:last-child:nth-child(odd) .cdv{grid-row:2;grid-column:2;text-align:right}
.cflh{justify-content:flex-start;min-height:44px}.cflh .cemore{width:auto;margin:0;flex:none}
@media (max-width:600px){.cwrap.cli .cacts .btn{width:100%;min-height:44px}}
@media (max-width:600px){.cwrap.cli .cacts .btn{justify-content:center}}
.cflat li b{text-align:right}.cflat li b small{display:block;margin-top:2px}
/* «Hoy»: icono y título en una fila, estado debajo; las dos tarjetas a la misma altura, centradas */
.rtb[data-tg]{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:8px;row-gap:2px;min-height:84px;padding:10px 12px;text-align:left}
.rtb[data-tg] .rtbi{grid-row:1;grid-column:1;line-height:0;margin:0}.rtb[data-tg] b{grid-row:1;grid-column:2;align-self:center}
.rtb[data-tg] small{grid-row:2;grid-column:1/-1;line-height:1.35}
.rtb[data-tg] .rtbi svg{width:22px;height:22px}
/* aviso con «Deshacer»: separado del texto, a la derecha si cabe; si no, debajo */
.toastrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}.toastrow>span{flex:1 1 180px}
.toastrow .toastb{min-height:44px;margin:0;padding:0 16px;flex:none;color:#fff;border-color:rgba(255,255,255,.6)}
/* Evolución: aclaración del recuento y miniaturas con aire */
.evtop .etile{padding:12px 14px}.evtop .etile .erow .v{min-width:0}.evtop .espark{flex:none;width:52px;height:20px;margin-right:8px;overflow:hidden}
.evtop .etile .erow{flex-direction:column;align-items:flex-start;gap:4px}.evtop .espark{margin:0 8px 2px 0}
.espark.warn polyline{stroke:var(--vig)}
.rtb[data-tg] small{grid-column:2}   /* el estado, alineado con el título (no bajo el icono) */
/* Evolución: el morado solo para la edad de la piel y la racha; las tres cifras aparte, cada una con su color e icono */
.evcnts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 6px}
.evc{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:44px;padding:12px;border-radius:16px;border:1px solid var(--line);background:var(--panel);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.evc b{font:700 26px/1.1 var(--mono)}.evc small{font-size:13px;color:var(--muted)}
.evci svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.evc.good b,.evc.good .evci{color:var(--good)}.evc.warn b,.evc.warn .evci{color:var(--vig)}.evc.flat b,.evc.flat .evci{color:var(--muted)}
.evc.good{border-color:color-mix(in srgb,var(--good) 35%,var(--line))}.evc.warn{border-color:var(--vig-line)}
.evc[aria-pressed=true]{box-shadow:0 0 0 2px var(--lilac)}
.evcnt{margin:0 4px 14px;font-size:12.5px;color:var(--muted)}

.evallb{width:100%;min-height:44px;margin:8px 0 0}
/* cifras más compactas: icono y número en una fila, etiqueta debajo */
.evc{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:6px;row-gap:0;padding:8px 12px;border-radius:14px}
.evc .evci{grid-row:1;line-height:0}.evc b{grid-row:1;font-size:22px}.evc small{grid-column:1/-1}
.evci svg{width:18px;height:18px}
/* cifras centradas: icono y número juntos en el centro, etiqueta centrada debajo */
.evc{grid-template-columns:1fr auto auto 1fr;justify-items:center;text-align:center}
.evc .evci{grid-column:2}.evc b{grid-column:3}.evc small{grid-column:1/-1;text-align:center}
/* «Lo que más ha cambiado» y la gráfica del cliente, a juego con las cifras: borde suave del color, sin barra ni pastillas */
.evtop .etile{border:1px solid var(--line);border-radius:14px;background:var(--panel)}.evtop .etile::before{display:none}
.evtop .etile.good{border-color:color-mix(in srgb,var(--good) 35%,var(--line))}.evtop .etile.warn{border-color:var(--vig-line)}
.evtop .etile.sel{box-shadow:0 0 0 2px var(--lilac)}
.evtop .pill,#v-evolution #e-title .pill{background:none;border:0;padding:0;font:600 13px/1.3 inherit;font-family:inherit;letter-spacing:0}
.evtop .pill.good,#v-evolution #e-title .pill.good{color:var(--good)}.evtop .pill.warn,#v-evolution #e-title .pill.warn{color:var(--vig)}
.evtop .pill.flat,#v-evolution #e-title .pill.flat{color:var(--muted)}
.evtop .edelta,#v-evolution #e-info .edelta{background:none;border:0;padding:0;font-family:inherit;font-weight:600}
.evtop .edelta.good,#v-evolution #e-info .edelta.good{color:var(--good)}.evtop .edelta.warn,#v-evolution #e-info .edelta.warn{color:var(--vig)}
.evtop .edelta{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-size:13px}
.einote-t{display:inline-grid;place-items:center;min-width:44px;min-height:44px;margin:-10px -8px;cursor:pointer;color:var(--muted)}.einote{display:block;margin-top:4px;font-size:13px}
/* Evolución, también en la ficha del centro: el mismo estilo de tarjeta (sin barra ni pastillas) y el contenido centrado; el centro conserva su rojo */
.etile{border:1px solid var(--line);border-radius:14px;background:var(--panel);text-align:center}.etile::before{display:none}
.etile.good{border-color:color-mix(in srgb,var(--good) 35%,var(--line))}.etile.warn{border-color:var(--vig-line)}
.etile.bad{border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}.etile.sel{box-shadow:0 0 0 2px var(--lilac)}
.etile .erow{flex-direction:column;align-items:center;gap:4px}.etile .erow .v{flex:none;justify-content:center}
.etile .espark{margin:0 auto 2px}
.etile .pill,#e-title .pill{background:none;border:0;padding:0;font:600 13px/1.3 'Inter',-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:0}
.etile .pill.good,#e-title .pill.good{color:var(--good)}.etile .pill.warn,#e-title .pill.warn{color:var(--vig)}
.etile .pill.bad,#e-title .pill.bad{color:var(--bad)}.etile .pill.flat,#e-title .pill.flat{color:var(--muted)}
.etile .edelta,#e-info .edelta{background:none;border:0;padding:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-weight:600}
.etile .edelta{font-size:13px}
.etile .edelta.good,#e-info .edelta.good{color:var(--good)}.etile .edelta.warn,#e-info .edelta.warn{color:var(--vig)}.etile .edelta.bad,#e-info .edelta.bad{color:var(--bad)}
.espark.bad polyline{stroke:var(--bad)}
.ezrow .pill{background:none;border:0;padding:0;font:600 13px/1.3 'Inter',-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:0;color:var(--muted)}.ezrow .pill.good{color:var(--good)}.ezrow .pill.bad{color:var(--bad)}.ezrow .pill.warn{color:var(--vig)}
.evtop .etile .erow{align-items:center}.evtop .etile .erow .v{justify-content:center}   /* una regla anterior del cliente los dejaba a la izquierda */
/* ficha del centro: «Su piel, en perspectiva» a juego con las cifras del cliente (icono y número en una fila, sin cajas ni pastillas) */
.pstile{display:grid;grid-template-columns:1fr auto auto 1fr;justify-items:center;align-items:center;column-gap:6px;row-gap:0;padding:8px 12px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.pstile .tdic{grid-column:2;width:auto;height:auto;border:0;background:none;box-shadow:none;font-size:18px}.pstile .tdic svg{width:18px;height:18px}
.pstile>div{display:contents}.pstile .v{grid-column:3;font:700 22px/1.1 var(--mono);margin:0}.pstile .k{grid-column:1/-1;font-size:13px;color:var(--muted)}
.pstile.good{border-color:color-mix(in srgb,var(--good) 35%,var(--line))}.pstile.att{border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
.pstile.att .v{color:var(--bad)}.pstile.away .v{color:var(--muted)}
.skinage .pill{background:none;border:0;padding:0;font:600 13px/1.3 'Inter',-apple-system,BlinkMacSystemFont,sans-serif}
.skinage .pill.good{color:var(--good)}.skinage .pill.bad{color:var(--bad)}
.clpanel>.cemore[data-full]{min-height:52px;margin:8px 0 -18px}   /* centrado entre la línea de arriba y el borde de la tarjeta */
/* Ficha del centro */
.clconst dl{display:grid;grid-template-columns:9.6em minmax(0,1fr);gap:8px 14px;margin:0;font-size:14px;line-height:1.45}
.clconst dt{color:var(--muted);white-space:nowrap;align-self:start}.clconst dd{margin:0;min-width:0;overflow-wrap:anywhere}.clconst dd small{display:block;margin-top:2px;color:var(--muted);font-size:12.5px}
.clconst b{color:var(--fg);font-weight:600}.clconst .mbad{color:var(--bad)}
.cltodo .clhint,.clhint{display:block;font-weight:400;letter-spacing:normal;text-transform:none;margin:6px 0 0;color:var(--muted);font-size:12.5px;line-height:1.4}
/* con «Felicitar»: lado a lado mientras quepan los dos en una línea (2 × 126 + 8 = 260 px del propio contenedor); si no, apilados */
.clacts:has([data-clap]){grid-template-columns:repeat(auto-fit,minmax(126px,1fr))}.clacts:has([data-clap]) .btn{white-space:nowrap}
/* ya felicitado: la pista junto a «Escribir» si cabe en una línea; si no, en su propia fila (y a 340, en dos líneas sin recortar) */
.clacts:has(> .clok){display:flex;flex-wrap:wrap}.clacts:has(> .clok)>.btn{flex:1 1 110px;width:auto}.clacts>.clok{flex:1 1 auto;min-width:0}.clok{justify-content:center;min-height:44px}.clok .clhint{margin:0;display:flex;align-items:center;gap:5px;color:rgba(236,236,242,.7)}   /* ≥ 8:1 en oscuro */
:root[data-theme=light] .clok .clhint{color:rgba(29,24,48,.7)}   /* ≥ 6:1 en claro */.clok .clhint svg{width:15px;height:15px;flex:none}
.qhint{display:inline-block;vertical-align:middle}.qhint summary{list-style:none;cursor:pointer;display:inline-flex;padding:2px;border-radius:50%;color:var(--muted)}
.qhint summary::-webkit-details-marker{display:none}.qhint summary:focus-visible{outline:2px solid var(--violet);outline-offset:1px}
.qhint[open]{display:block}.qhint p{margin:4px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted);font-weight:400;font-family:inherit;max-width:42ch}
.ftabs{position:sticky;top:0;z-index:5;background:var(--bg);padding-top:8px;padding-bottom:8px;margin-bottom:8px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);padding-right:40px}
/* Historial: un bloque por día, eventos apilados a ancho completo */
.htl{list-style:none;margin:12px 0 0;padding:0}
.htl-month{margin:16px 0 6px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.htl-month:first-child{margin-top:0}
.htl-day{margin:0 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:14px}
.htl-dh{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--lilac)}
.htl-evs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.htl-ev{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45}
.htl-ic{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--sc-centro-bg,rgba(124,58,237,.14));color:var(--lilac)}
.htl-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.htl-tx{flex:1;min-width:0;overflow-wrap:break-word;padding-top:4px}
.htl-tag,.htl-by{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
/* Rutina */
.noinci{position:relative;display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:1px 8px;cursor:pointer}.pill.warn.noinci{border-color:var(--vig)}
.noinci .li svg{width:12px;height:12px}.noinci::after{content:"";position:absolute;inset:-13px -6px}
.cdinci{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border-radius:14px;margin:8px 0}.cdinci p{margin:0;flex:1 1 200px;font-size:14px}.cdinci .btn{margin:0;width:auto;min-height:44px}
.cdmore{flex:none;width:44px;min-height:44px;margin:0;padding:0;display:grid;place-items:center}.cdmore svg{width:20px;height:20px;fill:currentColor}
/* Cabina */
.trpl{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin:2px 0 4px}.trpl svg{width:14px;height:14px}
.nsave{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px}
.fenc>summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center}.fenc>summary::-webkit-details-marker{display:none}.fenc>summary::after{content:"›";margin-left:auto;font-size:20px;color:var(--muted);transition:transform .2s}.fenc[open]>summary::after{transform:rotate(90deg)}
.prephoto svg,.prephoto em,.ctips li span{color:var(--lilac)}   /* iconos de «Antes de la foto» en morado (cliente y centro) */
.htl-ic svg,.evci svg{display:block;width:16px;height:16px;vertical-align:0}.evci svg{width:18px;height:18px}
/* Ficha > Rutina: tres vistas con selector fijo bajo las pestañas; acordeones y productos compactos */
.cdseg{position:sticky;top:64px;z-index:4;display:flex;width:100%;margin:0 0 12px;box-sizing:border-box;background:var(--bg);box-shadow:0 0 0 4px var(--bg)}
.cdseg button{flex:1;min-height:44px}
.cd7{margin:0 4px 10px;font-size:13.5px}.cd7 b{color:var(--fg)}
.caldn{display:flex;gap:6px;flex:none}.caldn .cnav{width:44px;min-height:44px;margin:0;padding:0}
.cdacc{border-top:1px solid var(--line)}.cdacc>summary{list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;gap:6px;font-size:15px}
.cdacc>summary::-webkit-details-marker{display:none}.cdacc>summary::after{content:"›";margin-left:auto;font-size:20px;color:var(--muted);transition:transform .2s}.cdacc[open]>summary::after{transform:rotate(90deg)}
.cdacc>summary .mom{width:18px;height:18px}
.cdpf{margin:0 0 6px}.cdpf .chip{min-height:40px;font:inherit;font-size:14px;color:var(--fg)}
.cdpl{display:flex;flex-direction:column}
.sprod>summary{list-style:none;cursor:pointer}.sprod>summary::-webkit-details-marker{display:none}
/* Días (ficha): en pantalla ancha, calendario compacto a la izquierda y el detalle del día a la derecha */
@container cdp (min-width:640px){
  [data-cdp=days] .rtcal{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);column-gap:24px;align-items:start}
  [data-cdp=days] .rtcal>*{grid-column:1}[data-cdp=days] .rtcal>#cal-day{grid-column:2;grid-row:1/span 5}
  [data-cdp=days] .rtcal .cal .cd{font-size:12px}
}
.caldh .caldn .cnav{flex:0 0 44px;width:44px;min-width:44px;padding:0}
[data-cdp=days] #cal-day .calgrid2{grid-template-columns:1fr}
[data-cdp=days] #cal-day .calgrp-box{padding:0 12px}[data-cdp=days] #cal-day .calgrp-h{min-height:44px;margin:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
[data-cdp=days] #cal-day .calgrp-h::-webkit-details-marker{display:none}[data-cdp=days] #cal-day .calgt{flex:1 1 auto;font-size:15px}
[data-cdp=days] #cal-day .calgrp-h .calok,[data-cdp=days] #cal-day .calgrp-h .calpend{margin-left:0;font-size:11.5px}
[data-cdp=days] #cal-day{margin-top:14px}@container cdp (min-width:640px){[data-cdp=days] #cal-day{margin-top:0}}
/* «Borrar mi cuenta», en Mis datos: el único icono rojo de la app del cliente (acción destructiva, no un resultado de su piel) */
.secic .sdel em{background:color-mix(in srgb,var(--bad) 16%,transparent)}.secic .sdel em i.li{color:var(--bad)}
.sec-priv .stout{margin:4px 0 -18px;min-height:56px}   /* centrado entre la línea y el borde de la tarjeta */
.trpl{margin:12px 0 4px}.trpl+input{margin-top:0}   /* cada etiqueta pegada a su campo */
@media (hover:hover){.srow:hover{margin-inline:-10px;padding-inline:10px;width:calc(100% + 20px)}}   /* el resaltado al pasar el ratón deja aire a los lados */
.evtop>.etile:last-child:nth-child(odd){grid-column:1/-1}   /* una sola (o la última impar) a ancho completo: sin hueco */
.ebsub{display:block;flex-basis:100%;font-size:12.5px;margin-top:-2px}
.ebsub::first-letter,.eline::first-letter{text-transform:uppercase}   /* cada línea bajo la cifra es una frase: con mayúscula */
.eline{flex-basis:100%;font-size:13px;line-height:1.35;margin-top:-4px}   /* «desde…», base inestable, poco fiable: pegadas, sin el hueco de un <br> en flex */
.ebig{font-family:inherit;font-weight:800;letter-spacing:-.02em}
.einfo{margin-left:0}   /* el valor alineado con el borde de la tarjeta, como el título */
/* × de cerrar en cabeceras de hoja: a la derecha del todo y en violeta */
.row>.x{flex:none;margin-left:auto;color:var(--violet);font-size:28px;min-width:44px;min-height:44px;line-height:1}
#cal-day{scroll-margin-top:16px}
/* Evolución del cliente: «Ver todas las medidas» como fila de acción */
.evall{padding:0;overflow:hidden;background:#1f1a33;border-color:rgba(167,139,250,.35)}
.evall>summary.evsum{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 14px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.evall>summary.evsum::after{content:none}
.evsum:active{background:rgba(167,139,250,.14)}.evsum:focus-visible{outline:2px solid var(--lilac);outline-offset:-2px;border-radius:inherit}
.evsi{width:40px;height:40px;border-radius:12px}.evsi svg{width:20px;height:20px}
.evst{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.evst b{font-size:16px;font-weight:700;color:var(--fg)}.evst small{font-size:13px;color:#b9b4cf;line-height:1.35}
.evdots{display:flex;flex-wrap:wrap;gap:0 10px;margin-top:2px}.evdots span{white-space:nowrap}
.evdots i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:1px}
.evdots i.g{background:#34d399}.evdots i.v{background:#fbbf24}.evdots i.f{background:#a5a1bd}
.evchev{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid rgba(167,139,250,.45);color:#c4b5fd;display:grid;place-items:center;transition:transform .2s}
.evchev svg{width:16px;height:16px}.evall[open] .evchev{transform:rotate(90deg)}
.evall #e-zones{padding:0 14px 12px;margin:0}
:root[data-theme=light] .evall{background:#F7F5FD;border-color:#D9D2F3}
:root[data-theme=light] .evsum:active{background:#ECE7FA}
:root[data-theme=light] .evst small{color:#4A4866}
:root[data-theme=light] .evdots i.g{background:#1D6B3A}:root[data-theme=light] .evdots i.v{background:#9A4A00}:root[data-theme=light] .evdots i.f{background:#4A4866}
:root[data-theme=light] .evchev{border-color:#D9D2F3;color:#4B27B8}
@media (prefers-reduced-motion:reduce){.evchev{transition:none}}
:root[data-theme=light] #r-go{border-color:#D9D2F3;color:#4B27B8}

/* Hoja inferior (Comparar: Cambiar fotos y Opciones de la foto) */
.bsh{--bs-bg:#1f1a33;--bs-line:rgba(167,139,250,.28);position:fixed;inset:auto 0 0;margin:0 auto;width:100%;max-width:560px;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;
  border:1px solid var(--bs-line);border-bottom:0;border-radius:20px 20px 0 0;background:var(--bs-bg);color:var(--fg);padding:0 16px calc(16px + env(safe-area-inset-bottom));transition:transform .2s;animation:bsIn .25s ease}
:root[data-theme=light] .bsh{--bs-bg:#F7F5FD;--bs-line:#E6E0F7}
.bsh:focus{outline:none}
.bsh::backdrop{background:rgba(10,6,25,.55)}
@keyframes bsIn{from{transform:translateY(40px);opacity:0}}
@media (min-width:720px){.bsh{inset:0;margin:auto;max-height:84dvh;border-bottom:1px solid var(--bs-line);border-radius:20px;padding-bottom:16px}}
.bsdrag{position:sticky;top:0;z-index:2;display:flex;justify-content:center;padding:10px 0 6px;margin:0 -16px;background:var(--bs-bg);touch-action:none;cursor:grab}
.bsg{width:40px;height:5px;border-radius:3px;background:var(--line-strong)}
.bshd{touch-action:none}.bshd h2{margin:0 0 12px;font-size:18px}
.bsok{display:block;width:100%;min-height:48px;margin-top:16px}
.bsh :focus-visible{outline:3px solid var(--lilac);outline-offset:2px}
/* casillas Antes / Después */
.csls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.csl{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px;border:2px solid var(--line);border-radius:14px;background:var(--panel);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.csl.on{border-color:#5B31C9;box-shadow:0 0 0 1px #5B31C9}
:root:not([data-theme=light]) .csl.on{border-color:#a78bfa;box-shadow:0 0 0 1px #a78bfa}
.csl img{width:48px;height:64px;object-fit:cover;border-radius:10px;transform:scaleX(-1);background:var(--line);flex:none}
.csl small .cga{width:15px;height:15px;vertical-align:-3px;margin-left:2px}.csl small .cga svg{width:10px;height:10px}
.csl small{display:block;font:700 11.5px inherit;font-family:inherit;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.csl b{font-size:15px}
/* cuadrícula de fotos por grupos */
.cgt{position:relative;padding:0;aspect-ratio:3/4;border:2px solid transparent;border-radius:14px;overflow:hidden;background:var(--line);cursor:pointer}
.cgt img{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block}
.cgt.a,.cgt.b{border-color:#5B31C9}
:root:not([data-theme=light]) .cgt.a,:root:not([data-theme=light]) .cgt.b{border-color:#a78bfa}
.cgd{position:absolute;left:6px;bottom:6px;padding:2px 8px;border-radius:999px;background:rgba(7,7,11,.72);color:#fff;font-size:12px;font-weight:600}
.cgn{position:absolute;top:6px;right:6px;padding:2px 7px;border-radius:999px;background:rgba(7,7,11,.72);color:#fff;font-size:12px}
.cgl{position:absolute;top:6px;left:6px;padding:2px 8px;border-radius:999px;color:#fff;font-size:12px;font-weight:700}
.cgl.a{background:#4A4866}.cgl.b{background:#5B31C9}
/* Opciones de la foto */
.bsfoto{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.bsfoto img{width:56px;height:56px;object-fit:cover;border-radius:12px;transform:scaleX(-1);background:var(--line);flex:none}
.bsfoto b{display:block;font-size:16px;font-weight:700}.bsfoto small{font-size:13px;color:var(--muted)}
.bsc hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.bsr{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 10px;border:0;border-radius:12px;background:transparent;color:var(--fg);font:inherit;font-size:15px;text-align:left;cursor:pointer}
.bsr span{flex:1}.bsr .li svg{width:22px;height:22px;stroke-width:2}.bsr .k-chevr{color:var(--muted)}
.bsr:active{background:rgba(167,139,250,.14)}
.bsr.del{color:#A32219}.bsr.del:active{background:#FDECEA}
:root:not([data-theme=light]) .bsr.del{color:#ff9b91}:root:not([data-theme=light]) .bsr.del:active{background:rgba(163,34,25,.25)}
.bsnote{margin:8px 10px 0;font-size:14px;color:var(--fg)}
.bsq{margin:4px 0 8px;font-size:15px;line-height:1.45}.bsw{margin:0 0 8px;font-size:13.5px}
.bsbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.bsbtns .btn{min-height:48px;margin:0}
.btn.bsdel{background:#A32219;border-color:#A32219;color:#fff}
/* foto a pantalla completa */
.cfull{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#000;display:grid;place-items:center}
.cfull[open]{display:grid}.cfull::backdrop{background:#000}
.cfull img{max-width:100%;max-height:100%;object-fit:contain;transform:scaleX(-1)}
.cfull .x{position:absolute;top:calc(env(safe-area-inset-top) + 8px);right:8px;width:48px;height:48px;border:0;border-radius:50%;background:rgba(7,7,11,.6);color:#fff;font-size:28px}
/* «Cambiar fotos»: cabecera y «Listo» fijos; solo se desplaza la cuadrícula */
.bsh[open]{display:flex;flex-direction:column}
.bsh{max-height:85dvh}
.bsbody{display:flex;flex-direction:column;min-height:0;flex:0 1 auto}
.bspk{overflow:hidden;padding-bottom:0}
.bspk .bsbody{flex:1 1 auto}
.bspk .bshd{flex:none}
.bspg{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -16px;padding:4px 16px 12px;border-top:1px solid var(--bs-line)}
.bsfoot{flex:none;margin:0 -16px;padding:10px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--bs-line);background:var(--bs-bg)}
.bsfoot .bsok{margin:0}
.cgbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.cgsel{width:auto;flex:none;margin:0;min-height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--fg);font:600 14px inherit;font-family:inherit}
.cgrid4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
@media (min-width:720px){.cgrid4{grid-template-columns:repeat(6,1fr)}}
.cgrid4 .cgh{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;min-height:44px;margin:6px 0 0;padding:0 4px;border:0;background:transparent;color:var(--muted);font:600 13px inherit;font-family:inherit;text-align:left;cursor:pointer}
.cgrid4 .cgh .li svg{width:18px;height:18px;transition:transform .2s}.cgrid4 .cgh[aria-expanded=true] .li svg{transform:rotate(90deg)}
.cgrid4 .cgt{border-radius:12px;contain:content}
.cgrid4 .cgd{left:4px;bottom:4px;padding:1px 6px;font-size:11px}
.cgrid4 .cgn{top:4px;right:4px;padding:1px 6px;font-size:11px}
.cgrid4 .cgl{top:4px;left:4px;padding:1px 6px;font-size:10.5px}
.cgmore{height:1px}
/* día con varias fotos, desplegado en su propia fila */
.cgday{grid-column:1/-1;padding:8px;border:1px solid rgba(167,139,250,.45);border-radius:14px;background:rgba(139,92,246,.12)}
:root[data-theme=light] .cgday{background:#EFE9FD;border-color:#D9D2F3}
.cgdh{display:flex;align-items:center;justify-content:space-between;margin:0 2px 6px}.cgdh b{font-size:13.5px}
.cgdx{min-height:44px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--lilac);font:600 14px inherit;font-family:inherit;cursor:pointer}
:root[data-theme=light] .cgdx{color:#4B27B8}
.cgdg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
@media (min-width:720px){.cgdg{grid-template-columns:repeat(6,1fr)}}

/* Comparar (cliente): controles compactos, la foto en la primera pantalla */
.chead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.chbtns{display:flex;gap:8px;flex:none}
.chbtns .cibtn{width:44px;height:44px;display:grid;place-items:center;padding:0;background:var(--panel)}
.chbtns .cibtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cpair{display:flex;align-items:center;gap:10px;width:100%;min-height:72px;margin:0 0 10px;padding:8px 8px 8px 10px;border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
:root[data-theme=light] .cpair{border-color:#E6E0F7}
.cpair img{width:40px;height:54px;flex:none;object-fit:cover;border-radius:10px;transform:scaleX(-1);background:var(--line)}
.cpt{display:flex;flex-direction:column;min-width:0}.cpt.r{text-align:right}
.cpt small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.cpt b{font-size:15px;white-space:nowrap}
.cpsw{display:grid;color:var(--lilac)}.cpsw svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cpgo{margin-left:auto;flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:14px;background:rgba(167,139,250,.16);color:var(--lilac);font-weight:700}
:root[data-theme=light] .cpgo{background:#ECE7FB;color:#4B27B8}
/* selectores de dos y de cuatro partes */
.cseg,.cmseg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:0 0 10px;border-radius:14px;background:rgba(167,139,250,.12)}
:root[data-theme=light] .cseg,:root[data-theme=light] .cmseg{background:#ECE7FB}
.cseg button,.cmseg button{min-height:44px;padding:0 6px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:600 15px inherit;font-family:inherit;cursor:pointer}
.cseg button.on,.cmseg button.on{background:var(--panel);color:var(--fg);box-shadow:0 1px 4px rgba(30,16,80,.16)}
:root[data-theme=light] .cseg button.on,:root[data-theme=light] .cmseg button.on{background:#fff}
:root[data-theme=light] .cseg button:not(.on),:root[data-theme=light] .cmseg button:not(.on){color:rgba(29,24,48,.68)}   /* 5,4:1 sobre el lila (con --muted, 4,48) */
.cseg button:focus-visible,.cmseg button:focus-visible,.cpair:focus-visible,.chbtns .cibtn:focus-visible,.ctogs .ctog:focus-visible{outline:3px solid var(--lilac);outline-offset:2px}
.cmseg{grid-template-columns:1fr 1fr 1fr 1.25fr;margin:10px 0 6px}.cmseg[hidden]{display:none}
@media (max-width:379px){.cmseg{grid-template-columns:1fr 1fr}}
.cmseg button:not(.on){box-shadow:inset 0 0 0 1px rgba(167,139,250,.35)}
.cmseg button.on,:root[data-theme=light] .cmseg button.on{background:var(--violet);color:#fff;box-shadow:0 2px 8px rgba(124,58,237,.4)}
.cmet #c-zn{margin:0}
.cwrap.cnew .cvw .cmp,.cwrap.cnew .cvw .side{border-radius:16px}
/* tablet y escritorio: la foto a la izquierda; controles y Diferencias a la derecha */
@media (min-width:768px){
  .cwrap.cnew .cgrid{display:grid;grid-template-columns:minmax(0,3fr) minmax(320px,2fr);grid-template-rows:auto auto auto 1fr;gap:0 24px;align-items:start}
  .cwrap.cnew .cvw{grid-column:1;grid-row:1/span 4}
  .cwrap.cnew .cpair,.cwrap.cnew .cmodes,.cwrap.cnew .cmet,.cwrap.cnew .cdiff{grid-column:2}
  .cwrap.cnew .cmseg{margin-top:0}.cwrap.cnew .cmet{margin-bottom:10px}
  .cwrap.cnew .cdiff{position:sticky;top:16px;margin-top:0}
  .cwrap.cnew:not(.cli) .cdl{grid-template-columns:1fr}
  .cwrap.cnew:not(.cli) .cpair img{display:none}
}
.cwrap.cnew .cvw .cmp{width:min(100%,calc(var(--cmph,72dvh) * 3 / 4))}
/* en Comparar del cliente, sin el saludo: la foto gana sitio */
body:not(.pro):has(#v-compare:not([hidden])) #subtitle{display:none}

/* Cabina: notas plegadas, fila de Bonos y «Visitas y sesiones» compacta */
.trnb{display:flex;align-items:center;width:100%;min-height:44px;margin:4px 0 10px;padding:0 14px;border:1.5px dashed rgba(167,139,250,.55);border-radius:12px;background:transparent;color:var(--lilac);font:600 14.5px inherit;font-family:inherit;cursor:pointer}
:root[data-theme=light] .trnb{border-color:#B9A8EE;color:#4B27B8}
#tr-last svg,.cvpn svg{width:14px;height:14px;vertical-align:-2px}
.cvi{width:36px;height:36px;background:rgba(139,92,246,.14);color:var(--lilac)}
:root[data-theme=light] .cvi{background:#EFE9FD;color:#4B27B8}
.cvi svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cbh{display:flex;align-items:center;gap:12px;min-height:56px}
.cvt{display:flex;flex-direction:column;min-width:0;flex:1}.cvt small{color:var(--muted);font-size:13px}
.cbgo{width:auto;margin:0;min-height:44px;padding:0 16px;flex:none;border-color:#4B27B8}
#cb-body{margin-top:12px}
.cvlist{padding:0}
.cvlist li.cvl{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 0}
.cvl .cvt small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lilac)}
:root[data-theme=light] .cvl .cvt small{color:#4B27B8}
.cvl .cvt b{font-size:14.5px}.cvl .unote,.cvl .cvpn{font-size:13px}
.cvd{flex:none;color:var(--muted);font-size:13px;white-space:nowrap}
.cvl.trat,.cvl.vino{background:rgba(139,92,246,.07);border-radius:12px;padding-inline:8px;margin-block:2px}
:root[data-theme=light] .cvl.trat,:root[data-theme=light] .cvl.vino{background:#F7F5FD}
.cvl.foto .cvi{background:rgba(167,161,189,.14);color:var(--muted)}
.cvlist li.cvhd{display:block;border:0;padding:4px 0}
.cvchips{display:flex;flex-wrap:wrap;gap:8px}
.cvall{width:100%;min-height:44px;margin:4px 0 0}
.cvlist li.cvg{display:block;padding:0}
.cvg button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:52px;padding:6px 0;border:0;background:transparent;color:var(--fg);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.cvg button>span:first-child{color:var(--muted)}.cvg b{color:var(--fg)}
.cvch{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);color:var(--lilac)}
.cvch svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}.cvg [aria-expanded=true] .cvch svg{transform:rotate(90deg)}
.cvg button:focus-visible,.trnb:focus-visible,.cvall:focus-visible{outline:3px solid var(--lilac);outline-offset:2px}
.cvst .cvchips{margin-bottom:10px}

/* filas de Clientes: el nombre arriba entero; la etiqueta de estado abre la segunda línea, junto al dato */
.clr{scroll-margin-top:calc(env(safe-area-inset-top) + 12px)}
.cewhy .cetag{display:inline-block;margin-right:4px;vertical-align:1px}

.chh{margin:0;font-size:18px}

/* Comparar: vista y, a su lado, Zonas y Alinear (en el móvil, en la misma fila; en tablet y escritorio, debajo) */
.cmodes{display:flex;align-items:stretch;gap:8px;margin:0 0 10px}
.cmodes .cseg{flex:1;margin:0;min-width:0}
.ctogs{display:flex;gap:6px;flex:none}
.ctogs .ctog{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:0 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--panel);color:var(--muted);font:600 14px inherit;font-family:inherit}
.ctogs .ctog::before{content:none}
.ctogs .ctog svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ctogs .ctog.on{border-color:#5B31C9;background:#5B31C9;color:#fff}
:root:not([data-theme=light]) .ctogs .ctog.on{border-color:#a78bfa;background:rgba(167,139,250,.22);color:#fff}
@media (max-width:767px){.ctogs .ctog span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.ctogs .ctog{padding:0}}
@media (min-width:768px){.cmodes{flex-direction:column}.ctogs .ctog{flex:1}}
/* las etiquetas de zona desaparecen mientras se arrastra la perilla o se mueve o amplía la foto */
#c-view .ztag{transition:opacity .15s}#c-view.cdrag .ztag{opacity:0}

/* Retoques: tarjeta Antes ⇄ Después sin miniaturas hasta 439 px, etiquetas que se acortan, hoja compacta */
@media (max-width:439px){.cpair img{display:none}.cpair{gap:8px}}
.cwrap .cmp{container-type:inline-size}
@container (max-width:330px){.cmp .lbl .lp{display:none}}
.cgbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.cgjump{display:contents}
@media (max-width:390px){
  .bspk .bshd h2{margin:0 0 8px;font-size:16px}
  .bspk .csls{gap:8px;margin-bottom:8px}.bspk .csl{padding:4px 6px;gap:8px}.bspk .csl img{width:30px;height:40px}
  .bspk .cgbar{gap:6px}.bspk .cgbar .cechip,.bspk .cgsel{padding:0 11px;font-size:13.5px}
  .bsdrag{padding:6px 0 4px}
}
/* Cabina: los tipos de registro en 2×2 */
.cbtypes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cbtypes .chip{min-height:44px;margin:0;justify-content:center;text-align:center;font:inherit;font-size:14px;cursor:pointer}
@media (min-width:768px){.cbtypes{grid-template-columns:repeat(4,auto);justify-content:start}}
/* Ficha en el móvil: «Qué hacer hoy» y «Constancia» compactos, las pestañas a la vista */
@media (max-width:767px){
  .clconst{padding:10px 12px}.clconst .cesh{display:inline;font-size:13px;margin:0 6px 0 0}.clconst p{display:inline;font-size:13px;line-height:1.45}
}
/* hoja «Cambiar fotos» ≤ 390 px: el salto baja al principio de la cuadrícula; arriba solo los atajos de rango */
.cgjrow{display:none}
@media (max-width:390px){
  .bspk .bspick .cgjump{display:none}
  .cgjrow{display:flex;flex-wrap:wrap;gap:6px;grid-column:1/-1;margin:4px 0 2px}.cgjrow .cgjump{display:contents}
  .cgjrow .cechip,.cgjrow .cgsel{padding:0 11px;font-size:13.5px}
}
/* Clientes: margen bajo la lista para que el + nunca tape una acción de fila; en escritorio no hay + */
@media (max-width:1023px){.cl-main{padding-bottom:88px}}
@media (min-width:1024px){#cl-fab{display:none}}
/* Comparar del cliente en el móvil: ⓘ y ⋯ en la fila del logo */
body:not(.pro):has(#v-compare:not([hidden])) main{position:relative}
.chbtns.onlogo{position:absolute;z-index:5}
/* hoja «Cambiar fotos»: atajos con etiqueta corta a ≤ 390 px, en una fila */
.cgbar .shl{display:none}
@media (max-width:390px){.bspk .cgbar .lgl{display:none}.bspk .cgbar .shl{display:inline}}

/* indicadores de la cámara: icono, nombre y estado (✓ / !); el del aviso actual, con borde más grueso */
.qchip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;border:1.5px solid;font-size:13.5px;font-weight:600}
.qchip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qchip b{font-weight:800}
.qchip.good{color:#34d399;border-color:rgba(52,211,153,.5);background:rgba(52,211,153,.1)}
.qchip.bad{color:#fca5a5;border-color:rgba(248,113,113,.55);background:rgba(248,113,113,.1)}
:root[data-theme=light] .qchip.good{color:#1D6B3A;border-color:#8BC9A0;background:#EAF6EE}
:root[data-theme=light] .qchip.bad{color:#A32219;border-color:#E9A39C;background:#FDECEA}
.qchip.cur{border-width:3px;padding:2.5px 8.5px}
.cam .flip{display:grid;place-items:center;color:#fff}.cam .flip svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Captura del cliente: sin saludo y el visor a la medida, para ver el interruptor «Superponer» sin bajar */
body:not(.pro):has(#v-capture:not([hidden])) #subtitle{display:none}
body:not(.pro) #v-capture .cam{width:min(100%,max(240px,calc((100dvh - 430px) * 3 / 4)))}
/* momento de un producto: Mañana | Noche | Ambas; con poco ancho, el selector baja bajo el nombre */
.msli{flex-wrap:wrap;gap:8px 12px}.msli>b{flex:1 1 140px;min-width:0;overflow-wrap:anywhere}
.mseg{display:flex;flex:1 1 260px;max-width:340px;padding:3px;gap:3px;border-radius:12px;border:1px solid var(--line-strong);background:rgb(var(--ink) / .03)}
.mseg button{flex:1;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 8px;border:0;border-radius:9px;background:transparent;color:var(--fg);font:600 14px inherit;font-family:inherit;cursor:pointer;white-space:nowrap}
.mseg button[aria-checked=true]{background:var(--violet);color:#fff}
.mseg button[aria-checked=true] .mom{fill:#fff;stroke:#fff}
.mseg button:focus-visible{outline:2px solid var(--lilac);outline-offset:2px}
/* Guardar | Cancelar: una fila, misma altura, mitad y mitad */
.btnpair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.btnpair .btn{margin:0;height:48px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btnpair .btn .mom{fill:#fff;stroke:#fff}.btnpair .btn.ghost .mom{fill:currentColor;stroke:currentColor}
@media (max-width:420px){.rsadd span{display:none}.rsadd{min-width:48px;font-size:20px}}   /* en el móvil, «＋» solo: el nombre del producto cabe entero */
/* complementos: bloque aparte en la rutina (sin número ni arrastre) y «Complementos de hoy» */
.rtsubh{margin:10px 0 4px;font:600 12px var(--sans,inherit);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rtsup{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rtsup li{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;border:1px solid var(--line);font-size:14px;background:rgb(var(--ink) / .02)}
.rtsup .li,.supl .li,.calsup .li{width:16px;height:16px;color:var(--lilac)}
/* recién apuntado el momento: su selector de complementos pregunta (borde y fondo lila, sin aviso aparte) */
.supday.ask{padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--violet) 14%,transparent);box-shadow:0 0 0 1.5px var(--lilac);animation:supask .6s ease-out}
@keyframes supask{from{box-shadow:0 0 0 6px color-mix(in srgb,var(--lilac) 30%,transparent)}}
@media (prefers-reduced-motion:reduce){.supday.ask{animation:none}}
.supday{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px}
.supday .supl{flex:1 1 150px;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px}
.supday .mseg{flex:1 1 200px;max-width:280px}
.calsup{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:14px;color:var(--muted)}
/* Mis productos (cliente y ficha): filas compactas, icono pequeño según el tipo y «tipo · momento · usos» debajo */
.sprod{border:0;border-top:1px solid var(--line);border-radius:0;padding:0;margin:0}
.pgrp .sprod:first-of-type{border-top:0}
.sprod>summary.psum{display:flex;align-items:center;gap:10px;padding:10px 4px;min-height:56px;justify-content:flex-start}
.psum .pgi{flex:0 0 20px;font-style:normal;color:var(--lilac)}.psum .pgi svg{width:20px;height:20px}
.sprod .spn{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sprod .spn b{font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sprod .spn small{color:var(--muted);font-size:13px}
.sprod .spc{flex:0 0 auto;font-style:normal;color:var(--muted);transition:transform .18s}.sprod[open] .spc{transform:rotate(90deg)}
.sprod[open]>summary b{color:var(--lilac)}.sprod .pbody{padding:0 4px 14px 34px;margin-top:0}
.psearch{margin:4px 0 6px}
/* alta y edición de producto: etiqueta pequeña encima de cada selector; «Ambas» con sol y luna juntos */
.msf{flex:1 1 260px;display:flex;flex-direction:column;gap:4px;min-width:0}.msf .mseg{flex:none;width:100%;max-width:340px}
.mseg button{padding:0 6px}.mseg button .mom{width:15px;height:15px}
.msl{font-size:12.5px;font-weight:600;color:var(--muted)}
.mboth{display:inline-flex;gap:1px}.mboth .mom{width:13px;height:13px}
/* ficha: Mañana / Noche con el resumen debajo, la flecha centrada */
.cdacc>summary{padding-block:6px}.cdst{display:flex;flex-direction:column;gap:1px;min-width:0}.cdst small{font-size:13px;color:var(--muted);font-weight:400}
.calsup{padding-bottom:8px}
.mseg{box-sizing:border-box}.mseg button{min-width:0;flex:1 1 0}
/* con poco ancho, el selector de momento va sin iconos (los tres a la vez: o todos o ninguno) */
@media (max-width:420px){.mseg button .mom,.mseg button .mboth{display:none}}
.pbody .msf,#t-name + .msf{margin-top:8px}   /* aire entre el nombre y «Tipo» */
/* menú del día del calendario: fondo atenuado, flecha hacia el día, filas de 48 px con columna de icono de 20 px y estado a la derecha */
.dpbg{position:fixed;inset:0;z-index:60;background:rgba(10,8,20,.32)}
.dpop{position:fixed;z-index:61;display:flex;flex-direction:column;gap:2px;overflow:visible}
.dpop .dparr{position:absolute;top:-7px;width:12px;height:12px;background:var(--panel);border-left:1px solid rgba(167,139,250,.4);border-top:1px solid rgba(167,139,250,.4);transform:rotate(45deg)}
.dpop.up .dparr{top:auto;bottom:-7px;transform:rotate(225deg)}
.dpop button[data-dp]{display:flex;align-items:center;gap:10px;min-height:48px}
.dpop .dpi{flex:0 0 20px;width:20px;display:grid;place-items:center;color:var(--lilac)}.dpop .dpi svg{width:20px;height:20px}
.dpop .dpl{flex:1}.dpop .dps{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--muted)}.dpop .dps svg{width:14px;height:14px;color:var(--good)}
.dpop button[aria-checked=true] .dpl{font-weight:600}
.dpop button:focus-visible{outline:2px solid var(--lilac);outline-offset:-2px}
/* cifras de resumen: el valor siempre en una línea (si no cabe, encoge), números tabulares; el mes de «inicio», al 50 % y atenuado */
.pstile .v{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:clamp(16px,5.4vw,22px)}
.pstile .v .vm{font-size:.72em;margin-left:4px;vertical-align:baseline}
.pstile{min-width:0}.pstile .k{text-align:center;min-width:0;text-wrap:balance;line-height:1.25}   /* «días de constancia» se parte en dos líneas antes que salirse */
/* menú del día: cada fila en una línea; en móvil estrecho el estado queda solo como check */
.dpop .dpl{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dpop .dpsx{font-size:12.5px;font-weight:400;color:var(--muted)}
.dpop .dps{flex:none}
@media (max-width:440px){.dpop .dpst{display:none}}
/* Captura: sin la franja del logo, para que «Superponer la última foto» entre sin scroll */
body:has(#v-capture:not([hidden])) .brand{display:none}
/* Hoy: «✓ Apuntada» y «8 productos» cada uno en su línea, sin partir; en estrecho, el estado ocupa todo el ancho */
.rtb small .nw{display:block;white-space:nowrap}.rtb small{text-wrap:balance}
.rtb small .nw svg{width:13px;height:13px;vertical-align:-2px;margin-right:3px;stroke-width:3}
@media (max-width:480px){.rtb[data-tg] small{font-size:13px}}
@media (max-width:380px){.rtb[data-tg] small{grid-column:1/-1}}
/* frecuencia por producto: selector (cliente y centro), etiqueta «· L y J», «Hoy toca» y pauta del centro */
.fqp{display:flex;flex-direction:column;gap:6px;width:100%;min-width:0;container-type:inline-size}
.fqp .mseg{flex:none;width:100%}.fqp .mseg button{min-height:44px;min-width:0;flex:1 1 0;white-space:normal;line-height:1.15;padding:6px 8px}
@container (max-width:349px){.fqp .mseg button{font-size:14px}}
.fqd{display:flex;flex-direction:column;gap:8px}
.fqdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.fqdays button{min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;gap:2px;border-radius:12px;border:1.5px solid var(--line-strong);background:var(--panel);color:var(--fg);font:600 15px/1 inherit;cursor:pointer}
.fqdays button svg{display:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fqdays button[aria-checked=true]{background:var(--rt-on);border-color:var(--rt-on);color:#fff}.fqdays button[aria-checked=true] svg{display:block}
.fqdays button:focus-visible,.fqq .chip:focus-visible{outline:2px solid var(--lilac);outline-offset:2px}
@container (max-width:349px){.fqdays{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fqq{display:flex;flex-wrap:wrap;gap:6px}.fqq .chip{min-height:44px;font-size:13.5px;cursor:pointer}
.fqp .err:empty{display:none}.fqp .err{margin:0}
.fqtag{font-size:13px;font-weight:400;color:var(--muted);white-space:nowrap}
.fqlock{display:flex;align-items:center;gap:6px;margin:0;font-size:13.5px;color:var(--muted)}.fqlock svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.rti{flex-wrap:wrap}.rti .rtin{flex:1;min-width:0;background:none;border:0;padding:4px 0;color:inherit;font:inherit;text-align:left;cursor:pointer;min-height:36px}
.rti .rtfq{flex-basis:100%;min-width:0;padding:4px 6px 8px 0}
.rttoca{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.rttoca li{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:14px}.rttoca small{font-size:13px;color:var(--muted)}.rttoca .mom{width:14px;height:14px;vertical-align:-2px}
.fqhoy{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--rt-on);color:#fff}
.fqhoy .mom{width:14px;height:14px;fill:#fff;stroke:#fff}.fqhoy .mom+.mom{margin-left:-2px}
.rtb.rest small{font-style:normal}
.cd.rest{opacity:.75}
.rtfqh{margin:0 0 4px;font-size:13px}
/* menú emergente: flecha hacia su botón, título y «Cerrar» legibles (≥ 13 px, AA), separador y «Cerrar» como botón de 44 px */
.daymenu .pmarr{position:absolute;top:-5px;width:12px;height:12px;background:var(--panel);border-left:1px solid rgba(167,139,250,.4);border-top:1px solid rgba(167,139,250,.4);transform:rotate(45deg)}
.daymenu.up .pmarr{top:auto;bottom:-5px;transform:rotate(225deg)}
.daymenu .pmt{margin:2px 6px 4px;font-size:13px;font-weight:600;color:var(--fg)}
.daymenu .pmclose{margin-top:4px;min-height:44px;border:1px solid var(--line-strong);background:transparent;color:var(--fg);font-size:14px;text-align:center;font-weight:600;position:relative}
.daymenu .pmclose::before{content:"";position:absolute;left:4px;right:4px;top:-5px;border-top:1px solid var(--line)}
.daymenu button[data-pm]{min-height:44px;display:flex;align-items:center;gap:10px;padding-left:6px}
.daymenu button[data-pm] .li{flex:none;width:20px;height:20px;color:var(--muted)}
.daymenu button[data-pm] .li svg{width:20px;height:20px}
/* fila con su menú abierto: el resaltado sobresale (12 px a los lados, 8 px arriba y abajo) sin mover el contenido */
.pmrow{position:relative}
/* resaltado: 8 px fuera por los lados y 2 px por arriba y abajo, así queda a 8 px o más del texto de la fila anterior y de la cabecera */
.pmrow::before{content:"";position:absolute;inset:-2px -8px;border-radius:14px;background:rgba(124,58,237,.10);box-shadow:inset 0 0 0 1px rgba(167,139,250,.45);pointer-events:none}
.list li:first-child.pmrow::before{top:4px}
/* «Cómo lo uso» (Mis productos): selectores apilados, textos largos en dos líneas si hace falta */
.ubox{display:flex;flex-direction:column;gap:8px}.ubox .mseg{flex:none;width:100%}.ubox .mseg button{min-width:0;flex:1 1 0;white-space:normal;line-height:1.15;min-height:44px;padding:6px 8px}
.ubox .uin{display:flex;flex-direction:column;gap:8px}.ubox .uin[hidden]{display:none}.ubox .err:empty{display:none}.ubox .err{margin:0}
.fqp[hidden],.ubox [hidden]{display:none}
.rti .pdays{margin-top:2px}
/* ficha de producto: «Borrar» destructivo en rojo (AA), separado de «Guardar» */
.pacts{gap:16px}.btn.ghost.danger{color:var(--bad);border-color:var(--bad)}
.ubox .uhint{margin:0;font-size:13px}
/* confirmación de borrar producto: bloque rojo suave bajo los botones */
.delbox{margin-top:10px;padding:12px;border:1px solid var(--bad);border-radius:14px;background:color-mix(in srgb,var(--bad) 8%,var(--panel))}
.delbox p{margin:0 0 10px;font-size:14px;color:var(--fg)}.delbox .row{gap:12px}.delbox .btn{min-height:44px;margin:0}
.btn.dangerfill{background:#b91c1c;border-color:#b91c1c;color:#fff;box-shadow:none}
.btn.ghost.danger:disabled{opacity:.5}
.pacts{align-items:stretch}.delbox .row{flex-wrap:wrap}.delbox .btn{white-space:nowrap;padding-inline:10px;flex:1 1 auto;min-width:0}
/* editor de ingredientes abierto en la fila de la rutina (ficha): aire respecto al nombre y al «…» */
.rinci{flex-basis:100%;margin:12px 0 4px}
/* Aprovecha los huecos (agenda): bajo la tarjeta del día; cada cliente en una fila con «Proponer» a su tamaño;
   cuadrícula de 2 columnas cuando caben tarjetas de 320 px */
.aprov{margin-top:16px}
.aprov .list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));column-gap:24px}
.aprow{flex-wrap:nowrap;min-width:0;border:0}.aprow+.aprow{border-top:0}
.aprow .cetxt{flex:1 1 auto;min-width:0}.aprow .ceact{flex:none;min-height:44px;padding-inline:16px}
/* nunca se recorta: el texto crece en altura y solo salta entre bloques («Mesoterapia» · «revisión +19 d» · «empeora») */
.aprov .list li{border:0}.aprow .cetxt b,.aprow .cetxt .cewhy{display:block;white-space:normal;overflow:visible;text-overflow:clip;-webkit-line-clamp:none}
.cewhy .nw,.eline .nw{white-space:nowrap}
/* el tratamiento va entero en su línea; solo si no cabe ni en una línea completa se parte por sus espacios.
   Sin sitio para el texto (móvil), «Proponer» baja debajo, a su tamaño */
.cewhy .nwt{display:inline-block;max-width:100%;white-space:normal}
.aprow{flex-wrap:wrap}.aprow .cetxt{flex:1 1 170px}
/* ficha (Productos): «Buscar INCI» y «Guardar» a la misma altura, en una línea, sin hueco debajo; el aviso va sobre ellos, bajo el campo */
.cdpr .inrow{gap:8px;margin:0;align-items:stretch}.cdpr .pbody{padding-bottom:4px}.cdpr .inrow .btn{flex:1;height:48px;padding-block:0;margin:0;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.cdpr .err:empty{display:none}.cdpr .err{margin:0}
.cdpr .pbody{grid-template-columns:minmax(0,1fr)}.cdpr .pbody textarea{width:100%;box-sizing:border-box}
.cdpr .inrow{flex-wrap:wrap}.cdpr .inrow .btn{flex:1 1 auto;width:auto;padding-inline:12px}
/* Mi centro › Productos: nombre (hasta dos líneas) y debajo la marca; a la derecha, centrada, la etiqueta «sin INCI» o el nº de ingredientes */
.prsum{display:flex;align-items:center;gap:12px}.prsum .prtx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.prsum .prtx .muted{font-size:13.5px}
.prsum .pill.prni{flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;font-family:inherit;font-size:13px;font-weight:500;padding:2px 8px;border-color:var(--vig)}
.prsum .prni .li svg{width:13px;height:13px}
:root[data-theme=light] .cpill{color:#047857;background:rgba(5,150,105,.08);border-color:rgba(5,150,105,.35)}
/* fila de producto: los días en su línea (acento suave, salto limpio, sin recortar) y la pauta del centro al lado */
.pdays{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;font-size:13px;line-height:18px}
.pdays .pdd,.pdays .pdc{display:inline-flex;align-items:center;gap:5px;color:var(--lilac);font-weight:500}
.pdays .pdc{color:var(--muted);font-weight:400}
.pdays svg{width:13px;height:13px;flex:none}
/* Ayuda: acordeones cortos con ancho de lectura cómodo */
.hlp{max-width:720px;margin:0 auto}
.hlphead{display:flex;align-items:center;gap:12px;margin:4px 0 14px}.hlphead h1{margin:0}.hlphead p{margin:2px 0 0;font-size:14px}
.hlpback{flex:none;width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:12px}.hlpback svg{width:20px;height:20px}
.hlps{padding:0;margin:0 0 10px}.hlps h2{margin:0;font-size:inherit;text-transform:none;letter-spacing:0}
.hlpt{all:unset;box-sizing:border-box;width:100%;min-height:52px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;font-weight:600;font-size:16px;color:var(--fg);border-radius:inherit}
.hlpt:focus-visible{outline:2px solid var(--lilac);outline-offset:-2px}
.hlpt svg{width:18px;height:18px;flex:none;color:var(--muted);transition:transform .2s}.hlpt[aria-expanded=true] svg{transform:rotate(90deg)}
.hlpb{padding:0 16px 14px}.hlpb ul{margin:0;padding-left:18px;display:grid;gap:8px;font-size:15px;line-height:1.5}
.hlplink{display:inline-block;margin:0 0 8px;font-size:13px;color:var(--lilac);text-decoration:underline;text-underline-offset:2px;padding:6px 0}
.hlps{scroll-margin-top:calc(env(safe-area-inset-top) + 16px)}
/* Cambiar fotos: insignia de «con análisis» (círculo con gráfica dentro de la fecha: no choca con Antes/Después ni con ×N) */
.cga{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#5B31C9;color:#fff;flex:none}
.cga svg{width:13px;height:13px}
.cgd{display:inline-flex;align-items:center;gap:4px}
.cgd .cga{width:15px;height:15px;margin-left:-3px}.cgd .cga svg{width:10px;height:10px}
.cglegend{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:13px;color:var(--muted)}
.cgwarn{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px;padding:8px 10px;border-radius:10px;font-size:13px;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.35)}
.cgwarn>svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--warn)}
.linkb{all:unset;cursor:pointer;color:var(--lilac);text-decoration:underline;text-underline-offset:2px;font-weight:600;display:inline-block;padding:4px 0}
.linkb:focus-visible{outline:2px solid var(--lilac);outline-offset:2px;border-radius:4px}
.cnear{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px}.cnear:empty{display:none}
/* Hoja de la cita: «Cambiar hora» y «Anular cita…» separados; la confirmación, con su título */
.ansec{font-size:15px;font-weight:700;margin:12px 0 8px;text-transform:none;letter-spacing:0}
.ancan{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.ancan .rform .row .btn{flex:1;width:auto}
/* «Hoy» de Mi centro: hora y nombre arriba, servicio debajo; las ya terminadas, atenuadas */
.ceaps li{display:flex;align-items:center;gap:10px}.ceapt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ceap1{overflow-wrap:anywhere}.ceap2{color:var(--muted);font-size:13px}.ceap.done .ceap1,.ceap.done .ceap2{opacity:.65}
/* Mis citas (cliente): la fecha en su línea, los botones debajo; «Confirmada» con check, sin botón */
.uaps .uap{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.uapd{display:flex;flex-direction:column;gap:2px}.uapd .muted{font-size:13px}
.uok{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--good)}.uok svg{width:14px;height:14px}
:root[data-theme=light] .uok{color:#047857}
.uapb{display:flex;gap:8px;flex-wrap:wrap}.uapb .btn{width:auto;flex:0 0 auto}
.uapc:empty{display:none}.uapc .row .btn{flex:1;width:auto}
.anatt{max-width:none}.anatt button{flex:1 1 0;min-width:0;padding-inline:8px;white-space:normal}
/* menú «…»: línea entre lo seguro y lo destructivo; lo destructivo, texto e icono en rojo. «Cerrar», solo en táctil */
.daymenu .pmsep{border:0;border-top:1px solid var(--line);margin:4px 2px}
.daymenu button.pmdanger,.daymenu button.pmdanger .li{color:var(--bad)}
:root[data-theme=light] .daymenu button.pmdanger,:root[data-theme=light] .daymenu button.pmdanger .li{color:#b91c1c}
.daymenu button[data-pm]:focus-visible{outline:2px solid var(--lilac);outline-offset:-2px}
@media (hover:hover) and (pointer:fine){.daymenu .pmclose{display:none}}
/* confirmación de acciones con consecuencias */
.cfh{margin:0 0 8px;font-size:18px}.cfb p{margin:0 0 6px;font-weight:400;line-height:1.45}.cfa{margin-top:12px}.cfa .btn{flex:1;width:auto}
:root[data-theme=light] .btn.ghost.danger{color:#b91c1c;border-color:#b91c1c}
.noapp-mk{display:inline-flex;align-items:center;gap:3px;width:auto;min-height:0;margin:0 0 0 6px;padding:0;border:0;background:none;box-shadow:none;font:inherit;font-size:12px;font-weight:500;color:var(--muted);white-space:nowrap;vertical-align:1px;cursor:help;text-decoration:underline dotted;text-underline-offset:3px}.noapp-mk .li svg{width:13px;height:13px}
/* Clientes en el móvil estrecho: el botón de la fila baja a su línea, como en Mi centro, para que el motivo se lea entero */
@media (max-width:479.98px){.clrm{flex-wrap:wrap}.clrm .cetxt{flex:1 1 calc(100% - 64px)}.clrm .ceact{margin-left:auto;min-height:40px}}
/* motor de «siguiente acción»: bloque «Qué hacer», enlaces «Ya lo hice» y «Recordármelo», lista con separadores y columna de acción fija */
:root{--act-line:#a78bfa}:root[data-theme=light]{--act-line:#6d28d9}   /* borde de los botones de acción: ≥ 3:1 sobre el fondo */
.ceact.ghost,.clacts .btn.ghost{border-color:var(--act-line)}
.cltodo .cltw{margin:0 0 2px}
.cllinks{display:flex;flex-wrap:wrap;gap:4px 18px;margin:8px 0 0}
.linkbtn{background:none;border:0;padding:4px 0;margin:0;min-height:32px;width:auto;color:var(--lilac);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;box-shadow:none}
.linkbtn:focus-visible,.clboxa:focus-visible{outline:3px solid var(--lilac);outline-offset:2px;border-radius:6px}
.clboxa{display:block;color:inherit;text-decoration:none;cursor:pointer}.clboxa b{text-decoration:underline dotted;text-underline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.clhead{color:var(--fg);font-size:15px;font-weight:700;margin:0 0 2px;overflow-wrap:anywhere}
.cllist{gap:0}
.cllist .clr,.cllist .clr:last-child{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0}
.cllist .clr:first-child{border-top:0}
.cllist .clr.sel,.cllist .clr.open{border:1.5px solid #5b31c9;border-radius:14px}
.clrm .ceact,.clrm .ceact.ghost{flex:0 0 168px;width:168px;min-width:0;margin-left:auto;white-space:normal;line-height:1.2;padding:6px 10px;align-self:center;justify-content:center;text-align:center}
@media (max-width:559.98px){.clrm{flex-wrap:wrap}.clrm .cetxt{flex:1 1 calc(100% - 64px);min-width:0}
  .clrm .ceact,.clrm .ceact.ghost{flex:0 0 auto;width:auto;min-width:140px;max-width:calc(100% - 64px);margin-left:64px;min-height:40px}}
.qhint:not([open])>p{display:none}

/* modo claro: bordes de campos y botones secundarios sólidos (≥ 3:1 contra el fondo) y foco visible; el oscuro no cambia */
:root[data-theme=light] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){border-color:var(--ctl)}
:root[data-theme=light] .btn.ghost:not(.danger){border-color:var(--ctl)}
:root[data-theme=light] :is(input,select,textarea):focus-visible{border-color:var(--lilac);box-shadow:0 0 0 2px var(--lilac)}
.cechip.off{opacity:.5;cursor:not-allowed}
.fhn p{white-space:normal;overflow:visible;text-overflow:clip;display:block}
.clrm .cewhy{display:block;-webkit-line-clamp:none;overflow:visible;white-space:normal}
/* con el cuadro de mensaje abierto, el botón que lo abrió pasa a secundario «pulsado»: el único relleno es «Enviar al cliente» */
.btn[data-act][aria-expanded=true]{background:rgba(124,58,237,.12);color:var(--lilac);border:1px solid var(--line-strong);box-shadow:none}
:root[data-theme=light] .btn[data-act][aria-expanded=true]{border-color:var(--ctl)}
/* cada medida con su cifra, en un bloque: el salto solo cae en «·» */
.cewhy .mgood,.cewhy .mbad,.clm{white-space:nowrap}

/* Filas de acción (Mi centro y lista de clientes): el reparto depende del ancho de la propia lista (container query), no de la
   pantalla. Al lado del texto solo si quedan ≥ 240 px de texto; si no, los botones debajo, a todo el ancho en una fila, y en una
   columna con menos de 360 px. Ningún texto se corta: ocupa las líneas que necesite */
.cegrp .list{container:ceRows/inline-size}.cegrp.later .list{container-name:ceLater}.cllist{container:clRows/inline-size}
.cewhy,.cegrp .cewhy,.clrm .cewhy{display:block;-webkit-line-clamp:none;overflow:visible;white-space:normal}
.clrm .cename b{display:inline;-webkit-line-clamp:none;overflow:visible}
.cerow .cetxt,.clrm .cetxt{min-width:0}.cetag{white-space:normal}
.cesnzt{display:none}
@container ceRows (min-width:660px){.cesnzt{display:inline}}
@container ceRows (max-width:579.98px){
  .cerow{flex-wrap:wrap}.cerow .cetxt{flex:1 1 calc(100% - 52px)}
  .cerow>.ceact,.cerow .ceacts{flex:1 1 100%;margin-left:0}.cerow .ceacts .ceact{flex:1 1 0;min-width:0;margin-left:0;white-space:normal;line-height:1.2;padding-block:6px}
  .cerow .ceacts .cesnz{flex:0 0 auto}}
@container ceLater (min-width:660px){.cesnzt{display:inline}}
@container ceLater (max-width:679.98px){
  .cerow{flex-wrap:wrap}.cerow .cetxt{flex:1 1 calc(100% - 52px)}
  .cerow>.ceact,.cerow .ceacts{flex:1 1 100%;margin-left:0}.cerow .ceacts .ceact{flex:1 1 0;min-width:0;margin-left:0;white-space:normal;line-height:1.2;padding-block:6px}}
@container ceLater (max-width:359.98px){.cerow .ceacts{flex-direction:column;align-items:stretch}.cerow .ceacts .ceact{flex:1 1 auto;width:100%}}
@container ceRows (max-width:359.98px){.cerow .ceacts{flex-direction:column;align-items:stretch}.cerow .ceacts .ceact,.cerow .ceacts .cesnz{flex:1 1 auto;width:100%}}
@container clRows (max-width:499.98px){
  .clrm{flex-wrap:wrap}.clrm .cetxt{flex:1 1 calc(100% - 64px)}
  .clrm .ceact,.clrm .ceact.ghost{flex:1 1 100%;width:auto;max-width:none;margin-left:0}}

/* Exportar PDF (Evolución): estados claramente distintos; el spinner y la transición respetan «reducir movimiento» */
#r-go{transition:background-color .18s ease,color .18s ease,border-color .18s ease;display:flex;align-items:center;justify-content:center;gap:6px}
#r-go svg{width:18px;height:18px;flex:0 0 auto}
#r-go[data-st=busy]{opacity:.7;cursor:progress}
#r-go[data-st=error]{color:var(--vig)!important;background:var(--vig-bg);border-color:var(--vig-line)}
#r-go[data-st=ready]{color:#fff!important}   /* el color de los enlaces lo pisaba */
.rerr{margin:0 0 8px;font-size:13px;color:var(--vig)}
.rspin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:rspin .8s linear infinite}
@keyframes rspin{to{transform:rotate(360deg)}}
.chip.off{opacity:.5;pointer-events:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.rspin{animation:none;border-right-color:currentColor;opacity:.5}#r-go{transition:none}}

/* hitos «Un mes de constancia» (Evolución del cliente): como «Tu piel en perspectiva»; violeta de marca (--lilac: 7:1 en claro y oscuro) */
.mcard{background:var(--panel);border:1px solid var(--line)}
.mpill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 7px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--lilac);background:rgba(124,58,237,.10);cursor:default}   /* etiqueta, no botón: sin borde */
:root:not([data-theme=light]) .mpill{background:rgba(167,139,250,.16)}
.mpill svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mtitle{margin:10px 0 8px;font-size:17px;overflow-wrap:break-word}
.mlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mrowt{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.mrowt span{min-width:0;overflow-wrap:break-word}
.mrowt b{flex:0 0 auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.mbar{height:6px;border-radius:3px;background:rgb(var(--ink) / .12);margin-top:5px;overflow:hidden}.mbar i{display:block;height:100%;background:var(--lilac);border-radius:3px}
.mmore{margin:8px 0 0;background:none;border:0;padding:6px 0;font:inherit;font-weight:600;color:var(--lilac);cursor:pointer;min-height:44px}
.mfoot{margin:10px 0 12px;font-size:14px}
/* Ajustes: (i) de constancia como globo bajo las cifras; en 0, qué hacer para empezar */
.sstats{position:relative}.pstk .v{display:flex;align-items:center;gap:2px}.pstk .qhint[open]{display:inline-block}
.pstk .qhint[open]>p{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;max-width:none;margin:0;padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25);color:var(--fg);font:400 13px/1.45 'Inter',-apple-system,BlinkMacSystemFont,sans-serif;white-space:normal;text-align:left}
.pstk .k0{grid-column:1/-1;justify-self:stretch;text-align:center;text-wrap:balance;font-size:12px;line-height:1.25;color:var(--violet);margin:3px -8px 0;font-size:11.5px}
:root:not([data-theme=light]) .pstk .k0{color:var(--lilac)}
/* Crea tu rutina: nombre con «Quitar» y confirmación con un solo producto */
.rsh{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.rsh b{min-width:0;overflow-wrap:anywhere}
.rsconf{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:12px}
.rsconf .btn{flex:1;white-space:nowrap;padding-inline:10px}.rsh b .muted{font-weight:400}
/* bajo el 0 de constancia, el paso siguiente como enlace (toque ≥44 px sin mover el centrado) */
.pstk .k0.lnk{display:flex;align-items:center;justify-content:center;min-height:44px;margin-bottom:-10px;padding:0 4px;background:none;border:0;cursor:pointer;font:inherit;font-size:11.5px;line-height:1.25;text-decoration:underline;text-underline-offset:2px;width:auto}
.pstk .k0.lnk:focus-visible{outline:2px solid var(--violet);outline-offset:-2px;border-radius:8px}
#t-brand{margin-top:8px}
.msli>.rsh{flex:1 1 100%}.rsh .btn{flex:none;min-width:6.6em;justify-content:center;text-align:center}   /* «Quitar» y «¿Quitar?» con el mismo ancho */
#cal-day:empty{display:none}   /* sin día elegido (otro mes): sin tarjeta vacía */

/* modo demo (js/demo.js): franja de aviso arriba y tarjeta del recorrido abajo */
.demo-bar{position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;
  padding:8px 12px;background:var(--violet);color:#fff;font-size:13px}
.demo-bar>span:last-child{display:flex;flex-wrap:wrap;gap:6px}
.demo-bar .btn{width:auto;display:inline-flex;padding:6px 10px;font-size:13px;min-height:0;margin:0;box-shadow:none}
.demo-bar .btn.ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.demo-bar .btn:not(.ghost){background:#fff;color:var(--violet);box-shadow:none}
.demo-tour{position:fixed;z-index:70;left:50%;transform:translateX(-50%);bottom:72px;width:min(520px,calc(100% - 24px))}
.demo-tour p{margin:6px 0 10px}
.demo-tour .btn{width:auto;display:inline-flex}
@media(min-width:1024px){.demo-tour{left:auto;right:24px;transform:none;bottom:88px}}