/*
 * -------------------------------------------
 * Estilos de la Barra de Navegación
 * -------------------------------------------
 */

.text-secondary {color:#666!important;}
.form-control-lg {    padding: 5px;
    background: #fafafa;
    color: #666 !important;}

.navbar-brand {
  color: #fff!important; /* Usa el color de texto principal */
  font-size: 1.25rem;
  transition: color 0.2s ease-in-out;
}

.navbar-brand:hover {
  color: var(--primary) !important; /* Cambia al azul primario en hover */
}

.navbar-nav .nav-link {
  color: var(--secondary); /* Un color más suave para los enlaces */
  font-weight: 500; /* Un poco más de grosor para legibilidad */
  transition: color 0.2s ease-in-out;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--primary) !important; /* Destaca el enlace activo o en hover con el azul primario */
}

/* Ajuste del botón hamburguesa para que no sea azul por defecto */
.navbar-toggler {
  border: 1px solid rgba(0,0,0,0.1);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2823, 43, 77, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/*
 * -------------------------------------------
 * 2. Sección "Cómo Funciona"
 * -------------------------------------------
 */

#como-funciona .h2 {
  color: var(--dark);
}

.icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: var(--white);
  color: var(--primary); /* El color del icono será nuestro azul principal */
  border-radius: 50%; /* Crea un círculo perfecto */
  box-shadow: 0 4px 15px rgba(23, 43, 77, 0.08); /* Sombra sutil para destacar el icono */
  transition: all 0.3s ease-in-out;
}

.step-box:hover .icon-wrapper {
  transform: translateY(-5px); /* Eleva el icono al pasar el mouse sobre la caja */
  box-shadow: 0 8px 20px rgba(23, 43, 77, 0.12);
}

.step-box h3 {
  color: var(--dark);
}

/*
 * -------------------------------------------
 * 3. Sección Comparativa de Servicios
 * -------------------------------------------
 */

.comparison-table {
  border-radius: 0.75rem;
  overflow: hidden; /* Asegura que los bordes redondeados se apliquen a la tabla */
  box-shadow: 0 5px 20px rgba(23, 43, 77, 0.08);
  font-size: 0.95rem;
}

/* Estilos para los encabezados */
.comparison-table thead th {
  padding: 1.5rem 1rem;
  text-align: center;
  vertical-align: middle;
  border-bottom: 2px solid #dee2e6;
}

.comparison-table thead .table-primary {
  background-color: var(--primary) !important;
  color: var(--white);
}

.comparison-table thead .table-primary .small {
  color: rgba(255, 255, 255, 0.8);
}


/* Estilos para las celdas del cuerpo de la tabla */
.comparison-table tbody td {
  padding: 1rem 1.25rem;
  vertical-align: middle;
  color: var(--dark);
}

/* Estilo para el pie de la tabla y el botón */
.comparison-table tfoot td {
  padding: 1.5rem 1rem;
  vertical-align: middle;
}

.comparison-table tfoot .btn-info {
  background-color: var(--info);
  color: var(--white);
  border: none;
  padding: 0.6rem 1.5rem;
  transition: all 0.2s ease-in-out;
}

.comparison-table tfoot .btn-info:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 184, 217, 0.4);
}

/*
 * -------------------------------------------
 * 4. Sección de Tecnología y Seguridad
 * -------------------------------------------
 */

.feature-box {
  background-color: var(--white);
  border-radius: 0.75rem;
  border: 1px solid rgba(0,0,0,0.05);
  height: 100%; /* Asegura que todas las cajas tengan la misma altura */
  transition: all 0.3s ease-in-out;
}

.feature-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(23, 43, 77, 0.1);
  border-color: rgba(0, 82, 204, 0.2);
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background-color: var(--light);
  color: var(--primary);
  border-radius: 0.5rem; /* Cuadrado con bordes redondeados */
}

.feature-box h3 {
  color: var(--dark);
}

/* Usamos un texto un poco más pequeño en esta sección para que no se sienta recargada */
.feature-box .small {
  font-size: 0.875rem;
}

/*
 * -------------------------------------------
 * Estilos de la Barra de Navegación
 * -------------------------------------------
 */

.navbar-brand {
  color: var(--dark) !important; /* Usa el color de texto principal */
  font-size: 1.25rem;
  transition: color 0.2s ease-in-out;
}

.navbar-brand:hover {
  color: var(--primary) !important; /* Cambia al azul primario en hover */
}

.navbar-nav .nav-link {
  color: var(--secondary); /* Un color más suave para los enlaces */
  font-weight: 500; /* Un poco más de grosor para legibilidad */
  transition: color 0.2s ease-in-out;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--primary) !important; /* Destaca el enlace activo o en hover con el azul primario */
}

/* Ajuste del botón hamburguesa para que no sea azul por defecto */
.navbar-toggler {
  border: 1px solid rgba(0,0,0,0.1);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2823, 43, 77, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/*
 * -------------------------------------------
 * 5. Footer (Pie de Página)
 * -------------------------------------------
 */

.footer-link {
  color: rgba(255, 255, 255, 0.7); /* Texto de enlace semitransparente */
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s ease-in-out;
}

.footer-link:hover {
  color: var(--white); /* El enlace se vuelve blanco opaco al pasar el mouse */
}

/* Línea divisoria sutil antes del disclaimer */
.footer-hr {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.file-uploader {min-height:500px;}
.footer-disclaimer {
  color: rgba(255, 255, 255, 0.6); /* El disclaimer es un poco más tenue */
  max-width: 800px; /* Limita el ancho para mejor legibilidad */
  margin: 0 auto; /* Centra el bloque de texto */
}

/*
 * -------------------------------------------
 * 6. Animación de Carga
 * -------------------------------------------
 */

 img:focus-visible {border:0px;}

#loading-animation {
    text-align: center;
    padding: 2rem;
    max-width:300px;
    background:#ecf4ff;
    padding:20px;
    margin:0 auto;
    border-radius:20px; 
}

#analysis-results .alert {
  padding: 2.75rem 1.25rem;
}

#analysis-results .alert svg {margin-right:20px;}

.loader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
}

.loader-dot {
    width: 12px;
    height: 12px;
    background-color: #0d6efd; /* Bootstrap primary color */
    border-radius: 50%;
    margin: 0 5px;
    animation: loader-pulse 1.4s infinite ease-in-out;
}

.loader-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.loader-dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes loader-pulse {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1.0);
    }
}

#loading-text {
    margin-top: 1rem;
    font-size: 1.1rem;
    color: #6c757d; /* Bootstrap secondary color */
    font-weight: 500;
    transition: opacity 0.5s ease-in-out;
}