/* ============================================================
   CALIBRE — instrumento clínico
   ============================================================
   Loaded AFTER ../style.css (which supplies the demo banner,
   focus-visible base, .sr-only, and motion plumbing). Everything
   here re-points the world to Calibre's tokens. Radius logic:
   2px everywhere, 8px only on the instrument panel, pills only
   on primary CTAs. Mint is a SIGNAL, not a brand color.
   ============================================================ */
:root{
  --porcelain:#F7F5F2;
  --bone:#EDE8E1;
  --chalk:#FFFFFF;
  --graphite:#16191B;
  --graphite2:#23272A;
  --steel:#7E878C;
  --mint:#35E0A1;
  --mint-ink:#0C6B4A;
  --amber:#D98A24;
  --amber-ink:#8A5510;
  --coral:#D74B32;
  --disp:'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  --body:'IBM Plex Sans', sans-serif;
  --mono:'IBM Plex Mono', monospace;
  --hair:color-mix(in srgb, var(--steel) 35%, transparent);
  color-scheme:light;

  /* neutralize duckframe tokens that ../style.css components read */
  --navy0:#F7F5F2; --navy1:#EDE8E1; --navy2:#16191B;
  --gold:#0C6B4A; --gold2:#35E0A1;
  --ink:#16191B; --ink-dim:#5B6367;
}
body{background:var(--porcelain); color:var(--graphite); font-family:var(--body); font-size:17px; line-height:1.65;}
::selection{background:var(--graphite); color:var(--porcelain);}
:focus-visible{outline:3px solid var(--mint-ink); outline-offset:3px; border-radius:2px;}
.on-graphite :focus-visible, .c-panel :focus-visible{outline-color:var(--mint); box-shadow:0 0 0 6px rgba(247,245,242,0.25);}

.c-wrap{max-width:1200px; margin:0 auto; padding:0 clamp(20px,4vw,40px);}

