/* Dreams Flying — componente de tarjetas de vacantes + modal (idéntico al de empleos.html)
   IMPORTANTE: estas variables usan prefijo --dfj-* a propósito. Antes se llamaban --bg/--card-bg
   a secas, con el MISMO nombre que usa css/style.css en su :root — como este archivo carga
   despues en index.html, su :root le ganaba en cascada al de style.css en TODA la pagina
   (incluido el fondo del body), no solo en las tarjetas. Ahora todas las tonalidades vienen de
   las variables globales de css/style.css (--bg-primary, --bg-elevated, etc.) para que un cambio
   de brillo del sitio se propague solo, sin volver a desincronizarse. */
:root{
  --dfj-bg: var(--bg-primary);
  --dfj-bg-soft: var(--bg-primary-soft);
  --dfj-card-bg: var(--bg-elevated);
  --dfj-card-bg-2: var(--bg-elevated-2);
  --dfj-border-soft: var(--border-subtle);
  --dfj-text-light: #eef2ff;
  --dfj-text-muted: var(--text-secondary);
  --dfj-primary: #3b82f6;
  --dfj-primary-dark: #2563eb;
  --dfj-primary-glow: rgba(59,130,246,0.45);
  --dfj-accent: #38bdf8;
  --dfj-success: #22c55e;
  --dfj-shadow-deep: rgba(0,0,0,0.65);
  --dfj-shadow-glow: rgba(59,130,246,0.18);
  --dfj-radius: 20px;
  --dfj-flag-croacia: linear-gradient(135deg,#d81920,#ffffff 50%,#0e2a5b 50%);
  --dfj-flag-polonia: linear-gradient(180deg,#ffffff 50%,#dc143c 50%);
  --dfj-flag-montenegro: linear-gradient(135deg,#c8102e,#d4af37);
}
/* ---------- Grid & Cards ---------- */
.df-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap:28px;
  perspective: 1200px;
}

.df-card{
  background: linear-gradient(160deg, var(--dfj-card-bg-2), var(--dfj-card-bg));
  border-radius: var(--dfj-radius);
  overflow:hidden;
  border:1px solid var(--dfj-border-soft);
  box-shadow: 0 20px 45px var(--dfj-shadow-deep), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
  display:flex;
  flex-direction:column;
  position:relative;
  cursor:pointer;
  transform-style: preserve-3d;
  will-change: transform;
  animation: dfCardIn .5s cubic-bezier(.2,.8,.2,1) both;
}
.df-card:hover{
  transform: translateY(-14px) scale(1.02) rotateX(5deg) rotateY(-5deg);
  border-color: rgba(59,130,246,0.55);
  box-shadow: 0 38px 70px var(--dfj-shadow-deep), 0 0 50px var(--dfj-shadow-glow), inset 0 1px 0 rgba(255,255,255,0.1);
}

.df-card-image{
  height:210px;
  position:relative;
  overflow:hidden;
  background-color:var(--dfj-card-bg);
}
.df-card-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
  z-index:0;
}
.df-card:hover .df-card-img{
  transform: scale(1.14);
}
.df-card-image::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(21,29,46,0) 30%, rgba(21,29,46,0.8) 100%);
}
.df-flag-badge{
  position:absolute;
  top:14px;
  left:14px;
  padding:6px 12px;
  border-radius:999px;
  font-size:0.72rem;
  font-weight:700;
  color:#fff;
  display:flex;
  align-items:center;
  gap:6px;
  z-index:2;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
}
.df-flag-dot{
  width:14px;height:14px;
  border-radius:50%;
  display:inline-block;
  box-shadow: inset 0 0 3px rgba(0,0,0,0.4);
}
.flag-Croacia{ background: var(--dfj-flag-croacia); }
.flag-Polonia{ background: var(--dfj-flag-polonia); }
.flag-Montenegro{ background: var(--dfj-flag-montenegro); }
.badge-Croacia{ background: rgba(13,42,91,0.9); }
.badge-Polonia{ background: rgba(220,20,60,0.9); }
.badge-Montenegro{ background: rgba(200,16,46,0.9); }

.df-only-badge{
  position:absolute;
  top:14px;
  right:64px;
  padding:6px 12px;
  border-radius:999px;
  font-size:0.7rem;
  font-weight:700;
  color:#fff;
  background: rgba(216,25,143,0.9);
  z-index:2;
}

