/* IOCSL Guia de navegacion v4.0 | Colores: #0d6fb8 y #de6f1b */
/* IOCSL · Asistente de navegación contextual v4.0
   Paleta IOCSL: azul #0d6fb8, naranja #de6f1b; Poppins.
   El naranja tiene protagonismo en las acciones; azul en marca y navegación.
   Estilos encapsulados: no modifica los componentes de la web anfitriona. */
.iocsl-guide-root,
.iocsl-guide-root * { box-sizing: border-box; }
.iocsl-guide-root {
  --iocsl-blue: #0d6fb8;
  --iocsl-deep: #085184;
  --iocsl-orange: #de6f1b;
  --iocsl-orange-hover: #ee8934;
  --iocsl-orange-soft: #fff5ed;
  --iocsl-ink: #0d2741;
  --iocsl-muted: #5d7182;
  font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.48;
  color: var(--iocsl-ink);
  position: fixed;
  left: calc(var(--iocsl-guide-right, 20px) + env(safe-area-inset-left, 0px));
  right: auto;
  bottom: calc(var(--iocsl-guide-bottom, 20px) + env(safe-area-inset-bottom, 0px));
  z-index: 9980;
  isolation: isolate;
}
/* Preferencia de ubicacion: izquierda por defecto y derecha opcional. */
.iocsl-guide-root[data-iocsl-desktop-side="right"] {
  left: auto;
  right: calc(var(--iocsl-guide-right, 20px) + env(safe-area-inset-right, 0px));
}
.iocsl-guide-root[data-iocsl-desktop-side="right"] .iocsl-guide-panel,
.iocsl-guide-root[data-iocsl-desktop-side="right"] .iocsl-guide-hint { left: auto; right: 0; }
.iocsl-guide-root [hidden] { display: none !important; }
.iocsl-guide-root button,
.iocsl-guide-root a {
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
}
.iocsl-guide-root button { cursor: pointer; }
.iocsl-guide-root button:focus-visible,
.iocsl-guide-root a:focus-visible {
  outline: 3px solid var(--iocsl-blue);
  outline-offset: 3px;
}
/* Botón flotante naranja corporativo, con letras azul marino para contraste. */
.iocsl-guide-launcher {
  background: var(--iocsl-orange) !important;
  color: var(--iocsl-ink) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 53px;
  border: 2px solid white !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  padding: 0 18px !important;
  line-height: 1.2 !important;
  box-shadow: 0 8px 24px rgba(13, 39, 65, .25) !important;
  transition: background-color .18s ease, transform .18s ease;
}
.iocsl-guide-launcher:hover { background: var(--iocsl-orange-hover) !important; transform: translateY(-2px); }
.iocsl-guide-launcher svg { flex: 0 0 auto; }
.iocsl-guide-panel {
  position: absolute;
  left: 0;
  right: auto;
  bottom: calc(100% + 12px);
  width: min(380px, calc(100vw - 32px));
  max-height: min(660px, calc(100vh - 110px));
  max-height: min(660px, calc(100dvh - 110px));
  background: #fff;
  border: 1px solid #d9e5ed;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 55px rgba(10, 34, 57, .23);
}
/* Cabecera azul corporativa con franjas de identidad naranja. */
.iocsl-guide-header {
  flex: 0 0 auto;
  background: var(--iocsl-blue);
  border-top: 5px solid var(--iocsl-orange);
  color: #fff;
  padding: 16px 16px 16px 19px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.iocsl-guide-header__info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.iocsl-guide-eyebrow {
  font-size: 10px;
  letter-spacing: .09em;
  font-weight: 750;
  color: #f0f7ff;
  display: flex;
  align-items: center;
  gap: 7px;
}
.iocsl-guide-eyebrow::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--iocsl-orange);
  box-shadow: 0 0 0 2px rgba(255,255,255,.28);
}
.iocsl-guide-header__title {
  font-size: 17px;
  font-weight: 750;
  line-height: 1.27;
  color: #fff;
}
.iocsl-guide-close {
  display: grid;
  place-items: center;
  padding: 6px !important;
  min-width: 32px;
  min-height: 32px;
  flex: 0 0 auto;
  color: #fff !important;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 10px !important;
}
.iocsl-guide-close:hover { background: rgba(255,255,255,.26) !important; }
.iocsl-guide-main { padding: 20px 19px 15px; overflow-y: auto; overscroll-behavior: contain; }
.iocsl-guide-title {
  margin: 0 0 9px !important;
  font-size: 20px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  color: var(--iocsl-ink) !important;
}
.iocsl-guide-intro {
  margin: 0 0 20px !important;
  font-size: 13.5px !important;
  color: #40586a !important;
  line-height: 1.55 !important;
}
.iocsl-guide-section__label {
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  color: var(--iocsl-deep);
}
.iocsl-guide-links { display: grid; gap: 9px; }
.iocsl-guide-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 12px 13px !important;
  color: var(--iocsl-ink) !important;
  background: #fff !important;
  border: 1px solid #d6e4ee !important;
  border-left: 3px solid var(--iocsl-orange) !important;
  border-radius: 12px;
  transition: border-color .18s, background-color .18s;
}
.iocsl-guide-link:hover { background: var(--iocsl-orange-soft) !important; border-color: #e4a571 !important; }
.iocsl-guide-link__copy { display: flex; flex-direction: column; gap: 2px; }
.iocsl-guide-link__title { font-size: 13.5px; line-height: 1.35; color: var(--iocsl-ink); font-weight: 700; }
.iocsl-guide-link__note { font-size: 11.5px; line-height: 1.4; color: #526b7d; }
.iocsl-guide-link svg { flex: 0 0 auto; width: 18px; color: var(--iocsl-blue); }
.iocsl-guide-empty { font-size: 13px; color: var(--iocsl-muted); }
/* La acción principal destaca en naranja; los enlaces siguen en azul. */
.iocsl-guide-booking {
  margin: 17px 0 14px;
  padding: 12px 13px !important;
  border: 1px solid var(--iocsl-orange) !important;
  background: var(--iocsl-orange) !important;
  color: var(--iocsl-ink) !important;
  border-radius: 11px;
  min-height: 46px;
  font-size: 13.5px !important;
  font-weight: 750 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: background-color .18s ease;
}
.iocsl-guide-booking:hover { background: var(--iocsl-orange-hover) !important; }
.iocsl-guide-booking svg { width: 18px; flex-shrink: 0; }
.iocsl-guide-switcher {
  display: block;
  margin: 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px dotted var(--iocsl-blue) !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  color: var(--iocsl-deep) !important;
  font-size: 12.5px !important;
  font-weight: 750 !important;
}
.iocsl-guide-topics { margin-top: 20px; border-top: 1px solid #e8eff4; padding-top: 16px; }
.iocsl-guide-topic-list { display: flex; flex-wrap: wrap; gap: 7px; }
.iocsl-guide-topic {
  border: 1px solid #b7d4e7 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--iocsl-deep) !important;
  padding: 8px 11px !important;
  min-height: 35px;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}
.iocsl-guide-topic:hover { background: #ecf6fd !important; }
.iocsl-guide-topic--active { background: var(--iocsl-orange-soft) !important; border-color: var(--iocsl-orange) !important; color: var(--iocsl-ink) !important; }
.iocsl-guide-back {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 12px 0 0 !important;
  margin-top: 11px;
  font-size: 11.5px !important;
  background: transparent !important;
  border: none !important;
  color: #566f82 !important;
  text-align: left;
}
.iocsl-guide-back svg { width: 15px; }
.iocsl-guide-footer {
  background: #f4f8fb;
  color: #4e6577;
  border-top: 1px solid #e2ecf4;
  padding: 11px 19px 13px;
  font-size: 10.5px;
  line-height: 1.45;
  flex: 0 0 auto;
}
.iocsl-guide-hint {
  position: absolute;
  left: 0;
  right: auto;
  bottom: calc(100% + 12px);
  width: min(325px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #b9d6e9;
  border-left: 5px solid var(--iocsl-orange);
  border-radius: 13px;
  background: #fff;
  padding: 11px 11px 11px 13px;
  box-shadow: 0 12px 30px rgba(15, 58, 90, .16);
}
.iocsl-guide-hint__text { flex: 1; color: var(--iocsl-ink); font-size: 12px; font-weight: 700; }
.iocsl-guide-hint__open {
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--iocsl-orange) !important;
  color: var(--iocsl-ink) !important;
  padding: 8px 10px !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  white-space: nowrap;
}
.iocsl-guide-hint__close {
  border: 0 !important;
  background: transparent !important;
  color: #63798b !important;
  padding: 4px !important;
  border-radius: 8px !important;
  display: grid;
  place-items: center;
}
.iocsl-guide-hint__close svg { width: 17px; }
@media (max-width: 560px) {
  .iocsl-guide-root,
  .iocsl-guide-root[data-iocsl-desktop-side="right"] {
    left: calc(var(--iocsl-guide-mobile-right, 12px) + env(safe-area-inset-left, 0px));
    right: auto;
    bottom: calc(var(--iocsl-guide-mobile-bottom, 12px) + env(safe-area-inset-bottom, 0px));
  }
  .iocsl-guide-root[data-iocsl-mobile-side="right"],
  .iocsl-guide-root[data-iocsl-desktop-side="right"][data-iocsl-mobile-side="right"] {
    left: auto;
    right: calc(var(--iocsl-guide-mobile-right, 12px) + env(safe-area-inset-right, 0px));
  }
  .iocsl-guide-root[data-iocsl-mobile-side="left"] .iocsl-guide-panel,
  .iocsl-guide-root[data-iocsl-mobile-side="left"] .iocsl-guide-hint { left: 0; right: auto; }
  .iocsl-guide-root[data-iocsl-mobile-side="right"] .iocsl-guide-panel,
  .iocsl-guide-root[data-iocsl-mobile-side="right"] .iocsl-guide-hint { left: auto; right: 0; }
  .iocsl-guide-launcher { min-height: 52px; padding: 0 13px !important; font-size: 12.5px !important; }
  .iocsl-guide-panel { width: min(380px, calc(100vw - 24px)); max-height: calc(100dvh - 94px); border-radius: 16px; }
  .iocsl-guide-header { padding: 15px; }
  .iocsl-guide-main { padding: 16px 15px 13px; }
  .iocsl-guide-footer { padding: 10px 15px; }
  .iocsl-guide-hint { width: min(330px, calc(100vw - 24px)); }
}
@media (max-width: 360px) {
  .iocsl-guide-launcher__text { display: none; }
  .iocsl-guide-launcher { width: 54px; height: 54px; border-radius: 50% !important; padding: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .iocsl-guide-root * { transition: none !important; animation: none !important; }
}