@charset "utf-8";
/* CSS Document */
/* Definición de la fuente del documento y de las celdas */
body {
  font: 12px;
  font-family: "Helvetica Neue", Helvetica, "Roboto", sans-serif;
}

h4 {
  font-size: 14px;
}

h5 {
  color: #52be80;
}

p {
  font-size: 12px;
}

.info {
  max-width: 100%;
  padding: 20px;
}

.info-text {
  background: #f7f7f7;
}

.img-thumbnail {
  border: 0;
}

.btn-sb {
  background-color: #97cccc;
  color: #ffffff;
}

.btn-sb:hover {
  background-color: #685239;
  color: #ffffff;
}

.card-sb {
  width: 500px;
  padding: 30px;
  text-align: justify;
}

.lineas {
  padding: 20px 0;
}

.ref {
  color: #000000;
  padding: 10px;
  font-size: 14px;
}

.titulos {
  font-weight: bold;
  color: #009a93;
}

.cuadro {
  border: 2px solid #009a93;
  margin: 3px;
}

.light {
  background-color: #009a93;
  color: #ffffff;
}
.dark {
  background-color: #009a93;
  color: #ffffff;
}

.det {
  background-color: #e8e1df;
  text-align: center;
}

.py-3 {
  background-color: #333333;
}

.txt-footer {
  color: #ffffff;
  margin-left: 10px;
}

.icono-foot {
  filter: brightness(0) saturate(100%) invert(37%) sepia(88%) saturate(423%)
    hue-rotate(184deg) brightness(93%) contrast(92%);
}

.whatsapp-icon {
  position: fixed; /* Para que el icono esté siempre visible en la pantalla */
  bottom: 20px; /* Ajusta la distancia desde la parte inferior */
  right: 20px; /* Ajusta la distancia desde la derecha */
  z-index: 1000; /* Asegura que el icono esté siempre encima de otros elementos */
}

.whatsapp-icon img {
  width: 50px; /* Tamaño del icono */
  height: 50px;
  border-radius: 50%; /* Hace que el icono sea redondo */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Sombra para darle un poco de relieve */
}

.kami div p,
p.iti {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11pt;
}

.linke {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11pt;
}

.position-relative {
  position: relative;
}

.logo {
  position: absolute;
  top: 20px; /* Ajusta según sea necesario */
  left: 20px; /* Ajusta según sea necesario */
  width: 100px; /* Tamaño del logo */
  z-index: 10; /* Asegura que el logo esté sobre la imagen */
}

.btn-custom {
  background-color: #916e48;
  color: white;
  border: none;
}
.btn-custom:hover {
  background-color: #a88b69; /* Versión más clara del color original */
  color: white;
}

.modal-title {
  color: white;
}

.client-logo {
  position: absolute;
  top: 10px;
  left: 100px;
  z-index: 10;
  max-height: 100px;
}

.floating-button {
  position: fixed;
  bottom: 100px;
  right: 20px;
  background-color: #007bff; /* Color azul */
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  font-size: 24px;
  z-index: 1000;
  transition: all 0.3s ease;
}

.floating-button:hover {
  background-color: #0056b3;
  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);
  transform: scale(1.1);
}

.floating-pdf {
  position: fixed;
  bottom: 180px;
  right: 20px;
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  font-size: 24px;
  z-index: 1000;
  transition: all 0.3s ease;
}

.floating-pdf:hover {
  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);
  transform: scale(1.1);
}

.floating-pdf-compact {
  position: fixed;
  bottom: 140px;
  left: 20px; /* Cambiado de right a left */
  background-color: #009a93; /* Color verde corporativo */
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: none; /* Oculto - no eliminar */
  justify-content: center;
  align-items: center;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  font-size: 20px;
  z-index: 1000;
  transition: all 0.3s ease;
  cursor: pointer;
}

.floating-pdf-compact:hover {
  background-color: #007a73;
  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);
  transform: scale(1.1);
}

.floating-pdf-compact img {
  width: 30px;
  height: 30px;
  filter: brightness(0) invert(1); /* Hace el icono blanco */
}

.footer-icon {
  max-width: 100%;
  height: auto;
}
.footer-text {
  color: #fff;
  font-size: 0.9rem;
}

@media (max-width: 767px) {
  footer {
    text-align: center;
    flex-direction: column;
  }

  .footer-icon-container {
    width: 35px;
    height: 35px;
  }

  .social-icon-container {
    width: 25px;
    height: 25px;
  }
}

/* Para dispositivos muy pequeños */
@media (max-width: 576px) {
  .col-md-4 {
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
  }

  .footer-icon-container {
    margin-bottom: 5px;
  }
}

.agency-logo {
  max-height: 150px;
  max-width: 250px;
  object-fit: contain;
}

.ref-row-with-logo {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 20px;
  align-items: start;
}

.ref .col {
  padding-left: 15px;
  padding-top: 15px;
}

.floating-link {
  position: fixed;
  bottom: 260px; /* Más arriba que el PDF */
  right: 20px;
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  font-size: 24px;
  z-index: 1000;
  transition: all 0.3s ease;
}

.floating-link:hover {
  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);
  transform: scale(1.1);
}

.guide-box {
  background-color: #f7f7f7;
  border-left: 6px solid #009a93;
  border-radius: 10px;
  padding: 20px;
  font-size: 14px !important;
  color: #000;
  line-height: 1.5;
}

.guide-box h4 {
  font-size: 14px !important;
  color: #009a93;
  font-weight: bold;
  margin-bottom: 10px;
}

.guide-box img {
  max-height: 230px;
  border-radius: 8px;
  object-fit: cover;
}

.happy-travel-box {
  background-color: #f9f9f9;
  border-top: 4px solid #009a93;
  border-radius: 10px;
  padding: 30px 15px;
  color: #000;
}

