/* =====================================================================
   trabajosenmexico.mx – style.css
   Paleta: Verde México #006847 · Rojo #CE1126 · Dorado #FFD700
   ===================================================================== */

:root {
  --mx-green:   #006847;
  --mx-green2:  #00845a;
  --mx-red:     #CE1126;
  --mx-gold:    #FFD700;
  --bg-light:   #f5f7f9;
  --card-radius: 14px;
  --shadow-sm:  0 2px 10px rgba(0,0,0,.07);
  --shadow-md:  0 4px 20px rgba(0,0,0,.10);
}

/* ----- Base ---------------------------------------------------------- */
body          { font-family:'Inter',sans-serif; background:var(--bg-light); color:#212529; }
a             { color:var(--mx-green); }
a:hover       { color:var(--mx-green2); }
.text-success { color:var(--mx-green) !important; }
.btn-success, .bg-success {
  background-color: var(--mx-green) !important;
  border-color:     var(--mx-green) !important;
}
.btn-success:hover   { background-color:var(--mx-green2) !important; border-color:var(--mx-green2) !important; }
.btn-outline-success { color:var(--mx-green) !important; border-color:var(--mx-green) !important; }
.btn-outline-success:hover { background:var(--mx-green) !important; color:#fff !important; }

/* ----- Navbar -------------------------------------------------------- */
.navbar-principal {
  background:#fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  padding: .65rem 0;
}
.navbar-brand { font-weight:800; color:var(--mx-green) !important; font-size:1.25rem; letter-spacing:-.5px; }
.navbar-brand .logo-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px;
  background:var(--mx-green); color:#fff; font-size:.9rem; margin-right:.4rem;
}
.navbar-nav .nav-link { font-weight:500; color:#444 !important; font-size:.9rem; }
.navbar-nav .nav-link:hover  { color:var(--mx-green) !important; }
.navbar-nav .nav-link.active { color:var(--mx-green) !important; font-weight:600; }

/* Hamburguesa visible sobre fondo blanco */
.navbar-toggler {
  border: 2px solid #006847;
  border-radius: 8px;
  padding: 4px 8px;
}
.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='%23006847' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Menú desplegable mobile con fondo verde */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: #006847;
    margin: 8px -12px -10px;
    padding: 12px 16px 16px;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
  }
  .navbar-collapse .nav-link { color:#fff !important; padding: 8px 4px; border-bottom: 1px solid rgba(255,255,255,.1); }
  .navbar-collapse .nav-link:last-child { border-bottom: none; }
  .navbar-collapse .nav-link:hover,
  .navbar-collapse .nav-link:focus { color:#ffd700 !important; }
  .navbar-collapse .btn.btn-warning { width:100%; margin-top:8px; }
  .navbar-collapse .input-group { margin-bottom: 8px; }
}

/* Notification dropdown */
.avatar-sm {
  width:34px; height:34px; border-radius:50%;
  object-fit:cover; border:2px solid #eee;
}
.dropdown-notif {
  width:340px !important; padding:0; border:none;
  box-shadow: var(--shadow-md); border-radius:12px; overflow:hidden;
}
.dropdown-notif .notif-header { padding:.7rem 1rem; background:#f8f9fa; border-bottom:1px solid #eee; }
.dropdown-notif .notif-item {
  display:flex; align-items:flex-start; gap:10px;
  padding:.65rem 1rem; border-bottom:1px solid #f3f3f3; transition:background .15s;
  cursor:pointer;
}
.dropdown-notif .notif-item:hover { background:#f0fdf4; }
.dropdown-notif .notif-item.unread { background:#f0fdf4; border-left:3px solid var(--mx-green); }
.dropdown-notif .notif-dot { width:8px; height:8px; border-radius:50%; background:var(--mx-green); margin-top:6px; flex-shrink:0; }
.dropdown-notif .notif-title  { font-weight:600; font-size:.82rem; line-height:1.2; }
.dropdown-notif .notif-desc   { font-size:.76rem; color:#666; margin:0; line-height:1.3; }
.dropdown-notif .notif-time   { font-size:.7rem; color:#9ca3af; margin-top:2px; }

/* ----- Hero ---------------------------------------------------------- */
.min-vh-hero { min-height:480px; display:flex; align-items:center; }
.hero-section {
  background: linear-gradient(135deg, var(--mx-green) 0%, #00523a 60%, #003d2b 100%);
  position:relative; overflow:hidden;
  color:#fff; padding:5rem 0 3rem;
}
.hero-section::before {
  content:''; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-wave { position:absolute; bottom:0; left:0; width:100%; pointer-events:none; }
.hero-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3);
  border-radius:30px; padding:.3rem .9rem; font-size:.82rem; margin-bottom:1rem;
}
.hero-search-form {
  background:#fff; border-radius:14px; padding:1.5rem;
  box-shadow:0 8px 40px rgba(0,0,0,.15);
}

/* ----- Vacante Card -------------------------------------------------- */
.vacante-card {
  background:#fff; border-radius:var(--card-radius);
  box-shadow:var(--shadow-sm); transition:box-shadow .2s, transform .2s;
  border:1px solid transparent; position:relative;
}
.vacante-card:hover   { box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:#e5f5ee; }
.vacante-destacada    { border-left:3px solid var(--mx-gold); }
.vacante-badge-dest   {
  position:absolute; top:12px; right:12px;
  background:var(--mx-gold); color:#000;
  font-size:.68rem; font-weight:700; padding:.2rem .5rem;
  border-radius:6px; letter-spacing:.3px;
}
.empresa-logo         { width:50px; height:50px; border-radius:10px; object-fit:contain; border:1px solid #eee; }
.empresa-logo-sm      { width:36px; height:36px; border-radius:8px; object-fit:contain; border:1px solid #eee; }
.empresa-logo-lg      { width:80px; height:80px; border-radius:14px; object-fit:contain; border:1px solid #eee; background:#f8f9fa; }
.tag-chip {
  display:inline-block; padding:.18rem .55rem;
  background:#edf7f2; color:var(--mx-green);
  border-radius:20px; font-size:.73rem; font-weight:500; border:1px solid #c6ead9;
}
.tag-chip-lg { padding:.3rem .75rem; font-size:.82rem; }
.salario-display { color:var(--mx-green); font-weight:700; font-size:1.15rem; }
.vacante-contenido h1 { font-size:1.5rem; font-weight:800; }

/* List view */
.vacante-list-item {
  background:#fff; border-radius:10px;
  border:1px solid #e9ecef; padding:1rem 1.25rem;
  transition:border-color .15s, box-shadow .15s;
}
.vacante-list-item:hover { border-color:var(--mx-green); box-shadow:var(--shadow-sm); }

/* ----- Categorías card ---------------------------------------------- */
.categoria-card {
  background:#fff; border-radius:14px; padding:1.5rem 1rem;
  text-align:center; border:1px solid #eee;
  transition:box-shadow .2s, transform .2s; cursor:pointer;
}
.categoria-card:hover  { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.categoria-icon {
  width:60px; height:60px; border-radius:50%; margin:0 auto .75rem;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.categoria-info { margin:0; font-size:.82rem; color:#6b7280; }
.cat-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }

/* ----- CTA Section --------------------------------------------------- */
.cta-section {
  background:linear-gradient(135deg,var(--mx-green),var(--mx-green2));
  color:#fff; border-radius:20px;
}

/* ----- Footer -------------------------------------------------------- */
.footer-principal { background:#0d1208; color:#cbd5e1; }
.footer-principal a { color:#94a3b8; }
.footer-principal a:hover { color:#fff; }
.footer-bottom { background:#080c05; color:#64748b; font-size:.8rem; }

/* ----- Auth ---------------------------------------------------------- */
.auth-bg {
  min-height:100vh;
  background:linear-gradient(135deg, var(--mx-green) 0%, #012c1e 100%);
  display:flex; align-items:center; justify-content:center; padding:2rem 0;
}
.auth-card {
  background:#fff; border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.2); width:100%; max-width:480px; padding:2.5rem;
}
.auth-icon {
  width:64px; height:64px; border-radius:16px;
  background:var(--mx-green); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  margin:0 auto 1.2rem;
}

/* Password strength */
.password-strength { height:4px; border-radius:2px; transition:width .35s,background .35s; }

/* ----- Dashboard candidato ------------------------------------------ */
.dashboard-welcome {
  background:linear-gradient(135deg, var(--mx-green), #00523a);
  color:#fff; border-radius:16px; padding:2rem;
}
.stat-mini { background:#fff; border-radius:12px; padding:1rem; box-shadow:var(--shadow-sm); }
.stat-num  { font-size:1.8rem; font-weight:800; color:var(--mx-green); line-height:1; }
.stat-lbl  { font-size:.75rem; color:#6b7280; text-transform:uppercase; letter-spacing:.4px; }
.stat-icon { font-size:1.8rem; opacity:.12; }

.stat-card {
  background:#fff; border-radius:14px; padding:1.25rem;
  box-shadow:var(--shadow-sm); border-left:4px solid var(--mx-green);
}

.section-header { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:#6b7280; padding:.4rem 0 .3rem; }

/* Applications list */
.aplicacion-card {
  background:#fff; border-radius:12px; padding:1.1rem 1.25rem;
  box-shadow:var(--shadow-sm); border:1px solid #eef2f7;
  transition:box-shadow .15s;
}
.aplicacion-card:hover  { box-shadow:var(--shadow-md); }
.aplicacion-item { padding:.75rem 0; border-bottom:1px solid #f3f4f6; }
.aplicacion-item:last-child { border-bottom:none; }

/* ----- Timeline (estatus aplicación) ---------------------------------- */
.timeline-step {
  display:flex; flex-direction:column; align-items:center;
  gap:.3rem; position:relative; flex:1;
}
.timeline-step::after {
  content:''; position:absolute; top:12px; left:50%;
  width:100%; height:2px; background:#e5e7eb; z-index:0;
}
.timeline-step:last-child::after { display:none; }
.timeline-circle {
  width:26px; height:26px; border-radius:50%; border:2px solid #d1d5db;
  background:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.7rem; z-index:1; position:relative;
}
.timeline-circle.done  { background:var(--mx-green); border-color:var(--mx-green); color:#fff; }
.timeline-circle.active{ background:var(--mx-gold); border-color:var(--mx-gold); color:#000; }
.timeline-circle.reject{ background:var(--mx-red);  border-color:var(--mx-red);  color:#fff; }
.timeline-label { font-size:.68rem; color:#6b7280; text-align:center; line-height:1.2; }
.timeline-line  { flex:1; height:2px; background:#e5e7eb; align-self:center; }

/* ----- Notifications ------------------------------------------------- */
.notif-card { background:#fff; border-radius:12px; box-shadow:var(--shadow-sm); border:1px solid #eef2f7; }
.notif-unread-card { border-left:4px solid var(--mx-green); background:#f0fdf4; }
.notif-icon-wrap {
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.notif-dot { width:8px; height:8px; border-radius:50%; background:var(--mx-green); display:inline-block; }

/* ----- Perfil avatar ------------------------------------------------- */
.perfil-avatar { position:relative; display:inline-block; }
.perfil-avatar img, .avatar-lg {
  width:100px; height:100px; border-radius:50%; object-fit:cover;
  border:3px solid #fff; box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.avatar-placeholder {
  width:100px; height:100px; border-radius:50%;
  background:var(--mx-green); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:2.2rem; font-weight:700;
}
.perfil-avatar-sm img { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid #eee; }

/* ----- Documents ----------------------------------------------------- */
.doc-icon-sm { font-size:1.5rem; width:36px; text-align:center; }
.doc-row { padding:.6rem 0; border-bottom:1px solid #f3f3f3; }
.doc-row:last-child { border-bottom:none; }

/* ----- Utilities ----------------------------------------------------- */
.flex-1  { flex:1; }
.min-w-0 { min-width:0; }
.btn-xs  { padding:.2rem .5rem; font-size:.75rem; border-radius:.25rem; }

/* ----- ¿Cómo funciona? pasos ------------------------------------- */
.paso-card { padding:1rem 1.2rem; border-radius:14px; background:#fff; box-shadow:var(--shadow-sm); transition:box-shadow .2s; }
.paso-card:hover { box-shadow:var(--shadow-md); }
.paso-num {
  min-width:48px; height:48px; border-radius:50%;
  background:var(--mx-green); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.2rem; flex-shrink:0;
}
.como-funciona-img { position:relative; }
.como-funciona-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 60%, rgba(0,0,0,.25));
  border-radius:1rem;
}

/* ----- Galería de fotos ------------------------------------------ */
.foto-trabajo { position:relative; overflow:hidden; }
.foto-trabajo img { transition:transform .45s ease; display:block; }
.foto-trabajo:hover img { transform:scale(1.06); }
.foto-overlay {
  position:absolute; bottom:0; left:0; right:0;
  padding:.75rem 1rem;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent);
}
.foto-tag {
  display:inline-block;
  background:rgba(255,255,255,.9);
  color:#1a1a1a; font-size:.78rem; font-weight:600;
  padding:.25rem .7rem; border-radius:20px;
}

/* ----- Sección empleadores --------------------------------------- */
.seccion-empleadores { min-height:480px; }

/* ----- Testimonios ----------------------------------------------- */
.testimonio-card {
  background:#fff; border-radius:14px; padding:1.5rem;
  box-shadow:var(--shadow-sm); border:1px solid #eef2f7;
  transition:box-shadow .2s;
}
.testimonio-card:hover { box-shadow:var(--shadow-md); }
.testimonio-avatar {
  width:52px; height:52px; border-radius:50%; object-fit:cover;
  border:3px solid #e5e7eb;
}

/* ----- badge-section label --------------------------------------- */
.badge-section {
  display:inline-block;
  font-size:.7rem; font-weight:700; letter-spacing:.8px;
  text-transform:uppercase; color:var(--mx-green);
  background:#edfbf3; padding:.25rem .75rem; border-radius:20px;
  border:1px solid #c6ead9;
}