:root{ --maxw: 600px; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font, 'Plus Jakarta Sans'), system-ui, sans-serif;
  background:#e9e7e1; color:var(--ink,#161512);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button{ font-family:inherit; cursor:pointer; }
button:focus{ outline:none; }
button:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.field:focus-visible{ outline:none; }
img{ display:block; }

/* ===== APP SHELL ===== */
.app{
  min-height:100vh; background:var(--bg); color:var(--ink);
  display:flex; flex-direction:column;
  max-width:760px; margin:0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.04), 0 30px 80px -40px rgba(0,0,0,.4);
}
.canvas{ flex:1; width:100%; }
.canvas__inner{
  max-width:var(--maxw); margin:0 auto; padding:18px 20px 28px;
  animation:fadeUp .34s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes fadeUp{ from{ transform:translateY(10px); } to{ transform:none; } }
@media (prefers-reduced-motion:reduce){ .canvas__inner{ animation:none; } }

/* ===== ORIGIN SIMULATOR (dev strip) ===== */
.originBar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:7px 16px; background:#15181c; color:#aeb6bf;
  font-size:11.5px; border-bottom:1px dashed rgba(255,255,255,.18);
}
.originBar__tag{ display:inline-flex; align-items:center; gap:6px; font-weight:600; letter-spacing:.02em; opacity:.85; }
.originBar__seg{ display:flex; gap:3px; background:rgba(255,255,255,.07); padding:3px; border-radius:9px; }
.originBar__b{
  border:0; background:transparent; color:#aeb6bf; font-size:11.5px; font-weight:700;
  padding:4px 11px; border-radius:7px; letter-spacing:.01em;
}
.originBar__b--on{ background:#fff; color:#15181c; }
.originBar__url{ margin-left:auto; font-family:ui-monospace,Menlo,monospace; font-size:11px; opacity:.7; }

/* ===== APP BAR ===== */
.appbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 20px; background:var(--header-bg); color:var(--header-ink);
  border-bottom:1px solid var(--line);
}
.appbar--dark{ border-bottom-color:rgba(255,255,255,.08); }
.appbar__logo{ border:0; background:none; padding:0; display:flex; align-items:center; }
.poweredBy{ display:flex; align-items:center; justify-content:center; gap:6px; padding:14px 20px 20px; font-size:11px; color:var(--muted); opacity:.7; }
.poweredBy img{ height:14px; width:auto; opacity:.85; }
.poweredBy:hover{ opacity:1; }
.brandLogo{ height:26px; width:auto; }
.logoChip{ display:inline-flex; align-items:center; padding:5px 10px; background:#0E2A2E; border-radius:8px; }
.appbar__right{ display:flex; align-items:center; gap:10px; }
.appbar__socio{
  display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700;
  color:var(--brand); background:var(--brand-soft); padding:5px 10px; border-radius:99px;
}
.appbar--dark .appbar__socio{ color:#fff; background:rgba(255,255,255,.12); }
.appbar__turns{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-size:13px; font-weight:700; padding:7px 12px; border-radius:99px;
}
.appbar--dark .appbar__turns{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.14); }
.appbar__badge{
  min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--brand); color:var(--on-brand);
  font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center;
}
.appbar--dark .appbar__badge{ background:var(--accent); color:#0E2A2E; }
@media (max-width:430px){ .appbar__turns span{ display:none; } }

/* ===== STEPPER ===== */
.stepperWrap{ max-width:var(--maxw); margin:0 auto; padding:16px 20px 0; }
.stepper{ display:flex; align-items:center; }
.stepper__item{ display:flex; align-items:center; gap:8px; position:relative; }
.stepper__dot{
  width:26px; height:26px; flex:none; border-radius:99px; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; background:var(--surface); color:var(--muted);
  border:1.5px solid var(--line); transition:.2s;
}
.stepper__label{ font-size:12.5px; font-weight:700; color:var(--muted); white-space:nowrap; }
.stepper__bar{ flex:1; height:2px; background:var(--line); margin:0 8px; min-width:14px; border-radius:2px; }
.stepper__item--now .stepper__dot{ background:var(--brand); color:var(--on-brand); border-color:var(--brand); }
.stepper__item--now .stepper__label{ color:var(--ink); }
.stepper__item--done .stepper__dot{ background:var(--brand); color:var(--on-brand); border-color:var(--brand); }
.stepper__item--done + .stepper__item .stepper__bar,
.stepper__item--done .stepper__bar{ background:var(--brand); }
.stepper__item:last-child{ flex:none; }
.stepper__item:not(:last-child){ flex:1; }
@media (max-width:560px){ .stepper__label{ display:none; } }

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:99px; font-weight:700; letter-spacing:.005em;
  transition:transform .12s ease, box-shadow .2s; line-height:1;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn--md{ padding:11px 18px; font-size:14.5px; }
.btn--lg{ padding:15px 22px; font-size:16px; }
.btn--full{ width:100%; }
.btn--primary{ background:var(--brand); color:var(--on-brand); box-shadow:0 8px 20px -10px var(--brand); }
.btn--primary:hover{ box-shadow:0 10px 26px -10px var(--brand); }
.btn--primary:disabled{ background:var(--line); color:var(--muted); box-shadow:none; cursor:not-allowed; }
.btn--ghost{ background:var(--surface); color:var(--ink); border:1.5px solid var(--line); }
.btn--ghost:hover{ border-color:var(--brand); }
.btn--soft{ background:var(--brand-soft); color:var(--brand); }
.iconBtn{
  width:40px; height:40px; flex:none; border-radius:12px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); display:flex; align-items:center; justify-content:center;
}
.iconBtn:hover{ border-color:var(--brand); color:var(--brand); }
.linkBtn{ border:0; background:none; color:var(--brand); font-weight:700; font-size:13.5px; display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
/* Dentro de un texto corrido (ej. "corregilo acá") tiene que fluir con la línea. */
.noteBox .linkBtn{ display:inline; padding:0; font-size:inherit; text-decoration:underline; white-space:normal; cursor:pointer; }

/* ===== CHIP ===== */
.chip{ display:inline-flex; align-items:center; gap:6px; font-weight:700; border-radius:99px; }
.chip--md{ font-size:13px; padding:6px 12px; }
.chip--sm{ font-size:12px; padding:5px 10px; }
.chip--neutral{ background:var(--surface); color:var(--muted); border:1px solid var(--line); }
.chip--brandSoft{ background:var(--brand-soft); color:var(--ink); }
.chip--ok{ background:#E4F4EC; color:#1F7A4D; }
.chip--warn{ background:#FBEFD6; color:#9A6B12; }

/* ===== CARD ===== */
.card{
  width:100%; text-align:left; background:var(--surface); border:1.5px solid var(--line);
  border-radius:var(--radius); transition:border-color .18s, box-shadow .18s, transform .12s; color:inherit;
}
.card--click{ cursor:pointer; }
.card--click:hover{ border-color:color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow:0 6px 20px -14px rgba(0,0,0,.5); }
.card--sel{ border-color:var(--ring); box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent); }

/* ===== AVATARS / TILES ===== */
.petAvatar{ display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:800; flex:none; }
.svcTile{ display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); flex:none; }
.svcTile--brand{ background:var(--brand-soft); color:var(--brand); }
.rating{ display:inline-flex; align-items:center; gap:4px; font-size:13px; color:var(--ink); }
.rating strong{ font-weight:700; }

/* ===== EMPTY ===== */
.empty{ text-align:center; padding:44px 20px; }
.empty__ic{ display:inline-flex; width:58px; height:58px; align-items:center; justify-content:center; border-radius:18px; background:var(--brand-soft); color:var(--brand); margin-bottom:14px; }
.empty__title{ font-weight:800; font-size:17px; }
.empty__text{ color:var(--muted); font-size:14px; margin-top:4px; }

/* ===== FLOW HEADER ===== */
.flowHeader{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.flowHeader__txt{ flex:1; min-width:0; }
.flowHeader__title{ font-size:20px; font-weight:800; letter-spacing:-.01em; line-height:1.15; }
.flowHeader__sub{ font-size:13px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.flowHeader__count{ font-size:12px; font-weight:700; color:var(--muted); white-space:nowrap; }

/* ===== HOME ===== */
.home__hero{ padding:8px 0 4px; }
.home__heroTop{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.home__title{ font-size:34px; line-height:1.05; font-weight:800; letter-spacing:-.025em; margin:0 0 10px; }
.home__tag{ font-size:16px; color:var(--muted); margin:0 0 22px; }
.home__gate{ display:flex; gap:7px; align-items:flex-start; font-size:13px; color:var(--muted); margin:14px 2px 0; }
.upNext{
  width:100%; display:flex; align-items:center; gap:13px; text-align:left; margin-top:22px;
  background:var(--brand); color:var(--on-brand); border:0; border-radius:var(--radius); padding:15px 16px;
  box-shadow:0 14px 30px -18px var(--brand);
}
.upNext__ic{ width:42px; height:42px; flex:none; border-radius:13px; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; }
.upNext__main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.upNext__k{ font-size:12px; opacity:.8; font-weight:600; }
.upNext__v{ font-size:15px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home__sectionH{ display:flex; align-items:center; justify-content:space-between; margin:30px 0 14px; }
.home__sectionH > span{ font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.quickGrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.quickTile{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius); padding:15px 14px;
  transition:border-color .18s, transform .12s;
}
.quickTile:hover{ border-color:color-mix(in srgb, var(--brand) 45%, var(--line)); transform:translateY(-2px); }
.quickTile__t{ font-size:13.5px; font-weight:700; }
.quickTile__badge{ position:absolute; top:10px; right:10px; font-size:9.5px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); background:var(--bg); border:1px solid var(--line); padding:3px 6px; border-radius:6px; }
.quickTile__badge--own{ color:var(--brand); border-color:transparent; background:var(--brand-soft); }
@media (max-width:430px){ .quickGrid{ grid-template-columns:repeat(2,1fr); } .home__title{ font-size:30px; } }

/* ===== SCREEN ===== */
.screen{ display:flex; flex-direction:column; }
.screen__foot{ position:sticky; bottom:0; padding:18px 0 6px; margin-top:8px; background:linear-gradient(to top, var(--bg) 62%, transparent); }
.footNote{ text-align:center; font-size:12px; color:var(--muted); margin:10px 0 0; }

/* ===== PET ===== */
.petList{ display:flex; flex-direction:column; gap:11px; }
.petCard{ display:flex; align-items:center; gap:13px; padding:13px 14px; }
.petCard__main{ flex:1; min-width:0; }
.petCard__name{ font-size:16px; font-weight:700; }
.petCard__meta{ font-size:13px; color:var(--muted); margin-top:1px; }
.radio{ width:24px; height:24px; flex:none; border-radius:99px; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; color:#fff; }
.radio--on{ background:var(--ring); border-color:var(--ring); color:var(--on-brand); }
.addBtn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px; border:1.5px dashed var(--line); background:transparent; border-radius:var(--radius); color:var(--muted); font-weight:700; font-size:14px; }
.addBtn:hover{ border-color:var(--brand); color:var(--brand); }
.addPet{ border:1.5px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:14px; display:flex; flex-direction:column; gap:11px; }
.addPet__actions{ display:flex; gap:10px; justify-content:flex-end; }
.field{ width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--radius-sm); font-size:14.5px; background:var(--bg); color:var(--ink); }
.field:focus{ outline:none; border-color:var(--brand); }
.seg{ display:flex; gap:6px; background:var(--bg); padding:5px; border-radius:var(--radius-sm); border:1.5px solid var(--line); }
.seg__b{ flex:1; border:0; background:transparent; padding:9px; border-radius:9px; font-size:13.5px; font-weight:700; color:var(--muted); }
.seg__b--on{ background:var(--surface); color:var(--ink); box-shadow:0 2px 8px -4px rgba(0,0,0,.3); }

/* ===== SERVICE ===== */
.svcList{ display:flex; flex-direction:column; gap:11px; }
.svcRow{ display:flex; align-items:center; gap:14px; padding:14px; }
.svcRow__main{ flex:1; min-width:0; }
.svcRow__name{ font-size:15.5px; font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.svcRow__desc{ font-size:13px; color:var(--muted); margin-top:2px; }
.svcGrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.svcCardG{ display:flex; flex-direction:column; gap:10px; padding:16px; }
.svcCardG__name{ font-size:15.5px; font-weight:700; }
.svcCardG__desc{ font-size:12.5px; color:var(--muted); line-height:1.4; flex:1; }
.tag{ align-self:flex-start; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); background:var(--bg); border:1px solid var(--line); padding:3px 8px; border-radius:6px; white-space:nowrap; }
.tag--own{ color:var(--brand); background:var(--brand-soft); border-color:transparent; }
.tag--prov{ color:#9A6B12; background:#FBEFD6; border-color:transparent; }
@media (max-width:380px){ .svcGrid{ grid-template-columns:1fr; } }

/* ===== PROVIDER ===== */
.provList{ display:flex; flex-direction:column; gap:12px; }
.provCard{ display:flex; align-items:center; gap:14px; padding:14px; }
.provCard__logo{ width:64px; height:48px; flex:none; border-radius:10px; background:var(--bg); display:flex; align-items:center; justify-content:center; border:1px solid var(--line); overflow:hidden; }
.provCard__logo img{ max-width:80%; max-height:64%; width:auto; height:auto; }
.provCard__main{ flex:1; min-width:0; }
.provCard__name{ font-size:15px; font-weight:700; }
.provCard__meta{ font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:4px; margin-top:3px; }
.provCard__row{ display:flex; align-items:center; gap:7px; margin-top:5px; font-size:12.5px; color:var(--muted); }
.provCard__dot{ opacity:.5; }

/* ===== LOCATION PICKER ===== */
.locPick{ margin-bottom:6px; }
.locList{ display:flex; flex-direction:column; gap:10px; }
.locCard{ display:flex; align-items:center; gap:13px; padding:13px 14px; border:1.5px solid var(--line); background:var(--surface); border-radius:var(--radius); transition:border-color .16s, box-shadow .16s; text-align:left; width:100%; color:inherit; }
.locCard:hover:not(:disabled){ border-color:color-mix(in srgb, var(--brand) 45%, var(--line)); }
.locCard--sel{ border-color:var(--ring); box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent); }
.locCard--single{ cursor:default; }
.locCard__ic{ width:42px; height:42px; flex:none; border-radius:12px; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; }
.locCard__main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.locCard__name{ font-size:15px; font-weight:700; }
.locCard__addr{ font-size:12.5px; color:var(--muted); }
.locCard__hours{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--ink); font-weight:600; margin-top:2px; }
.locCard__hours svg{ color:var(--muted); }
.locHint{ display:flex; gap:9px; align-items:center; padding:14px 16px; color:var(--muted); font-size:13.5px; }
.locHint svg{ color:var(--brand); flex:none; }

/* ===== SCHEDULE: common ===== */
.sched{ display:flex; flex-direction:column; gap:8px; }
.secLabel{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:18px 0 10px; }
.secLabel:first-child{ margin-top:4px; }
.secLabel__l{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:800; }
.secLabel__l svg{ color:var(--brand); }
.secLabel__hint{ font-size:12px; color:var(--muted); font-weight:600; }

.dayStrip{ display:flex; gap:9px; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:thin; }
.dayCell{ flex:none; width:58px; padding:10px 0; border:1.5px solid var(--line); background:var(--surface); border-radius:var(--radius-sm); display:flex; flex-direction:column; align-items:center; gap:2px; transition:border-color .16s; }
.dayCell__dow{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; }
.dayCell__dom{ font-size:19px; font-weight:800; }
.dayCell__mon{ font-size:10.5px; color:var(--muted); }
.dayCell:hover:not(:disabled){ border-color:var(--brand); }
.dayCell--sel{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.dayCell--sel .dayCell__dow,.dayCell--sel .dayCell__mon{ color:var(--on-brand); opacity:.85; }
.dayCell:disabled{ opacity:.32; cursor:not-allowed; }

.monthCal{ border:1.5px solid var(--line); border-radius:var(--radius); padding:14px; background:var(--surface); }
.monthCal__head{ text-align:center; font-weight:800; text-transform:capitalize; margin-bottom:10px; }
.monthCal__dows{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px; }
.monthCal__dows span{ text-align:center; font-size:11px; font-weight:700; color:var(--muted); }
.monthCal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.monthCal__cell{ aspect-ratio:1; border:0; background:transparent; border-radius:10px; font-size:14px; font-weight:600; color:var(--ink); }
.monthCal__cell:hover:not(:disabled):not(.monthCal__cell--empty){ background:var(--brand-soft); }
.monthCal__cell--sel{ background:var(--brand); color:var(--on-brand); font-weight:800; }
.monthCal__cell:disabled{ color:var(--line); cursor:default; }
.monthCal__cell--empty{ background:transparent; }

.slotBands{ display:flex; flex-direction:column; gap:16px; }
.slotBand__h{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--muted); margin-bottom:9px; }
.slotGrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(72px,1fr)); gap:9px; }
.slot{ padding:11px 0; border:1.5px solid var(--line); background:var(--surface); border-radius:var(--radius-sm); font-size:14px; font-weight:700; color:var(--ink); transition:border-color .14s; }
.slot:hover:not(:disabled){ border-color:var(--brand); color:var(--brand); }
.slot--sel{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.slot--taken{ opacity:.34; text-decoration:line-through; cursor:not-allowed; }

.slotList{ display:flex; flex-direction:column; gap:9px; }
.slotRow{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1.5px solid var(--line); background:var(--surface); border-radius:var(--radius-sm); transition:border-color .16s, box-shadow .16s; }
.slotRow:hover{ border-color:var(--brand); }
.slotRow--sel{ border-color:var(--ring); box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent); }
.slotRow__time{ display:inline-flex; align-items:center; gap:7px; font-size:15px; font-weight:700; }
.slotRow__meta{ margin-left:auto; font-size:12.5px; color:#1F7A4D; font-weight:700; }
.slotRow svg:last-child{ color:var(--muted); }

.bandList{ display:flex; flex-direction:column; gap:11px; }
.bandCard{ display:flex; align-items:center; gap:14px; padding:15px; border:1.5px solid var(--line); background:var(--surface); border-radius:var(--radius); transition:border-color .16s, box-shadow .16s; }
.bandCard:hover:not(:disabled){ border-color:var(--brand); }
.bandCard--sel{ border-color:var(--ring); box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent); }
.bandCard:disabled{ opacity:.45; cursor:not-allowed; }
.bandCard__ic{ width:46px; height:46px; flex:none; border-radius:13px; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; }
.bandCard__main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.bandCard__range{ font-size:16px; font-weight:800; }
.bandCard__prof{ font-size:13px; color:var(--muted); }
.bandCard__cap{ font-size:12.5px; color:var(--muted); text-align:right; white-space:nowrap; }
.bandCard__cap strong{ color:var(--ink); font-size:15px; }

