/* modales_offcanvas.css — extraído de app.css (orden original preservado) */

:root {
   /* Blur de fondo en modales */
   --modal-bg-blur: 0px;
   --modal-blur: 0px;

   /* Backdrop tipo Koibox (menos “cueva de Batman” que 0.90) */
   --ao-modal-backdrop: rgba(0, 0, 0, 0.55);

   /* Scrollbars (UX modal-card) */
   --sc-track: #eef2f7;
   --sc-thumb: #c2c8d0;
   --sc-thumb-h: #aab3bd;
   --sc-w: 12px;

   /* Koibox-ish modal zoom */
   --ao-modal-zoom-from: .84;
   --ao-modal-zoom-ms: 160ms;
   --ao-modal-zoom-ease: cubic-bezier(.22, 1, .36, 1);

   /* Tamaño “objetivo” del cuadrado (si lo usas en otros modales) */
   --ao-modal-square-fixed: 720px;

   /* Aire total alrededor del cuadrado (ajusta “los lados” a gusto) */
   --ao-modal-square-gap-x: 6rem;
   /* total horizontal (izq+der) */
   --ao-modal-square-gap-y: 6rem;
   /* total vertical   (arriba+abajo) */

   /* Lado final: nunca pasa del fijo, y nunca se sale del viewport */
   --ao-modal-square: min(var(--ao-modal-square-fixed),
         calc(100vh - var(--ao-modal-square-gap-y)),
         calc(100vw - var(--ao-modal-square-gap-x)));

   /* ====== SKIN “KOIBOX” PARA MODAL-CARD ====== */
   --ao-modal-card-bg: #ffffff;
   --ao-modal-card-border: #d7dde6;
   --ao-modal-card-radius: 10px;
   --ao-modal-card-shadow: 0 14px 38px rgba(0, 0, 0, .18);

   --ao-modal-header-bg: #ffffff;
   --ao-modal-header-border: #e6eaf0;

   --ao-modal-footer-bg: #ffffff;
   --ao-modal-footer-border: #e6eaf0;

   /* Primario: usa tu brand/bs-primary si existe */
   --ao-primary: var(--brand, var(--bs-primary, #0d6efd));
}

@supports (height: 100dvh) {
   :root {
      --ao-modal-square: min(var(--ao-modal-square-fixed),
            calc(100dvh - var(--ao-modal-square-gap-y)),
            calc(100vw - var(--ao-modal-square-gap-x)));
   }
}

:where(html[data-bs-theme="dark"], body[data-bs-theme="dark"], .theme-dark, [data-theme="dark"]) {
   --sc-track: #0b1620;
   --sc-thumb: #2b3947;
   --sc-thumb-h: #3b4c5e;

   /* Si en dark quieres mantener Koibox claro, NO cambies estos.
     Si prefieres dark-card, descomenta y ajusta:
     --ao-modal-card-bg: #0b1620;
     --ao-modal-card-border: #2b3947;
     --ao-modal-header-border: #2b3947;
     --ao-modal-footer-border: #2b3947;
  */
}

/* En el offcanvas de empresas, el botón eliminar debe ir perfectamente centrado */
#offcanvasEmpresas .avatar-delete-btn {
   top: 0;
}

/* Aseguramos que el texto se centre dentro del header (genérico) */
.modal-header .modal-title,
.modal-card-header .modal-title,
.modal-card-header h5 {
   margin-left: auto;
   margin-right: auto;
   text-align: center;
}

/* Scrollbar estable para evitar saltos al abrir modales */
html {
   scrollbar-gutter: stable;
   overflow-y: auto;
   overflow-x: hidden;
   background: var(--bg);
}

html,
body {
   margin: 0;
   padding: 0;
}

/* Fallback para navegadores sin scrollbar-gutter */
@supports not (scrollbar-gutter: stable) {
   html {
      overflow-y: scroll;
   }
}

html.offc-open {
   overflow-x: hidden !important;
}

/* =========================================================
   NO LAYOUT SHIFT al abrir modals/offcanvas
   - Bootstrap añade padding-right inline para compensar scrollbar
   - Con scrollbar-gutter: stable eso provoca doble compensación
   ========================================================= */

body.modal-open,
body.offcanvas-open {
   padding-right: 0 !important;
}

/* Bootstrap también ajusta fixed/sticky; lo anulamos */
body.modal-open :is(.fixed-top, .fixed-bottom, .sticky-top),
body.offcanvas-open :is(.fixed-top, .fixed-bottom, .sticky-top) {
   padding-right: 0 !important;
}

/* Offcanvas / Modales en capas seguras */
.offcanvas {
   z-index: var(--bs-offcanvas-zindex) !important;
   background: var(--bg);
   color: var(--ink);
   border-left: 1px solid var(--border);
}

/* el panel no se recorta y pinta su sombra completa */
.offcanvas.offcanvas-end {
   right: 0;
   max-width: 520px;
   box-shadow: var(--sh-md);
}

.offcanvas .offcanvas-body {
   overflow-x: hidden;
}

.offcanvas .offcanvas-header {
   border-bottom: 1px solid var(--border);
}

.offcanvas :is(.form-label.small) {
   color: var(--ink);
}

body.offcanvas-open [data-route-shell],
.modal-open [data-route-shell] {
   transform: none !important;
   filter: none !important;
   contain: none !important;
}

body.offcanvas-open #sbBackdrop,
body.offcanvas-open .sb-backdrop,
.modal-open #sbBackdrop,
.modal-open .sb-backdrop {
   display: none !important;
}

.modal-backdrop {
   z-index: var(--bs-backdrop-zindex) !important;
}

.modal-backdrop.show {
   background-color: var(--ao-modal-backdrop);
   -webkit-backdrop-filter: blur(var(--modal-bg-blur));
   backdrop-filter: blur(var(--modal-bg-blur));
}

.modal {
   z-index: var(--bs-modal-zindex) !important;
}

.modal .modal-content {
   filter: blur(var(--modal-blur));
}

/* Utilidades */
.modal-clean .modal-content {
   background: var(--card) !important;
   border: 1px solid var(--border) !important;
   box-shadow: var(--sh-md) !important;
}

.modal-clean .modal-body {
   padding: 0;
}

.modal.modal-blur .modal-content {
   background: transparent !important;
   border: 0 !important;
   box-shadow: none !important;
}

.modal.modal-blur .modal-body {
   padding: 0;
}

/* Toasts por encima de modal/offcanvas */
#toast-area {
   z-index: 1080;
}

