/* ============================================================================
   MENU ORBITAL MOVIL - REITOR
   ----------------------------------------------------------------------------
   Navegacion flotante para telefono: un boton verde en la zona del pulgar que
   despliega las opciones en arco, unidas al activador por orbitas punteadas.
   Sustituye al menu hamburguesa en pantallas pequenas.

   ADAPTACIONES respecto al paquete original de diseno:

   1. DIRECCION MOBILE FIRST. El paquete traia
        .orbit-nav { display: none }
        @media (max-width: 900px), (min-width: 901px) { .orbit-nav { display: block } }
      que en la practica coincide con TODOS los anchos, y despues volvia a
      esconderlo en escritorio. Aqui la base es el movil (visible) y el
      escritorio es la excepcion, que es la direccion correcta.

   2. PUNTO DE RUPTURA A 768 px. El paquete usaba 900 px; el resto del sitio
      esconde el hamburguesa a partir de 768. Con 900 habria habido una franja
      de 769 a 900 px con los DOS menus a la vez.

   3. APILADO DE LA ESQUINA. En esa esquina ya vivian el boton de WhatsApp
      (bottom 25) y la burbuja del chat (bottom 88). El activador orbital se
      habria montado encima del de WhatsApp. Aqui se reordenan en columna y
      los dos se esconden mientras el menu esta abierto, para que el arco
      salga limpio.

   4. CAPAS. El sitio usa z-index 12000 para el lector de articulos. El menu
      se queda por debajo (11000-11003) para que el lector lo tape, y el
      activador se oculta del todo cuando el lector esta abierto.

   5. No se redefine .sr-only: css/styles.css ya la trae identica.

   Los tiempos, curvas y escalonados son los de ANIMACIONES.md, sin cambios.
   ========================================================================== */

:root {
  --orbit-navy: #071f3d;
  --orbit-navy-2: #12365f;
  --orbit-lime: #95d112;
  --orbit-sombra: 0 12px 34px rgba(2, 23, 48, 0.2);
}

/* ------------------------------------------------------------------
   BASE = MOVIL. El menu existe.
   ------------------------------------------------------------------ */

.orbit-nav {
  display: block;
  position: relative;
  z-index: 10998;
  font-family: inherit;
}

/* ---------- Activador ---------- */