.noteBox{ display:flex; gap:10px; align-items:flex-start; padding:13px 15px; background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius-sm); font-size:13px; color:var(--muted); line-height:1.45; margin:10px 0; }
.noteBox svg{ flex:none; color:var(--brand); margin-top:1px; }
.noteBox--accent{ background:var(--brand-soft); border-color:transparent; color:var(--ink); }
.noteBox--accent svg{ color:var(--brand); }
.noteBox--ok{ background:#E4F4EC; border-color:transparent; color:#1F7A4D; }
.noteBox--ok svg{ color:#1F7A4D; }

/* --- Toasts (notificaciones flotantes) ---------------------------------------
   Los usa toast() de components.jsx: errores de alta de mascota, cancelación de
   turno y cualquier fallo que conSesion() no trate como sesión vencida.
   Sin estas reglas el toast se renderiza en el flujo del documento y empuja la
   página, en vez de flotar sobre ella. */
.toastHost{ position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:999; display:flex; flex-direction:column; gap:8px; width:min(92vw, 420px); }
.toast{ display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:12px; background:#2A2620; color:#fff; font-size:13.5px; line-height:1.4; box-shadow:0 10px 30px -8px rgba(0,0,0,.35); animation:toastIn .18s ease-out; }
.toast svg{ flex:none; margin-top:1px; }
.toast--error{ background:#3A2321; }
.toast--error svg{ color:#E8897A; }
.toast--ok{ background:#1F3A2E; }
.toast--ok svg{ color:#6FD3A0; }
.toast span{ flex:1; }
.toast__close{ background:none; border:none; color:inherit; opacity:.6; cursor:pointer; padding:0; display:flex; }
.toast__close:hover{ opacity:1; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }

.specCard{ display:flex; align-items:center; gap:13px; padding:15px; border:1.5px solid var(--line); background:var(--surface); border-radius:var(--radius); margin-bottom:4px; }
.specCard__ic{ width:46px; height:46px; flex:none; border-radius:13px; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; }
.specCard__name{ font-size:16px; font-weight:800; }
.specCard__meta{ font-size:13px; color:var(--muted); margin-top:2px; }

.seqWrap{ margin-top:6px; }
.seqCol{ display:flex; flex-direction:column; gap:8px; }
.seqSlot{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border:1.5px solid var(--line); background:var(--surface); border-radius:var(--radius-sm); transition:border-color .16s, box-shadow .16s; }
.seqSlot__time{ font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; }
.seqSlot__tag{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; }
.seqSlot--taken{ opacity:.5; }
.seqSlot--taken .seqSlot__tag{ color:var(--muted); }
.seqSlot--locked{ opacity:.45; cursor:not-allowed; }
.seqSlot--locked .seqSlot__tag{ color:var(--muted); }
.seqSlot--next{ border-color:var(--ring); border-width:2px; box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent); }
.seqSlot--next .seqSlot__tag{ color:var(--brand); }
.seqSlot--sel{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.seqSlot--sel .seqSlot__tag{ color:var(--on-brand); }

/* ===== CONFIRM ===== */
.summary{ border:1.5px solid var(--line); background:var(--surface); border-radius:var(--radius); overflow:hidden; }
.sumRow{ display:flex; gap:14px; align-items:center; padding:15px 16px; }
.sumRow + .sumRow{ border-top:1px solid var(--line); }
.sumRow__ic{ width:40px; height:40px; flex:none; border-radius:12px; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; }
.sumRow__txt{ display:flex; flex-direction:column; min-width:0; }
.sumRow__k{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.sumRow__v{ font-size:16px; font-weight:700; margin-top:1px; }
.sumRow__sub{ font-size:12.5px; color:var(--muted); }

/* ===== SUCCESS ===== */
.success{ align-items:center; text-align:center; padding-top:18px; }
.success__check{ width:78px; height:78px; border-radius:99px; background:var(--brand); color:var(--on-brand); display:flex; align-items:center; justify-content:center; margin:8px auto 16px; animation:pop .5s cubic-bezier(.2,.9,.3,1.3) both; box-shadow:0 18px 36px -16px var(--brand); }
@keyframes pop{ from{ transform:scale(.4); } to{ transform:none; } }
.success__title{ font-size:25px; font-weight:800; margin:0; letter-spacing:-.01em; }
.success__sub{ color:var(--muted); margin:6px 0 24px; font-size:15px; }
.ticket{ width:100%; border:1.5px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:18px; text-align:left; }
.ticket__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ticket__svc{ font-size:18px; font-weight:800; }
.ticket__place{ font-size:13px; color:var(--muted); margin-top:2px; }
.ticket__addr{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); margin-top:3px; }
.ticket__addr svg{ color:var(--brand); }
.ticket__perf{ display:flex; gap:12px; margin:16px 0; padding:14px 0; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); }
.ticket__cell{ flex:1; display:flex; flex-direction:column; gap:3px; }
.ticket__cell span{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.ticket__cell strong{ font-size:15px; }
.ticket__code{ display:flex; align-items:center; justify-content:space-between; }
.ticket__code span{ font-size:12px; color:var(--muted); font-weight:600; }
.ticket__code strong{ font-family:ui-monospace,Menlo,monospace; font-size:16px; letter-spacing:.04em; color:var(--brand); }
.success__actions{ width:100%; display:flex; flex-direction:column; gap:10px; margin-top:22px; }

/* ===== MY TURNS ===== */
.turnList{ display:flex; flex-direction:column; gap:11px; }
.turnCard{ display:flex; align-items:center; gap:14px; padding:14px; border:1.5px solid var(--line); background:var(--surface); border-radius:var(--radius); }
.turnCard--off{ opacity:.55; }
.turnCard__date{ width:54px; height:54px; flex:none; border-radius:14px; background:var(--brand-soft); color:var(--brand); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.turnCard__date strong{ font-size:20px; font-weight:800; line-height:1; }
.turnCard__date span{ font-size:11px; font-weight:700; text-transform:uppercase; }
.turnCard__main{ flex:1; min-width:0; }
.turnCard__svc{ font-size:15.5px; font-weight:700; }
.turnCard__meta{ font-size:12.5px; color:var(--muted); margin-top:1px; }
.turnCard__when{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--ink); margin-top:5px; font-weight:600; }
.turnCard__cancel{ width:38px; height:38px; flex:none; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--muted); display:flex; align-items:center; justify-content:center; }
.turnCard__cancel:hover{ border-color:#D9695A; color:#D9695A; }
.turnCard__status{ font-size:12px; font-weight:700; color:var(--muted); white-space:nowrap; }

/* ===== PORTAL: tabs Turnos / Resultados ===== */
.portalTabs{ display:flex; gap:6px; background:var(--surface); border:1.5px solid var(--line); padding:5px; border-radius:var(--radius-sm); margin-bottom:18px; }
.portalTab{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:0; background:transparent; padding:11px 8px; border-radius:10px; font-size:14px; font-weight:700; color:var(--muted); transition:.15s; }
.portalTab:hover{ color:var(--ink); }
.portalTab--on{ background:var(--brand); color:var(--on-brand); box-shadow:0 8px 18px -10px var(--brand); }
.portalTab--on:hover{ color:var(--on-brand); }
.portalTab__n{ min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:var(--bg); color:var(--muted); font-size:11.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.portalTab--on .portalTab__n{ background:rgba(255,255,255,.24); color:var(--on-brand); }

/* ===== PORTAL: resultados agrupados por mascota ===== */
.petGroups{ display:flex; flex-direction:column; gap:24px; }
.petGroup__h{ display:flex; align-items:center; gap:11px; margin-bottom:11px; }
.petGroup__name{ font-size:15.5px; font-weight:800; }
.petGroup__count{ font-size:12px; font-weight:700; color:var(--muted); margin-left:auto; }
.resList{ display:flex; flex-direction:column; gap:10px; }
.resCard{ display:flex; align-items:center; gap:13px; padding:13px 14px; border:1.5px solid var(--line); background:var(--surface); border-radius:var(--radius); transition:border-color .16s; }
.resCard:hover{ border-color:color-mix(in srgb, var(--brand) 42%, var(--line)); }
.resCard__ic{ width:44px; height:44px; flex:none; border-radius:13px; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; }
.resCard__main{ flex:1; min-width:0; }
.resCard__title{ font-size:15px; font-weight:700; line-height:1.25; }
.resCard__meta{ font-size:12.5px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.resCard__when{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); margin-top:6px; font-weight:600; font-variant-numeric:tabular-nums; }
.resCard__when svg{ color:var(--brand); flex:none; }
.resCard__dl{ width:42px; height:42px; flex:none; border-radius:12px; border:1.5px solid transparent; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; transition:.15s; }
.resCard__dl:hover{ background:var(--brand); color:var(--on-brand); }
.resCard__dl:active{ transform:translateY(1px); }

/* ===== TWEAKS extra ===== */
.tw-note{ font-size:11.5px; color:var(--muted); line-height:1.4; margin:-2px 0 8px; padding:0 2px; }

/* ===== APPBAR user / logout ===== */
.appbar__user{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:13px; font-weight:700; padding:5px 11px 5px 6px; border-radius:99px; }
.appbar--dark .appbar__user{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.14); }
.appbar__userav{ width:24px; height:24px; flex:none; border-radius:99px; background:var(--brand); color:var(--on-brand); display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }
.appbar--dark .appbar__userav{ background:var(--accent); color:#0E2A2E; }
@media (max-width:520px){ .appbar__username{ display:none; } }

/* ===== PICKED SUMMARY (selección colapsada) ===== */
.picked{ display:flex; align-items:center; gap:13px; padding:13px 15px; background:var(--brand-soft); border:1.5px solid transparent; border-radius:var(--radius); margin-bottom:14px; }
.picked__ic{ width:38px; height:38px; flex:none; border-radius:11px; background:var(--surface); color:var(--brand); display:flex; align-items:center; justify-content:center; }
.picked__main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.picked__k{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.picked__title{ font-size:15px; font-weight:700; }
.picked__sub{ font-size:12px; color:var(--muted); }
.picked__edit{ border:0; background:var(--surface); color:var(--brand); font-weight:700; font-size:13px; padding:7px 13px; border-radius:99px; flex:none; }
.picked__edit:hover{ box-shadow:0 0 0 1.5px var(--brand) inset; }

/* ===== LOCATION compact ===== */
.locSearch{ display:flex; align-items:center; gap:9px; padding:11px 14px; border:1.5px solid var(--line); background:var(--surface); border-radius:var(--radius-sm); margin-bottom:11px; color:var(--muted); }
.locSearch__input{ flex:1; border:0; outline:none; background:transparent; font-size:14.5px; color:var(--ink); }
.locSearch__clear{ border:0; background:none; color:var(--muted); display:flex; padding:2px; }
.locList{ display:flex; flex-direction:column; gap:9px; }
.locRow{ display:flex; align-items:center; gap:13px; padding:13px 14px; border:1.5px solid var(--line); background:var(--surface); border-radius:var(--radius-sm); transition:border-color .16s; text-align:left; width:100%; color:inherit; }
.locRow:hover{ border-color:color-mix(in srgb, var(--brand) 45%, var(--line)); }
.locRow--sel{ border-color:var(--ring); box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent); }
.locRow__pin{ width:36px; height:36px; flex:none; border-radius:10px; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; }
.locRow__main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.locRow__name{ font-size:14.5px; font-weight:700; }
.locRow__meta{ font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.locRow svg:last-child{ color:var(--muted); flex:none; }
.locEmpty{ padding:18px; text-align:center; color:var(--muted); font-size:13.5px; }

/* ===== PROFESSIONAL ===== */
.profList{ display:flex; flex-direction:column; gap:9px; }
.profRow{ display:flex; align-items:center; gap:13px; padding:13px 14px; border:1.5px solid var(--line); background:var(--surface); border-radius:var(--radius-sm); transition:border-color .16s, box-shadow .16s; text-align:left; width:100%; color:inherit; }
.profRow:hover{ border-color:color-mix(in srgb, var(--brand) 45%, var(--line)); }
.profRow--sel{ border-color:var(--ring); box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent); }
.profRow__av{ width:40px; height:40px; flex:none; border-radius:99px; background:var(--brand); color:var(--on-brand); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; }
.profRow__main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.profRow__name{ font-size:14.5px; font-weight:700; }
.profRow__meta{ font-size:12px; color:var(--muted); }

/* ===== NEXT SLOT (turno corrido único) ===== */
.nextSlot{ display:flex; align-items:center; gap:15px; width:100%; text-align:left; padding:16px; border:2px solid var(--ring); background:var(--surface); border-radius:var(--radius); box-shadow:0 0 0 4px color-mix(in srgb, var(--ring) 14%, transparent); transition:transform .12s; }
.nextSlot:hover{ transform:translateY(-1px); }
.nextSlot--sel{ background:var(--brand); border-color:var(--brand); box-shadow:0 14px 30px -16px var(--brand); }
.nextSlot__cal{ width:58px; height:62px; flex:none; border-radius:14px; background:var(--brand-soft); color:var(--brand); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.nextSlot--sel .nextSlot__cal{ background:rgba(255,255,255,.18); color:#fff; }
.nextSlot__dow{ font-size:11px; font-weight:800; text-transform:uppercase; }
.nextSlot__dom{ font-size:24px; font-weight:800; line-height:1; }
.nextSlot__mon{ font-size:10.5px; font-weight:700; }
.nextSlot__main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.nextSlot__time{ font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; }
.nextSlot--sel .nextSlot__time, .nextSlot--sel .nextSlot__date, .nextSlot--sel .nextSlot__prof{ color:#fff; }
.nextSlot__date{ font-size:13px; color:var(--ink); font-weight:600; }
.nextSlot__prof{ font-size:12px; color:var(--muted); }
.nextSlot__check{ flex:none; }
.nextSlot__take{ font-size:13px; font-weight:800; color:var(--brand); border:1.5px solid var(--brand); padding:8px 14px; border-radius:99px; }
.nextSlot__check.on{ width:40px; height:40px; border-radius:99px; background:rgba(255,255,255,.2); color:#fff; display:flex; align-items:center; justify-content:center; }

/* ===== INDICACIONES ===== */
.indic{ border:1.5px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:15px 16px; margin:14px 0; text-align:left; }
.indic__h{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:800; margin-bottom:9px; white-space:nowrap; }
.indic__h svg{ color:var(--brand); }
.indic__list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.indic__list li{ position:relative; padding-left:20px; font-size:13.5px; color:var(--ink); line-height:1.45; }
.indic__list li::before{ content:''; position:absolute; left:4px; top:7px; width:6px; height:6px; border-radius:99px; background:var(--brand); }
.indic__note{ color:var(--muted); }
.indic__note::before{ background:var(--muted) !important; }

/* ===== AUTH (login por DNI) ===== */
.auth{ display:flex; flex-direction:column; align-items:center; }
.auth__dots{ display:flex; gap:7px; margin-bottom:18px; }
.auth__dot{ width:28px; height:5px; border-radius:99px; background:var(--line); transition:.2s; }
.auth__dot.on{ background:var(--brand); }
.auth__card{ width:100%; max-width:420px; text-align:center; }
.auth__ic{ width:60px; height:60px; border-radius:18px; background:var(--brand-soft); color:var(--brand); display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; }
.auth__ic--ok{ background:#E4F4EC; color:#1F7A4D; }
.auth__h{ font-size:21px; font-weight:800; margin:0 0 6px; letter-spacing:-.01em; }
.auth__p{ font-size:14.5px; color:var(--muted); margin:0 auto 18px; max-width:340px; line-height:1.5; }
.field--lg{ font-size:17px; padding:15px 16px; text-align:center; letter-spacing:.04em; font-weight:700; }
.auth__err{ color:#C0392B; font-size:13px; font-weight:600; margin:10px 0; }
.auth__hint{ display:flex; gap:6px; align-items:center; justify-content:center; font-size:12.5px; color:var(--muted); margin:14px 0 0; }
.auth__hint b{ color:var(--ink); }
.auth__form{ display:flex; flex-direction:column; gap:11px; margin-bottom:6px; text-align:left; }
.channelRow{ display:flex; align-items:center; gap:12px; width:100%; padding:14px 16px; border:1.5px solid var(--line); background:var(--surface); border-radius:var(--radius); font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; transition:border-color .16s; }
.channelRow:hover{ border-color:var(--brand); }
.channelRow svg:first-child{ color:var(--brand); flex:none; }
.channelRow svg:last-child{ margin-left:auto; color:var(--muted); flex:none; }
.auth__methods{ display:flex; flex-direction:column; gap:11px; text-align:left; }
.methodCard{ display:flex; align-items:center; gap:13px; padding:15px; border:1.5px solid var(--line); background:var(--surface); border-radius:var(--radius); transition:border-color .16s, transform .12s; }
.methodCard:hover{ border-color:var(--brand); transform:translateY(-1px); }
.methodCard__ic{ width:44px; height:44px; flex:none; border-radius:13px; display:flex; align-items:center; justify-content:center; color:#fff; }
.methodCard__ic--wsp{ background:#25D366; }
.methodCard__ic--mail{ background:var(--brand); color:var(--on-brand); }
.methodCard__main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.methodCard__k{ font-size:14.5px; font-weight:700; }
.methodCard__v{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.methodCard svg:last-child{ color:var(--muted); }
.otp{ display:flex; gap:8px; justify-content:center; margin:6px 0 4px; width:100%; }
.otp__box{ flex:1 1 0; min-width:0; max-width:52px; height:60px; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); text-align:center; font-size:24px; font-weight:800; color:var(--ink); }
.otp__box:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 20%, transparent); }
.auth__resend{ border:0; background:none; color:var(--brand); font-weight:700; font-size:13.5px; margin-top:14px; }

/* Por qué la tira de días tiene huecos: son los días que se atienden */
.schedHint{ margin-top:9px; font-size:12px; color:var(--muted); }
.monthCal__cell--off{ opacity:.32; cursor:default; }

/* Logo del prestador en el selector de la red (MOVET) */
.provCard__logo{overflow:hidden}
.provCard__logo img{width:100%;height:100%;object-fit:contain;padding:6px;display:block}
.provCard__logo--dark{background:#1c1a16}


/* ===== MENÚ DE CUENTA ===== */
/* El chip con el nombre abre la cuenta; ya no desloguea al tocarlo. */
.userWrap{ position:relative; }
.appbar__user{ flex:none; white-space:nowrap; display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-size:13px; font-weight:700; padding:4px 10px 4px 4px; border-radius:99px; min-height:36px; }
.appbar__user[aria-expanded="true"]{ border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.appbar--dark .appbar__user{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.14); }
.appbar__userav{ width:28px; height:28px; flex:none; border-radius:99px; background:var(--brand); color:var(--on-brand);
  display:inline-flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800; }
.appbar__userav--lg{ width:40px; height:40px; font-size:16px; }
.appbar__caret{ display:inline-flex; color:var(--muted); transition:transform .18s; }
.appbar__user[aria-expanded="true"] .appbar__caret{ transform:rotate(180deg); }
.appbar__turns{ flex:none; white-space:nowrap; }
@media (max-width:430px){ .appbar__username{ display:none; } }

.userMenu__scrim{ position:fixed; inset:0; z-index:40; background:transparent; }
.userMenu{ position:absolute; z-index:41; top:calc(100% + 10px); right:0; width:286px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:6px;
  box-shadow:0 22px 44px -18px rgba(0,0,0,.32); animation:umPop .16s ease-out; }
@keyframes umPop{ from{ opacity:0; transform:translateY(-6px) scale(.98); } }
.userMenu__grab{ display:none; }
.userMenu__who{ display:flex; gap:11px; align-items:center; padding:10px 10px 12px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.userMenu__name{ font-weight:800; font-size:14.5px; line-height:1.25; }
.userMenu__dni{ font-size:12.5px; color:var(--muted); margin-top:1px; }
.userMenu__it{ display:flex; align-items:center; gap:11px; width:100%; border:0; background:none; color:var(--ink);
  font-size:14px; font-weight:600; padding:11px 10px; border-radius:10px; text-align:left; min-height:44px; }
.userMenu__it:hover, .userMenu__it:focus-visible{ background:var(--bg); }
.userMenu__it svg{ color:var(--muted); flex:none; }
.userMenu__cnt{ margin-left:auto; font-size:12px; font-weight:700; color:var(--muted); }
.userMenu__sep{ height:1px; background:var(--line); margin:6px 4px; }
.userMenu__hint{ font-size:11.5px; color:var(--muted); line-height:1.45; padding:2px 10px 6px; text-wrap:pretty; }
/* En celular: hoja desde abajo, con fondo atenuado. */
@media (max-width:600px){
  .userMenu__scrim{ background:rgba(22,21,18,.38); }
  .userMenu{ position:fixed; top:auto; bottom:0; left:0; right:0; width:auto; border-radius:20px 20px 0 0;
    padding:8px 10px calc(18px + env(safe-area-inset-bottom)); animation:umUp .22s ease-out; }
  .userMenu__grab{ display:block; width:38px; height:4px; border-radius:4px; background:var(--line); margin:4px auto 10px; }
}
@keyframes umUp{ from{ transform:translateY(100%); } }

/* ===== CONFIRMAR SALIDA (solo con reserva a medias) ===== */
.dlgScrim{ position:fixed; inset:0; z-index:80; background:rgba(22,21,18,.46); display:flex; align-items:center; justify-content:center; padding:20px; animation:umFade .15s; }
@keyframes umFade{ from{ opacity:0; } }
.dlg{ width:100%; max-width:380px; background:var(--surface); color:var(--ink); border-radius:20px; padding:22px 22px 18px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.4); animation:umPop .18s ease-out; }
.dlg__ic{ width:46px; height:46px; border-radius:14px; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.dlg__t{ margin:0 0 6px; font-size:18px; font-weight:800; letter-spacing:-.01em; }
.dlg__p{ margin:0; font-size:14px; color:var(--muted); line-height:1.5; text-wrap:pretty; }
.dlg__pend{ display:flex; gap:10px; align-items:center; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin:14px 0 4px; font-size:13px; }
.dlg__sub{ color:var(--muted); margin-top:1px; }
.dlg__acts{ display:flex; flex-direction:column; gap:8px; margin-top:18px; }
@media (max-width:600px){
  .dlgScrim{ align-items:flex-end; padding:0; }
  .dlg{ max-width:none; border-radius:20px 20px 0 0; padding-bottom:calc(24px + env(safe-area-inset-bottom)); animation:umUp .22s ease-out; }
}

/* ===== CONFIRMAR SALIDA (solo con reserva a medias) ===== */
.dlgScrim{ position:fixed; inset:0; z-index:80; background:rgba(22,21,18,.46); display:flex; align-items:center; justify-content:center; padding:20px; animation:umFade .15s; }
@keyframes umFade{ from{ opacity:0; } }
.dlg{ width:100%; max-width:380px; background:var(--surface); color:var(--ink); border-radius:20px; padding:22px 22px 18px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.4); animation:umPop .18s ease-out; }
.dlg__ic{ width:46px; height:46px; border-radius:14px; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.dlg__t{ margin:0 0 6px; font-size:18px; font-weight:800; letter-spacing:-.01em; }
.dlg__p{ margin:0; font-size:14px; color:var(--muted); line-height:1.5; text-wrap:pretty; }
.dlg__pend{ display:flex; gap:10px; align-items:center; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin:14px 0 4px; font-size:13px; }
.dlg__sub{ color:var(--muted); margin-top:1px; }
.dlg__acts{ display:flex; flex-direction:column; gap:8px; margin-top:18px; }
@media (max-width:600px){
  .dlgScrim{ align-items:flex-end; padding:0; }
  .dlg{ max-width:none; border-radius:20px 20px 0 0; padding-bottom:calc(24px + env(safe-area-inset-bottom)); animation:umUp .22s ease-out; }
}

/* ===== ACCESOS RÁPIDOS: ver más / servicio preelegido ===== */
.quickMore{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin-top:12px;
  min-height:44px; border:1px dashed var(--line); border-radius:var(--radius-sm); background:transparent;
  color:var(--ink); font-size:14px; font-weight:700; }
.quickMore:hover{ border-color:var(--brand); background:var(--surface); }
/* Paso 2 con servicio ya elegido: una sola tarjeta destacada. */
.svcPicked{ position:relative; display:flex; align-items:center; gap:14px; padding:18px 16px;
  background:var(--surface); border:2px solid var(--brand); border-radius:var(--radius);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent); }
.svcPicked__check{ position:absolute; top:-10px; left:16px; width:22px; height:22px; border-radius:99px;
  background:var(--brand); color:var(--on-brand); display:flex; align-items:center; justify-content:center; }
.svcPicked__main{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; flex:1; min-width:0; }
.svcPicked__k{ font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.svcPicked__name{ font-size:18px; font-weight:800; color:var(--ink); line-height:1.2; }
.svcPicked__edit{ flex:none; min-height:40px; padding:0 14px; border:1px solid var(--line); border-radius:99px;
  background:var(--surface); color:var(--ink); font-size:13.5px; font-weight:700; }
.svcPicked__edit:hover{ border-color:var(--brand); }

/* Identificación: aire entre el campo del DNI y el botón (quedaban pegados). */
.auth__card > .field + .btn,
.auth__card > .field + .auth__err{ margin-top:14px; }
.auth__card > .auth__err + .btn{ margin-top:4px; }

/* Confirmar: motivo de consulta (opcional) */
.motivoBox{ margin:14px 0; text-align:left; }
.motivoBox__k{ display:block; font-size:13.5px; font-weight:800; margin-bottom:7px; color:var(--ink); }
.motivoBox__k span{ font-weight:600; color:var(--muted); }
.motivoBox__t{ resize:vertical; min-height:76px; line-height:1.45; font-family:inherit; }
.motivoBox__cnt{ text-align:right; font-size:11.5px; color:var(--muted); margin-top:4px; }


/* ===== Indicaciones resumidas (Confirmar / Turno confirmado) ===== */
.indic__list li{ white-space:pre-line; overflow-wrap:anywhere; }
/* Cerradas: cada indicación a 3 líneas */
.indic--corto .indic__list li{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.indic__more{
  display:inline-flex; align-items:center; gap:5px;
  margin-top:10px; padding:6px 0; min-height:36px;
  border:0; background:none; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:700; line-height:1.2;   /* misma fuente que el portal */
  color:var(--brand); -webkit-appearance:none; appearance:none;
}
.indic__more:hover{ text-decoration:underline; }
.indic__more:focus-visible{ outline:2px solid var(--ring); outline-offset:3px; border-radius:6px; }
.indic__more svg{ flex:none; }
.indic__mail{ font-size:12px; color:var(--muted); margin-top:2px; line-height:1.4; }