/* ==========================================================================
   ELENIA — the booking sheet (S3.2) and the calendar row (S3.5)

   Loaded by BOTH the console and the patient panel, because the booking flow
   is one flow. The two hosts declare their tokens under different names
   (dashboard.css uses --fd, styles.css uses --font-d), so everything here
   resolves through a fallback chain and this file never assumes which host
   it landed in. Colours are the shared ones; nothing new is invented.

   On a phone it is a sheet that comes up from the bottom and owns the screen:
   choosing a time is the whole task and there is nothing behind it worth
   looking at. From 720px it becomes a dialog.
   ========================================================================== */

.bk{
  --bk-fd: var(--fd, var(--font-d, "Schibsted Grotesk", system-ui, sans-serif));
  --bk-fb: var(--fb, var(--font-b, "Inter", system-ui, sans-serif));
  --bk-red: var(--red, #b3261e);
  --bk-amber: var(--amber, #8f5706);

  position:fixed; inset:0; z-index:900;
  display:flex; align-items:flex-end; justify-content:center;
  font-family:var(--bk-fb);
}

.bk__scrim{
  position:absolute; inset:0;
  background:rgba(8,20,13,.46);
  animation:bk-fade .22s var(--ease, ease) both;
}

.bk__box{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  width:100%; max-height:94dvh;
  background:var(--white,#fff);
  border-radius:var(--r-lg,22px) var(--r-lg,22px) 0 0;
  box-shadow:0 -8px 40px rgba(12,61,32,.22);
  animation:bk-up .3s var(--ease, cubic-bezier(.22,1,.36,1)) both;
}

@keyframes bk-fade{ from{opacity:0} to{opacity:1} }
@keyframes bk-up{ from{transform:translateY(22px); opacity:.6} to{transform:none; opacity:1} }
@media (prefers-reduced-motion: reduce){
  .bk__scrim,.bk__box{ animation:none; }
}

@media (min-width:720px){
  .bk{ align-items:center; padding:24px; }
  .bk__box{ max-width:560px; border-radius:var(--r-lg,22px); max-height:88dvh; }
}

/* ---------------------------------------------------------------- header */

.bk__top{
  display:flex; align-items:flex-start; gap:14px;
  padding:20px 20px 14px;
  border-bottom:1px solid var(--line,#e6ebe7);
}
.bk__eyebrow{
  font-family:var(--bk-fd); font-size:.75rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--verde,#166534); margin:0 0 4px;
}
.bk__top h2{
  font-family:var(--bk-fd); font-size:1.32rem; font-weight:700;
  line-height:1.2; color:var(--ink,#0c1410); margin:0;
}
.bk__x{
  margin-left:auto; flex:none;
  width:40px; height:40px; display:grid; place-items:center;
  background:none; border:0; border-radius:50%; cursor:pointer;
  color:var(--ink-3,#6b7a70);
}
.bk__x:hover{ background:var(--fondo,#f4f7f4); color:var(--ink,#0c1410); }
.bk__x svg{ width:19px; height:19px; }
.bk__x:focus-visible{ outline:2px solid var(--verde,#166534); outline-offset:2px; }

/* ------------------------------------------------------------------ body */

.bk__body{ overflow-y:auto; padding:4px 20px 18px; -webkit-overflow-scrolling:touch; }
.bk__s{ padding-top:20px; }
.bk__h{
  font-family:var(--bk-fd); font-size:.98rem; font-weight:700;
  color:var(--ink,#0c1410); margin:0 0 11px;
}
.bk__note{ font-size:.85rem; line-height:1.55; color:var(--ink-3,#6b7a70); margin:9px 0 0; }

/* the quota line — the first thing she reads, because it decides whether the
   rest of the screen is worth her time */
.bk__quota{
  margin:16px 0 0; padding:11px 14px;
  background:var(--fondo,#f4f7f4); border-radius:var(--r-sm,11px);
  font-size:.88rem; line-height:1.5; color:var(--ink-2,#3a463f);
}
.bk__quota--free{ background:#f1faf3; color:var(--verde,#166534); font-weight:600; }
.bk__quota--out{ background:#fbf3d9; color:var(--bk-amber); font-weight:600; }

/* ------------------------------------------------------------------- who */

.bk__mine{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  border:1px solid var(--line-2,#d8e0da); border-radius:var(--r-sm,11px);
}
.bk__mine b{ font-family:var(--bk-fd); font-size:.98rem; color:var(--ink,#0c1410); display:block; }
.bk__mine i{ font-style:normal; font-size:.82rem; color:var(--ink-3,#6b7a70); }
.bk__swap{
  margin-left:auto; flex:none;
  background:none; border:0; padding:8px 4px; cursor:pointer;
  font-family:var(--bk-fb); font-size:.85rem; font-weight:600;
  color:var(--verde,#166534); text-decoration:underline; text-underline-offset:3px;
}
.bk__swap:focus-visible{ outline:2px solid var(--verde,#166534); outline-offset:2px; border-radius:4px; }

/* Used inside the sheet AND on the panel's «Próxima cita» card, so it cannot
   lean on the --bk-* aliases that only exist under .bk. */
.bk__av{
  flex:none; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--verde-suave,#dcfce7); color:var(--verde,#166534);
  font-family:var(--fd, var(--font-d, "Schibsted Grotesk", system-ui, sans-serif));
  font-weight:700; font-size:.9rem;
}
.bk__av--any{ background:var(--fondo,#f4f7f4); color:var(--ink-3,#6b7a70); }
.bk__av--any svg{ width:20px; height:20px; }

.bk__pros{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.bk__pro{
  width:100%; display:flex; gap:12px; align-items:flex-start; text-align:left;
  padding:14px; cursor:pointer;
  background:var(--white,#fff);
  border:1px solid var(--line-2,#d8e0da); border-radius:var(--r-sm,11px);
  transition:border-color .18s, background .18s;
}
.bk__pro:hover{ border-color:#bccdc3; }
.bk__pro.is-on{ border-color:var(--verde,#166534); background:#f1faf3; box-shadow:0 0 0 1px var(--verde,#166534) inset; }
.bk__pro:focus-visible{ outline:2px solid var(--verde,#166534); outline-offset:2px; }
.bk__pv{ min-width:0; }
.bk__pv b{ font-family:var(--bk-fd); font-size:1rem; color:var(--ink,#0c1410); display:block; }
.bk__pv i{ font-style:normal; font-size:.82rem; color:var(--ink-3,#6b7a70); display:block; }
.bk__bio{ margin-top:6px; line-height:1.5; }
.bk__next{ margin-top:7px; color:var(--verde,#166534) !important; font-weight:600; }
.bk__tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.bk__tags em{
  font-style:normal; font-size:.72rem; padding:3px 8px;
  background:var(--fondo,#f4f7f4); color:var(--ink-2,#3a463f); border-radius:100px;
}

/* ------------------------------------------------------------- days ---- */

.bk__days{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:6px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.bk__days::-webkit-scrollbar{ height:0; }
.bk__day{
  flex:0 0 auto; scroll-snap-align:start; cursor:pointer;
  display:grid; gap:1px; place-items:center;
  min-width:58px; min-height:70px; padding:10px 8px;
  background:var(--white,#fff);
  border:1px solid var(--line-2,#d8e0da); border-radius:var(--r-sm,11px);
  transition:border-color .18s, background .18s;
}
.bk__day i{ font-style:normal; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3,#6b7a70); }
.bk__day b{ font-family:var(--bk-fd); font-weight:800; font-size:1.2rem; color:var(--ink,#0c1410); line-height:1.1; }
.bk__day u{ text-decoration:none; font-size:.7rem; color:var(--ink-3,#6b7a70); }
.bk__day:hover{ border-color:#bccdc3; }
.bk__day.is-on{ background:var(--verde,#166534); border-color:var(--verde,#166534); }
.bk__day.is-on i,.bk__day.is-on b,.bk__day.is-on u{ color:#fff; }
.bk__day:focus-visible{ outline:2px solid var(--verde,#166534); outline-offset:2px; }

/* Demasiado pronto para el aviso de quien atiende (card 875). Se queda en la
   tira, apagado: un día que desaparece no enseña nada, y quien busca «hoy»
   tiene que poder ver que hoy existe y por qué no se puede. Se puede tocar —
   lleva a su propio motivo en la lista de horas — así que no es `disabled`. */
.bk__day.is-pronto{ background:var(--fondo,#f4f7f4); border-color:var(--line,#e6ebe7); }
.bk__day.is-pronto i,.bk__day.is-pronto b,.bk__day.is-pronto u{ color:var(--ink-3,#6b7a70); opacity:.75; }
.bk__day.is-pronto.is-on{ background:var(--verde,#166534); border-color:var(--verde,#166534); }
.bk__day.is-pronto.is-on i,.bk__day.is-pronto.is-on b,.bk__day.is-pronto.is-on u{ color:#fff; opacity:1; }

/* La nota bajo la tira y la del equipo dentro de la ventana. */
.bk__nota{ margin:10px 0 0; font-size:.85rem; line-height:1.55; color:var(--ink-3,#6b7a70); max-width:62ch; }
.bk__nota--ojo{
  margin:0; padding:12px 14px; border-radius:var(--r-sm,11px);
  background:var(--amber-tinte,#fbf3d9); color:var(--ink-2,#3a463f);
}

/* ------------------------------------------------------------- hours --- */

.bk__hours{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:9px; }
.bk__hours--pool{ grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); }
.bk__hour{
  min-height:48px; padding:10px; cursor:pointer;
  display:grid; gap:1px; place-items:center;
  background:var(--white,#fff);
  border:1px solid var(--line-2,#d8e0da); border-radius:var(--r-sm,11px);
  transition:border-color .18s, background .18s, color .18s;
}
.bk__hour b{ font-family:var(--bk-fd); font-weight:600; font-size:.96rem; color:var(--ink,#0c1410); }
.bk__hour i{ font-style:normal; font-size:.74rem; color:var(--ink-3,#6b7a70); }
.bk__hour:hover{ border-color:#bccdc3; }
.bk__hour.is-on{ background:var(--verde,#166534); border-color:var(--verde,#166534); }
.bk__hour.is-on b,.bk__hour.is-on i{ color:#fff; }
.bk__hour:focus-visible{ outline:2px solid var(--verde,#166534); outline-offset:2px; }

.bk__load{ display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--ink-3,#6b7a70); margin:0; }
.bk__spin{
  width:15px; height:15px; flex:none; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:bk-spin .7s linear infinite;
}
@keyframes bk-spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .bk__spin{ animation-duration:2s; } }

/* an empty day always carries its way out */
.bk__empty{
  padding:16px 18px; background:#eef4f0; border-radius:var(--r-sm,11px);
  font-size:.88rem; line-height:1.6; color:var(--ink-2,#3a463f);
}
.bk__empty b{ display:block; font-family:var(--bk-fd); color:var(--ink,#0c1410); margin-bottom:4px; }
.bk__empty p{ margin:0 0 12px; }
.bk__ghost{
  min-height:44px; padding:0 16px; cursor:pointer;
  background:var(--white,#fff); border:1px solid var(--line-2,#d8e0da);
  border-radius:100px; font-family:var(--bk-fb); font-size:.88rem; font-weight:600;
  color:var(--ink,#0c1410);
}
.bk__ghost:hover{ border-color:#bccdc3; }
.bk__ghost:disabled{ opacity:.6; cursor:default; }
.bk__ghost:focus-visible{ outline:2px solid var(--verde,#166534); outline-offset:2px; }

/* ---------------------------------------------------------- modality --- */

.bk__mods{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.bk__mod{ position:relative; display:block; cursor:pointer; }
.bk__mod input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.bk__mod span{
  display:grid; place-items:center; text-align:center;
  min-height:50px; padding:13px 10px;
  background:var(--white,#fff);
  border:1px solid var(--line-2,#d8e0da); border-radius:var(--r-sm,11px);
  font-size:.92rem; font-weight:500; color:var(--ink,#0c1410);
  transition:border-color .18s, background .18s;
}
.bk__mod:hover span{ border-color:#bccdc3; }
.bk__mod input:checked + span{
  border-color:var(--verde,#166534); background:var(--verde-suave,#dcfce7);
  box-shadow:0 0 0 1px var(--verde,#166534) inset;
}
.bk__mod input:focus-visible + span{ outline:2px solid var(--verde,#166534); outline-offset:2px; }
.bk__mod.is-off span{ opacity:.45; }
.bk__mod.is-off{ cursor:not-allowed; }

/* ---------------------------------------------------------- override --- */

.bk__s--over{
  margin-top:20px; padding:16px 16px 18px;
  background:#fbf3d9; border-radius:var(--r-sm,11px);
}
.bk__s--over .bk__h{ color:var(--bk-amber); }
.bk__ta{
  width:100%; margin-top:11px; padding:12px 13px;
  font-family:var(--bk-fb); font-size:.92rem; line-height:1.55; color:var(--ink,#0c1410);
  background:var(--white,#fff);
  border:1px solid #ece0c0; border-radius:var(--r-sm,11px);
  resize:vertical;
}
.bk__ta:focus-visible{ outline:2px solid var(--bk-amber); outline-offset:1px; }
.bk__ta.is-bad{ border-color:var(--bk-red); box-shadow:0 0 0 2px rgba(179,38,30,.14); }
.bk__hold{
  margin:11px 0 0; font-size:.84rem; line-height:1.55; color:var(--ink-2,#3a463f);
}

/* the patient's stop screen */
.bk__stop{ padding:24px 0 6px; }
.bk__stopk{
  font-family:var(--bk-fd); font-size:.7rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--bk-amber); margin:0 0 8px;
}
/* A next step, not a warning: «todavía sin plan» invites, so it is green. */
.bk__stopk--paso{ color:var(--verde,#166534); }
.bk__stop h3{ font-family:var(--bk-fd); font-size:1.24rem; line-height:1.28; color:var(--ink,#0c1410); margin:0 0 10px; }
.bk__stop p{ font-size:.92rem; line-height:1.65; color:var(--ink-2,#3a463f); margin:0 0 16px; }
/* Same shape as the footer button, not a loose pill: it is the one action of
   the blocked sheet, so it spans the sheet like every other action here and
   sits centred over «Entendido» instead of floating at the left margin. */
.bk__wa{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:52px; padding:0 18px; box-sizing:border-box;
  border-radius:100px; background:var(--verde,#166534); color:#fff;
  font-weight:600; font-size:1rem; text-decoration:none;
  transition:background .18s;
}
.bk__wa:hover{ background:var(--verde-deep,#0c3d20); }
.bk__wa:focus-visible{ outline:2px solid var(--verde,#166534); outline-offset:3px; }

/* ------------------------------------------------------------- footer -- */

.bk__foot{
  padding:14px 20px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line,#e6ebe7);
  background:var(--white,#fff);
}
.bk__cta{
  width:100%; min-height:52px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--verde,#166534); color:#fff; border:0; border-radius:100px;
  font-family:var(--bk-fb); font-size:1rem; font-weight:600;
  transition:background .18s, opacity .18s;
}
a.bk__cta{ text-decoration:none; box-sizing:border-box; }
.bk__cta:hover{ background:var(--verde-deep,#0c3d20); }
.bk__cta[aria-disabled="true"]{ background:#c3d1c7; }
.bk__cta:focus-visible{ outline:2px solid var(--verde,#166534); outline-offset:3px; }
.bk__cta--ghost{ background:var(--fondo,#f4f7f4); color:var(--ink,#0c1410); }
.bk__cta--ghost:hover{ background:var(--line,#e6ebe7); }
.bk__calma{
  margin:10px 0 0; text-align:center;
  font-size:.82rem; line-height:1.5; color:var(--ink-3,#6b7a70);
  transition:color .2s;
}
.bk__calma.is-bad{ color:var(--bk-red); font-weight:600; }

.bk__flash{
  position:absolute; left:16px; right:16px; bottom:96px;
  margin:0; padding:12px 15px;
  background:var(--ink,#0c1410); color:#fff;
  border-radius:var(--r-sm,11px); font-size:.86rem; line-height:1.5;
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .2s, transform .2s;
}
.bk__flash.is-on{ opacity:1; transform:none; }

/* -------------------------------------------------------------- done --- */

.bk__box--done .bk__done{ padding:34px 24px 8px; text-align:center; }
.bk__seal{
  width:60px; height:60px; margin:0 auto 18px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--verde-suave,#dcfce7); color:var(--verde,#166534);
}
.bk__seal--wait{ background:#fbf3d9; color:var(--bk-amber); }
.bk__seal svg{ width:28px; height:28px; }
.bk__done h2{ font-family:var(--bk-fd); font-size:1.5rem; line-height:1.2; color:var(--ink,#0c1410); margin:0 0 12px; }
.bk__when{ font-family:var(--bk-fd); font-size:1.06rem; font-weight:600; color:var(--ink,#0c1410); margin:0 0 5px; }
.bk__with{ font-size:.9rem; line-height:1.6; color:var(--ink-2,#3a463f); margin:0 0 20px; }
.bk__box--done .bk__hold{ text-align:left; padding:14px 16px; background:#fbf3d9; border-radius:var(--r-sm,11px); }

/* ================================================== the calendar row ====
   Two doors to the calendar the person already uses. No account, no
   permission, no integration — we keep the record, they keep the calendar. */

.cal{ text-align:left; }
.cal__k{
  font-family:var(--fd, var(--font-d, "Schibsted Grotesk", system-ui, sans-serif));
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3,#6b7a70); margin:0 0 9px;
}
.cal__b{ display:flex; gap:9px; flex-wrap:wrap; }
.cal__btn{
  flex:1 1 auto; min-width:150px; min-height:46px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:0 15px; cursor:pointer; text-decoration:none;
  background:var(--white,#fff); color:var(--ink,#0c1410);
  border:1px solid var(--line-2,#d8e0da); border-radius:100px;
  font-family:var(--fb, var(--font-b, system-ui, sans-serif));
  font-size:.88rem; font-weight:600;
  transition:border-color .18s, background .18s;
}
.cal__btn:hover{ border-color:#bccdc3; background:var(--fondo,#f4f7f4); }
.cal__btn:focus-visible{ outline:2px solid var(--verde,#166534); outline-offset:2px; }
.cal__btn svg{ width:17px; height:17px; flex:none; color:var(--verde,#166534); }
/* Dentro de una fila del registro los dos botones son secundarios y se
   comportan como tales: no se estiran a lo ancho de la ficha. */
.cal--sm{ margin-top:10px; }
.cal--sm .cal__btn{ flex:0 0 auto; min-height:44px; min-width:0; font-size:.8rem; padding:0 14px; }

/* ============================ cancelar, en el panel de la paciente ========
   El costo se dice ANTES, con la fecha real. Una regla abstracta («24 horas»)
   obliga a hacer aritmética justo cuando la persona ya está incómoda; una
   fecha se compara contra su propia semana de un vistazo. */

.cancelconf{ display:grid; gap:10px; margin-left:auto; max-width:340px; }
.cancelconf p{
  margin:0; font-size:.82rem; line-height:1.55;
  color:var(--ink-2,#3a463f);
}
.cancelconf__b{ display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width:640px){ .cancelconf{ margin-left:0; max-width:none; } }

.cancelconf__e{
  margin:0; font-size:.82rem; font-weight:600; line-height:1.5;
  color:var(--red,#b3261e);
}

/* La línea de cupo, justo debajo de la cabecera de la tarjeta y encima de la
   lista: el motivo por el que puedes (o no) reservar, pegado a la acción que
   lo usa y no al final de todo. */
.cupo-linea{
  margin:-6px 0 16px;
  font-size:.86rem; line-height:1.55;
  color:var(--ink-2,#3a463f);
}