/* === Detalle de oferta (LinkeContrata) — v20251107 ===
   - Layout grid con aside sticky en desktop
   - Contenido a prueba de overflow (tablas, imgs, iframes, code)
   - CTA flotante en móvil
   - Ads: hero responsive + switch lateral/responsive en aside
================================================================ */

/* ---------- Hero + metadatos ---------- */
.job-hero{
  padding:24px 16px;
  text-align:center;
}
.job-hero h1{
  color:var(--lc-primary-dark);
  margin-bottom:8px;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1.25;
}
.job-meta{
  color:var(--lc-text-muted);
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  font-size: clamp(.92rem, 1.6vw, 1rem);
}

/* --- Logo/brand del hero --- */
.job-hero .brand{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.job-hero .brand img{
  width: clamp(56px, 8vw, 84px);
  height: clamp(56px, 8vw, 84px);
  object-fit: contain;
  border-radius:12px;
  background:#e9eef6;
  border:1px solid var(--lc-border);
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}

/* ---------- Contenedor principal ---------- */
.main-content{
  max-width:1200px;
  margin:0 auto;
  padding-left:max(10px, env(safe-area-inset-left));
  padding-right:max(10px, env(safe-area-inset-right));
}

/* ---------- Layout principal ---------- */
.job-wrap{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:20px;
  max-width:1100px;
  margin:0 auto;
  padding:10px;
}
@media (min-width:1201px){
  .job-wrap{
    grid-template-columns:3fr 1.15fr; /* más espacio al cuerpo */
    gap:24px;
  }
}
@media (max-width:1024px){
  .job-wrap{ grid-template-columns:1fr; }
}

/* ---------- Tarjetas ---------- */
.job-card{
  background:#fff;
  border:1px solid var(--lc-border);
  border-radius:12px;
  padding:18px;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  animation:fade-in .4s ease-in;
}
.job-card h2{
  color:var(--lc-primary-dark);
  margin-bottom:8px;
}

/* ---------- Especificaciones ---------- */
.job-specs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
  margin:10px 0;
}
.spec{
  background:#fff;
  border:1px solid var(--lc-border);
  border-radius:10px;
  padding:10px;
}

/* ---------- Botones ---------- */
.apply-box{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:10px 0 2px;
}
.btn-primary{
  background:var(--lc-primary-dark);
  color:#fff;
  border:0;
  padding:12px 16px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:all .2s ease;
}
.btn-primary:hover{
  filter:brightness(.95);
  transform:translateY(-1px);
}
.btn-ghost{
  background:#fff;
  border:1px solid var(--lc-border);
  color:var(--lc-text);
  padding:12px 16px;
  border-radius:10px;
  text-decoration:none;
  transition:background .2s ease;
}
.btn-ghost:hover{ background:#f8f9fa; }

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#eef5ff;
  color:#0a66c2;
  border:1px solid #d6e7ff;
  border-radius:999px;
  padding:6px 10px;
  font-size:.9rem;
  font-weight:600;
}

/* ---------- Descripción (contenido del bodyHtml) ---------- */
.job-desc{
  color:var(--lc-text);
  font-size:1.02rem;
  line-height:1.7;
}
.job-desc p, .job-desc li{
  word-break:break-word;
  overflow-wrap:anywhere;
}
.job-desc ul, .job-desc ol{
  padding-left:1.1rem;
  margin:10px 0;
}
.job-desc li{ margin:6px 0; }
.job-desc img, .job-desc video, .job-desc svg, .job-desc iframe{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:10px;
  margin:10px 0;
  border:0;
}
/* iframes (maps, players): alto razonable */
.job-desc iframe{
  width:100% !important;
  min-height:clamp(220px, 40vw, 420px);
}
/* Tablas fluidas y legibles */
.job-desc table{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--lc-border);
  border-radius:12px;
  border-collapse:separate;
  border-spacing:0;
  margin:12px 0;
}
.job-desc thead th, .job-desc tbody td{
  padding:10px;
  text-align:left;
  white-space:normal;
  word-break:break-word;
  border-top:1px solid var(--lc-border);
}
.job-desc thead th{
  background:rgba(10,102,194,.08);
  color:var(--lc-primary-dark);
  font-weight:700;
  border-top:0;
}
/* Pre/code */
.job-desc pre{
  background:#0b0f14;
  color:#e4e9ef;
  padding:14px;
  border-radius:10px;
  overflow:auto;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  white-space:pre-wrap;
  word-wrap:break-word;
}
.job-desc code:not(pre code){
  background:rgba(10,102,194,.1);
  color:var(--lc-primary-dark);
  padding:2px 6px;
  border-radius:6px;
}