.happy-travel-box img {
  border-radius: 8px;
  object-fit: cover;
  max-width: 100%;
}

.happy-text {
  font-size: 15px !important; /* reducido 1 punto */
  line-height: 1.6;
  text-align: center;
  margin: 0 auto;
}

.happy-link {
  color: #009a93;
  font-weight: bold;
  text-decoration: none;
}

.happy-link:hover {
  text-decoration: underline;
}

.happy-signature {
  font-size: 15px !important;
  color: #333;
  text-align: center;
}

/* Reglas específicas mejoradas para ocultar iconos flotantes en PDF/Print */
@media print {
  /* Ocultar TODOS los elementos flotantes */
  .floating-pdf,
  .floating-button,
  .whatsapp-icon,
  .floating-link,
  .float,
  [class*="floating"],
  [class*="float"],
  [id*="float"],
  button[onclick*="generarPDF"],
  *[style*="position: fixed"],
  *[style*="position:fixed"],
  /* Iconos de redes sociales flotantes */
  img[src*="youtube.png"],
  img[src*="instagram.png"],
  img[src*="linkedin.png"],
  img[src*="facebook.png"],
  img[src*="twitter.png"],
  img[src*="whatsapp.png"],
  .social-media-float,
  .social-float {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
  }

  /* Ocultar botones y elementos interactivos */
  button,
  .btn,
  input[type="button"],
  input[type="submit"],
  .nav,
  .navbar,
  .modal,
  .dropdown,
  .tooltip,
  .popover,
  /* Iconos de redes sociales */
  img[src*="youtube"],
  img[src*="instagram"],
  img[src*="linkedin"],
  img[src*="facebook"],
  img[src*="twitter"],
  img[src*="whatsapp"],
  .social-icon,
  .social-link,
  [class*="social"],
  [href*="youtube.com"],
  [href*="instagram.com"],
  [href*="linkedin.com"],
  [href*="facebook.com"],
  [href*="twitter.com"],
  .footer-icon,
  .footer-icon-container,
  .social-icon-container {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Reglas adicionales para generación de PDF con html2pdf.js */
.pdf-mode .floating-pdf,
.pdf-mode .floating-pdf-compact,
.pdf-mode .floating-button,
.pdf-mode .whatsapp-icon,
.pdf-mode .floating-link,
.pdf-mode .btn,
.pdf-mode button,
.pdf-mode [onclick],
/* Iconos de redes sociales específicos para PDF */
.pdf-mode img[src*="youtube"],
.pdf-mode img[src*="instagram"],
.pdf-mode img[src*="linkedin"],
.pdf-mode img[src*="facebook"],
.pdf-mode img[src*="twitter"],
.pdf-mode img[src*="whatsapp"],
.pdf-mode .social-icon,
.pdf-mode .social-link,
.pdf-mode [class*="social"],
.pdf-mode .footer-icon,
.pdf-mode .footer-icon-container,
.pdf-mode .social-icon-container,
.pdf-mode footer img,
.pdf-mode footer a {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -10000px !important;
  top: -10000px !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  z-index: -9999 !important;
}

/* Layout compacto para html2pdf */
html.pdf-mode,
body.pdf-mode {
  background: #ffffff !important;
  font-size: 11pt;
  line-height: 1.3;
}

html.pdf-mode #contenido-para-pdf,
body.pdf-mode #contenido-para-pdf,
.pdf-mode #contenido-para-pdf {
  width: 215.9mm;
  max-width: 215.9mm;
  margin: 0 auto;
  padding: 10mm;
  background-color: #ffffff;
  box-sizing: border-box;
}

.pdf-mode .row {
  margin: 5px 0;
  padding: 0;
  page-break-inside: avoid;
}

.pdf-mode .cuadro {
  margin: 10px 0;
  padding: 10px;
  page-break-inside: avoid;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background-color: #f8f9fa;
}

.pdf-mode table {
  width: 100%;
  margin: 10px 0;
  border-collapse: collapse;
}

.pdf-mode tr {
  page-break-inside: avoid;
}

.pdf-mode td,
.pdf-mode th {
  padding: 5px;
  vertical-align: top;
}

.pdf-mode p {
  margin: 5px 0;
  line-height: 1.4;
}

.pdf-mode h1,
.pdf-mode h2,
.pdf-mode h3,
.pdf-mode h4,
.pdf-mode h5,
.pdf-mode h6 {
  margin: 10px 0 5px 0;
  page-break-after: avoid;
  line-height: 1.2;
}

.pdf-mode .info {
  margin: 10px 0;
  padding: 10px;
  page-break-inside: avoid;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.pdf-mode ul,
.pdf-mode ol {
  margin: 5px 0;
  padding-left: 20px;
  page-break-inside: avoid;
}

.pdf-mode li {
  margin: 3px 0;
  line-height: 1.4;
  page-break-inside: avoid;
}

.pdf-mode img {
  max-width: 100%;
  height: auto;
  margin: 5px 0;
  display: block;
}

.pdf-mode .titulos {
  font-weight: bold;
  margin: 3px 0;
  display: block;
}

.pdf-mode .kami {
  margin: 3px 0;
  padding: 3px 0;
}

.pdf-mode .iti {
  margin: 5px 0;
  line-height: 1.3;
}

.pdf-mode .important-section {
  margin: 10px 0;
  padding: 10px;
  background-color: #e9ecef;
  border-radius: 4px;
}

.pdf-mode .footer {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid #dee2e6;
}

.pdf-mode .no-break {
  page-break-inside: avoid;
}

.pdf-mode .compact-text {
  line-height: 1.3;
  margin: 3px 0;
}