.loading-overlay {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(12, 16, 24, .45);
   border-radius: 12px;
   z-index: 5;
}

/* Offcanvas Empresas: tema y bordes */
#offcanvasEmpresas {
   background: var(--bg, #000000);
   color: var(--ink, #F5F5F7);
   border-left: 1px solid var(--border, #2C2C2E);
}

#offcanvasEmpresas .offcanvas-header {
   border-bottom: 1px solid var(--border, #2C2C2E);
}

#offcanvasEmpresas .list-group-item {
   background: var(--card, #1C1C1E);
   color: var(--ink, #F5F5F7);
   border-color: var(--border, #2C2C2E);
}

/* Botón Cancelar en off-canvas (modo claro) */
body:not(.dark-mode) #offcanvasEmpresas .btn-outline-light {
   color: var(--ink) !important;
   border-color: var(--ink) !important;
}

body:not(.dark-mode) #offcanvasEmpresas .btn-outline-light:hover,
body:not(.dark-mode) #offcanvasEmpresas .btn-outline-light:focus {
   background: var(--ink) !important;
   color: var(--bg) !important;
   box-shadow: var(--focus);
}

/* =========================================================
   MODALES — Zoom-in centrado (solo modales, no rutas)
   PISA el translate default de Bootstrap y lo cambia por scale
   ========================================================= */

/* Opt-out opcional: si un modal lleva .ao-no-zoom, no se le aplica */
.modal.fade:not(.ao-no-zoom) .modal-dialog {
   transform: translate3d(0, 0, 0) scale(var(--ao-modal-zoom-from, .92));
   opacity: 1;
   /* siempre visible */
   transform-origin: 50% 50%;
   will-change: transform;
   transition: transform var(--ao-modal-zoom-ms, 160ms) var(--ao-modal-zoom-ease, ease);
}

.modal.show:not(.ao-no-zoom) .modal-dialog {
   transform: translate3d(0, 0, 0) scale(1);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
   .modal.fade:not(.ao-no-zoom) .modal-dialog {
      transition: none !important;
      transform: none !important;
      opacity: 1 !important;
   }
}

/* =========================================================
   MODAL CARD — Estilo base (ahora “Koibox-like” por defecto)
   ========================================================= */

/* Estructura base */
:is(.modal-card, .ao-modal-card) {
   width: min(520px, 92vw);
   margin: 16px auto;
   background: var(--ao-modal-card-bg);
   border: 1px solid var(--ao-modal-card-border);
   border-radius: var(--ao-modal-card-radius);
   color: var(--ink, #111827);
   max-height: 90vh;
   display: flex;
   flex-direction: column;
   box-shadow: var(--ao-modal-card-shadow);
   overflow: hidden;
   /* Koibox: recorta bien el radio */
}

/* Header */
:is(.modal-card-header, .ao-modal-card__header) {
   padding: 14px 18px;
   border-bottom: 1px solid var(--ao-modal-header-border);
   background: var(--ao-modal-header-bg);
   border-radius: var(--ao-modal-card-radius) var(--ao-modal-card-radius) 0 0;
   position: relative;
}

/* Body */
:is(.modal-card-body, .ao-modal-card__body) {
   padding: 18px;
   flex: 1 1 auto;
   overflow: auto;
   position: relative;
   scrollbar-width: thin;
   scrollbar-color: var(--sc-thumb) var(--sc-track);
}

/* Footer (cuando vive fuera del scroll, queda fijo natural) */
:is(.modal-card-footer, .ao-modal-card__footer),
:is(.modal-card, .ao-modal-card) .modal-footer {
   border-top: 1px solid var(--ao-modal-footer-border);
   background: var(--ao-modal-footer-bg);
   padding: 12px 16px;
}

/* Scrollbar webkit */
:is(.modal-card-body, .ao-modal-card__body)::-webkit-scrollbar {
   width: var(--sc-w);
}

:is(.modal-card-body, .ao-modal-card__body)::-webkit-scrollbar-track {
   background: var(--sc-track);
   border-radius: 8px;
}

:is(.modal-card-body, .ao-modal-card__body)::-webkit-scrollbar-thumb {
   background: var(--sc-thumb);
   border-radius: 8px;
   border: 2px solid var(--sc-track);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

:is(.modal-card-body, .ao-modal-card__body)::-webkit-scrollbar-thumb:hover {
   background: var(--sc-thumb-h);
}

/* ===== Close button Koibox (círculo con borde azul) ===== */
.ao-modal-card__close {
   border: 2px solid var(--ao-primary);
   background: #fff;
   color: var(--ao-primary);
   width: 34px;
   height: 34px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 999px;
   line-height: 1;
   font-size: 18px;
   padding: 0;
   opacity: 1;
}

.ao-modal-card__close:hover {
   background: var(--ao-primary);
   color: #fff;
}

.ao-modal-card__close:focus {
   outline: none;
   box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ao-primary) 25%, transparent);
}

/* ===== Form “koibox”: header fijo + body scroll + footer fijo ===== */
.ao-modal-form {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
   min-height: 0;
   /* clave para que el overflow del body funcione bien */
}

/* Body real del form (zona scrolleable) */
.ao-modal-form>.modal-card-body {
   flex: 1 1 auto;
   min-height: 0;
}

/* Footer del form (zona fija) */
.ao-modal-form>.modal-card-footer,
.ao-modal-form>.modal-footer {
   flex: 0 0 auto;
}

/* ===== Subheader tipo “NUEVA CITA” (línea azul) ===== */
.ao-cita-subhead {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: .6rem;
   padding: 10px 12px;
   margin: 0 0 14px;
   border-bottom: 2px solid var(--ao-primary);
   color: var(--ao-primary);
   font-weight: 700;
   letter-spacing: .06em;
   text-transform: uppercase;
}

.ao-cita-subhead__icon {
   width: 18px;
   height: 18px;
   flex: 0 0 auto;
}

/* =========================================================
   CITA — Panel interno centrado + scroll SOLO del contenido
   (Koibox-style: aire lateral y contenido con max-width)
   ========================================================= */

:root {
   --ao-cita-max: 980px;
   /* ancho “columna” como Koibox */
   --ao-cita-pad: clamp(14px, 2.2vw, 32px);
   /* padding lateral adaptable */
}

/* El body del modal NO scrollea: delega el scroll al wrapper interno */
#citaModal .modal-card-body {
   padding: 0;
   /* el padding lo lleva el wrapper */
   overflow: hidden;
   /* evita doble scroll */
   display: flex;
   flex-direction: column;
   min-height: 0;
   /* clave en layouts flex */
}

/* Este es el ÚNICO scroll */
#citaModal .ao-cita-scroll {
   flex: 1 1 auto;
   min-height: 0;
   /* clave para que overflow auto funcione */
   overflow: auto;
   padding: var(--ao-cita-pad);

   scrollbar-width: thin;
   scrollbar-color: var(--sc-thumb) var(--sc-track);
}