/* ---- type scale ---- */
h1,h2,h3{font-family:var(--disp); font-weight:600; letter-spacing:-0.03em; line-height:1.05; text-wrap:balance;}
.c-h1{font-size:clamp(38px,6vw,76px);}
.c-h2{font-size:clamp(28px,3.8vw,46px);}
.c-h3{font-size:clamp(19px,2.2vw,24px); letter-spacing:-0.02em;}
.c-lead{font-size:clamp(17px,1.6vw,19px); color:#3D4448; max-width:58ch;}
.c-mono{font-family:var(--mono); font-size:13px; letter-spacing:0.01em;}
.c-label{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.14em; color:var(--steel);}

/* ---- nav ---- */
.c-nav{
  position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--porcelain) 92%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--hair);
}
.c-nav-in{display:flex; align-items:center; justify-content:space-between; gap:18px; height:64px;}
.c-logo{display:flex; align-items:baseline; gap:10px; font-family:var(--disp); font-weight:600; font-size:20px; letter-spacing:-0.02em;}
.c-logo .tick{font-family:var(--mono); font-size:11px; color:var(--steel); letter-spacing:0.1em;}
.c-nav-links{display:flex; align-items:center; gap:4px;}
.c-nav-links a{
  font-family:var(--mono); font-size:12.5px; color:#3D4448; padding:10px 14px; min-height:44px;
  display:inline-flex; align-items:center; border-radius:2px; transition:background .2s, color .2s;
}
.c-nav-links a:hover{background:var(--bone);}
.c-nav-links a[aria-current="page"]{color:var(--graphite); background:var(--bone);}
.c-cta{
  font-family:var(--disp); font-weight:600; font-size:14px; background:var(--graphite); color:var(--porcelain);
  border-radius:999px; padding:11px 22px; min-height:44px; display:inline-flex; align-items:center; gap:8px;
  transition:background .25s; border:none; cursor:pointer;
}
.c-cta:hover{background:#000;}
.c-cta--light{background:var(--porcelain); color:var(--graphite);}
.c-cta--light:hover{background:var(--chalk);}
@media (max-width:760px){
  /* phones: keep every route reachable — links drop to a second row under the logo */
  .c-nav-in{flex-wrap:wrap; height:auto; padding-top:10px; padding-bottom:10px; row-gap:2px;}
  .c-nav-links{order:3; width:100%; gap:0; margin-left:-10px;}
  .c-nav-links a{padding:8px 10px; min-height:40px; font-size:12px;}
  .c-nav-links .c-cta{position:absolute; right:clamp(20px,4vw,40px); top:12px; padding:9px 16px; font-size:13px;}
  .c-nav-in{position:relative;}
}

/* ---- ruled sections ---- */
.c-sec{padding:clamp(56px,8vw,104px) 0; position:relative;}
.c-sec--bone{background:var(--bone);}
.c-rule{border:none; border-top:1px solid var(--hair); margin:0;}
.c-kick{display:flex; align-items:baseline; gap:16px; margin-bottom:18px;}
.c-kick .c-label::after{content:''; display:inline-block; width:44px; height:1px; background:var(--steel); margin-left:14px; vertical-align:middle;}

/* ---- hero ---- */
.c-hero{position:relative; overflow:hidden; background:var(--graphite); color:var(--porcelain);}
.c-hero-media{position:absolute; inset:0; opacity:0.5;}
.c-hero-media video, .c-hero-media img{width:100%; height:100%; object-fit:cover;}
.c-hero-veil{position:absolute; inset:0; background:linear-gradient(100deg, rgba(22,25,27,0.92) 30%, rgba(22,25,27,0.35) 70%, rgba(22,25,27,0.55));}
.c-hero-in{position:relative; z-index:2; padding-top:clamp(72px,11vw,150px); padding-bottom:clamp(56px,8vw,110px);}
.c-hero .c-h1{max-width:15ch;}
.c-hero .c-lead{color:#C9CDCF; margin-top:20px;}
.c-hero-actions{display:flex; gap:12px; margin-top:32px; flex-wrap:wrap;}
.c-hero .c-cta--ghost{background:transparent; color:var(--porcelain); border:1px solid rgba(247,245,242,0.45);}
.c-hero .c-cta--ghost:hover{border-color:var(--porcelain); background:rgba(247,245,242,0.08);}
@keyframes cRise{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}
.js .c-hero-in > *{animation:cRise .7s ease both;}
.js .c-hero-in > *:nth-child(2){animation-delay:.15s;}
.js .c-hero-in > *:nth-child(3){animation-delay:.3s;}
.js .c-hero-in > *:nth-child(4){animation-delay:.45s;}
.motion-off .c-hero-in > *{animation:none !important; opacity:1 !important; transform:none !important;}

/* ---- mono fact strip ---- */
.c-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border:1px solid var(--hair); background:var(--chalk);}
.c-fact{padding:16px 18px; border-right:1px solid var(--hair);}
.c-fact:last-child{border-right:none;}
@media (max-width:700px){ .c-fact{border-right:none; border-bottom:1px solid var(--hair);} .c-fact:last-child{border-bottom:none;} }
.c-fact b{font-family:var(--mono); font-size:15px; font-weight:500; display:block; color:var(--graphite);}
.c-fact span{font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.1em; color:var(--steel);}

/* ---- the instrument panel ---- */
.c-panel{
  background:var(--graphite); color:var(--porcelain); border-radius:8px; position:relative; overflow:hidden;
  background-image:
    linear-gradient(color-mix(in srgb, var(--steel) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--steel) 12%, transparent) 1px, transparent 1px);
  background-size:28px 28px;
}
.c-panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid rgba(126,135,140,0.3); flex-wrap:wrap;}
.c-panel-title{font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:#AEB6BA;}
.c-panel-body{padding:clamp(16px,2.5vw,28px);}

/* ---- ledger table (cross-border spec sheet) ---- */
.c-ledger{width:100%; border-collapse:collapse; background:var(--chalk); border:1px solid var(--hair);}
.c-ledger caption{text-align:left; padding:0 0 12px;}
.c-ledger th{
  font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.12em; color:var(--steel);
  font-weight:500; text-align:right; padding:12px 16px; border-bottom:1px solid var(--graphite);
}
.c-ledger th:first-child{text-align:left;}
.c-ledger td{
  font-family:var(--mono); font-size:13.5px; text-align:right; padding:11px 16px;
  border-bottom:1px solid var(--hair); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.c-ledger td:first-child{font-family:var(--body); font-size:14.5px; text-align:left; white-space:normal;}
.c-ledger tr:last-child td{border-bottom:none;}
.c-ledger .save{color:var(--mint-ink); font-weight:500;}
.c-ledger-note{font-family:var(--mono); font-size:11px; color:var(--steel); margin-top:10px;}
.c-ledger-scroll{overflow-x:auto;}

/* ---- providers ---- */
.c-provs{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); margin-top:34px;}
.c-prov{background:var(--chalk); padding:0 0 22px;}
.c-prov img{width:100%; aspect-ratio:3/4; object-fit:cover; filter:saturate(0.85);}
.c-prov > div{padding:18px 20px 0;}
.c-prov h3{font-size:19px;}
.c-prov .role{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--mint-ink); margin-top:4px;}
.c-prov .ced{font-family:var(--mono); font-size:11px; color:var(--steel); margin-top:2px;}
.c-prov p.bio{font-size:14px; color:#3D4448; margin-top:10px; line-height:1.6;}

/* ---- evidence rows ---- */
.c-evid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; margin-top:34px;}
@media (max-width:820px){ .c-evid{grid-template-columns:1fr;} }
.c-evid img{width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--hair);}
.c-evid ul{list-style:none; margin:0; padding:0;}
.c-evid li{padding:13px 0 13px 26px; border-top:1px solid var(--hair); font-size:15px; color:#3D4448; position:relative;}
.c-evid li::before{content:'—'; position:absolute; left:0; color:var(--mint-ink); font-family:var(--mono);}
.c-evid li b{color:var(--graphite); font-weight:600;}

/* ---- FAQ ---- */
.c-faq{max-width:76ch; margin-top:30px;}
.c-faq details{border-top:1px solid var(--hair);}
.c-faq details:last-child{border-bottom:1px solid var(--hair);}
.c-faq summary{
  font-family:var(--disp); font-weight:600; font-size:17px; padding:18px 34px 18px 0; cursor:pointer;
  list-style:none; position:relative; letter-spacing:-0.01em;
}
.c-faq summary::-webkit-details-marker{display:none;}
.c-faq summary::after{content:'+'; position:absolute; right:2px; top:50%; transform:translateY(-50%); font-family:var(--mono); color:var(--steel); transition:transform .25s;}
.c-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.c-faq details p{font-size:15px; color:#3D4448; padding:0 0 20px; max-width:70ch;}

/* ---- media figures ---- */
.c-fig{border:1px solid var(--hair); background:var(--chalk);}
.c-fig img{width:100%; display:block; object-fit:cover;}
.c-fig figcaption{font-family:var(--mono); font-size:11px; color:var(--steel); padding:10px 14px; border-top:1px solid var(--hair);}

/* ---- footer ---- */
.c-foot{background:var(--graphite); color:#AEB6BA; padding:clamp(40px,6vw,64px) 0 30px; margin-top:0;}
.c-foot .c-logo{color:var(--porcelain);}
.c-foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px;}
@media (max-width:760px){ .c-foot-grid{grid-template-columns:1fr;} }
.c-foot .c-mono{color:#AEB6BA;}
.c-foot a{color:var(--porcelain); text-decoration:underline; text-underline-offset:3px;}
.c-foot .fine{font-family:var(--mono); font-size:10.5px; color:#7E878C; margin-top:34px; line-height:1.7; border-top:1px solid rgba(126,135,140,0.3); padding-top:18px;}

/* ---- reveals (scoped, additive; uses house .reveal observer) ---- */
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .7s cubic-bezier(.19,1,.22,1);}
.js .reveal.in{opacity:1; transform:none;}
.motion-off .reveal{transform:none !important; transition:opacity .5s ease !important;}

/* ============================================================
   LA BANDEJA — treatments positioned on a duration scale
   ============================================================ */
.c-tray{margin-top:38px; position:relative; padding:0 56px;} /* room for items centred on the scale ends */
.c-tray-scale{position:relative; height:1px; background:var(--steel); margin:0 8px;}
.c-tray-tick{position:absolute; top:-5px; width:1px; height:11px; background:var(--steel);}
.c-tray-tick span{position:absolute; top:14px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:10px; color:var(--steel); white-space:nowrap;}
.c-tray-items{position:relative; margin-top:44px;}
.c-tray-item{position:absolute; transform:translateX(-50%);}
.c-tray-item::before{content:''; position:absolute; left:50%; top:-44px; width:1px; height:36px; background:var(--hair);}
.c-tray-btn{
  background:var(--chalk); border:1px solid var(--hair); border-radius:2px; padding:10px 14px; cursor:pointer;
  text-align:left; min-height:44px; transition:border-color .2s, background .2s; font-family:var(--body); display:block;
}
.c-tray-btn:hover{border-color:var(--graphite);}
.c-tray-btn[aria-expanded="true"]{border-color:var(--graphite); background:var(--bone);}
.c-tray-btn .t-name{font-family:var(--disp); font-weight:600; font-size:15px; display:block; letter-spacing:-0.01em; white-space:nowrap;}
.c-tray-btn .t-data{font-family:var(--mono); font-size:11px; color:var(--steel); display:block; margin-top:2px; white-space:nowrap;}
/* mobile: the tray rotates into a vertical rule */
@media (max-width:860px){
  .c-tray{padding:0;}
  .c-tray-scale{display:none;}
  .c-tray-items{margin-top:0; display:flex; flex-direction:column; gap:0; border-left:1px solid var(--steel); padding-left:22px;}
  .c-tray-item{position:static; transform:none; padding:10px 0;}
  .c-tray-item::before{content:''; position:absolute; left:-22px; top:50%; width:14px; height:1px; background:var(--steel); transform:none;}
  .c-tray-item{position:relative; left:0 !important; top:auto !important;} /* inline left:% from the horizontal layout must not shift the vertical list */
  .c-tray-btn{width:100%;}
  .c-tray-btn .t-name, .c-tray-btn .t-data{white-space:normal;}
}
/* expanded spec sheet */
.c-spec{
  margin-top:26px; border:1px solid var(--graphite); background:var(--chalk); border-radius:2px;
  display:grid; grid-template-columns:1.2fr 1fr; gap:0;
}
@media (max-width:760px){ .c-spec{grid-template-columns:1fr;} }
.c-spec-main{padding:clamp(18px,3vw,28px);}
.c-spec-side{border-left:1px solid var(--hair); padding:clamp(18px,3vw,28px); background:var(--bone);}
@media (max-width:760px){ .c-spec-side{border-left:none; border-top:1px solid var(--hair);} }
.c-spec h3{font-size:22px;}
.c-spec .row{display:flex; justify-content:space-between; gap:14px; font-family:var(--mono); font-size:12.5px; padding:8px 0; border-bottom:1px solid var(--hair);}
.c-spec .row b{font-weight:500;}
.c-spec p{font-size:14.5px; color:#3D4448; margin-top:10px;}
.c-spec .us-compare{color:var(--mint-ink); font-weight:500;}
.c-spec [hidden]{display:none;}

/* ============================================================
   URGENCY BANDS (icon + word + color, never color alone)
   ============================================================ */
.c-band{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:0.12em; padding:6px 12px; border-radius:2px;}
.c-band--hoy{background:var(--coral); color:#FFF;}
.c-band--semana{background:var(--amber); color:#231502;}
.c-band--rutina{background:var(--bone); color:var(--mint-ink); border:1px solid var(--mint-ink);}
.on-graphite .c-band--rutina, .c-panel .c-band--rutina{background:transparent; color:var(--mint); border-color:var(--mint);}

/* ============================================================
   Buttons on light ground
   ============================================================ */
.c-btn2{
  font-family:var(--mono); font-size:12.5px; background:transparent; border:1px solid var(--graphite); color:var(--graphite);
  border-radius:2px; padding:11px 18px; min-height:44px; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:background .2s, color .2s;
}
.c-btn2:hover{background:var(--graphite); color:var(--porcelain);}
.c-btn2[disabled]{opacity:0.45; cursor:not-allowed;}
.c-btn2--dark{border-color:#7E878C; color:#DDE1E3;}
.c-btn2--dark:hover{background:#DDE1E3; color:var(--graphite);}

@media (hover:none){
  a, button{-webkit-tap-highlight-color:transparent;}
  .c-cta:active{background:#000;}
  .c-btn2:active{background:var(--graphite); color:var(--porcelain);}
}

/* ============================================================
   MAPA DENTAL — inside the graphite panel
   ============================================================ */
.mm-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.mm-stage{position:relative; min-width:640px; max-width:760px; margin:0 auto; aspect-ratio:720/560;}
.mm-stage svg{position:absolute; inset:0; width:100%; height:100%;}
.mm-occlusal{stroke:rgba(126,135,140,0.35); stroke-dasharray:2 6;}
.mm-side{font-family:var(--mono); font-size:11px; fill:#7E878C; letter-spacing:0.1em;}
.mm-tooth{
  fill:#EDE8E1; stroke:#7E878C; stroke-width:1;
  transition:fill .25s ease, stroke .25s ease;
}
.mm-tooth.sel{fill:var(--mint); stroke:var(--mint);}
.mm-fdi{font-family:var(--mono); font-size:10px; fill:#7E878C; pointer-events:none;}
.mm-hits{position:absolute; inset:0;}
.mm-hit{
  position:absolute; width:44px; height:44px; transform:translate(-50%,-50%);
  background:transparent; border:none; border-radius:50%; cursor:pointer; padding:0;
}
.mm-hit:hover{box-shadow:inset 0 0 0 2px rgba(53,224,161,0.4);}
.mm-hit[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--mint);}
.mm-readout{color:#AEB6BA; min-height:22px; margin-top:8px; font-size:12.5px;}
.mm-zones, .mm-chips, .mm-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.mm-zone, .mm-chip{
  font-family:var(--mono); font-size:12px; background:transparent; color:#C9CDCF;
  border:1px solid rgba(126,135,140,0.55); border-radius:2px; padding:10px 14px; min-height:44px;
  cursor:pointer; transition:border-color .2s, color .2s, background .2s;
}
.mm-zone:hover, .mm-chip:hover{border-color:#C9CDCF;}
.mm-zone[aria-pressed="true"], .mm-chip[aria-pressed="true"]{
  border-color:var(--mint); color:var(--mint); background:rgba(53,224,161,0.08);
}
.mm-onpanel{border-color:rgba(126,135,140,0.55); color:#C9CDCF;}
.mm-onpanel:hover{background:rgba(247,245,242,0.08); color:var(--porcelain);}
.mm-disclaimer{
  font-family:var(--mono); font-size:11.5px; color:#AEB6BA; line-height:1.6;
  border-left:none; border-top:1px solid rgba(126,135,140,0.3); padding-top:12px; margin-top:18px; max-width:70ch;
}
.mm-result{outline:none;}
.mm-card{
  margin-top:18px; background:var(--graphite2); border:1px solid rgba(126,135,140,0.4);
  border-radius:2px; padding:clamp(16px,2.5vw,24px);
}
.mm-card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.mm-note{font-size:14.5px; color:#DDE1E3; margin-top:14px; line-height:1.6;}
.mm-advice{font-family:var(--mono); font-size:12.5px; color:#AEB6BA; margin-top:8px;}
.mm-em{
  margin-top:14px; border:1px solid var(--coral); border-radius:2px; padding:12px 14px; background:rgba(215,75,50,0.12);
}
.mm-em p{font-size:13px; color:#F2D9D3; line-height:1.6; margin:0;}
.mm-em p + p{margin-top:8px;}
.mm-treat{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:10px 0; border-top:1px solid rgba(126,135,140,0.3);
}
.mm-treat b{font-family:var(--disp); font-weight:600; font-size:15px; color:var(--porcelain);}
.mm-treat .c-mono{color:#AEB6BA; font-size:12px;}
.mm-hint-scroll{display:none; font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; color:#7E878C; text-align:center; margin-top:6px;}
@media (max-width:700px){ .mm-hint-scroll{display:block;} }
.motion-off .mm-tooth{transition:none !important;}

/* ============================================================
   AGENDA — booking, dashboard, WhatsApp sim
   ============================================================ */
.bk-steps{display:flex; gap:0; list-style:none; margin:26px 0 0; padding:0; border:1px solid var(--hair); background:var(--chalk); flex-wrap:wrap;}
.bk-step{flex:1; min-width:130px; padding:12px 16px; font-family:var(--disp); font-weight:600; font-size:13.5px; color:var(--steel); border-right:1px solid var(--hair); display:flex; gap:8px; align-items:baseline;}
.bk-step:last-child{border-right:none;}
.bk-step .c-mono{font-size:10px;}
.bk-step.now{color:var(--graphite); background:var(--bone);}
.bk-step.done{color:var(--mint-ink);}
.bk-body{border:1px solid var(--hair); border-top:none; background:var(--chalk); padding:clamp(18px,3vw,30px);}
.bk-label{display:block; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.12em; color:#4A5257; margin:18px 0 6px;}
.bk-label:first-child{margin-top:0;}
.bk-input{
  width:100%; background:var(--porcelain); border:1px solid var(--hair); border-radius:2px;
  font-family:var(--body); font-size:16px; padding:12px 14px; color:var(--graphite);
}
.bk-input:focus{outline:none; border-color:var(--graphite);}
input.bk-input:user-invalid, textarea.bk-input:user-invalid{border-color:var(--coral);}
.bk-2col{display:grid; grid-template-columns:1fr 1fr; gap:0 18px;}
@media (max-width:640px){ .bk-2col{grid-template-columns:1fr;} }
.bk-flags{border:1px solid var(--hair); border-radius:2px; padding:12px 14px 14px; margin-top:18px; display:flex; flex-wrap:wrap; gap:6px 18px;}
.bk-flags legend{padding:0 6px;}
.bk-check{display:inline-flex; align-items:center; gap:8px; font-size:14.5px; min-height:44px; cursor:pointer;}
.bk-check input{width:16px; height:16px; accent-color:var(--mint-ink);}
.bk-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:26px; flex-wrap:wrap;}
.bk-pre{background:var(--bone); border:1px solid var(--hair); padding:10px 14px; font-size:12px; color:var(--mint-ink); margin-bottom:16px;}
.bk-weeknav{display:flex; gap:10px; margin:8px 0 16px;}
.bk-days{display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair);}
@media (max-width:820px){ .bk-days{grid-template-columns:repeat(3,1fr);} }
@media (max-width:520px){ .bk-days{grid-template-columns:repeat(2,1fr);} }
.bk-day{background:var(--chalk); padding:10px; min-height:80px;}
.bk-dayhead{font-size:11px; color:#4A5257; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px;}
.bk-slot{
  display:block; width:100%; font-family:var(--mono); font-size:12.5px; background:transparent;
  border:1px solid var(--hair); border-radius:2px; padding:9px 6px; margin-top:6px; min-height:40px;
  cursor:pointer; transition:border-color .2s, background .2s; color:#2A3237;
}
.bk-slot:hover{border-color:var(--graphite);}
.bk-slot.sel{background:var(--graphite); color:var(--porcelain); border-color:var(--graphite);}
.bk-none{color:var(--steel);}
.bk-deposit{border:1px dashed var(--amber); border-radius:2px; padding:16px; margin-top:22px; background:color-mix(in srgb, var(--amber) 6%, transparent);}
.bk-depwhy{font-size:11.5px; color:#4A5257; margin-top:6px;}
.bk-demo-pay{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:0.1em; color:var(--coral);
  border:1px solid var(--coral); display:inline-block; padding:6px 10px; margin-top:12px;
}
.bk-confirm{max-width:60ch;}

/* dashboard */
.dash-wrap{overflow-x:auto; margin-top:18px;}
.dash-table{border-collapse:collapse; width:100%; min-width:640px; background:var(--graphite2);}
.dash-table th{font-family:var(--mono); font-weight:400; font-size:10.5px; color:#AEB6BA; padding:8px 6px; border:1px solid rgba(126,135,140,0.25); text-align:center;}
.dash-table td{border:1px solid rgba(126,135,140,0.25); height:26px; padding:0; vertical-align:top;}
.dash-off{background:rgba(0,0,0,0.25);}
.dash-open{background:transparent;}
.dash-cell{padding:2px;}
.dash-chip{
  width:100%; height:100%; min-height:44px; text-align:left; border:none; border-radius:2px; cursor:pointer;
  background:rgba(126,135,140,0.28); color:#DDE1E3; padding:6px 8px; font-family:var(--body);
  transition:background .3s ease, box-shadow .3s ease;
}
.dash-chip b{display:block; font-family:var(--disp); font-weight:600; font-size:12px; letter-spacing:0;}
.dash-chip span{font-family:var(--mono); font-size:10px; color:#AEB6BA;}
.dash-chip:hover{background:rgba(126,135,140,0.45);}
.dash-chip.mine{background:rgba(53,224,161,0.22); box-shadow:inset 0 0 0 1.5px var(--mint);}
.dash-chip.mine b{color:var(--mint);}
@keyframes dashFlash{0%{background:var(--mint); color:#0B2A1E;} 100%{background:rgba(53,224,161,0.22);}}
.js:not(.motion-off) .dash-chip.mine{animation:dashFlash 1.2s ease 1;}
.dash-counters{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:rgba(126,135,140,0.3); border:1px solid rgba(126,135,140,0.3); margin-top:16px;}
.dash-count{background:var(--graphite2); padding:14px 16px;}
.dash-count b{font-size:20px; color:var(--mint); display:block;}
.dash-count span{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:0.1em; color:#AEB6BA;}
.dash-detail{margin-top:16px; border:1px solid rgba(126,135,140,0.4); border-radius:2px; padding:14px 16px; background:var(--graphite2); outline:none;}
.dash-legend{font-family:var(--mono); font-size:10.5px; color:#7E878C; margin-top:10px;}

/* whatsapp sim — a drawn message device, not the real product */
.wa-frame{
  max-width:400px; border:1.5px solid var(--graphite); border-radius:22px; background:var(--chalk);
  padding:18px 14px 14px; position:relative; margin-top:18px;
}
.wa-frame::before{content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:56px; height:4px; border-radius:4px; background:var(--graphite);}
.wa-thread{display:flex; flex-direction:column; gap:10px; margin-top:12px; min-height:180px;}
.wa-msg{border:1px solid var(--hair); border-radius:10px; padding:10px 12px; max-width:88%; font-size:13px; line-height:1.5;}
.wa-msg p{margin:0;}
.wa-clinic{align-self:flex-start; background:var(--bone); border-bottom-left-radius:2px;}
.wa-patient{align-self:flex-end; background:color-mix(in srgb, var(--mint) 14%, var(--chalk)); border-bottom-right-radius:2px;}
.wa-queued{align-self:flex-end; background:var(--porcelain); border-style:dashed; max-width:94%;}
.wa-queue-tag{font-size:10px; color:var(--amber-ink); letter-spacing:0.06em; margin-bottom:6px !important;}
@keyframes waIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.wa-anim{animation:waIn .5s ease both;}
.motion-off .wa-anim{animation:none !important; opacity:1 !important; transform:none !important;}
.wa-btns{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap;}
.wa-btn{
  font-family:var(--mono); font-size:11px; border:1px solid var(--graphite); background:transparent; color:var(--graphite);
  border-radius:100px; padding:9px 14px; min-height:40px; cursor:pointer; transition:background .2s, color .2s;
}
.wa-btn:hover{background:var(--graphite); color:var(--porcelain);}
.wa-btn[disabled]{border-color:var(--mint-ink); color:var(--mint-ink); cursor:default;}
.wa-btn[disabled]:hover{background:transparent; color:var(--mint-ink);}
.wa-empty{color:var(--steel); font-size:12px; padding:30px 8px; text-align:center;}
.wa-stat{font-family:var(--mono); font-size:11.5px; color:#4A5257; line-height:1.7; margin-top:16px; max-width:48ch;}
.agenda-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(22px,3.5vw,44px); align-items:start; margin-top:30px;}
@media (max-width:980px){ .agenda-grid{grid-template-columns:1fr;} }