:root {
  --primary: #1E3A8A;
  /*--primary-dark: #0F172A;*/
  --primary-dark: #1e57f4;
  --primary-light: #DBEAFE;
  --bg-light: #F1F5F9;
  --text-dark: #0F172A;
  
}


body {
   /* background-color: #f5f7fb;*/
    background-color: var(--bg-light);
    color: var(--text-dark);
}



/* 🔘 BOTONES (sobrescribe Bootstrap) */
.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.btn-primary:hover {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

/* 🔗 LINKS ACTIVOS */
.nav-link.active {
  color: var(--primary) !important;
  border-bottom: 2px solid var(--primary);
}

/* 🔍 INPUT FOCUS */
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.2);
}

/* 🔵 TEXTO PRINCIPAL */
.text-primary {
  color: var(--primary) !important;
}

/* 🏷️ TAGS */
.tag {
  background-color: var(--primary-light);
  color: var(--primary-dark);
}

/* 📦 TARJETAS */
.card, .job-card, .resource-card {
  border: 1px solid #e5e7eb;
  background: #fff;
}

/* ⭐ TESTIMONIOS */
.testimonial {
  border-left: 4px solid var(--primary);
}

/* 🔍 SEARCH BOX */
.search-box {
  background: #fff;
  border-radius: 12px;
}




/* Navbar fijo */
.navbar {
  background-color: fff;
  position: relative;
  z-index: 1000px; /* altura del navbar */
}

.nav-link {
  color: var(--text-dark);
}

.nav-link.active {
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
}

/* Logo grande SIN afectar el navbar */
.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height:40px;
  width: auto;
  
}

/* 📱 MÓVIL */
@media (max-width: 991px) {

  .navbar .container {
    display: flex;
    align-items: center;
  }

  .logo {
    order: 2;
    margin-left: auto;
  }

  .navbar-toggler {
    order: 1;
  }

  .logo img {
    height: 50px; /* más pequeño en móvil */

     
  }
}


/* HERO overlay más acorde */
.hero {
  background: linear-gradient(
    to right,
    rgba(219, 234, 254, 0.8),
    rgba(241, 245, 249, 0.8)
  ),
  url('../img/banner_heroe.png') center/cover no-repeat;
}


 .hero {
  position: relative;
  background: linear-gradient(to right, rgba(238,242,247,0.6), rgba(255,255,255,0.6)),
    url('../img/banner_heroe.png') no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #333;
}

/* HERO HOME (index) */
.hero-home {
  height: 400px;
  padding: 60px 0;
}

/* HERO EMPLEOS */
.hero-empleos {
  height: 250px;

}
.hero-empresas {
  height: 250px;
}
.hero-recursos {
  height: 250px;
}

    .search-box {
      background: white;
      padding: 15px;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }
    .card-job {
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }
    .section {
      padding: 50px 0;
    }

    .auth-card {
    max-width: 400px;
    margin: 80px auto;
    border: none;
    border-radius: 15px;
    }

    .auth-container {
    min-height: 80vh;
    display: flex;
    align-items: center;
    }

        /* PAGINA DE EMPLEO */
        /* FILTROS */
    .filters {
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    /* TARJETAS DE EMPLEO */
    .job-card {
      background: #fff;
      border-radius: 10px;
      padding: 20px;
      margin-bottom: 15px;
      transition: 0.3s;
      border-left: 4px solid #0d6efd;
    }

    .job-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .job-title {
      font-weight: 600;
      font-size: 18px;
    }

    .company {
      color: #6c757d;
      font-size: 14px;
    }

    .tag {
      font-size: 12px;
      padding: 5px 10px;
      border-radius: 20px;
      background: #e9f2ff;
      color: #0d6efd;
      margin-right: 5px;
    }

/* PAGINA DE EMPRESA */
/* TARJETAS DE EMPRESA */
    .company-card {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      transition: 0.3s;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .company-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    }

    .company-logo {
      width: 70px;
      height: 70px;
      object-fit: contain;
      margin-bottom: 10px;
    }

    .company-name {
      font-weight: 600;
      font-size: 18px;
    }

    .company-location {
      font-size: 14px;
      color: #6c757d;
    }

    .badge-jobs {
      background: #e9f2ff;
      color: #0d6efd;
      border-radius: 20px;
      padding: 5px 10px;
      font-size: 12px;
    }


    /* PAGINA DE RECURSOS */
    /* TARJETAS DE LA PAGINA RECURSOS */
    .resource-card {
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      transition: 0.3s;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .resource-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    }

    .resource-img {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }

    .resource-content {
      padding: 15px;
    }

    .resource-title {
      font-weight: 600;
      font-size: 18px;
    }

    .resource-desc {
      font-size: 14px;
      color: #6c757d;
    }

    .resource-tag {
      font-size: 12px;
      padding: 4px 10px;
      border-radius: 20px;
      background: #e9f2ff;
      color: #0d6efd;
      display: inline-block;
      margin-bottom: 10px;
    }


    .login-container {
        min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .login-card {
        max-width: 420px;
    width: 100%;
    margin: auto;
    border-radius: 12px;
    }