/* Contenedor centrado para que no vaya pegado a los bordes */
#citaModal .ao-cita-container {
   width: 100%;
   max-width: var(--ao-cita-max);
   margin-inline: auto;
}

/* Scrollbar webkit (porque si no, Chrome te hace “lo que le da la gana”) */
#citaModal .ao-cita-scroll::-webkit-scrollbar {
   width: var(--sc-w);
}

#citaModal .ao-cita-scroll::-webkit-scrollbar-track {
   background: var(--sc-track);
   border-radius: 8px;
}

#citaModal .ao-cita-scroll::-webkit-scrollbar-thumb {
   background: var(--sc-thumb);
   border-radius: 8px;
   border: 2px solid var(--sc-track);
}

#citaModal .ao-cita-scroll::-webkit-scrollbar-thumb:hover {
   background: var(--sc-thumb-h);
}

/* ===== Override: en Koibox el título NO va centrado, va a la izquierda ===== */
#citaModal .modal-card-header h5,
#citaModal .modal-card-header .modal-title {
   margin-left: 0;
   margin-right: auto;
   text-align: left;
}

/* Evitar “doble scroll” y vaciar shell Bootstrap cuando dentro hay modal-card */
@supports selector(:has(*)) {

   #remoteModal:has(:is(.modal-card, .ao-modal-card)) .modal-content,
   #remoteModal2:has(:is(.modal-card, .ao-modal-card)) .modal-content {
      background: transparent !important;
      border: 0 !important;
      padding: 0 !important;
      box-shadow: none !important;
      height: auto;
   }

   #remoteModal:has(.modal-card) .modal-body,
   #remoteModal2:has(.modal-card) .modal-body {
      background: transparent !important;
      padding: 0 !important;
      overflow: visible !important;
   }
}

