/* ============================================================================
   panel-modal.css — el modal de confirmación compartido

   El markup está en templates/partials/confirmar.html (lo incluye el shell) y
   quien lo abre y lo cierra es static/panel-interaccion.js. Acá va SÓLO lo que
   Tabler no trae: el círculo del icono y el texto con saltos de línea. Todo lo
   demás —el modal, el velo, la franja de color, los botones— es Tabler tal
   cual, así que el modo oscuro y la marca salen solos.

   Ni un color literal: el tono del icono viene de `bg-danger-lt` /
   `bg-primary-lt`, que el script pone según el tipo de pregunta, y el radio y
   los tamaños salen de los tokens de wedo.css.
   ========================================================================== */

/* El círculo detrás del icono. `bg-*-lt` de Tabler le da a la vez el fondo
   tenue y el color del trazo, así que el mismo SVG sirve para los dos tonos. */
.panel-confirmar-icono {
  display: inline-grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  margin-block-end: .75rem;
  border-radius: var(--r-pill);
}

/* El `.icon` de Tabler fija su propio tamaño EN el SVG (1.25rem) y no hereda
   del contenedor —ver el comentario de partials/vacio.html—: se le pasa el
   valor por su variable, que es como Tabler quiere que se cambie. */
.panel-confirmar-icono .icon {
  --tblr-icon-size: 1.75rem;
}

/* La pregunta de cancelar una cita trae un salto de línea escrito como `\n`
   en el catálogo: `pre-line` lo respeta sin convertirlo en markup, y el texto
   sigue entrando por textContent, nunca por innerHTML. */
.panel-confirmar-texto {
  white-space: pre-line;
}