/* ============================================================
   VETERINARIA EL ROBLE — launcher styles
   ============================================================
   Floating "¿Qué le pasa?" pill + the triage dialog. Loaded
   after roble.css on every page of the demo. Field-journal
   rules apply: 1–2px corners, forest/paper/ochre, no gloss.
   ============================================================ */
.r-fab{
  position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); z-index:70;
  display:inline-flex; align-items:center; gap:10px; padding:12px 18px 12px 14px; min-height:50px;
  border-radius:2px; border:1.5px solid var(--forest2); background:var(--forest); color:var(--paper);
  font-family:var(--body); font-weight:700; font-size:15px; cursor:pointer;
  box-shadow:0 14px 30px -12px rgba(32,29,25,0.55);
  transition:transform .2s ease, background .25s ease;
}
.r-fab svg{color:var(--ochre-lt); flex-shrink:0;}
.r-fab:hover{background:var(--forest2); transform:translateY(-1px);}
.r-fab.is-nudge{animation:rFabNudge 1.3s ease 2;}
@keyframes rFabNudge{0%,100%{transform:translateY(0)} 30%{transform:translateY(-7px)} 55%{transform:translateY(0)} 75%{transform:translateY(-3px)}}
.motion-off .r-fab{animation:none !important; transition:none !important;}
@media (max-width:600px){
  .r-fab{right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); font-size:14px; padding:11px 16px 11px 12px; min-height:46px;}
}

html.tg-open{overflow:hidden;}
.r-tgdlg{
  border:0; padding:0; margin:auto; width:min(980px, calc(100vw - 24px)); max-height:calc(100vh - 24px);
  background:var(--forest); color:var(--paper); border-radius:2px; box-shadow:0 34px 70px -30px rgba(32,29,25,0.75);
}
.r-tgdlg::backdrop{background:rgba(32,29,25,0.62); backdrop-filter:blur(2px);}
.r-tgdlg-head{
  position:sticky; top:0; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:18px 20px 12px; background:var(--forest); border-bottom:1px dashed rgba(250,246,238,0.35);
}
.r-tgdlg-head .r-label{color:var(--ochre-lt);}
.r-tgdlg-title{
  font-family:var(--disp); font-size:clamp(24px,3vw,32px); line-height:1.1; margin:6px 0 0;
  font-variation-settings:"SOFT" 100, "WONK" 1, "opsz" 24;
}
.r-tgdlg-sub{color:#D9D4C6; margin:8px 0 0; max-width:52ch;}
.r-tgdlg-close{
  width:44px; height:44px; border-radius:2px; border:1.2px solid rgba(250,246,238,0.5); background:transparent;
  color:var(--paper); font-size:28px; line-height:1; cursor:pointer; flex-shrink:0; display:grid; place-items:center;
  transition:background .2s;
}
.r-tgdlg-close:hover{background:rgba(250,246,238,0.12);}
.r-tgdlg-body{padding:clamp(14px,2.5vw,26px);}
@media (max-width:600px){
  .r-tgdlg{width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border-radius:0;}
  .r-tgdlg-title{font-size:25px;}
}

/* the renamed wordmark is long: keep the mobile nav to one tidy line */
@media (max-width:640px){
  .r-logo{font-size:17px;}
  .r-logo .est{display:none;}
}

/* numbered steps + "what it usually is" list in the triage */
.tg-num{
  display:inline-grid; place-items:center; width:22px; height:22px; margin-right:8px; vertical-align:-5px;
  border:1.2px solid var(--ochre-lt); border-radius:999px; font-style:normal;
  font-family:var(--note); font-size:12px; color:var(--ochre-lt);
}
.tg-result .tg-num{border-color:var(--ochre-ink); color:var(--ochre-ink);}
.tg-causes{margin:6px 0 0; padding-left:20px;}
.tg-causes li{font-size:14.5px; line-height:1.6; margin-top:4px; color:var(--ink2);}