/* Fallback sin :has(): si el modal tiene clase de variante */
#remoteModal.ao-modal--cita .modal-content,
#remoteModal2.ao-modal--cita .modal-content {
   background: transparent !important;
   border: 0 !important;
   padding: 0 !important;
   box-shadow: none !important;
}

#remoteModal.ao-modal--cita .modal-body,
#remoteModal2.ao-modal--cita .modal-body {
   background: transparent !important;
   padding: 0 !important;
   overflow: visible !important;
}

/* Fallback por clase: vaciar shell Bootstrap cuando el host marca "card" */
:where(#remoteModal, #remoteModal2).ao-modal-host--card .modal-content {
   background: transparent !important;
   border: 0 !important;
   box-shadow: none !important;
}

:where(#remoteModal, #remoteModal2).ao-modal-host--card .modal-body {
   padding: 0 !important;
}

/* Desktop ancho “Agenda-style” */
@media (min-width: 768px) {
   @supports selector(:has(*)) {

      #remoteModal .modal-dialog:has(:is(.modal-card, .ao-modal-card):not([data-ao-shape="square"])),
      #remoteModal2 .modal-dialog:has(:is(.modal-card, .ao-modal-card):not([data-ao-shape="square"])) {
         max-width: 1100px !important;
         width: 95% !important;
      }

      #remoteModal .modal-dialog:has(.modal-card:not([data-ao-shape="square"])) .modal-card,
      #remoteModal2 .modal-dialog:has(.modal-card:not([data-ao-shape="square"])) .modal-card {
         width: 100%;
         max-width: 1100px;
      }

      .modal.ao-remote-host:has(.modal-card[data-ao-shape="square"]) .modal-dialog.modal-dialog-centered {
         min-height: 0 !important;
         align-items: stretch !important;
      }

      .modal.ao-remote-host:has(.modal-card[data-ao-shape="square"]) .modal-dialog.modal-dialog-scrollable {
         height: var(--ao-modal-square) !important;
         max-height: var(--ao-modal-square) !important;
      }

      .modal.ao-remote-host:has(.modal-card[data-ao-shape="square"]) .modal-dialog.modal-dialog-scrollable .modal-content {
         max-height: 100% !important;
      }
   }

   /* Fallback por clase */
   #remoteModal.ao-modal--cita.show .modal-dialog,
   #remoteModal2.ao-modal--cita.show .modal-dialog {
      max-width: 1100px !important;
      width: 95% !important;
   }

   #remoteModal.ao-modal--cita .modal-card,
   #remoteModal2.ao-modal--cita .modal-card {
      width: 100%;
      max-width: 1100px;
   }
}

