/* ============================================================
   ChambaClick Perú - Página de detalle de la convocatoria
   ============================================================ */

/* ---------- Espacios de anuncio ----------
   La altura se reserva aunque el anuncio no cargue. Sin esto el
   contenido "salta" cuando aparece el anuncio, y Google penaliza
   ese salto al medir la experiencia de la página. */

.zona-anuncio{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.anuncio-superior{
  min-height:90px;
  max-width:1200px;
  margin:14px auto;
  padding:0 20px;
}

.anuncio-contenido{
  min-height:250px;
  margin:28px 0;
}

.anuncio-lateral{
  min-height:250px;
  margin-bottom:20px;
}

.anuncio-marcador{
  width:100%;
  height:100%;
  min-height:inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f4f5f7;
  border:1px dashed #d9dce1;
  border-radius:12px;
  color:#9aa0a6;
  font-size:13px;
}

/* ---------- Estructura ---------- */

.detalle-wrapper{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:28px;
  max-width:1200px;
  margin:0 auto 60px;
  padding:0 20px;
  align-items:start;
}

.detalle-principal{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:32px;
}

.detalle-sidebar{position:sticky;top:100px;}

/* ---------- Cabecera ---------- */

.migas{font-size:13px;color:#6b7280;margin-bottom:18px;}
.migas a{color:#6b7280;text-decoration:none;}
.migas a:hover{color:#d71920;text-decoration:underline;}
.migas span[aria-hidden]{margin:0 6px;}

.detalle-cabecera{
  display:flex;
  gap:20px;
  align-items:flex-start;
  padding-bottom:22px;
  border-bottom:1px solid #eee;
}

.detalle-logo{
  width:80px;height:80px;flex:0 0 80px;
  object-fit:contain;background:#fff;
  border:1px solid #e5e7eb;border-radius:12px;
  padding:6px;box-sizing:border-box;
}

.codigo-convocatoria{
  margin:0 0 6px;font-size:12px;font-weight:700;
  letter-spacing:.03em;color:#6b7280;
}

.detalle-titulos h1{
  margin:0;font-size:26px;line-height:1.25;color:#111;
}

.detalle-titulos .entidad{
  margin:6px 0 10px;font-size:16px;font-weight:600;color:#374151;
}

.detalle-titulos p{margin:0;}

.etiqueta-estado{
  display:inline-block;padding:4px 12px;border-radius:999px;
  font-size:12px;font-weight:700;
}
.etiqueta-estado.estado-activo{background:#e9f7ee;color:#14602f;}
.etiqueta-estado.estado-cerrado{background:#fdecec;color:#8f1d1d;}

.aviso-cerrada{
  margin:20px 0 0;padding:14px 16px;
  background:#fdecec;border:1px solid #f6c9c9;border-radius:12px;
  color:#8f1d1d;font-size:14px;
}
.aviso-cerrada a{color:#8f1d1d;font-weight:700;}

/* ---------- Datos ---------- */

.detalle-datos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:18px;
  margin:24px 0 0;
  padding:22px;
  background:#fafbfc;
  border-radius:12px;
}

.detalle-datos > div{display:flex;flex-direction:column;gap:4px;}
.detalle-datos dt{font-size:12px;color:#6b7280;font-weight:600;}
.detalle-datos dd{margin:0;font-size:15px;font-weight:700;color:#111;}
.detalle-datos .dato-salario{color:#d71920;}

.fechas-convocatoria{
  display:flex;gap:26px;flex-wrap:wrap;
  margin:20px 0;padding:14px 0;
  border-top:1px solid #eee;border-bottom:1px solid #eee;
  font-size:14px;color:#6b7280;
}
.fechas-convocatoria strong{margin-left:6px;color:#111;}

/* ---------- Contenido ---------- */

.contenido .bloque{margin-bottom:28px;}

.contenido h2{
  font-size:19px;margin:0 0 12px;padding-bottom:8px;
  border-bottom:2px solid #d71920;display:inline-block;
}

.contenido p{margin:0 0 12px;line-height:1.65;color:#374151;}
.contenido ul{margin:0 0 12px;padding-left:20px;}
.contenido li{margin-bottom:8px;line-height:1.6;color:#374151;}

/* ---------- Cronograma ---------- */

.tabla-cronograma{
  width:100%;border-collapse:collapse;font-size:14px;
  border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;
}
.tabla-cronograma th{
  background:#f4f5f7;text-align:left;padding:11px 14px;
  font-weight:700;color:#374151;
}
.tabla-cronograma td{padding:11px 14px;border-top:1px solid #eee;color:#374151;}
.tabla-cronograma tbody tr:nth-child(even){background:#fcfcfd;}
.tabla-cronograma .por-definir{color:#9aa0a6;font-style:italic;}

/* ---------- Botones ---------- */

.acciones-postular{
  display:flex;gap:14px;flex-wrap:wrap;
  margin-top:30px;padding-top:24px;border-top:1px solid #eee;
}

.btn-postular{
  flex:1 1 220px;padding:15px 28px;text-align:center;
  background:#d71920;color:#fff;border-radius:25px;
  font-weight:700;text-decoration:none;
  transition:background .2s ease;
}
.btn-postular:hover,.btn-postular:focus-visible{background:#b31419;color:#fff;}

.btn-postular.btn-inactivo{background:#9aa0a6;}
.btn-postular.btn-inactivo:hover{background:#7c8186;}

.btn-bases{
  flex:1 1 180px;padding:15px 24px;text-align:center;
  border:2px solid #d71920;border-radius:25px;
  color:#d71920;font-weight:700;text-decoration:none;
}
.btn-bases:hover,.btn-bases:focus-visible{background:#d71920;color:#fff;}

.sin-link{color:#9aa0a6;font-style:italic;margin:0;}

.compartir{margin-top:20px;font-size:14px;}
.compartir a{color:#6b7280;text-decoration:none;}
.compartir a:hover{color:#d71920;text-decoration:underline;}

/* ---------- Relacionadas ---------- */

.caja-relacionadas{
  background:#fff;border:1px solid #e5e7eb;
  border-radius:14px;padding:20px;
}
.caja-relacionadas h3{margin:0 0 14px;font-size:16px;}
.caja-relacionadas ul{list-style:none;margin:0;padding:0;}
.caja-relacionadas li{border-bottom:1px solid #f0f0f0;}
.caja-relacionadas li:last-child{border-bottom:0;}
.caja-relacionadas li a{
  display:block;padding:12px 0;text-decoration:none;color:#111;
}
.caja-relacionadas li a strong{display:block;font-size:14px;line-height:1.35;}
.caja-relacionadas li a span{display:block;margin-top:4px;font-size:12px;color:#6b7280;}
.caja-relacionadas li a:hover strong{color:#d71920;}
.ver-todas{
  display:block;margin-top:14px;text-align:center;font-size:13px;
  color:#d71920;font-weight:700;text-decoration:none;
}

/* ---------- Cabecera en páginas de detalle ---------- */

.header-nav a{
  color:#374151;text-decoration:none;font-weight:600;font-size:14px;
}
.header-nav a:hover{color:#d71920;}

/* ---------- Pie ---------- */

.pie-sitio{background:#fff;border-top:1px solid #e5e7eb;padding:34px 20px;}
.pie-contenido{max-width:1200px;margin:0 auto;color:#6b7280;font-size:14px;}
.pie-contenido p{margin:0 0 6px;}
.pie-nota{font-size:12px;color:#9aa0a6;margin-top:12px;}

/* ---------- 404 ---------- */

.pagina-404{max-width:700px;margin:60px auto;padding:0 20px;text-align:center;}
.pagina-404 h1{font-size:26px;}
.pagina-404 h2{font-size:17px;margin-top:34px;}
.lista-404{list-style:none;padding:0;margin:0 0 28px;text-align:left;}
.lista-404 li{padding:11px 0;border-bottom:1px solid #eee;}
.lista-404 a{color:#111;text-decoration:none;}
.lista-404 a:hover{color:#d71920;}
.pagina-404 .btn-postular{display:inline-block;flex:none;}

/* ---------- Responsive ---------- */

@media(max-width:900px){
  .detalle-wrapper{grid-template-columns:1fr;}
  .detalle-sidebar{position:static;}
  .detalle-principal{padding:22px;}
  .detalle-titulos h1{font-size:22px;}
}

@media(max-width:600px){
  .detalle-cabecera{flex-direction:column;}
  .tabla-cronograma{font-size:13px;}
  .tabla-cronograma th,.tabla-cronograma td{padding:9px 10px;}
  .acciones-postular{flex-direction:column;}
}


/* ---------- Ajustes de la versión HTML ---------- */

.sin-relacionadas{
  padding:12px 0;
  color:#9aa0a6;
  font-size:13px;
  list-style:none;
}

.chamba-header-flotante .chamba-brand{
  text-decoration:none;
  color:inherit;
}

/* ---------- Añadidos de producción ---------- */

.caja-relacionadas h2{margin:0 0 14px;font-size:16px;}
.aviso-fuente{
  margin-top:22px;padding-top:18px;border-top:1px solid #eee;
  font-size:12.5px;color:#9aa0a6;line-height:1.6;
}
.contenido h3{font-size:16px;margin:20px 0 8px;}