/* ---------- Aside sticky (solo desktop) ---------- */
.aside-sticky{
  position:sticky;
  top:var(--nav-h, 14px);
  height:fit-content;
  animation:fade-in .5s ease-in;
}
@media (max-width:1024px){
  .aside-sticky{ position:static; }
}

/* ---------- AdSense: Hero (siempre responsive) ---------- */
.ad-hero{
  max-width:980px;
  margin:12px auto 0;
}
.ad-hero .adsbygoogle{
  display:block;
  min-height:250px; /* desktop */
}
@media (max-width:900px){
  .ad-hero .adsbygoogle{ min-height:180px; }
}
@media (max-width:600px){
  .ad-hero .adsbygoogle{ min-height:120px; } /* reduce hueco en móvil */
}

/* ---------- AdSense: Aside (switch lateral/responsive) ---------- */
.aside-sticky .ad-slot{ text-align:center; }

/* Mostrar/ocultar por breakpoint */
.ad-lateral{ display:block; }      /* lateral fijo para desktop/tablet ancha */
.ad-responsive{ display:none; }    /* responsive para móvil/tablet estrecha */

@media (max-width:1024px){
  .ad-lateral{ display:none !important; }
  .ad-responsive{ display:block !important; }
}

/* Reservas mínimas por tipo para evitar CLS */
.ad-lateral .adsbygoogle{
  display:block;
  min-height:300px;                /* 300x250/160x600 */
}
.ad-responsive .adsbygoogle{
  display:block;
  min-height:120px;                /* móviles */
}
@media (min-width:601px){
  .ad-responsive .adsbygoogle{ min-height:180px; }
}
@media (min-width:901px){
  .ad-responsive .adsbygoogle{ min-height:250px; }
}

/* ---------- CTA flotante móvil ---------- */
.apply-fab{
  position:sticky;
  bottom:12px;                     /* se “pega” al bottom al hacer scroll */
  display:none;
  z-index:40;
  padding:0 10px;
}
.apply-fab .btn-primary{
  display:flex;
  justify-content:center;
  width:100%;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(10,102,194,.25);
}
@media (max-width:600px){
  .apply-fab{ display:block; }
  .apply-box:last-of-type{ margin-bottom:64px; } /* espacio para FAB */
}

/* ---------- Mobile refinements ---------- */
@media (max-width:600px){
  .job-hero{ padding:14px 12px 8px; }
  .job-hero h1{ font-size:1.1rem; line-height:1.25; }
  .job-meta{ row-gap:4px; }

  .job-wrap{ gap:14px; padding:8px; }
  .job-card{ padding:14px; border-radius:10px; }
  .job-specs{ gap:8px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
  .spec{ padding:8px; }
  .apply-box{ gap:8px; }
  .btn-primary,.btn-ghost{ padding:10px 12px; border-radius:8px; }
}

/* ---------- Dark mode refinamientos ---------- */
@media (prefers-color-scheme:dark){
  .job-desc pre{ background:#0a0d12; color:#e7edf6; }
  .job-desc table{ border-color:rgba(255,255,255,.12); }
}

/* ---------- Animaciones ---------- */
@keyframes fade-in{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:translateY(0); }
}