.df-card-icon{
  position:absolute;
  top:180px;
  right:20px;
  width:56px;height:56px;
  border-radius:16px;
  background: linear-gradient(145deg,var(--dfj-card-bg-2),var(--dfj-bg-soft));
  border:1px solid rgba(59,130,246,0.35);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;
  box-shadow: 0 10px 24px rgba(0,0,0,0.5), 0 0 20px var(--dfj-shadow-glow);
  z-index:3;
}

.df-card-body{
  padding:36px 22px 22px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.df-card-title{
  font-size:1.05rem;
  font-weight:700;
  margin:0 0 8px;
  line-height:1.3;
  color:#fff;
}
.df-card-desc{
  font-size:0.85rem;
  color: var(--dfj-text-muted);
  margin:0 0 18px;
  line-height:1.5;
  flex:1;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.df-progress-wrap{
  margin-bottom:18px;
}
.df-progress-label{
  display:flex;
  justify-content:space-between;
  font-size:0.75rem;
  font-weight:600;
  color: var(--dfj-text-muted);
  margin-bottom:6px;
}
.df-progress-bar{
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,0.06);
  overflow:hidden;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.4);
}
.df-progress-fill{
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--dfj-success), #4ade80);
  box-shadow: 0 0 12px rgba(34,197,94,0.5);
}

.df-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.df-salary{
  /* Legacy: jobs.js ya no genera este span (usa .df-price-block, ver mas abajo).
     Se deja sin borrar por si algo externo aun lo referencia, pero es CSS muerto. */
  font-size:0.78rem;
  font-weight:700;
  color: var(--dfj-accent);
}
/* BUG REAL encontrado: jobs.js renderiza el precio de cada vacante con estas clases
   (.df-price-block/.df-price-main/.df-price-divider/.df-price-secondary), pero este
   archivo (el que usa index.html) nunca las definio — solo empleos.css las tenia.
   Sin regla propia, el precio heredaba color:var(--text-dark) (navy casi negro) de
   .section-light, ilegible sobre el fondo oscuro de la tarjeta. Se replican aqui las
   mismas reglas que ya usa empleos.html, con las variables --dfj-* de este archivo. */
.df-price-block{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.25;
}
.df-price-main{
  font-size:0.92rem;
  font-weight:800;
  color:#fff;
  letter-spacing:-0.2px;
}
.df-price-divider{
  width:24px;
  height:2px;
  background:linear-gradient(90deg, var(--dfj-accent), transparent);
  border-radius:2px;
  margin:3px 0;
}
.df-price-secondary{
  font-size:0.68rem;
  font-weight:500;
  color:var(--dfj-text-muted);
  letter-spacing:0.2px;
}
.df-apply-btn{
  border:none;
  padding:11px 20px;
  border-radius:12px;
  background: linear-gradient(145deg, var(--dfj-primary), var(--dfj-primary-dark));
  color:#fff;
  font-weight:700;
  font-size:0.82rem;
  cursor:pointer;
  box-shadow: 0 8px 20px var(--dfj-primary-glow), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.df-apply-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px var(--dfj-primary-glow), inset 0 1px 0 rgba(255,255,255,0.3);
}
.df-apply-btn:active{
  transform: translateY(0px) scale(0.97);
}

@media (max-width: 600px){
  .df-header{ padding:14px 18px; flex-wrap:wrap; gap:10px; }
  .df-nav{ overflow-x:auto; width:100%; }
  .df-title-row{ flex-direction:column; align-items:flex-start; }
}

/* ==========================================================
   MODAL DE DETALLE — dark mode, coincide con la vacante clicada
   ========================================================== */
.df-modal-overlay{
  position:fixed;
  inset:0;
  background: rgba(4,6,14,0.75);
  backdrop-filter: blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index:100;
  padding:24px;
}
.df-modal-overlay.active{
  opacity:1;
  visibility:visible;
}

