/* ── Urgencias ─────────────────────────────────────────────────────────────
   One surface, two states.

   The card is not a panel that appears above the button — it is the same
   element. Shut, the island is clipped down to a pill at its own bottom right
   corner, and that pill is the button. Opening is that clip letting go, so
   the card unfolds out of the button's footprint instead of arriving beside
   it, and the red foot the pill was made of stays as the card's base.

   Because the clip does the work, nothing here tweens width or height: the
   island is always the full card, and only how much of it shows changes. The
   exact shut shape is measured and written by js/urgencias.js, since it
   depends on how wide the word "Urgencias" actually renders.
   ────────────────────────────────────────────────────────────────────────── */

.urg {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  /* Over the page and its bar, under the opening sequence. */
  z-index: 9;
  /* drop-shadow, not box-shadow: box-shadow is drawn on the element's box and
     would be clipped away with everything else, leaving a card-shaped shadow
     under a pill. drop-shadow follows whatever shape the clip leaves. */
  filter: drop-shadow(0 12px 26px rgba(42, 43, 47, 0.26));
  /* Held back until the sequence has handed the site over. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
  /* The wrapper takes no taps.

     .urg__island is 21rem wide and as tall as the whole emergency card — it
     only looks like a pill because clip-path crops it to the bottom-right
     corner. The clip governs hit-testing on the island itself, but this
     wrapper has no clip, and a transparent element still hit-tests across its
     entire box. On a 390px screen that box is 336px wide: 86% of the width,
     in a band across the bottom of the viewport, swallowing every tap aimed
     at whatever was underneath it — the body map's lower markers among them.

     None here, auto on the island, so the only thing that answers a tap is
     the shape you can actually see. */
  pointer-events: none;
}

.urg[data-ready] {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* ── The island ────────────────────────────────────────────────────────── */

.urg__island {
  width: min(21rem, calc(100vw - 2rem));
  background: var(--white);
  /* Replaced by the measured pill shape as soon as the script has run; this
     is only what the first paint uses. The radius is half the foot's height,
     which is what makes the shut shape a pill — see js/urgencias.js for why
     it is not simply rounded all the way. */
  clip-path: inset(calc(100% - 2.85rem) 0 0 calc(100% - 9rem) round 1.425rem);
  border-radius: 20px;
  pointer-events: auto;
}

/* ── The sheet ─────────────────────────────────────────────────────────── */

.urg__sheet {
  padding: clamp(1.25rem, 2.4vw, 1.5rem);
  /* Clipping hides it, but clipping does not take it out of the tab order. */
  visibility: hidden;
}
.urg[data-open] .urg__sheet { visibility: visible; }

.urg__title {
  margin: 0 0 0.55rem;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--track-body);
  color: var(--ink);
}
.urg__title:focus { outline: none; }

.urg__text {
  margin: 0 0 1.1rem;
  font-size: var(--fs-meta);
  line-height: 1.55;
  letter-spacing: var(--track-body);
  color: var(--ink-70);
  text-wrap: pretty;
}

.urg__call {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  background: var(--alert);
  color: var(--white);
  text-decoration: none;
  transition: background 0.25s var(--ease);
}
.urg__call:hover { background: var(--alert-hover); }
.urg__call:focus-visible { outline-color: var(--alert); outline-offset: 3px; }

.urg__call-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.urg__call-ico svg { width: 1.125rem; height: 1.125rem; }

/* min-width: 0, or a grid child refuses to shrink below its content: a long
   number ran 193px out of the emergency card, which is the one component on
   the page that cannot afford to break. */
.urg__call-txt { display: grid; gap: 0.1rem; min-width: 0; }

.urg__call-num {
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.urg__call-sub {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: normal;
  color: rgba(255, 255, 255, 0.85);
}

/* When the line is open is a different fact from what the button does, so it
   is a different line rather than the same one after a dot. */
.urg__call-hrs {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: normal;
  color: rgba(255, 255, 255, 0.72);
}

.urg__note {
  margin: 0.9rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--ink-12);
  font-size: var(--fs-meta);
  line-height: 1.55;
  letter-spacing: var(--track-body);
  color: var(--ink-mute);
  text-wrap: pretty;
}
.urg__note strong { color: var(--ink); font-weight: 600; }

.urg__alt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-body);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-12);
  padding-bottom: 2px;
  transition: border-color 0.25s var(--ease);
}
.urg__alt:hover { border-color: var(--ink); }
.urg__alt svg { width: 0.9375rem; height: 0.9375rem; }

/* ── The foot, which is also the button ────────────────────────────────── */

.urg__bar {
  display: flex;
  justify-content: flex-end;   /* the mark stays pinned to the right corner */
  align-items: center;
  width: 100%;
  height: 2.85rem;
  padding-inline: 1.1rem;
  border: 0;
  /* WhatsApp green, and ink rather than white on it: white on #25D366 is
     2.1:1 and fails. Every other WhatsApp control on the page is set the same
     way — see .wa in tokens.css. */
  background: var(--wa);
  color: var(--wa-ink);
  font-family: var(--sans);
  cursor: pointer;
  transition: background 0.25s var(--ease);
}
.urg__bar:hover { background: var(--wa-hover); }
.urg__bar:focus-visible { outline-color: var(--wa); outline-offset: 4px; }

.urg__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.urg__label {
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: var(--track-body);
  white-space: nowrap;
}

.urg__mark {
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  transition: transform 0.6s var(--ease);
}
.urg__mark svg { width: 100%; height: 100%; }

.urg[data-open] .urg__mark { transform: rotate(45deg); }

/* ── No script, and less motion ────────────────────────────────────────────
   With nothing to drive the clip there must be nothing clipped, or the card
   would be a permanently invisible box holding the only emergency number on
   the page. */

.no-js .urg { opacity: 1; visibility: visible; }
.no-js .urg__island { clip-path: none; }
.no-js .urg__sheet { visibility: visible; }
.no-js .urg__bar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .urg__mark { transition-duration: 1ms; }
}

/* ── The WhatsApp mark in the foot ─────────────────────────────────────────
   Before the word, where the cross stays at the far end as the close mark —
   so the button still never swaps one glyph for another to shut itself.
   ────────────────────────────────────────────────────────────────────────── */

.urg__wa-ico {
  display: inline-flex;
  flex: none;
  margin-right: 0.5rem;
}

.urg__wa-ico svg { width: 1.0625rem; height: 1.0625rem; }

/* ── Inside the panel ──────────────────────────────────────────────────────
   WhatsApp first and full width, then the emergency line under a label of its
   own. The order is the change: the message is what most people want and the
   call is what a few people need.
   ────────────────────────────────────────────────────────────────────────── */

.urg__wa {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 1rem;
}

.urg__sub {
  margin: 0 0 0.5rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
}