@charset "UTF-8";

/* Tipografía TT Commons para enlaces */
.pasos a {
  font-family: "ttcommons";
  font-size: 16px;
  line-height: 18px;
  color: #000;
  text-decoration: none;
}

/* Fuentes personalizadas */
@font-face {
  font-family: "ttcommons";
  src: url("../fonts/ttcommons_pro_regular.woff") format("woff");
}
@font-face {
  font-family: "tiempos";
  src: url("../fonts/tiempos-fine-light.woff2") format("woff2");
}

/* Fuente por defecto del cuerpo */
body {
  font-family: "ttcommons";
  background-color: #f8f3eb; /* Fondo beige */
  color: #7a7267; /* Texto marrón claro */
}

/* Fuente personalizada del título */
h2 {
  font-family: "tiempos", serif;
  margin-top: 10px; /* Margen superior para el título */
  margin-bottom: 20px;
  color: #000;

}
.card-body h6 {
  font-family: "ttcommons";
  margin-top: 0px; /* Margen superior para el título */
  margin-bottom: -15px;
  color: #000;

}

/* Cards: No reducimos su tamaño, solo el contenido */
.card-option {
  background-color: #f8f9fa; /* Fondo gris claro */
  border-radius: 8px; /* Bordes redondeados */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra ligera */
  transition: box-shadow 0.3s ease, border 0.3s ease; /* Transiciones suaves */
  height: 100%; /* Asegurar que todas las cards tengan la misma altura */
  text-align: center; /* Centrar el contenido */
  padding: 10px; /* Padding interno en la card */
  font-size: 0.75rem;
  line-height: 1.1;
}

/* Resaltar la opción seleccionada con un borde azul */
input.form-check-input:not(#modelo1):checked + .form-check-label .card-option {
  border: 2px solid #767676;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

/* Imagen dentro de la card (tamaño reducido) */
.card-option img {
  border-radius: 50%; /* Imagen circular */
  max-width: 60px; /* Reducir tamaño de la imagen */
  margin-top: 10px; /* Espacio superior de la imagen */
}

/* Tipografía más pequeña dentro de las cards */
.card-option p {
  font-size: 0.65rem; /* Reducir el tamaño de la fuente */
  margin-top: 5px; /* Espacio encima del texto */
  font-family: "ttcommons", sans-serif;
  color: #767676; /* Texto marrón claro */
}

/* Ocultar el radio button */
.form-check-input {
  appearance: none;
}

/* Grid de 3 columnas para los steps */
.grid-3-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px; /* Espacio entre las columnas */
}

/* Tabs sin padding */
.tab-content {
  padding: 0; /* Eliminar padding interior del contenedor */
}

/* Padding mínimo dentro de las pestañas */
.tab-content > .tab-pane {
  padding: 5px; /* Padding mínimo */
}

/* Tabs con imagen antes del título */
.nav-tabs .nav-link {
  color: #7a7267;
  font-family: "ttcommons", sans-serif;
  padding: 5px 10px; /* Reducir el padding de los tabs */
}

.nav-tabs-baja .nav-link::before {
  content: url('images/isla-baja.png'); /* Imagen antes del título */
  display: inline-block;
  margin-right: 8px; /* Espacio entre la imagen y el texto */
  vertical-align: middle;
}
.nav-tabs-alta .nav-link::before {
  content: url('images/isla-alta.png'); /* Imagen antes del título */
  display: inline-block;
  margin-right: 8px; /* Espacio entre la imagen y el texto */
  vertical-align: middle;
}
/* Estilo del botón "Export a PDF" */
#make-pdf {
  width: 100%; /* Que el botón ocupe todo el ancho */
  padding: 15px;
  font-size: 1.2rem;
  background-color: #7a7267; /* Color del botón */
  border-color: #7a7267;
}

/* Fondo de las tarjetas */
.card-option {
  background-color: #f1ebe4; /* Fondo gris claro */
}

/* Acordeón: Estilos integrados */
.card-header {
  padding: .25rem 1.25rem;
  background-color: #cfc9be; /* Fondo beige suave */
  border-bottom: 1px solid #7a7267; /* Borde suave */
}

.card-header .btn-link {
  color: #7a7267;
  font-family: "ttcommons", sans-serif;
}

.card-header .btn-link:hover {
  color: #767676;
}

/* Bordes redondeados suaves y sombra en las cards */
.card-option {
  border-radius: 8px;
  background-color: #f1ebe4;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Resaltar la opción seleccionada con un borde azul */
input.form-check-input:not(#modelo1):checked + .form-check-label .card-option {
  border: 2px solid #767676;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}
.form-check {
  padding-left: 0.3rem;
}
.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #f6f3eb;
  background-clip: border-box;
  border: none;
  border-radius: .25rem;
}
.nav-tabs .nav-link.active {
  color: #495057;
  background-color: #f6f3eb;
  border-color: none;
}
/* Ajustes generales */
body {
  font-family: "ttcommons", sans-serif;
}

/* Cards estilo general */
.card-option {
  background-color: #f1ebe4;
  text-align: center;
}

/* Para pantallas pequeñas: La UI se va debajo del iframe */
@media (max-width: 768px) {
  .col-md-9, .col-md-3 {
      flex: 100%; /* UI y iframe ocupan el 100% en pantallas pequeñas */
      max-width: 100%;
  }

  iframe {
      height: 50vh; /* Ajusta la altura del iframe en pantallas pequeñas */
  }

  .col-md-3 {
      padding: 10px; /* Añadir algo de padding en el contenedor de la UI */
  }
}
.color-circle {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}

.color-option-text {
  vertical-align: middle;
}

/* Configuración de la rejilla de tres columnas */
.grid-3-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Tres columnas de igual ancho */
  gap: 15px; /* Espacio entre elementos */
  padding: 10px; /* Espacio alrededor del contenedor */
}

/* Estilos para cada card-option */
.card-option {
  width: 100%;
  height: 120px; /* Altura fija para uniformidad */
  display: flex;
  flex-direction: column;
  align-items: center;
  /*justify-content: center;*/
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Sombra tenue */
  padding: 10px;
  text-align: center;
}

.card-option img {
  max-width: 60px; /* Ajuste del ancho máximo de la imagen */
  max-height: 60px; /* Ajuste del alto máximo de la imagen */
  margin-bottom: 8px;
  border-radius: 50%; /* Hace que la imagen sea circular */
}
.fullscreen {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: block;
  width: 30px;
  height: 30px;
  margin-right: auto;
  margin-left: auto;
  background-image: url('../images/fullscreen_1.svg');
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
}
:fullscreen::backdrop {
  background: #f8f3eb; 
}