.df-modal{
  background: linear-gradient(165deg, var(--dfj-card-bg-2), var(--dfj-bg-soft));
  border:1px solid rgba(59,130,246,0.25);
  border-radius: 24px;
  max-width:640px;
  width:100%;
  max-height:88vh;
  overflow-y:auto;
  position:relative;
  box-shadow: 0 40px 90px rgba(0,0,0,0.7), 0 0 60px var(--dfj-shadow-glow);
  transform: translateY(20px) scale(0.97);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.df-modal-overlay.active .df-modal{
  transform: translateY(0) scale(1);
}

.df-modal-close{
  position:absolute;
  top:16px;
  right:16px;
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.15);
  background: rgba(10,14,26,0.85);
  color:#fff;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  z-index:5;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  transition: transform .2s ease, background .2s ease;
}
.df-modal-close:hover{ transform: scale(1.1) rotate(90deg); background: rgba(59,130,246,0.3); }

.df-modal-hero{
  height:220px;
  background-size:cover;
  background-position:center;
  background-color:var(--dfj-card-bg);
  border-radius:24px 24px 0 0;
  position:relative;
  display:flex;
  align-items:flex-end;
}
.df-modal-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(21,29,46,0) 20%, rgba(21,29,46,0.85) 100%);
  border-radius:24px 24px 0 0;
}
.df-modal-icon{
  position:absolute;
  bottom:-28px;
  left:28px;
  width:64px;height:64px;
  border-radius:18px;
  background: linear-gradient(145deg,var(--dfj-card-bg-2),var(--dfj-bg-soft));
  border:1px solid rgba(59,130,246,0.4);
  display:flex;align-items:center;justify-content:center;
  font-size:1.9rem;
  box-shadow: 0 12px 28px rgba(0,0,0,0.6), 0 0 30px var(--dfj-shadow-glow);
  z-index:3;
}

.df-modal-body{
  padding:44px 32px 32px;
}
.df-modal-title{
  font-size:1.4rem;
  margin:0 0 12px;
  line-height:1.3;
  color:#fff;
}
.df-modal-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:24px;
}
.df-modal-meta span{
  background: rgba(59,130,246,0.12);
  border:1px solid rgba(59,130,246,0.3);
  padding:8px 14px;
  border-radius:999px;
  font-size:0.8rem;
  font-weight:600;
  color: var(--dfj-text-light);
}
.df-modal-section-title{
  font-size:0.95rem;
  font-weight:700;
  margin:26px 0 10px;
  color: var(--dfj-accent);
  border-left:4px solid var(--dfj-primary);
  padding-left:10px;
}
.df-modal-context{
  font-size:0.92rem;
  color: var(--dfj-text-muted);
  line-height:1.6;
  margin:0;
}
.df-modal-list{
  margin:0;
  padding-left:20px;
  color: var(--dfj-text-light);
  font-size:0.9rem;
  line-height:1.75;
}
.df-modal-list li{
  margin-bottom:7px;
}
.df-modal-list li::marker{
  color: var(--dfj-accent);
}
.df-modal-empty{
  font-size:0.88rem;
  color: var(--dfj-text-muted);
  font-style: italic;
  margin:0;
}
/* Mismo bug de contraste que .df-price-block, dentro del modal ("Salario estimado") */
.df-price-block-modal{
  background:rgba(59,130,246,0.08);
  border:1px solid rgba(59,130,246,0.25);
  border-radius:14px;
  padding:14px 18px;
  margin:6px 0 22px;
}
.df-price-label{
  font-size:0.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--dfj-accent);
  margin-bottom:6px;
}
.df-price-row{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}
.df-price-main-lg{
  font-size:1.35rem;
  font-weight:800;
  color:#fff;
  letter-spacing:-0.3px;
}
.df-price-secondary-lg{
  font-size:0.8rem;
  font-weight:500;
  color:var(--dfj-text-muted);
}
.df-modal-apply{
  width:100%;
  margin-top:30px;
  padding:16px;
  font-size:0.95rem;
  border-radius:14px;
}

@media (max-width:600px){
  .df-modal-body{ padding:40px 20px 24px; }
  .df-modal-hero{ height:170px; }
}

@keyframes dfCardIn{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}
.df-empty{
  grid-column:1/-1;
  text-align:center;
  color:var(--dfj-text-muted);
  padding:54px 20px;
  font-size:1rem;
}
@media (prefers-reduced-motion: reduce){
  .df-card{ animation:none !important; }
}