/* =========================
   CITA — tamaño compacto + centrado real
   Ajusta --ao-cita-dialog-w a gusto.
   ========================= */
@supports selector(:has(*)) {
   :is(#remoteModal, #remoteModal2):has(#citaModal) {
      --ao-cita-dialog-w: 760px;
      /* <-- CAMBIA ESTE ANCHO a tu gusto (680/720/760/820) */
      --ao-cita-dialog-gap: 2rem;
      /* aire contra el viewport */
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      overflow: hidden !important;
      /* evita “scroll del host” */
   }

   :is(#remoteModal, #remoteModal2):has(#citaModal) .modal-dialog {
      width: min(var(--ao-cita-dialog-w), calc(100vw - var(--ao-cita-dialog-gap))) !important;
      max-width: none !important;
      margin: 0 !important;
   }

   /* si Bootstrap mete .modal-dialog-centered, que no meta min-height raros */
   :is(#remoteModal, #remoteModal2):has(#citaModal) .modal-dialog.modal-dialog-centered {
      min-height: 0 !important;
      align-items: stretch !important;
   }

   /* vaciar shell Bootstrap, por si acaso */
   :is(#remoteModal, #remoteModal2):has(#citaModal) .modal-content {
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
   }

   :is(#remoteModal, #remoteModal2):has(#citaModal) .modal-body {
      padding: 0 !important;
   }
}

/* Transición interna entre pantallas del modal remoto */
#remoteModalBody {
   opacity: 1;
   transform: translateY(0);
   transition: opacity .18s ease, transform .18s ease;
   will-change: opacity, transform;
}

#remoteModalBody.is-switching {
   opacity: 0;
   transform: translateY(6px);
   pointer-events: none;
}

/* Ajuste visual del modal remoto cuando usamos .modal-card */
#remoteModal .modal-content.modal-card-host {
   background-color: transparent;
   border: 0;
   box-shadow: none;
}

/* Y el body del modal no añade padding extra */
#remoteModal .modal-content.modal-card-host .modal-body,
#remoteModal .modal-content.modal-card-host #remoteModalBody {
   padding: 0;
}

/* =========================================================
   remoteModal2 — fullscreen SOLO cuando se pide explícitamente
   (JS añade .ao-fullscreen y/o .modal-fullscreen en el dialog)
   ========================================================= */

#remoteModal2.ao-fullscreen .modal-dialog,
#remoteModal2 .modal-dialog.modal-fullscreen {
   width: 100vw;
   max-width: none;
   height: 100vh;
   margin: 0;
}

#remoteModal2.ao-fullscreen .modal-content,
#remoteModal2 .modal-dialog.modal-fullscreen .modal-content {
   height: 100vh;
   border-radius: 0;
}

#remoteModal2.ao-fullscreen .modal-body,
#remoteModal2.ao-fullscreen #remoteModal2Body,
#remoteModal2 .modal-dialog.modal-fullscreen .modal-body,
#remoteModal2 .modal-dialog.modal-fullscreen #remoteModal2Body {
   height: 100vh;
   padding: 0;
   overflow: auto;
}

@supports selector(:has(*)) {

   /* 1) El host del modal (Bootstrap) centra por FLEX y NO scrollea */
   .modal:has(:is(.modal-card, .ao-modal-card)[data-ao-shape="square"]) {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;

      /* clave: evita “mover” el modal con la rueda */
      overflow: hidden !important;

      overscroll-behavior: contain;
   }

   /* 2) El dialog es el cuadrado (SIN margin vertical) */
   .modal:has(:is(.modal-card, .ao-modal-card)[data-ao-shape="square"]) .modal-dialog {
      width: var(--ao-modal-square) !important;
      max-width: var(--ao-modal-square) !important;
      height: var(--ao-modal-square) !important;
      max-height: var(--ao-modal-square) !important;

      margin: 0 !important;
   }

   /* 2.1) FIX REAL: Bootstrap .modal-dialog-centered mete min-height y te “estira” en Y */
   .modal:has(:is(.modal-card, .ao-modal-card)[data-ao-shape="square"]) .modal-dialog.modal-dialog-centered {
      min-height: 0 !important;
      align-items: stretch !important;
   }

   /* 2.2) Evita padding/scroll del shell Bootstrap (el scroll debe ser interno) */
   .modal:has(:is(.modal-card, .ao-modal-card)[data-ao-shape="square"]) .modal-body {
      padding: 0 !important;
      overflow: hidden !important;
   }

   /* 3) El content rellena el dialog */
   .modal:has(:is(.modal-card, .ao-modal-card)[data-ao-shape="square"]) .modal-content {
      width: 100% !important;
      height: 100% !important;
   }
}