.orbit-nav__trigger {
  position: fixed;
  right: 18px;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 11003;
  width: 68px;
  height: 68px;
  display: grid;
  place-content: center;
  gap: 5px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  color: var(--orbit-navy);
  background: linear-gradient(145deg, #a9e31b, #82bd08);
  box-shadow: 0 12px 30px rgba(119, 180, 4, 0.34);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 220ms ease, box-shadow 220ms ease, opacity 200ms ease;
}

.orbit-nav__trigger span {
  display: block;
  width: 27px;
  height: 2.5px;
  border-radius: 99px;
  background: currentColor;
  transform-origin: center;
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms ease,
    width 220ms ease;
}

.orbit-nav__trigger span:nth-child(2) {
  width: 20px;
  justify-self: end;
}

.orbit-nav__trigger span:nth-child(3) {
  width: 14px;
  justify-self: end;
}

.orbit-nav.is-open .orbit-nav__trigger {
  transform: rotate(90deg);
  box-shadow: 0 0 0 8px rgba(149, 209, 18, 0.13),
    0 16px 34px rgba(119, 180, 4, 0.42);
}

.orbit-nav.is-open .orbit-nav__trigger span:first-child {
  transform: translateY(7.5px) rotate(45deg);
}

.orbit-nav.is-open .orbit-nav__trigger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.orbit-nav.is-open .orbit-nav__trigger span:last-child {
  width: 27px;
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ---------- Velo de fondo ---------- */

.orbit-nav__scrim {
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: rgba(4, 24, 48, 0.12);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: opacity 180ms ease, backdrop-filter 220ms ease;
}

.orbit-nav.is-open .orbit-nav__scrim {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

/* ---------- Escenario ---------- */

.orbit-nav__stage {
  position: fixed;
  right: 18px;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 11001;
  width: min(96vw, 380px);
  height: min(72vh, 520px);
  pointer-events: none;
}

/* ---------- Orbitas punteadas ---------- */

.orbit-nav__paths {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 360px;
  height: 520px;
  overflow: visible;
  opacity: 0;
  transition: opacity 120ms ease;
}

.orbit-nav__paths path {
  fill: none;
  stroke: var(--orbit-lime);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 2 7;
  stroke-dashoffset: 140;
  opacity: 0.78;
}

.orbit-nav.is-open .orbit-nav__paths {
  opacity: 1;
}

.orbit-nav.is-open .orbit-nav__paths path {
  animation: orbitDraw 480ms ease-out forwards;
}

.orbit-nav__paths path:nth-child(2) { animation-delay: 35ms !important; }
.orbit-nav__paths path:nth-child(3) { animation-delay: 70ms !important; }
.orbit-nav__paths path:nth-child(4) { animation-delay: 105ms !important; }
.orbit-nav__paths path:nth-child(5) { animation-delay: 140ms !important; }
.orbit-nav__paths path:nth-child(6) { animation-delay: 175ms !important; }
.orbit-nav__paths path:nth-child(7) { animation-delay: 210ms !important; }

/* ---------- Opciones ---------- */

.orbit-nav__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.orbit-nav__item {
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate(0, 0) scale(0.25) rotate(8deg);
  transform-origin: right center;
  transition: transform 500ms cubic-bezier(0.18, 1.28, 0.36, 1),
    opacity 210ms ease;
  transition-delay: var(--delay, 0ms);
}

.orbit-nav__item.is-ready {
  opacity: 1;
  pointer-events: auto;
  transform: translate(var(--x), var(--y)) scale(1) rotate(0);
}

.orbit-nav__item.is-exiting {
  opacity: 0;
  pointer-events: none;
  transform: translate(0, 0) scale(0.55);
  transition-duration: 220ms;
  transition-delay: 0ms;
}

.orbit-nav__link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 58px;
  color: var(--orbit-navy);
  text-decoration: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.15;
  -webkit-tap-highlight-color: transparent;
}

.orbit-nav__label {
  display: flex;
  align-items: center;
  min-height: 52px;
  max-width: 230px;
  padding: 10px 48px 10px 20px;
  margin-right: -38px;
  border-radius: 999px 14px 14px 999px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--orbit-sombra);
  text-align: left;
}

.orbit-nav__icon {
  position: relative;
  z-index: 1;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  color: var(--orbit-lime);
  background: white;
  box-shadow: var(--orbit-sombra);
  transition: transform 170ms ease, filter 170ms ease;
}

/* Los simbolos del sprite se dibujan con stroke, no con relleno. Sin estas
   dos lineas el trazo queda en "none" y el icono existe pero no se ve: es lo
   que dejaba vacio el circulo verde del boton Volver. Se aplica a TODOS los
   iconos del menu, no solo a los de las pildoras. */
.orbit-nav__icon svg,
.orbit-nav__back svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.orbit-nav__icon svg {
  width: 27px;
  height: 27px;
}

/* El sprite embebido no debe ocupar ni un pixel del flujo */
.orbit-nav__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Las etiquetas del menu NO deben partir palabras. css/movil.css aplica
   overflow-wrap:anywhere a todos los <li> para que el vocabulario fiscal
   no desborde en pantallas estrechas, pero aqui parte "Constitucion/
   registros" por la mitad. Se restituye el corte normal. */
.orbit-nav__item,
.orbit-nav__label,
.orbit-nav__heading strong {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Alternancia de fondo entre opciones, como en la referencia de diseno */
.orbit-nav__item:nth-child(even) .orbit-nav__icon {
  color: var(--orbit-lime);
  background: radial-gradient(circle at 35% 30%, #164878, var(--orbit-navy));
}

.orbit-nav__item.has-children .orbit-nav__label::after {
  content: "\203A";
  margin-left: auto;
  padding-left: 10px;
  color: var(--orbit-lime);
  font-size: 22px;
  line-height: 1;
}

.orbit-nav__badge {
  margin-left: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--orbit-navy);
  background: var(--orbit-lime);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* Contacto: mayor peso visual porque es la conversion */
.orbit-nav__item.is-accent .orbit-nav__label {
  min-width: 210px;
  color: var(--orbit-navy);
  background: linear-gradient(100deg, #a9e31b, #89c708);
  box-shadow: 0 10px 28px rgba(127, 190, 4, 0.35);
}

.orbit-nav__item.is-accent .orbit-nav__icon {
  color: white;
  background: linear-gradient(145deg, #afe52a, #88c308);
}

.orbit-nav__link:active .orbit-nav__icon {
  transform: scale(0.9);
}

.orbit-nav__link:focus-visible,
.orbit-nav__trigger:focus-visible,
.orbit-nav__back:focus-visible {
  outline: 3px solid white;
  outline-offset: 3px;
}

/* ---------- Cabecera de submenu ---------- */

.orbit-nav__heading {
  position: absolute;
  right: 0;
  bottom: 455px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 220ms ease,
    transform 280ms cubic-bezier(0.2, 1, 0.3, 1);
}

.orbit-nav__heading.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* El JS marca la cabecera con el atributo hidden al volver al menu
   principal, pero un display explicito (aqui flex) gana al display:none que
   el navegador aplica a [hidden]. Sin esta regla la cabecera seguia
   ocupando sitio y su boton Volver seguia siendo alcanzable con el
   tabulador estando invisible. */
.orbit-nav__heading[hidden] {
  display: none;
}

.orbit-nav__heading strong {
  display: block;
  max-width: 210px;
  padding: 12px 17px;
  border-radius: 999px;
  color: white;
  background: rgba(7, 31, 61, 0.95);
  box-shadow: var(--orbit-sombra);
  font-size: 14px;
}

.orbit-nav__back {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  color: var(--orbit-navy);
  background: var(--orbit-lime);
  box-shadow: var(--orbit-sombra);
  cursor: pointer;
}

.orbit-nav__back svg {
  width: 22px;
  height: 22px;
}

.orbit-nav__item.is-selected .orbit-nav__icon {
  animation: selectedPulse 380ms ease;
}

body.orbit-menu-open {
  overflow: hidden;
  touch-action: none;
}

/* ------------------------------------------------------------------
   CONVIVENCIA CON LO QUE YA HABIA EN ESA ESQUINA
   El boton de WhatsApp estaba en bottom 25 y la burbuja del chat en
   bottom 88: el activador orbital se habria montado justo encima del
   primero. Se apilan en columna, con el orbital en la posicion mas
   comoda para el pulgar.
   ------------------------------------------------------------------ */

/* En telefono la esquina es para el menu. El boton de WhatsApp y la burbuja
   del chat estorbaban el arco, asi que se ocultan; en escritorio siguen
   igual que siempre. El contacto sigue a un toque desde el propio menu. */
.whatsapp-float,
.reitor-chatbot {
  display: none !important;
}

/* El globo de ayuda de WhatsApp no cabe con dignidad en un telefono */
.wa-hint {
  display: none !important;
}

/* El activador no debe flotar por encima de nada que ocupe la pantalla.
   El lector de articulos (z-index 12000) ya lo tapa por capa, pero el resto
   de modales del sitio estan por debajo de 11003 y el boton verde se les
   quedaba encima: el tutorial de stories, por ejemplo, se abre solo a los
   dos segundos de la primera visita.

   :has() permite reaccionar a un modal que no es antepasado del menu.
   Si el navegador no lo soporta, simplemente no se aplica y volvemos al
   comportamiento anterior: el boton visible sobre el modal. */
body.lector-abierto .orbit-nav__trigger,
body:has(.tutorial-modal.active) .orbit-nav__trigger,
body:has(.stories-modal.active) .orbit-nav__trigger,
body:has(.reitor-team-modal.active) .orbit-nav__trigger,
body:has(.whatsapp-modal.active) .orbit-nav__trigger,
body:has(.enroll-modal.active) .orbit-nav__trigger,
body:has(.image-zoom-modal.active) .orbit-nav__trigger,
body:has(.login-modal.active) .orbit-nav__trigger {
  opacity: 0;
  pointer-events: none;
}

/* El hamburguesa original sobra: en telefono manda este menu */
.mobile-menu-btn {
  display: none !important;
}

/* ------------------------------------------------------------------
   PANTALLAS MUY ESTRECHAS O MUY BAJAS
   El arco llega hasta 438 px por encima del activador. En pantallas
   bajas hay que encogerlo para que la primera opcion no se salga.
   ------------------------------------------------------------------ */

@media (max-width: 370px) {
  .orbit-nav__stage {
    right: 12px;
    transform: scale(0.92);
    transform-origin: right bottom;
  }

  .orbit-nav__trigger {
    right: 12px;
  }

  .orbit-nav__label {
    max-width: 210px;
    font-size: 14px;
  }
}

@media (max-height: 700px) {
  .orbit-nav__stage {
    transform: scale(0.88);
    transform-origin: right bottom;
  }
}

@media (max-height: 600px) {
  .orbit-nav__stage {
    transform: scale(0.78);
    transform-origin: right bottom;
  }
}

/* ==================================================================
   ESCRITORIO: aqui manda la barra de navegacion de siempre
   ================================================================== */

@media (min-width: 769px) {
  .orbit-nav {
    display: none;
  }

  /* Se devuelven a su sitio los flotantes y el hamburguesa vuelve a
     depender de las hojas del sitio. */
  .whatsapp-float,
  .reitor-chatbot {
    display: block !important;
  }

  .whatsapp-float {
    bottom: 25px !important;
    right: 25px !important;
  }

  .reitor-chatbot {
    bottom: 88px !important;
    right: 24px !important;
  }

  .wa-hint {
    display: block !important;
  }

  .mobile-menu-btn {
    display: none !important;
  }
}

@keyframes orbitDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes selectedPulse {
  50% {
    transform: scale(1.16);
    filter: drop-shadow(0 0 10px rgba(149, 209, 18, 0.7));
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-nav *,
  .orbit-nav *::before,
  .orbit-nav *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}

/* ==========================================================================
   DOCK MOVIL (sustituye al arco orbital)
   --------------------------------------------------------------------------
   Barra de cristal fija abajo con Inicio, Servicios, Cursos y Recursos; en el
   centro, en una muesca, el logo REITOR en una lente navy con anillo de
   marca. Las secciones abren una hoja desde abajo. Ver js/menu-orbital.js.
   Del menu orbital antiguo se esconden el activador, el arco y el velo; el
   <nav> sigue en la pagina porque guarda el sprite de iconos (#orbit-*).
   ========================================================================== */

.orbit-nav__trigger,
.orbit-nav__stage,
.orbit-nav__scrim,
.orbit-nav__paths {
  display: none !important;
}

.rdock-raiz {
  --rd-navy: #0b2347;
  --rd-lima: #8dc63f;
  --rd-texto: #61718a;
  --rd-suave: #f0f4f9;
  --rd-borde: #e4eaf2;
  font-family: "Poppins", system-ui, sans-serif;
}

/* La pagina deja sitio a la barra para que no tape el pie */
body.con-rdock {
  padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

/* El boton de subir se coloca por encima de la barra */
body.con-rdock .scroll-to-top {
  bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  left: 16px !important;
}

.rdock {
  position: fixed;
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  height: 64px;
  z-index: 11003;
  display: grid;
  grid-template-columns: 1fr 1fr 64px 1fr 1fr;
  align-items: center;
  padding: 0 4px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 10px 30px rgba(11, 35, 71, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  /* Muesca curva donde se encaja el boton del logo */
  -webkit-mask: radial-gradient(circle 31px at 50% 14px, transparent 30px, #000 31px);
  mask: radial-gradient(circle 31px at 50% 14px, transparent 30px, #000 31px);
  transition: transform 0.35s ease, opacity 0.3s ease;
}

.rdock-btn {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--rd-texto);
  font: 600 10.5px/1.1 "Poppins", system-ui, sans-serif;
  cursor: pointer;
  transition: color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.rdock-btn svg {
  width: 21px;
  height: 21px;
  color: inherit;
}

.rdock-btn.on {
  color: var(--rd-navy);
}

.rdock-punto {
  position: absolute;
  top: 6px;
  right: calc(50% - 15px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e2563f;
  box-shadow: 0 0 0 2px #fff;
}

.rdock-ind {
  position: absolute;
  top: 8px;
  height: 48px;
  border-radius: 16px;
  background: #e7f2d6;
  opacity: 0;
  transition: left 0.35s cubic-bezier(0.3, 1.3, 0.5, 1), width 0.35s ease, opacity 0.2s ease;
}

.rdock-ind.on {
  opacity: 1;
}

.rdock-hueco {
  position: relative;
  height: 64px;
}

.rdock-hueco-lbl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  text-align: center;
  font: 700 10.5px/1 "Poppins", system-ui, sans-serif;
  color: var(--rd-navy);
}

/* ---------------------------------------------------- Boton del logo */

.rdock-hub {
  position: fixed;
  left: 50%;
  bottom: calc(36px + env(safe-area-inset-bottom, 0px));
  width: 52px;
  height: 52px;
  margin-left: -26px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 11006;
  perspective: 400px;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.35s ease, opacity 0.3s ease;
}

.rdock-aro {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #8dc63f, #ffffff 25%, #2a5a92 50%, #8dc63f 75%, #ffffff 90%, #8dc63f);
  -webkit-mask: radial-gradient(circle, transparent 26px, #000 27px);
  mask: radial-gradient(circle, transparent 26px, #000 27px);
  animation: rdockGirar 6s linear infinite;
}

.rdock-halo {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(141, 198, 63, 0.35), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.rdock-hub.on .rdock-halo {
  opacity: 1;
}

.rdock-moneda {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.3, 1.35, 0.45, 1);
}

.rdock-hub.on .rdock-moneda {
  transform: rotateY(180deg);
}

.rdock-cara,
.rdock-cruz {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.rdock-cara {
  background: radial-gradient(circle at 32% 25%, #2d5f98 0%, #163c69 38%, #0b2347 78%);
  box-shadow: 0 10px 22px rgba(11, 35, 71, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -6px 12px rgba(0, 0, 0, 0.35);
}

.rdock-cara::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 6%;
  height: 42%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent);
}

.rdock-cara::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: rdockBrillo 4.5s ease-in-out infinite;
}

.rdock-cara img {
  position: relative;
  width: 31px;
  height: 31px;
  max-width: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
  animation: rdockFlotar 3.2s ease-in-out infinite;
}

.rdock-cruz {
  transform: rotateY(180deg);
  background: radial-gradient(circle at 32% 25%, #b6e36c, #8dc63f 55%, #6fa52a);
  box-shadow: 0 10px 22px rgba(141, 198, 63, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: var(--rd-navy);
}

.rdock-cruz svg {
  width: 20px;
  height: 20px;
}

/* ---------------------------------------------------- Velo y hoja */

.rdock-velo {
  position: fixed;
  inset: 0;
  z-index: 11001;
  background: rgba(6, 16, 32, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.rdock-velo.on {
  opacity: 1;
  pointer-events: auto;
}

.rdock-hoja {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11002;
  max-height: min(78vh, 640px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0;
  background: #ffffff;
  box-shadow: 0 -10px 40px rgba(11, 35, 71, 0.25);
  transform: translateY(105%);
  visibility: hidden;
  transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.25, 1), visibility 0s linear 0.42s;
}

.rdock-hoja.on {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.25, 1), visibility 0s;
}

.rdock-asa {
  display: grid;
  place-items: center;
  padding: 10px 0 4px;
  cursor: grab;
  touch-action: none;
}

.rdock-asa i {
  width: 40px;
  height: 5px;
  border-radius: 9px;
  background: #cfd8e4;
}

.rdock-cab {
  display: grid;
  gap: 10px;
  padding: 4px 18px 12px;
  touch-action: none;
}

.rdock-tt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.rdock-tt b {
  color: var(--rd-navy);
  font-size: 17px;
  font-weight: 700;
}

.rdock-tt span {
  color: var(--rd-texto);
  font-size: 12px;
}

.rdock-buscar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--rd-suave);
  color: var(--rd-texto);
}

.rdock-buscar svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.rdock-buscar input {
  width: 100%;
  border: 0;
  outline: 0;
  background: none;
  color: var(--rd-navy);
  font: 500 16px/1.2 "Poppins", system-ui, sans-serif; /* 16px: iOS no hace zoom */
}

.rdock-rapidas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.rdock-rapida {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px 6px;
  border: 0;
  border-radius: 14px;
  background: var(--rd-suave);
  color: var(--rd-navy);
  font: 700 11.5px/1.1 "Poppins", system-ui, sans-serif;
  cursor: pointer;
}

.rdock-rapida svg {
  width: 20px;
  height: 20px;
}

.rdock-rapida.lima {
  background: var(--rd-lima);
}

.rdock-rapida.navy {
  background: var(--rd-navy);
  color: #fff;
}

.rdock-lista {
  display: grid;
  align-content: start;
  gap: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 14px 8px;
}

.rdock-grupo-t {
  margin: 0 4px 6px;
  color: #8a99ae;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rdock-rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.rdock-item {
  position: relative;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--rd-borde);
  border-radius: 16px;
  background: #fff;
  color: var(--rd-navy);
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease var(--d, 0ms), transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) var(--d, 0ms);
  -webkit-tap-highlight-color: transparent;
}

.rdock-hoja.on .rdock-item {
  opacity: 1;
  transform: none;
}

.rdock-item:active {
  transform: scale(0.97);
}

.rdock-ic {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--rd-navy);
  color: var(--rd-lima);
}

.rdock-ic svg {
  width: 17px;
  height: 17px;
}

.rdock-item b {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

.rdock-item small {
  color: var(--rd-texto);
  font-size: 11px;
}

.rdock-nuevo {
  position: absolute;
  top: 9px;
  right: 9px;
  padding: 2px 6px;
  border-radius: 6px;
  background: #e7f2d6;
  color: #3d6b0c;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.rdock-item.acento {
  border-color: var(--rd-navy);
  background: var(--rd-navy);
  color: #fff;
}

.rdock-item.acento .rdock-ic {
  background: var(--rd-lima);
  color: var(--rd-navy);
}

.rdock-vacio {
  padding: 18px 8px;
  color: var(--rd-texto);
  font-size: 14px;
  text-align: center;
}

.rdock-btn:focus-visible,
.rdock-hub:focus-visible,
.rdock-item:focus-visible,
.rdock-rapida:focus-visible {
  outline: 3px solid var(--rd-lima);
  outline-offset: 2px;
}

/* Con un visor o un modal abierto, la barra se aparta */
body.lector-abierto .rdock, body.lector-abierto .rdock-hub,
body.asistente-movil-abierto .rdock, body.asistente-movil-abierto .rdock-hub,
body:has(.tutorial-modal.active) .rdock, body:has(.tutorial-modal.active) .rdock-hub,
body:has(.stories-modal.active) .rdock, body:has(.stories-modal.active) .rdock-hub,
body:has(.reitor-team-modal.active) .rdock, body:has(.reitor-team-modal.active) .rdock-hub,
body:has(.whatsapp-modal.active) .rdock, body:has(.whatsapp-modal.active) .rdock-hub,
body:has(.enroll-modal.active) .rdock, body:has(.enroll-modal.active) .rdock-hub,
body:has(.image-zoom-modal.active) .rdock, body:has(.image-zoom-modal.active) .rdock-hub,
body:has(.login-modal.active) .rdock, body:has(.login-modal.active) .rdock-hub {
  opacity: 0;
  pointer-events: none;
  transform: translateY(120%);
}

@keyframes rdockGirar { to { transform: rotate(360deg); } }
@keyframes rdockFlotar { 50% { transform: translateY(-1.5px) scale(1.03); } }
@keyframes rdockBrillo { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

@media (prefers-reduced-motion: reduce) {
  .rdock-aro, .rdock-cara img, .rdock-cara::after { animation: none; }
  .rdock-moneda, .rdock-hoja, .rdock-item, .rdock-ind { transition-duration: 0.01ms; }
}

/* En escritorio manda la barra de siempre */
@media (min-width: 769px) {
  .rdock-raiz { display: none; }
  body.con-rdock { padding-bottom: 0; }
  body.con-rdock .scroll-to-top { bottom: 25px !important; left: 25px !important; }
}