html, body 
{
  height: 100%;
  margin: 0;
}
body 
{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.text-justify 
{
  text-align: justify;
}
#shadow-bootstrap-container
{
  padding-top: 100px;
}
.navbar-nav .nav-link 
{
  transition: background-color 0.3s, color 0.3s;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
}
.navbar-nav .nav-link:hover 
{
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffc107 !important; /* warning */
}
.navbar-nav .nav-link.active 
{
  background-color: #ffc107 !important;
  color: #15395a !important; /* fondo azul institucional */
  font-weight: bold;
}
.card-header.service-header 
{
  background-color: #15395A;
  color: white;
  font-weight: bold;
  font-size: 1.25rem;
  border-radius: 0.375rem 0.375rem 0 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Estilo personalizado para el navbar */
.bg-custom 
{
  background-color: #15395A;
  height: 80px;
  color: #FFFFFF !important;
}
/* Compensación para contenido fijo */
/* Imagen del logo adaptada a la altura del navbar */
.logo-img 
{
  height: 80px;
  width: auto;
  object-fit: contain;
}
/* Ajuste para ícono hamburguesa en fondo oscuro */
.navbar-toggler-icon 
{
  filter: invert(1); /* blanco sobre fondo oscuro */
}
/* Cursor pointer para lupa */
.cursor-pointer 
{
  cursor: pointer;
}
#returnHome 
{
  width: 50px;
  height: 50px;
  background: url('../img/home-icon.png') no-repeat center / contain;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease;
}
#returnHome:hover 
{
  background: url('../img/home-icon-hover.png') no-repeat center / contain;
  transform: scale(1.1);
}
.lead 
{
  padding: 25px;
  padding-top: 0 !important;
}
/* Estilos generales para el footer */
.site-info 
{
  text-align: center;
  /*margin-top: 10px;*/
  background-color: rgba(0, 0, 0, 0.7); /* Fondo negro con 70% opacidad */
  padding: 5px;
}
.site-info .copyright-line,
.site-info .dev-info-line 
{
  display: inline;
  margin: 0;
}
.site-info .dev-info-line::before 
{
  content: " | "; /* Esto será el separador '|' en pantallas grandes */
}
.site-info a 
{
  color: #fcaa52 !important;
  text-decoration: none;
}
.site-footer 
{
  background-color: #15395A !important;
  color: #f8f9fa;
  padding: 0;
  margin-top: auto;  /* Esto garantiza que el footer esté al fondo */
  font-size: 15px;
  width: 100%;    
  box-sizing: border-box;
  border-top: 2px solid #FFC107;
}
.footer-logo 
{
  width: 50%;  /* Ancho ajustable al 100% del contenedor */
  max-width: calc(50% + 100px);  /* Asegura que el max-width sea el 50% del contenedor más 100px */
  height: auto;  /* Mantiene la proporción de la imagen */
}
.footer-link 
{
  color: #f8f9fa;
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer-link:hover 
{
  color: #0d6efd;
}
.footer h5 
{
  color: #fff;
  position: relative;
  text-align: center;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
.footer h5::after 
{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 90%;
  height: 2px;
  background-color: #fcaa52;
}
.footer ul 
{
  text-align: center;
  list-style: none;
  padding: 0;
}
.footer ul li 
{
  margin-bottom: 8px;
}
.footer .image-container 
{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.highlight-orange
{
  color: #fcaa52;
  font-weight: bold; /* bold */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.footer .image-container a img 
{
  width: 50%;
  border-radius: 15px;
}
.ubicacion h5 
{
  position: relative;
  color: #fff;
  text-align: center;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
.ubicacion h5::after 
{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 300%;
  height: 2px;
  background-color: #fcaa52;
}
.ubicacion .image-container 
{
  display: flex;
  justify-content: space-between;
  gap: 15px;
}
.ubicacion .image-container img 
{
  width: 48%;
  height: auto;
}
/* Estilos del Footer */
.row-full-height 
{
  display: flex;
  flex-wrap: wrap; /* mantener responsive */
  align-items: stretch; /* Esto hace que todas las columnas tengan igual altura */
}
.tools-container 
{
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border-radius: 0.25rem;
  height: 100%; /* importante para que tome la altura de la columna */
}
.card-tools 
{
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.card-tools:hover 
{
  transform: scale(1.02);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.text-orange 
{
  color: #fd7e14 !important;
}
.card-icon 
{
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.section-header 
{
  margin-bottom: 2rem;
}
.hub-card 
{
  /*background: #212529; Fondo oscuro original 
  padding: 1rem;*/
  border-radius: 10px;
  text-align: center;
}
.hub-img {
  width: 100%;      /* Ocupa todo el ancho del contenedor */
  height: auto;     /* Ajusta altura automáticamente según la proporción */
  object-fit: contain; /* La imagen completa se muestra sin recortes */
}

.card-section 
{
  padding: 2rem 0;
}
.transport-card {
  border: 1px solid #dee2e6;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer; /* Cambia el cursor al pasar el mouse */
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 1rem; /* mantienes un padding general */
}

.transport-card .card-icon {
  font-size: 3rem;       /* tamaño del ícono */
  margin-bottom: 0.5rem; /* espacio entre icono y texto */
}

.transport-card .card-body {
  padding: 0; /* sin padding extra para que quede compacto */
}
.transport-card:hover 
{
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.position-absolute.text-white 
{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.list-group-item 
{
  cursor: pointer; /* Cambia el cursor al pasar el mouse */
}
.archivos-list 
{
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.archivos-list li 
{
 display: flex;
 align-items: center;
 justify-content: flex-start;
 background: #f8f9fa;
 padding: 15px;
 border-radius: 8px;
 border-left: 5px solid #999999;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 margin-bottom: 10px;
 transition: transform 0.3s ease-in-out, border-left-color 0.3s ease-in-out;
}
.archivos-list li:hover 
{
  transform: scale(1.05);
  border-left-color: #fcaa52; /* Color Naranja */
}
.archivos-list li a 
{
  text-decoration: none;
  color: #999999 !important;
  display: flex;  /* ícono y texto en línea */
  align-items: flex-start; 
  gap: 20px;/* espacio entre ícono y texto */
  transition: color 0.3s ease-in-out;
  text-align: left;
  flex: 1;  /* ocupa espacio disponible */
  padding-right: 10px;
  /* Ajuste para texto largo */
  overflow-wrap: break-word; /* permite romper palabras largas */
  word-break: break-word;    /* compatibilidad con navegadores */
  white-space: normal; /* permite que el texto haga salto de línea */
} 
.archivos-list li:hover a
{
  color: #003875 !important;
  cursor: pointer;
}
.archivos-list li i 
{
  font-size: 1.2em; /* tamaño del icono */
  color: #999999;   /* color del icono */
}
.archivos-list li:hover i 
{
  color: #003875;
}
.accordion-body img 
{
  width: 100%;   /* ocupa todo el ancho del contenedor */
  max-width: 850px;    /* limita el ancho máximo */
  height: auto;  /* mantiene la proporción original */
  max-height: 900px;   /* limita la altura máxima */
  display: block;
  margin: 0 auto;/* centra la imagen horizontalmente */
}
.accordion-button:not(.collapsed) 
{
  background-color: #fcaa52 !important;
  color: white !important;
}
.accordion-button:hover,
.accordion-button:focus 
{
  background-color: #fcaa52;   /* color institucional al pasar el mouse */
  color: #fff;     /* texto blanco */
  box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* sombra sutil */
  transition: all 0.3s ease-in-out;
}
.accordion-button::after 
{
  transition: transform 0.3s ease;
}
.accordion-button.collapsed::after 
{
  transform: rotate(0deg);
}
.accordion-button:not(.collapsed)::after 
{
  transform: rotate(180deg);
}
/* Tamaño para móviles (menos de 768px) */
@media (max-width: 768px) 
{
  .bg-custom 
  {
    height: 60px;
  }
  .logo-img 
  {
    height: 60px;
  }
  .mobile-bg 
  {
    background-color: rgba(21, 57, 90, 0.9); /* mismo azul del navbar con transparencia */
    border: 1px solid #fcaa52;
    box-shadow: 0 0 10px rgba(252, 170, 82, 0.4);
  }
  #portalText 
  {
    text-align: center !important;
  }
  #searchInput 
  {
    text-align: center;
  }
  #searchWrapper
  {
    padding-left: 10px !important;
  }
  #returnHome 
  {
    padding-right: 10px !important;
    margin-right: 10px !important;
  }
  #mainNavbar .navbar-collapse 
  {
    width: 100% !important;
  }
  #mainNavbar .container-fluid 
  {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #mainNavbar .d-flex 
  {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Footer Mobile */
  .site-info .copyright-line,
  .site-info .dev-info-line 
  {
    display: block; /* Esto hace que el texto esté en líneas separadas */
  }
  .site-info .dev-info-line::before 
  {
    content: ""; /* Sin el separador '|' en móviles */
  }
  .footer-logo 
  {
    padding-top: 20px !important;
  }

  /* Ajustes del logo en pantallas pequeñas */
  .footer-logo img 
  {
    max-width: 150px;
  }
  .site-info .dev-info-line a 
  {
    display: block;
    margin-top: 5px;
  }
  .transport-card .card-text 
  {
    text-align: center; /* texto centrado en móviles */
  }
}