/* =========================================================
   MODAL CARD — Variante CUADRADA + FIT (si la necesitas en otros)
   Se activa con:
   data-ao-shape="square"
   data-ao-fit="1"
   ========================================================= */

:is(.modal-card, .ao-modal-card)[data-ao-shape="square"] {
   width: 100% !important;
   height: 100% !important;
   max-width: 100% !important;
   max-height: 100% !important;
   margin: 0 !important;
}

:is(.modal-card, .ao-modal-card)[data-ao-fit="1"] :is(.modal-card-body, .ao-modal-card__body) {
   overflow: hidden;
   padding: .85rem 1rem;
}

/* Header/footer más compactos (solo en fit) */
:is(.modal-card, .ao-modal-card)[data-ao-fit="1"] :is(.modal-card-header, .ao-modal-card__header) {
   padding: .8rem 1rem;
}

:is(.modal-card, .ao-modal-card)[data-ao-fit="1"] :is(.modal-card-footer, .ao-modal-card__footer),
:is(.modal-card, .ao-modal-card)[data-ao-fit="1"] .modal-footer {
   padding: .65rem 1rem .85rem;
}

/* =========================================================
   CITA — “doble contenedor” estilo Koibox
   - Fondo suave en el área scrolleable
   - Card interna con borde/radio/sombra
   ========================================================= */

#citaModal .ao-cita-scroll {
   /* Esto es lo que hace que la caja interna “se lea” */
   background: color-mix(in srgb, var(--ao-modal-card-bg) 92%, var(--ao-modal-card-border) 8%);
   border-radius: calc(var(--ao-modal-card-radius) - 2px);
}

/* La “caja” donde viven NUEVA CITA + campos */
#citaModal .ao-cita-panel {
   background: var(--ao-modal-card-bg);
   border: 0;
   box-shadow:
      0 18px 40px rgba(0, 0, 0, .10),
      0 2px 10px rgba(0, 0, 0, .06);
   border-radius: 14px;
   overflow: hidden;
   padding: clamp(14px, 1.8vw, 22px);
   outline: 1px solid rgba(0, 0, 0, .06);
}

/* Separadores internos “de verdad” (para que se noten las secciones) */
#citaModal #formMessages {
   padding-bottom: 12px;
   margin-bottom: 12px;
   border-bottom: 1px solid var(--ao-modal-header-border);
}

#citaModal .ao-cita-subhead {
   border-bottom: 0;
   /* fuera línea */
   margin: 0 0 16px;
   padding: 12px 12px 10px;

   /* mantiene la “marca” azul pero sin border */
   box-shadow:
      inset 0 -2px 0 var(--ao-primary),
      0 12px 18px -18px rgba(0, 0, 0, .45);
}

/* =========================================
   CITA — Footer compacto (altura tipo header)
   ========================================= */
#citaModal .modal-card-footer {
   /* menos alto */
   padding: 10px 18px;
   /* prueba 8px si lo quieres aún más fino */
   gap: .5rem;
   /* ya es gap-2, lo dejamos explícito */
}

/* Botones del footer: misma “huella” que el close (34px aprox) */
#citaModal .modal-card-footer .btn,
#citaModal .modal-card-footer .button {
   padding-top: .42rem;
   padding-bottom: .42rem;
}

/* =========================================
   CITA — Separadores más sutiles (no “línea”)
   ========================================= */
#citaModal .modal-card-header {
   border-bottom: 0;
   box-shadow: 0 1px 0 rgba(17, 24, 39, .06);
}

#citaModal .modal-card-footer {
   border-top: 0;
   box-shadow: 0 -1px 0 rgba(17, 24, 39, .06);
}